/* =========================================================
   Omair Gibreel — Engineering Control-Room
   Non-critical styles (loaded async). Critical CSS is inline.
   ========================================================= */

/* ---- Sections ---- */
.sec{padding-block:clamp(3.5rem,8vw,7rem);position:relative}
.sec-alt{background:var(--bg-2);border-block:1px solid var(--line)}
.sec-head{max-width:640px;margin-bottom:clamp(2rem,4vw,3rem)}
.eyebrow{font-family:var(--fmono);font-size:.8rem;letter-spacing:.06em;color:var(--accent);margin-bottom:.8rem}
.sec-head h2{font-size:clamp(1.8rem,1.3rem+2vw,2.8rem);letter-spacing:-.03em}
.sub{margin-top:1rem;color:var(--muted);font-size:1.05rem;max-width:62ch}

/* ---- Marquee ---- */
.marquee{border-block:1px solid var(--line);background:var(--bg-2);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:2.5rem;width:max-content;padding:.9rem 1.25rem;
  font-family:var(--fmono);font-size:.86rem;color:var(--muted);
  animation:scroll 32s linear infinite;will-change:transform}
.marquee-track span{display:inline-flex;align-items:center;gap:2.5rem;white-space:nowrap}
.marquee-track span::after{content:"/";color:var(--accent);opacity:.5}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;white-space:normal}}

/* ---- Bento ---- */
.bento{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
.cell{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;position:relative;
  transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.cell:hover{transform:translateY(-4px);border-color:var(--line-2);background:var(--panel-2)}
.cell h3{font-size:1.12rem;margin-bottom:.5rem}
.cell p{color:var(--muted);font-size:.97rem}
.cell-k{position:absolute;top:1.2rem;inset-inline-end:1.3rem;font-size:.8rem;color:var(--dim)}
.cell-lead{grid-column:1 / -1;background:linear-gradient(160deg,var(--panel),var(--bg-2));padding:1.8rem}
.cell-lead p{color:var(--muted);font-size:1.06rem}
.cell-lead p+p{margin-top:1rem}
@media (min-width:780px){.bento{grid-template-columns:repeat(4,1fr)}.cell-lead{grid-column:span 2;grid-row:span 2}}

/* ---- Prehospital ---- */
.pre-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.pre-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;position:relative;overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s var(--ease)}
.pre-card::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease)}
.pre-card:hover{transform:translateY(-4px);border-color:var(--line-2)}
.pre-card:hover::before{transform:scaleY(1)}
.pre-card h3{font-size:1.1rem;margin-bottom:.5rem}
.pre-card p{color:var(--muted);font-size:.96rem}

/* ---- Skills ---- */
.skills{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.skill{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;transition:border-color .3s var(--ease)}
.skill:hover{border-color:var(--line-2)}
.skill h3{font-size:1.05rem;margin-bottom:1rem;display:flex;align-items:center;gap:.55rem}
.skill h3::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips li{font-size:.84rem;color:var(--text);background:var(--panel-2);border:1px solid var(--line);
  padding:.38rem .75rem;border-radius:8px;font-family:var(--fmono);
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.chips li:hover{border-color:var(--accent);transform:translateY(-2px)}
.chips-sm li{font-size:.76rem;padding:.28rem .6rem}

/* ---- Timeline ---- */
.tl{display:grid;gap:1rem}
.tl-item{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.tl-num{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;border:1px solid var(--line-2);
  background:var(--panel);color:var(--accent);font-size:.85rem;flex:none;position:sticky;top:80px}
.tl-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1.5rem;flex:1;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.tl-card:hover{border-color:var(--line-2);transform:translateY(-3px)}
.tl-period{font-size:.8rem;color:var(--accent);margin-bottom:.45rem}
.tl-card h3{font-size:1.18rem}
.tl-org{color:var(--muted);font-size:.92rem;margin:.2rem 0 .9rem}
.tl-pts{display:grid;gap:.45rem}
.tl-pts li{position:relative;padding-inline-start:1.2rem;color:var(--muted);font-size:.96rem}
.tl-pts li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:6px;height:6px;border-radius:2px;background:var(--accent);opacity:.8}
@media (max-width:560px){.tl-num{position:static;width:36px;height:36px}}
.tl-apps{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1rem;padding-top:.9rem;border-top:1px dashed var(--line-2)}
.tl-apps-k{color:var(--dim);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;margin-inline-end:.15rem}
.tl-apps a{font-size:.82rem;color:var(--accent);border:1px solid var(--line-2);border-radius:999px;padding:.2rem .7rem;transition:border-color .2s var(--ease),background .2s var(--ease)}
.tl-apps a:hover{border-color:var(--accent);background:var(--panel-2)}

/* ---- Projects ---- */
.projects{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.proj{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;
  transition:transform .3s var(--ease),border-color .3s var(--ease)}
.proj:hover{transform:translateY(-4px);border-color:var(--line-2)}
.proj-top{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.7rem}
.proj-top h3{font-size:1.2rem}
.pill{font-family:var(--fmono);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);
  border:1px solid var(--line);padding:.25rem .55rem;border-radius:999px}
.proj p{color:var(--muted);font-size:.96rem}
.proj .chips{margin-top:1rem}
.proj-links{margin-top:auto;padding-top:1.2rem;display:flex;flex-wrap:wrap;gap:1.2rem}
.note{color:var(--dim);font-size:.84rem}
.arrow{color:var(--accent);font-weight:600;font-size:.9rem;font-family:var(--fmono);display:inline-flex;align-items:center;gap:.3rem}
.arrow::after{content:"\2197";transition:transform .2s var(--ease)}
.arrow:hover::after{transform:translate(2px,-2px)}
[dir="rtl"] .arrow::after{content:"\2196"}

/* ---- Two-col (awards + education) ---- */
.two-col{display:grid;gap:2rem;grid-template-columns:1fr;margin-top:clamp(2.5rem,5vw,3.5rem)}
@media (min-width:780px){.two-col{grid-template-columns:1fr 1fr;gap:2.5rem}}
.block-t{font-size:1.25rem;margin-bottom:1.2rem}
.mini{display:grid;gap:.8rem}
.mini li{display:flex;gap:1rem;align-items:baseline;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:1rem 1.1rem}
.mini-k{flex:none;color:var(--accent-2);font-size:.9rem;min-width:42px}
.mini p{color:var(--muted);font-size:.95rem}

/* ---- Services ---- */
.svc{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.svc-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;position:relative;
  transition:transform .3s var(--ease),border-color .3s var(--ease)}
.svc-item:hover{transform:translateY(-4px);border-color:var(--line-2)}
.svc-item h3{font-size:1.1rem;margin-bottom:.5rem}
.svc-item p{color:var(--muted);font-size:.96rem}

/* ---- Contact ---- */
.contact{max-width:720px;margin-inline:auto;text-align:center;background:linear-gradient(160deg,var(--panel),var(--bg-2));
  border:1px solid var(--line-2);border-radius:var(--r-lg);padding:clamp(2rem,5vw,3.5rem)}
.contact .eyebrow{display:inline-block}
.contact h2{font-size:clamp(1.8rem,1.3rem+2vw,2.6rem)}
.contact .sub{margin-inline:auto}
.contact-cta{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.contact-links{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:center;
  border-top:1px solid var(--line);padding-top:1.5rem;font-size:.88rem}
.contact-links a{color:var(--muted);transition:color .2s var(--ease)}
.contact-links a:hover{color:var(--accent)}

/* ---- Footer ---- */
.ftr{border-top:1px solid var(--line);padding-block:2rem;color:var(--dim);font-size:.84rem}
.ftr-in{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.ftr-top{color:var(--muted);transition:color .2s var(--ease)}
.ftr-top:hover{color:var(--accent)}

/* ---- Reveal stagger handled in JS via inline delay ---- */