/* Shared mechanics only. Each page owns its composition and visual direction. */
:root { --ease-out: cubic-bezier(.2,.75,.25,1); }
.landing-hero { position:relative; isolation:isolate; overflow:hidden; overflow:clip; }
.landing-hero .eyebrow { font-size:11px; letter-spacing:.16em; }
.landing-hero h1 em { font-style:normal; }
.landing-hero p { text-wrap:pretty; }
.landing-hero :focus-visible { outline:3px solid currentColor; outline-offset:6px; }
.landing-hero svg { fill:none; stroke:currentColor; stroke-width:1.6; }
.landing-hero .arrow { width:21px; height:21px; flex-shrink:0; }
.hero-wash { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.hero-wash::before,.hero-wash::after { content:""; position:absolute; width:75%; height:110%; top:4%; border-radius:50%; opacity:0; transform:scale(.86); transition:opacity .32s,transform .4s var(--ease-out); }
.hero-wash::before { right:47%; background:var(--wash-left); }
.hero-wash::after { left:47%; background:var(--wash-right); }
[data-route="left"] .hero-wash::before,[data-route="right"] .hero-wash::after { opacity:1; transform:scale(1); }
.van-stage { position:relative; pointer-events:none; isolation:isolate; }
.van-position { position:absolute; left:50%; top:50%; width:480px; aspect-ratio:5/3; transform:translate(-50%,-50%); z-index:3; }
.van-drive,.van-intro,.van-visual { position:absolute; inset:0; }
.van-drive { transform:translateX(0); translate:0 var(--van-drop,0px); }
.van-visual { transition:transform .36s var(--ease-out); }
[data-route="left"] .van-visual { transform:translateX(-13px) rotate(-1deg); }
[data-route="right"] .van-visual { transform:translateX(13px) rotate(1deg); }
.van-poster,.van-canvas,.van-canvas canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.van-poster { transition:opacity .16s; }
.van-canvas { opacity:0; transition:opacity .16s; }
.van-visual[data-renderer="ready"] .van-canvas { opacity:1; }
.van-visual[data-renderer="ready"] .van-poster,.van-visual[data-renderer="ready"] .cargo-fold { opacity:0; }
.van-shadow { position:absolute; width:52%; height:7%; left:24%; bottom:18%; background:#0a1c553b; border-radius:50%; filter:blur(12px); }
/* A separate cargo hatch unfolds behind the poster when WebGL is unavailable. */
.cargo-fold { position:absolute; left:21%; top:31%; width:19%; height:40%; background:linear-gradient(110deg,#354459,#7a889b); border:4px solid #e6edf0; border-radius:5px; opacity:0; transform:translateX(0) scaleX(.5); transform-origin:right; transition:transform .3s var(--ease-out),opacity .18s; }
.cargo-fold::after { content:""; position:absolute; inset:-4px; border:1px solid #bdc7d1; background:linear-gradient(115deg,#fff,#cfd7de); border-radius:4px; transform:perspective(220px) rotateY(-68deg); transform-origin:left; box-shadow:8px 10px 12px #15243c26; }
[data-state="left-preview"] .cargo-fold { opacity:1; transform:translateX(-37%) scaleX(1); }
[data-state="right-preview"] .cargo-fold { opacity:1; transform:translateX(155%) scaleX(1); }
.cargo-items { position:absolute; inset:0; z-index:4; pointer-events:none; }
.cargo-item { --x:0px; --y:0px; --angle:0deg; position:absolute; left:50%; top:50%; width:var(--size,100px); height:var(--size,100px); opacity:0; transform:translate(-50%,-50%) scale(.35); transition:transform .34s var(--ease-out),opacity .2s; }
.cargo-item img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 12px 9px #13203b18); }
[data-state="left-preview"] .cargo-items-left .cargo-item,[data-state="right-preview"] .cargo-items-right .cargo-item { opacity:1; transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--angle)) scale(1); }
.cargo-building { --x:-205px; --y:3px; --size:120px; --angle:-7deg; }
.cargo-planner { --x:-131px; --y:-85px; --size:83px; --angle:9deg; }
.cargo-key { --x:-109px; --y:91px; --size:85px; --angle:-14deg; }
.cargo-caddy { --x:195px; --y:35px; --size:114px; --angle:5deg; }
.cargo-mop { --x:128px; --y:-75px; --size:118px; --angle:13deg; }
.cargo-bucket { --x:105px; --y:91px; --size:82px; --angle:-8deg; }
[data-state$="selection"] .cargo-item { transition:transform .16s ease-in,opacity .12s; }
[data-state$="selection"] .cargo-fold { opacity:0; transform:scaleX(.4); transition-duration:.14s; }
[data-state="left-selection"] .van-drive { animation:depart-left .4s .14s cubic-bezier(.55,.02,.9,.55) both; }
[data-state="right-selection"] .van-drive { animation:depart-right .4s .14s cubic-bezier(.55,.02,.9,.55) both; }
[data-state="left-selection"] .hero-wash::before { transform:translateX(-30%); opacity:.35; transition-duration:.55s; }
[data-state="right-selection"] .hero-wash::after { transform:translateX(30%); opacity:.35; transition-duration:.55s; }
.route-cta { position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:60px; padding:7px 7px 7px 20px; border:1px solid; border-radius:15px; font-size:14px; font-weight:750; line-height:1.45; transition:background .22s,color .22s,border-color .22s,box-shadow .22s; }
.route-cta .arrow-box { display:grid; place-items:center; width:44px; height:44px; flex:0 0 44px; border-radius:10px; transition:background .22s,color .22s; }
.route-cta .arrow { transition:transform .25s var(--ease-out); }
.route-cta[data-choice="left"]:is(:hover,:focus-visible) .arrow { transform:translateX(-3px); }
.route-cta[data-choice="right"]:is(:hover,:focus-visible) .arrow { transform:translateX(3px); }
[data-state="left-selection"] [data-choice="left"],[data-state="right-selection"] [data-choice="right"] { box-shadow:inset 0 0 0 2px currentColor; }
.trust-points { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:15px 30px; font-size:11px; }
.trust-points li { display:flex; align-items:center; gap:8px; }
.trust-points svg { width:14px; height:14px; }
.landing-discover { display:inline-flex; align-items:center; gap:10px; font-size:11px; padding:12px 0; }
.landing-discover svg { width:15px; height:15px; }
.scene-caption { position:absolute; bottom:0; left:0; right:0; text-align:center; font-size:10px; letter-spacing:.03em; }
.scene-caption span { transition:opacity .2s; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.version-link { display:inline-flex; gap:8px; align-items:center; border-bottom:1px solid currentColor; padding-bottom:3px; }
.js-landing .reveal { animation:settle-in .62s var(--ease-out) both; animation-delay:var(--delay,0ms); }
.js-landing .van-intro { animation:van-arrive .75s .16s var(--ease-out) both; }
.js-landing .scene-orbit { animation:orbit-arrive .65s .18s ease-out both; }
.js-landing .landing-header { animation:header-arrive .55s var(--ease-out) both; }
.has-entered .reveal,.has-entered .van-intro,.has-entered .scene-orbit { animation:none; }
.landing-header :focus-visible { outline:3px solid currentColor; outline-offset:5px; }
.landing-header .wordmark:focus-visible { border-radius:4px; }
.closing { color:white; }
/* Native scroll changes only the scene, never the document's layout. */
[data-scroll-cargo] .classic-bottom { opacity:var(--actions-opacity,1); }
[data-scroll-cargo] .classic-bottom:focus-within { opacity:1!important; }
[data-scroll-cargo] .scene-orbit,[data-scroll-cargo] .scene-caption { opacity:var(--orbit-opacity,1); }
@keyframes settle-in { from { opacity:.2; transform:translateY(13px); } to { opacity:1; transform:none; } }
@keyframes van-arrive { from { opacity:.2; transform:translateX(-35px); } to { opacity:1; transform:none; } }
@keyframes header-arrive { from { opacity:.4; transform:translateY(-7px); } to { opacity:1; transform:none; } }
@keyframes orbit-arrive { from { opacity:0; } to { opacity:1; } }
@keyframes depart-left { to { transform:translateX(calc(-50vw - 350px)); } }
@keyframes depart-right { to { transform:translateX(calc(50vw + 350px)); } }
@media(max-width:600px) {
 .van-position { width:350px; }
 .cargo-item { width:calc(var(--size,100px) * .7); height:calc(var(--size,100px) * .7); }
 [data-state="left-preview"] .cargo-items-left .cargo-item,[data-state="right-preview"] .cargo-items-right .cargo-item { transform:translate(calc(-50% + var(--x) * .65),calc(-50% + var(--y) * .7)) rotate(var(--angle)); }
 .trust-points { gap:10px 17px; font-size:10px; }
 .trust-points li { gap:5px; }
 .route-cta { min-height:57px; font-size:13px; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 .js-landing .reveal,.js-landing .van-intro,.js-landing .scene-orbit,.js-landing .landing-header,.landing-hero .van-drive { animation:none!important; }
 .landing-hero *, .landing-hero *::before,.landing-hero *::after { transition:none!important; }
 .landing-hero .van-visual { transform:none; }
 .landing-hero .van-drive { translate:none; }
 [data-scroll-cargo] .classic-bottom { opacity:1!important; }
 .landing-hero .route-cta .arrow { transform:none!important; }
}
@media(min-width:821px) { .landing-header .site-nav { display:flex!important; } }
/* Without JS, all navigation destinations remain exposed on small screens. */
@media(max-width:820px) {
 html:not(.js-landing) .landing-header .header-inner { flex-wrap:wrap; }
 html:not(.js-landing) .landing-header .site-nav { position:static; display:flex; flex-wrap:wrap; order:5; width:100%; }
 html:not(.js-landing) .landing-header .menu-toggle { display:none; }
}