:root{color-scheme:light;--field:#eef0f1;--ink:#101511;--muted:#4c554f;--blue:#174bbb;--red:#9c2526;--ease:cubic-bezier(.22,.7,.2,1);font-family:var(--font-ui);color:var(--ink);background:var(--field)}
*{box-sizing:border-box}
body{margin:0;min-width:280px}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:6px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:12px;left:24px;z-index:5;padding:12px;background:var(--ink);color:var(--field);transform:translateY(-150%)}
.skip-link:focus{transform:none}
.masthead{position:absolute;inset:16px 32px auto;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:13px}
.wordmark{font-size:14px;letter-spacing:-.04em}
.masthead a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.masthead nav{display:flex;gap:30px}
.masthead nav a:hover{text-decoration:underline;text-underline-offset:6px}
#entrance{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:76px 0 82px;position:relative;overflow:hidden}
.scene-frame{width:min(100%,calc((100svh - 158px)*1672/941));aspect-ratio:1672/941;position:relative;container-type:inline-size;isolation:isolate}
#scene-media{position:absolute;inset:0;transform-origin:50% 55%;mask-image:linear-gradient(to right,transparent,#000 1.1%,#000 98.9%,transparent),linear-gradient(to bottom,transparent,#000 2%,#000 98%,transparent);mask-composite:intersect}
#scene-media picture,#scene-image,#scene-video{display:block;width:100%;height:100%}
#scene-image{object-fit:contain}
#scene-video{position:absolute;inset:0;object-fit:contain;opacity:0;pointer-events:none}
#scene-media.video-ready #scene-video{opacity:1}
.role{position:absolute;top:2%;width:max-content;max-width:47%;text-align:center;transform:translateX(-50%);z-index:1}
@media(min-aspect-ratio:4/5) and (prefers-reduced-motion:no-preference){html[data-intro-load="pending"] .role{opacity:0}html[data-intro-load="pending"] .role:focus-within{opacity:1}}
.role-marketing{left:22%;--formation-tint:#3f5e83}
.role-engineer{left:78%;--formation-tint:#82443e}
.role h1{font-family:var(--font-ui);font-weight:500;line-height:1.06;font-size:clamp(27px,5.2cqw,86px);letter-spacing:-.035em;margin:0;white-space:nowrap}
.role-link{position:relative;display:block;width:fit-content;margin-inline:auto;padding:6px 0}
.role-link::before{content:'';position:absolute;inset:50% 0 auto;height:100%;min-height:44px;transform:translateY(-50%)}
.title-letter{display:inline-block}
.role h2{font-family:var(--font-ui);font-size:clamp(13px,1.02cqw,16px);font-weight:400;line-height:1.6;letter-spacing:0;margin:14px auto 0;max-width:32ch}
/* Entrance role-word cue (Gabe approved A2, 2026-10-15; Skill Motion timing values, own CSS).
   Underline draw-in with a bright head, a 10% pop and one short glow flash, then a steady tinted halo.
   The one-shot runs after the film settles, then a slow breath and a head sweep keep the words ready (ready beacon, Vega plan 2026-10-15).
   Base styles are the end state, so reduced motion (animation:none) shows it static.
   Hover and focus only change halo opacity, so leaving them never replays the cue. */
@property --cue-head{syntax:'<number>';inherits:false;initial-value:0}
.role-marketing{--cue-rgb:23 75 187;--cue-breathe-delay:1400ms;--cue-sweep-delay:3000ms}
.role-engineer{--cue-rgb:156 37 38;--cue-breathe-delay:2600ms;--cue-sweep-delay:4200ms}
.role-link::after{content:'';position:absolute;inset:-22% -12%;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(closest-side,rgb(var(--cue-rgb)/1),rgb(var(--cue-rgb)/0))}
#entrance[data-state="settled"]:is([data-frame="held"],[data-frame="poster"]) .role-link{
  transform-origin:50% 100%;
  background-image:radial-gradient(closest-side,rgb(255 255 255/var(--cue-head,0)),rgb(var(--cue-rgb)/calc(var(--cue-head,0)*.9)) 55%,rgb(var(--cue-rgb)/0)),linear-gradient(rgb(var(--cue-rgb)),rgb(var(--cue-rgb)));
  background-repeat:no-repeat;background-size:16px 6px,100% 1.5px;background-position:0% 100%,0 100%;
  animation:cue-draw 500ms cubic-bezier(.16,1,.3,1) 300ms backwards,cue-head-run 500ms cubic-bezier(.16,1,.3,1) 300ms,cue-head-fade 500ms cubic-bezier(.16,1,.3,1) 300ms,cue-pop 400ms cubic-bezier(.16,1,.3,1) 300ms backwards,cue-flash 400ms cubic-bezier(.16,1,.3,1) 300ms backwards,cue-sweep 4800ms cubic-bezier(.16,1,.3,1) var(--cue-sweep-delay) infinite}
#entrance[data-state="settled"]:is([data-frame="held"],[data-frame="poster"]) .role-link::after{
  opacity:.26;transition:opacity 200ms cubic-bezier(.16,1,.3,1),transform 200ms cubic-bezier(.16,1,.3,1);animation:cue-halo-in 700ms cubic-bezier(.16,1,.3,1) 400ms backwards,cue-breathe 2400ms cubic-bezier(.45,0,.55,1) var(--cue-breathe-delay) infinite}
#entrance[data-state="settled"]:is([data-frame="held"],[data-frame="poster"]) .role-link:is(:hover,:focus-visible)::after{opacity:.45;animation:cue-halo-in 700ms cubic-bezier(.16,1,.3,1) 400ms backwards}
#entrance[data-state="settled"]:is([data-frame="held"],[data-frame="poster"]) .role-link:is(:hover,:focus-visible){background-size:16px 6px,100% 2.5px}
#entrance[data-state="settled"]:is([data-frame="held"],[data-frame="poster"])[data-motion="paused"] .role-link{animation-play-state:running,running,running,running,running,paused}
#entrance[data-state="settled"]:is([data-frame="held"],[data-frame="poster"])[data-motion="paused"] .role-link::after{animation-play-state:running,paused}
#entrance[data-state="settled"]:is([data-frame="held"],[data-frame="poster"]) .choice-prompt{animation:cue-hint-in 400ms cubic-bezier(.16,1,.3,1) 1400ms backwards}
#entrance:is([data-state="playing"],[data-state="paused"]) .choice-prompt{opacity:0}
#entrance[data-state="settled"]:is([data-frame="held"],[data-frame="poster"]) .role-link:focus-visible{outline:2px solid rgb(var(--cue-rgb));outline-offset:-2px}
@keyframes cue-draw{from{background-size:16px 6px,0% 1.5px}}
@keyframes cue-head-run{from{background-position:0% 100%,0 100%}to{background-position:100% 100%,0 100%}}
@keyframes cue-head-fade{0%,40%{--cue-head:1;animation-timing-function:cubic-bezier(.76,0,.24,1)}70%,100%{--cue-head:0}}
@keyframes cue-pop{0%{transform:scale(1);animation-timing-function:cubic-bezier(.33,0,.2,1)}20%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes cue-flash{0%{text-shadow:0 0 0 rgb(var(--cue-rgb)/0);animation-timing-function:cubic-bezier(.33,0,.2,1)}20%{text-shadow:0 0 14px rgb(var(--cue-rgb)/.55),0 0 4px rgb(var(--cue-rgb)/.35)}100%{text-shadow:0 0 0 rgb(var(--cue-rgb)/0)}}
@keyframes cue-halo-in{from{opacity:0}}
@keyframes cue-breathe{0%,100%{opacity:.26;transform:scale(1)}50%{opacity:.38;transform:scale(1.22)}}
@keyframes cue-sweep{0%{background-position:0% 100%,0 100%;--cue-head:1;animation-timing-function:cubic-bezier(.16,1,.3,1)}4.2%{--cue-head:1;animation-timing-function:cubic-bezier(.76,0,.24,1)}7.3%{--cue-head:0}10.4%,100%{background-position:100% 100%,0 100%;--cue-head:0}}
@keyframes cue-hint-in{from{opacity:0}}
.pill{position:absolute;width:clamp(46px,4.5%,72px);height:clamp(46px,8%,72px);transform:translate(-50%,-50%);border-radius:50%;z-index:2;display:grid;place-items:center}
.pill-blue{left:38.7%;top:47.7%;--pill-color:var(--blue)}
.pill-red{left:59.5%;top:47.8%;--pill-color:var(--red)}
.pill:after{content:'';position:absolute;inset:1px;border:1px solid var(--pill-color);border-radius:50%;opacity:0;transform:scale(.8)}
.pill:hover:after,.pill:focus-visible:after{opacity:1;transform:scale(1)}
.pill:focus-visible{outline:2px solid var(--pill-color);outline-offset:5px}
.pill-label{position:absolute;top:calc(100% + 10px);font-size:13px;color:var(--field);background:var(--ink);padding:6px 9px;white-space:nowrap;opacity:0;pointer-events:none}
.pill:hover .pill-label,.pill:focus-visible .pill-label{opacity:1}
.hint-touch{display:none}
@media(hover:none){.hint-pointer{display:none}.hint-touch{display:inline}}
.choice-prompt{position:absolute;top:2%;left:50%;transform:translateX(-50%);z-index:1;display:flex;align-items:center;height:calc(clamp(27px,5.2cqw,86px)*1.06);margin:0;font-size:var(--t-body);line-height:1.6;white-space:nowrap;pointer-events:none}
.entrance-controls{position:absolute;bottom:24px;left:32px;right:32px;z-index:2;display:flex;justify-content:space-between;gap:16px;pointer-events:none;font-size:13px}
.entrance-controls>*{pointer-events:auto}
.playback{display:flex;gap:20px}
.entrance-controls button{min-width:44px;min-height:44px;padding:8px 0}
.entrance-controls button:hover{text-decoration:underline;text-underline-offset:6px}
.entrance-controls button:disabled{opacity:.45;cursor:default;text-decoration:none}
.route-transition{position:fixed;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:18px;padding:24px;background:var(--field);opacity:0;visibility:hidden;pointer-events:none}
.route-transition.is-visible{visibility:visible}
.transition-title{font:500 clamp(44px,8vw,120px)/1.05 var(--font-ui);letter-spacing:-.035em;margin:0}
.transition-subtitle{font-family:var(--font-ui);font-size:clamp(13px,1.25vw,18px);line-height:1.6;margin:0;max-width:30ch}
.asset-failed #scene-media{visibility:hidden}
.asset-failed .scene-frame:before{content:'';position:absolute;left:50%;top:35%;height:35%;width:1px;background:#b8c3ae}
.destination{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:120px max(28px,8vw);gap:20px;max-width:1000px}
.destination h1{font:500 clamp(56px,9vw,120px)/1.05 var(--font-ui);letter-spacing:-.035em;margin:0}
.destination h2{font-size:clamp(14px,2vw,22px);font-weight:400;line-height:1.6;margin:0}
.destination p{font-size:14px;line-height:1.7;max-width:48ch}
.destination a{display:inline-flex;min-height:44px;align-items:center;text-decoration:underline;text-underline-offset:6px;font-size:13px}
.destination nav{display:flex;flex-wrap:wrap;gap:16px 32px}
@media(max-aspect-ratio:4/5){
  #scene-media{mask-image:linear-gradient(to right,transparent,#000 .5%,#000 99.5%,transparent),linear-gradient(to bottom,transparent,#000 1%,#000 99%,transparent)}
  .scene-frame{width:min(100%,calc((100svh - 132px)*941/1672));aspect-ratio:941/1672}
  #entrance{padding-top:64px;padding-bottom:68px}
  .role{top:14%;max-width:47%}
  .choice-prompt{top:calc(14% - 44px);height:36px}
  .role-marketing{left:25%}
  .role-engineer{left:75%}
  .role h1{font-size:clamp(20px,7.3cqw,48px)}
  .role h2{font-size:clamp(13px,3.1cqw,16px);line-height:1.5;margin-top:10px;max-width:21ch}
  .pill-blue{left:29.7%;top:51.4%}
  .pill-red{left:70.1%;top:51.5%}
}
@media(max-width:600px){
  .masthead{inset:10px 20px auto;font-size:13px}
  .masthead nav{gap:22px}
  .wordmark{font-size:13px}
  .entrance-controls{bottom:14px;left:20px;right:20px}
  .playback{gap:18px}
  #entrance{padding-bottom:86px}
  .scene-frame{width:min(100%,calc((100svh - 150px)*941/1672))}
}
@media(max-width:600px) and (min-aspect-ratio:4/5){.scene-frame{width:min(100%,calc((100svh - 158px)*1672/941))}.role h1{font-size:clamp(21px,5.2cqw,32px)}.role h2{font-size:13px;margin-top:6px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}