/* ============================================================
   Zevulon Mission — scroll experience
   Built on tokens.css
   Scrubbed elements are positioned by JS (inline opacity/transform);
   CSS here defines layout, type, and the load-time hero intro only.
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:#06222F;color:#fff;font-family:var(--font-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 56px;width:100%;position:relative;z-index:3}

/* scroll progress */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:var(--accent);z-index:90}

/* ---------- hamburger ---------- */
.burger{position:fixed;top:26px;right:30px;z-index:120;width:46px;height:46px;border:0;background:transparent;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.burger span{display:block;width:26px;height:2px;background:#eaf2f6;border-radius:2px;
  transition:transform .4s var(--ease-out),opacity .3s,background .3s}
.menu-open .burger span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.menu-open .burger span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

/* ---------- menu overlay ---------- */
.menu{position:fixed;inset:0;z-index:110;background:rgba(6,28,38,.0);backdrop-filter:blur(0px);
  display:flex;flex-direction:column;justify-content:center;padding:0 8vw;pointer-events:none;
  opacity:0;transition:opacity .5s var(--ease-out),backdrop-filter .5s}
.menu-open .menu{opacity:1;pointer-events:auto;background:rgba(6,28,38,.92);backdrop-filter:blur(14px)}
.menu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.menu li{overflow:hidden}
.menu a{display:flex;align-items:baseline;gap:24px;font-family:var(--font-display);font-weight:600;
  font-size:clamp(34px,6vw,68px);letter-spacing:-.01em;color:#cfe0ea;line-height:1.18;padding:6px 0;
  transform:translateY(110%);transition:transform .6s var(--ease-out),color .25s}
.menu-open .menu a{transform:translateY(0)}
.menu li:nth-child(1) a{transition-delay:.08s}
.menu li:nth-child(2) a{transition-delay:.16s}
.menu li:nth-child(3) a{transition-delay:.24s}
.menu li:nth-child(4) a{transition-delay:.32s}
.menu a:hover{color:#fff}
.menu-label{font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin:0 0 26px;opacity:0;transform:translateY(8px);transition:opacity .5s .12s,transform .5s .12s}
.menu-open .menu-label{opacity:1;transform:none}
.menu a b{font-family:var(--font-mono);font-weight:500;font-size:14px;color:var(--accent);min-width:34px}
.menu-foot{margin-top:48px;font-family:var(--font-mono);font-size:13px;color:#7f9aa7;letter-spacing:.04em;
  opacity:0;transition:opacity .5s .4s}
.menu-open .menu-foot{opacity:1}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
#aurora{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%,transparent 36%,rgba(4,22,30,.55) 78%,rgba(4,22,30,.92) 100%)}
.grain{position:absolute;inset:-50%;z-index:2;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(3) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-6%,4%)}66%{transform:translate(4%,-5%)}100%{transform:translate(0,0)}}
.mark{position:relative;z-index:5;text-align:center;padding:0 24px}
.hero-logo{width:min(640px,74vw);clip-path:inset(0 100% 0 0);opacity:0}
.intro .hero-logo{animation:wipe 1.4s .35s cubic-bezier(.16,1,.3,1) forwards}
@keyframes wipe{0%{clip-path:inset(0 100% 0 0);opacity:0}12%{opacity:1}100%{clip-path:inset(0 0 0 0);opacity:1}}
.glowline{position:relative;z-index:5;margin-top:30px;width:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(143,193,218,.85),transparent)}
.intro #heroLine{animation:hline 1.1s 1.7s cubic-bezier(.16,1,.3,1) forwards}
@keyframes hline{to{width:min(420px,60vw)}}
@keyframes fadein{to{opacity:1}}
.hero-tag{position:relative;z-index:5;margin-top:34px;white-space:nowrap;font-size:13px;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:#7f9aa7;opacity:0}
.intro .hero-tag{animation:fadeup 1s 2s ease forwards}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:5;width:34px;height:34px;opacity:0}
.intro .cue{animation:fadein 1s 2.3s ease forwards}
.cue::before{content:"";position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-9px 0 0 -7px;
  border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);animation:drift 2s ease infinite}
@keyframes drift{0%,100%{transform:rotate(45deg) translate(-3px,-3px);opacity:.45}50%{transform:rotate(45deg) translate(3px,3px);opacity:1}}

/* ---------- pinned scenes ---------- */
.pin{position:relative}
.pin-inner{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.sec-light{background:#fff;color:var(--ink-800)}
.sec-dark{background:#06222F;color:#fff}
.sec-paper{background:var(--bg-2);color:var(--ink-800)}

.eyebrow{font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  margin:0 0 26px;opacity:0}
.sec-light .eyebrow,.sec-paper .eyebrow{color:var(--accent-hover)}
.sec-dark .eyebrow{color:var(--accent)}
.headline{font-family:var(--font-display);font-weight:600;font-size:clamp(40px,7.4vw,104px);line-height:1.02;
  letter-spacing:-.015em;margin:0;max-width:14ch}
.headline .w{display:inline-block;opacity:0;will-change:transform,opacity}
.headline .w .sp{display:inline-block}
.rule{height:1px;width:0;margin:40px 0;background:currentColor;opacity:.18}
.body{font-family:var(--font-serif);font-size:clamp(17px,1.5vw,21px);line-height:1.7;max-width:46ch;margin:0;opacity:0}
.sec-light .body,.sec-paper .body{color:var(--fg-2)}
.sec-dark .body{color:#bcd2dd}
.cta{display:inline-flex;align-items:center;gap:14px;white-space:nowrap;margin-top:40px;font-family:var(--font-sans);font-weight:600;font-size:15px;opacity:0}
.sec-light .cta,.sec-paper .cta{color:var(--primary)}
.sec-dark .cta{color:#8FC1DA}
.cta i{font-style:normal;font-size:18px;transition:transform var(--dur-base) var(--ease-out)}
.cta:hover i{transform:translate(3px,-3px)}
.cta em{font-style:normal;font-family:var(--font-mono);font-size:13px;opacity:.6}

/* watermark + circle motifs */
.watermark{position:absolute;z-index:0;font-family:var(--font-display);font-weight:600;line-height:1;
  font-size:42vw;letter-spacing:-.04em;right:2vw;bottom:-8vh;pointer-events:none;user-select:none}
.sec-light .watermark{color:rgba(0,104,152,.05)}
.sec-dark .watermark{color:rgba(143,193,218,.05)}
.circle{position:absolute;z-index:0;left:50%;top:50%;width:74vh;height:74vh;margin:-37vh 0 0 -37vh;
  border:1px solid rgba(143,193,218,.22);border-radius:50%;pointer-events:none}
.circle.c2{width:50vh;height:50vh;margin:-25vh 0 0 -25vh;border-color:rgba(120,176,128,.22)}
.sec-light .circle{border-color:rgba(0,104,152,.16)}
.sec-light .circle.c2{border-color:rgba(120,176,128,.22)}

/* ---------- contact / footer ---------- */
.contact{position:relative;background:#06222F;color:#fff;padding:140px 0 0;overflow:hidden}
.contact .ct-head{font-family:var(--font-display);font-weight:600;font-size:clamp(36px,5.4vw,72px);letter-spacing:-.01em;margin:0 0 56px;opacity:0}
.ct-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.12)}
.ct-list li{border-bottom:1px solid rgba(255,255,255,.12);opacity:0}
.ct-list a{display:flex;align-items:baseline;gap:20px;padding:26px 4px;flex-wrap:wrap;transition:padding-left var(--dur-base) var(--ease-out)}
.ct-list a:hover{padding-left:16px}
.ct-tag{font-family:var(--font-sans);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);min-width:210px}
.ct-name{font-family:var(--font-display);font-weight:500;font-size:clamp(20px,2.4vw,30px);color:#eaf2f6;flex:1}
.ct-mail{font-family:var(--font-mono);font-size:13px;color:#7f9aa7}
.ct-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:60px 0 34px;margin-top:90px;border-top:1px solid rgba(255,255,255,.08)}
.ct-foot img{height:24px;opacity:.92}
.ct-foot .r{font-family:var(--font-mono);font-size:12px;color:#7f9aa7;text-align:right;line-height:1.7}

/* ---------- careers roster ---------- */
.careers-intro{margin-top:34px;margin-bottom:38px}
.roles{max-width:800px;border-top:1px solid rgba(255,255,255,.12)}
.role{display:grid;grid-template-columns:46px 1fr;column-gap:24px;align-items:baseline;
  padding:24px 4px;border-bottom:1px solid rgba(255,255,255,.12);opacity:0;
  transition:padding-left var(--dur-base) var(--ease-out)}
.role:hover{padding-left:14px}
.role-no{font-family:var(--font-mono);font-size:13px;color:var(--accent)}
.role-body{display:flex;flex-direction:column;gap:9px}
.role-title{display:flex;align-items:center;gap:14px;font-family:var(--font-display);font-weight:600;
  font-size:clamp(23px,3vw,38px);letter-spacing:-.01em;line-height:1.04;color:#eaf2f6}
.role-arr{font-style:normal;font-size:.55em;color:var(--accent);opacity:0;transform:translate(-7px,5px);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.role:hover .role-arr{opacity:1;transform:none}
.role-desc{font-family:var(--font-serif);font-size:clamp(15px,1.4vw,18px);line-height:1.6;
  color:#bcd2dd;max-width:46ch}
.roles-note{margin-top:34px;font-family:var(--font-mono);font-size:13px;letter-spacing:.02em;color:#7f9aa7;opacity:0}
.roles-note a{color:#8FC1DA;transition:color var(--dur-base)}
.roles-note a:hover{color:#fff}

@media(max-width:760px){
  .wrap{padding:0 28px}
  .ct-tag{min-width:100%}
  .burger{top:18px;right:18px}
}
@media(prefers-reduced-motion:reduce){
  .grain,.cue::before{animation:none}
}