#journey{height:1250svh}.stage .exterior-layer video{inset:-14%;width:128%;height:128%;object-fit:cover;will-change:transform}.depth-mid,.depth-near{background:transparent}.visor-display{background:radial-gradient(ellipse at 40% 40%,#193c43,#07191e 80%);border:3px solid #86fff1;box-shadow:inset 0 0 20px #55e8e944,0 0 14px #7dfaf766;color:#fffae8;border-radius:12px}.visor-display strong{font-size:72px;letter-spacing:0;font-weight:900;text-shadow:0 0 3px #fff,0 0 11px #65ffea,2px 0 #34c6ce;line-height:1.05}.visor-micro,.visor-bottom{display:none}.visor-scan{background:repeating-linear-gradient(0deg,transparent 0 5px,#81fce416 5px 6px);box-shadow:inset 0 0 12px #56eddf}.visor-display.glitch{animation:visor-fracture .12s steps(2) infinite}.visor-display.glitch strong{text-shadow:14px 0 #ff7d65,-12px 0 #5fffe0}.visor-display.glitch:after{background:linear-gradient(transparent 37%,#d8fff2 40%,#7efff080 47%,transparent 51%);mix-blend-mode:screen;animation:visor-sweep .68s linear both}#visor-button{color:#d6fff2;border:2px solid #89f5d0;background:#18322a88;box-shadow:0 0 0 5px #6dfbd330,0 0 20px #6dfbd355;animation:button-beacon 3s ease-in-out infinite}#visor-button:focus-visible{outline:4px solid #fff;outline-offset:8px}#visor-button:active{background:#84ffc8;transform:rotate(-16deg) scale(.92)}.switch-hint{border-color:#a2f3da;color:#ceffee}.warp-caption{position:absolute;left:6%;bottom:16%;opacity:0;pointer-events:none;transform:translateY(15px);text-shadow:0 2px 20px #000}.warp-caption span{display:block;color:#a0eee7;font:13px monospace;letter-spacing:3px;margin-bottom:12px}.warp-caption strong{font-size:clamp(30px,4vw,64px);font-weight:700}.story-copy{max-width:740px}.story-copy h2{line-height:1.3}.story-backdrop{background:linear-gradient(90deg,#0b1015df,transparent 83%)}.story-unavailable .static-story{display:block}.story-unavailable #journey{height:100svh}.story-unavailable .chapter-controls{display:none}.reduced #visor-button{animation:none}.reduced .warp-caption{display:none}@keyframes button-beacon{50%{box-shadow:0 0 0 9px #6dfbd320,0 0 26px #6dfbd380}}@keyframes visor-fracture{0%{transform:translateX(-4px);clip-path:polygon(0 0,100% 0,100% 28%,88% 29%,100% 35%,100% 100%,0 100%)}50%{transform:translateX(4px);clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 67%,15% 65%,0 58%)}100%{transform:translateX(0);clip-path:inset(0)}}@keyframes visor-sweep{from{transform:translateY(-150px)}to{transform:translateY(150px)}}@media(max-width:760px){.warp-caption{left:7%;bottom:15%}.warp-caption strong{font-size:32px}.story-backdrop{background:linear-gradient(0deg,#0b1015ed,transparent)}.visor-display strong{font-size:72px}.switch-hint{font-size:21px}.hero-copy p{font-size:16px}.story-copy{bottom:15%}.hero-bottom{font-size:12px}}
.work-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:42px 24px}.work-card h3{font-size:21px}.work-card p{line-height:1.7}.cover-type{font-size:28px;padding:28px}.static-story p{font-size:16px}.static-story small{font-size:14px}@media(min-width:761px) and (max-width:1100px){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.work-grid{grid-template-columns:1fr}}

/* A film-vault atmosphere keeps both the story scrub and the portfolio room from dropping to flat black. */
.stage #journey-video{background:#11131a url('launch-v4/original-handdrawn-poster.png') center/cover no-repeat}.stage .story-hold{position:absolute;z-index:2;pointer-events:none;object-fit:fill;opacity:0;transition:opacity .08s linear}.stage .story-hold.visible{opacity:1}.stage.story-seeking #journey-video{opacity:0!important}
.record-room{isolation:isolate;background:radial-gradient(ellipse at 19% 53%,#b9915728 0,transparent 38%),radial-gradient(ellipse at 82% 22%,#526d8c30 0,transparent 42%),linear-gradient(125deg,#20231f,#15191a 52%,#1d1a21)!important}.record-room:after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(100deg,#171a19b8,#171a19a3 50%,#171a19c9),url('launch-v4/works-room-bg.jpg') center/cover no-repeat;filter:saturate(.65);opacity:.82}.record-room:before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.45;background-image:radial-gradient(circle at 17% 21%,#e2c99580 0 1px,transparent 1.8px),radial-gradient(circle at 78% 73%,#a9d6c580 0 1px,transparent 1.8px),linear-gradient(115deg,transparent 0 49.8%,#d5c39c08 50%,transparent 50.2%);background-size:137px 121px,191px 177px,100% 100%}

#record-room{position:relative;z-index:1}

/* Story stills give the profile and contact chapters their own visual worlds. */
.about{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(100deg,#17151df0 0%,#17151dcf 48%,#17151d9b 100%),url('launch-v4/about-bg.jpg') center 42%/cover no-repeat!important;color:#f2e7d8!important}.about .eyebrow{color:#e8bd83}.about h2{color:#f4e9d8}.about p{color:#ded3d0}.contact{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(105deg,#1a1720e8 0%,#251822c9 48%,#281b22a8 100%),url('launch-v4/contact-bg.jpg') center 47%/cover no-repeat!important}.contact .eyebrow{color:#f2b4bd}.contact p{color:#e2d6d2}.contact>a{color:#ffd188}

/* Keep the native antialiased cockpit transparency; mask only its opaque video. */
.cabin-layer{mask-image:none!important}
.cabin-layer #cabin{mask-image:url('cockpit/cabin-mask-2k.png');mask-size:100% 100%;mask-repeat:no-repeat}
/* The right asteroid crossed the pilot's ear; retain the other near debris. */
.exterior-layer #exterior-near{mask-image:linear-gradient(90deg,#000 0 56%,#0000 67%);mask-size:100% 100%}
.exterior-layer #exterior-mid{mask-image:linear-gradient(90deg,#000 0 58%,#0000 70%);mask-size:100% 100%}
.cabin-layer:after{content:"";position:absolute;left:1400px;top:140px;width:360px;height:330px;pointer-events:none;background:#24202c;border-radius:50%;filter:blur(6px)}

/* Some Chromium-based browsers decode VP9 without its alpha plane. Animated
   WebP keeps all three transparent motion layers usable in those browsers. */
.alpha-fallback{display:none;pointer-events:none}
.stage .exterior-layer .alpha-fallback{position:absolute;inset:-14%;width:128%;height:128%;object-fit:cover;will-change:transform}
.alpha-unsupported .alpha-fallback{display:block}
.alpha-unsupported #pilot,.alpha-unsupported #exterior-mid,.alpha-unsupported #exterior-near,.alpha-unsupported #cabin{display:none!important}
.alpha-unsupported .pilot-layer #pilot-still{visibility:visible!important}
.alpha-unsupported .pilot-layer #pilot-fallback{visibility:visible!important}
.alpha-unsupported .pilot-layer.fallback-ready #pilot-still{visibility:hidden!important}
.alpha-unsupported .cabin-layer>img{animation:cabin-light-fallback 7.5s ease-in-out infinite}
.exterior-layer #exterior-near-fallback{mask-image:linear-gradient(90deg,#000 0 56%,#0000 67%);mask-size:100% 100%}
.exterior-layer #exterior-mid-fallback{mask-image:linear-gradient(90deg,#000 0 58%,#0000 70%);mask-size:100% 100%}
.reduced.alpha-unsupported .alpha-fallback{display:none}
.reduced.alpha-unsupported .pilot-layer #pilot-still{visibility:visible!important}
.reduced.alpha-unsupported .cabin-layer>img{animation:none}
@keyframes cabin-light-fallback{50%{filter:brightness(1.045) saturate(1.04)}}

/* Keep the illustrated visor visible; the skill itself is the only HUD layer. */
.visor-display{
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:0;
  color:#102c35;
}
.visor-display strong{
  display:inline-block;
  font-size:78px!important;
  font-family:'Noto Sans SC','Microsoft YaHei',sans-serif;
  font-weight:950;
  font-variation-settings:'wght' 900;
  letter-spacing:-3px;
  line-height:1;
  color:#9b382b;
  -webkit-text-stroke:1.2px #ffe7b9;
  text-shadow:0 -1px 0 #fff8e2,1px 2px 1px #301b20,0 0 8px #ffb06a,0 0 20px #f08053;
  transform:skewX(-6deg) scaleY(.94);
}
.visor-scan,.visor-display.glitch::after{display:none;content:none}
.visor-display.glitch{animation:none}
.visor-display.glitch strong{
  animation:visor-text-fracture .36s steps(2,end) both;
  text-shadow:8px 0 #f7825b,-7px 0 #86d9c7,0 0 15px #ffd1a0;
}
.reduced .visor-display.glitch strong{animation:none}
@keyframes visor-text-fracture{
  0%{opacity:.25;transform:translateX(-5px);clip-path:inset(0 0 62%)}
  25%{opacity:1;transform:translateX(5px);clip-path:inset(22% 0 28%)}
  50%{opacity:.7;transform:translateX(-2px);clip-path:inset(54% 0 7%)}
  75%{opacity:1;transform:translateX(2px);clip-path:inset(0)}
  100%{opacity:1;transform:skewX(-6deg) scaleY(.94);clip-path:inset(0)}
}