@font-face{font-family:'Instrument Sans';src:url('/assets/fonts/instrument-sans-variable.ttf') format('truetype');font-style:normal;font-weight:400 700;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/ibm-plex-mono-400.ttf') format('truetype');font-weight:400;font-display:swap}
:root{color-scheme:dark;--paper:#f7f6f2;--night:#03050d;--sans:'Instrument Sans',Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-width:320px;min-height:100%;background:var(--night);color:var(--paper)}body{font-family:var(--sans);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:2px solid #ccdcff;outline-offset:6px}::selection{background:#3655ca;color:#fff}.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}
.experience{position:relative;isolation:isolate;width:100%;height:100vh;height:100svh;min-height:520px;overflow:hidden;background:radial-gradient(ellipse at 50% 44%,#142967 0,#090e24 28%,#03050d 72%);touch-action:pan-y;user-select:none}#flight{position:absolute;inset:0;z-index:-3;width:100%;height:100%;pointer-events:none}.atmosphere{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#02040c66,transparent 21%,transparent 66%,#02040c77 89%,#02040dcc),radial-gradient(ellipse at center,transparent 22%,#02040c00 76%,#02040c33 100%)}.experience-header{position:absolute;z-index:5;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:30px 4vw}.brand{display:block}.brand img{display:block;width:137px;height:auto;filter:drop-shadow(0 2px 10px #000)}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;color:#cfdbf5;background:#111b3466;border:1px solid #b6c9ff3d;border-radius:50%;backdrop-filter:blur(14px);transition:background .2s,border-color .2s,color .2s}.icon-button:hover{color:#fff;background:#678bff30;border-color:#c4d5ffa8}.icon-button svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.back-button{background:#111b3426}.product-heading{position:absolute;left:50%;bottom:8.3vh;transform:translateX(-50%);z-index:2;width:max-content;max-width:82%;text-align:center;pointer-events:none;text-shadow:0 3px 40px #02040d,0 2px 15px #02040d80}.product-heading p{margin:0 0 20px;color:#bcccf0;font-size:11px;font-weight:400;line-height:1.4;letter-spacing:.2em;text-transform:uppercase}.product-heading h1{margin:0;color:#f6f8ff;font-size:clamp(38px,5.6vw,86px);font-weight:400;line-height:1;letter-spacing:-.055em;white-space:nowrap}.product-heading h1 span{color:#d3dfff}.experience-controls{position:absolute;right:4vw;bottom:36px;display:flex;gap:10px;z-index:5}.sound-button[aria-pressed=false] .sound-wave,.sound-button[aria-pressed=true] .sound-cross{display:none}.sound-button[aria-pressed=true]{color:#f1f5ff;border-color:#b6c9ff9e;background:#678bff25}.play-icon{display:none}#motion[aria-pressed=true] .pause-icon{display:none}#motion[aria-pressed=true] .play-icon{display:block}
@media(max-width:700px){.experience-header{padding:23px 6vw}.brand img{width:116px}.icon-button{width:44px;height:44px}.product-heading{bottom:17vh;max-width:90%}.product-heading p{font-size:9px;letter-spacing:.18em;margin-bottom:17px}.product-heading h1{font-size:clamp(33px,8.5vw,58px)}.experience-controls{right:6vw;bottom:27px;gap:10px}.atmosphere{background:linear-gradient(180deg,#02040c55,transparent 24%,transparent 64%,#02040d66 88%,#02040dcc)}}
@media(max-height:620px) and (min-width:701px){.product-heading{bottom:8vh}.product-heading h1{font-size:46px}.product-heading p{margin-bottom:12px}.experience-header{padding-top:20px}.experience-controls{bottom:25px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Each word approaches once, then settles into a readable title. */
.product-heading{width:min(1320px,88vw);max-width:none;perspective:750px;perspective-origin:50% -100%;bottom:9vh}
.product-heading h1{font-size:clamp(34px,4.55vw,70px);line-height:1.08;white-space:normal;letter-spacing:-.05em;text-wrap:balance;transform-style:preserve-3d}
.product-heading h1 .title-word{display:inline-block;color:#f3f6ff;transform-origin:50% 50%;animation:word-arrive 3.8s cubic-bezier(.17,.63,.22,1) both;animation-delay:.4s;--flight-x:24vw}
.product-heading h1 .title-word:nth-child(2){animation-delay:.58s;--flight-x:15vw}
.product-heading h1 .title-word:nth-child(3){animation-delay:.76s;--flight-x:5vw}
.product-heading h1 .title-word:nth-child(4){animation-delay:.94s;--flight-x:-4vw}
.product-heading h1 .title-word:nth-child(5){animation-delay:1.12s;--flight-x:-14vw}
.product-heading h1 .title-word:nth-child(6){animation-delay:1.30s;--flight-x:-23vw}
.product-heading h1 .title-year{color:#c8dbff}
.experience:has(#motion[aria-pressed=true]) .title-word{animation-play-state:paused}
@keyframes word-arrive{
  0%{opacity:0;filter:blur(12px);transform:translate3d(var(--flight-x),-27vh,-1200px) scale(.12)}
  15%{opacity:.22;filter:blur(8px)}
  58%{opacity:1;filter:blur(1.5px);transform:translate3d(0,-3vh,-100px) scale(.88)}
  78%{opacity:1;filter:blur(0);transform:translate3d(0,0,50px) scale(1.03)}
  100%{opacity:1;filter:blur(0);transform:translate3d(0,0,0) scale(1)}
}
@media(max-width:700px){.product-heading{width:88vw;bottom:17vh;perspective:500px}.product-heading h1{font-size:clamp(31px,8vw,54px);line-height:1.16;max-width:570px;margin-inline:auto}.product-heading h1 .title-word{--flight-x:0vw!important}}
@media(max-height:620px) and (min-width:701px){.product-heading{bottom:9vh}.product-heading h1{font-size:clamp(33px,4.4vw,52px)}}
@media(prefers-reduced-motion:reduce){.product-heading h1 .title-word{animation:none!important;opacity:1;filter:none;transform:none}}