.choice .choice-vehicle{display:block;width:100%;height:100px;object-fit:contain;margin:0 auto 12px;transition:transform .22s ease-out}
.choice:hover .choice-vehicle{transform:translateY(-3px) scale(1.04)}
.choice .model-name{display:block;font-size:10px;line-height:1.4;margin-top:8px;color:#50606d}
.choice{cursor:pointer;padding-left:7px;padding-right:7px}
.screen{padding-left:20px;padding-right:20px}
.hero{height:135svh;min-height:0;max-height:none;overflow:visible}
.hero-frame{height:100svh;position:sticky;top:0;overflow:hidden;background:#18232d}
.hero:after{display:none}
.hero-frame:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#10203055,transparent 85%);pointer-events:none}
.hero .brand{z-index:2;top:8%;left:6%;font-size:clamp(30px,4vw,60px);animation:brand-arrive .9s ease-out both}
.hero h1{z-index:2;top:28%;font-size:clamp(68px,9vw,140px);font-weight:750;line-height:.96;letter-spacing:-.065em;transform:translateY(calc(var(--arrival-progress,0) * -45px));opacity:calc(1 - var(--arrival-progress,0) * .75)}
.hero h1 span{display:block;width:max-content;max-width:100%;animation:arrival-word .8s cubic-bezier(.2,.75,.25,1) both}
.hero h1 span:nth-child(1){animation-delay:.55s}.hero h1 span:nth-child(2){animation-delay:1.15s}.hero h1 span:nth-child(3){animation-delay:1.75s}
.continue{z-index:3;bottom:8%;animation:brand-arrive .6s 2.4s both}
.stage{scroll-margin-top:0}
.stage .kiosk{transition:opacity .5s ease-out,transform .7s cubic-bezier(.2,.75,.25,1)}
.motion-enabled .stage:not(.entered) .kiosk{opacity:0;transform:translateY(45px)}
.stage:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 55% 18%,#e5bc7120,transparent 55%);animation:terminal-light 8s ease-in-out infinite alternate}
.intro-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.hero.film-ready .intro-film{opacity:1}.hero.film-ready .brand,.hero.film-ready h1{visibility:hidden}.hero.film-ready .hero-frame:after{display:none}
.motion-control{position:fixed;right:20px;bottom:20px;z-index:10;border:1px solid #dce5ef55;background:#15222ee8;color:#f4f1ea;border-radius:30px;padding:11px 16px;font:12px Archivo,sans-serif;cursor:pointer}
.motion-paused *{animation-play-state:paused!important}.motion-paused .stage .kiosk{opacity:1!important;transform:none!important}.motion-paused .hero h1{opacity:1;transform:none}.motion-paused .hero h1 span,.motion-paused .brand,.motion-paused .continue{animation:none;opacity:1;transform:none}
@keyframes arrival-word{from{opacity:0;transform:translateY(75%);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes brand-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes terminal-light{from{opacity:.3}to{opacity:.8}}
@media(pointer:fine){.choice,.vehicle,.primary{cursor:url('hand-cursor.svg') 12 4,pointer}}
@media(max-width:720px){.hero{height:115svh}.hero h1{font-size:15vw;top:32%}.choice .choice-vehicle{height:85px}.choice .model-name{font-size:9px}.motion-control{right:12px;bottom:12px}.hero.film-ready .intro-film{object-fit:contain;background:#101112}.hero.film-ready .continue{bottom:14%}}
@media(prefers-reduced-motion:reduce){.hero{height:100svh}.hero h1{opacity:1;transform:none}.motion-enabled .stage .kiosk{opacity:1;transform:none}.stage:after{animation:none}.hero h1 span,.hero .brand,.continue{animation:none;opacity:1;transform:none}.stage .kiosk{transition:none}}

/* A single viewport handoff. Scroll controls the composition in both directions. */
.scroll-journey .hero{height:210svh}
.scroll-journey .stage{margin-top:-100svh;min-height:100svh;z-index:4;will-change:transform,opacity}
.scroll-journey .hero-frame{perspective:1200px}
.scroll-journey .hero-frame>img,.scroll-journey .intro-film{transform:scale(calc(1 + var(--journey,0)*.12));opacity:calc(1 - var(--reveal,0));will-change:transform,opacity}
.scroll-journey .hero.film-ready .intro-film{opacity:calc(1 - var(--reveal,0))}
.scroll-journey .stage:before{transform:scale(calc(1.12 - var(--reveal,0)*.12));will-change:transform}
.film-direction .stage:before{background:linear-gradient(#241b1210,#18130e30),url('terminal-film.png') center/cover}
.scroll-journey .stage .kiosk{transition:none;will-change:transform;opacity:1}
.scroll-journey .hero h1{opacity:calc(1 - var(--journey,0));transform:none}
.scroll-journey .hero h1 span{animation:scroll-word .8s cubic-bezier(.2,.75,.25,1) both;text-transform:uppercase;line-height:.94;letter-spacing:-.06em}
.scroll-journey .hero h1 span:nth-child(1){animation-delay:.45s;translate:calc(var(--journey,0)*-24vw) 0}
.scroll-journey .hero h1 span:nth-child(2){animation-delay:1.2s;translate:calc(var(--journey,0)*18vw) 0}
.scroll-journey .hero h1 span:nth-child(3){animation-delay:1.95s;translate:calc(var(--journey,0)*-12vw) 0}
.scroll-journey .hero .brand,.scroll-journey .hero .continue{opacity:calc(1 - var(--reveal,0))}
.scroll-journey .choice{padding-top:26px;padding-bottom:28px}
.scroll-journey .hero.film-ready .intro-film{object-fit:cover}
@keyframes scroll-word{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:translateX(0)}}
.motion-paused.scroll-journey .hero{height:100svh}
.motion-paused.scroll-journey .stage{margin-top:0;transform:none!important;opacity:1!important}
.motion-paused.scroll-journey .stage:before,.motion-paused.scroll-journey .hero-frame>img,.motion-paused.scroll-journey .intro-film{transform:none;opacity:1}
.motion-paused.scroll-journey .hero h1,.motion-paused.scroll-journey .hero .brand,.motion-paused.scroll-journey .hero .continue{opacity:1}
.motion-paused.scroll-journey .hero h1 span{translate:none;animation:none}
@media(max-width:720px){.scroll-journey .hero{height:180svh}.scroll-journey .hero h1{font-size:15vw}.scroll-journey .stage{padding:32px 16px}.scroll-journey .kiosk .base{height:65px}.scroll-journey .screen{min-height:0}.scroll-journey .screen h2{margin:24px 0}.scroll-journey .hero.film-ready .intro-film{object-fit:contain;background:#141c22}}

/* Browser-owned pinning; no scroll compensation or independent kiosk rotation. */
.native-journey{position:relative;isolation:isolate}
.scroll-journey .native-journey .hero{height:100svh;position:sticky;top:0}
.scroll-journey .native-journey .hero-frame{position:relative}
.scroll-journey .native-journey .stage{position:sticky;top:0;margin-top:-100svh;will-change:opacity}
.scroll-journey .native-journey .stage .kiosk{transform:none!important;will-change:auto}
.scroll-journey .native-journey .stage:before{transform:none;will-change:auto}
.scroll-journey .native-journey .hero-frame>img,.scroll-journey .native-journey .intro-film{transform:none;will-change:opacity}
.motion-paused.scroll-journey .native-journey .hero,.motion-paused.scroll-journey .native-journey .stage{position:relative}
.motion-paused.scroll-journey .native-journey .stage{margin-top:0}

.frame-sequence{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:calc(1 - var(--reveal,0));z-index:1}
.photo-kiosk .hero-frame:after,.photo-kiosk #hero-photo{display:none}
.photo-kiosk .stage:before{background:url('kiosk-selected.png') center/cover;filter:none}
.photo-kiosk .stage:after{display:none}
.photo-kiosk .kiosk{position:absolute;max-width:none;background:none!important;padding:0;box-shadow:none;border:0;min-height:0}
.photo-kiosk .kiosk .screen{padding:0;border:0;background:none;min-height:0;height:100%}
.photo-kiosk .kiosk .screen-brand,.photo-kiosk .kiosk h2,.photo-kiosk .kiosk .base{display:none}
.photo-kiosk .kiosk .choices{height:100%;gap:5px}
.photo-kiosk .kiosk .choice{position:relative;background:transparent!important;color:transparent;padding:0;border:0;transform:none;border-radius:8px}
.photo-kiosk .kiosk .choice img{visibility:hidden}
.photo-kiosk .kiosk .choice:hover{box-shadow:inset 0 0 0 2px #ffffffcc;background:#ffffff12!important}
.photo-kiosk .kiosk .choice:focus-visible{outline:3px solid #2e6787;outline-offset:3px}
.photo-kiosk .stage:has(.workspace:not([hidden])):before{filter:blur(8px) brightness(.55)}
.photo-kiosk .workspace{position:relative;z-index:2}

/* The scene shifts right as the viewpoint turns left toward the stone kiosk. */
.photo-kiosk .stage:before{background-image:url('kiosk-stone.png');transition:transform .46s cubic-bezier(.22,.7,.24,1),filter .46s ease;transform-origin:43% 48%}
.photo-kiosk .native-journey .stage.stone-approach:before{transform:translateX(7%) scale(1.18);filter:blur(2px) brightness(.8)}
.photo-kiosk .stage.stone-approach .kiosk{opacity:0;transition:opacity .25s}
.photo-kiosk .stage.stone-approach:has(.workspace:not([hidden])):before{filter:blur(8px) brightness(.5)}
.photo-kiosk .workspace{animation:stone-workspace .35s cubic-bezier(.22,.7,.24,1) both;border-color:#706c66}
@keyframes stone-workspace{from{opacity:0;translate:-28px 0}to{opacity:1;translate:0 0}}
.motion-paused.photo-kiosk .native-journey .stage.stone-approach:before{transform:none}
@media(prefers-reduced-motion:reduce){.photo-kiosk .stage:before{transition:none}.photo-kiosk .workspace{animation:none}}
.native-journey{overflow-anchor:none}