/* S15: motion serves the handoff and the user's action. Approved artwork stays still. */
.hero-scroll{position:relative;background:var(--cream)}
.hero-scroll .hero{position:sticky;top:var(--hero-top,0px);isolation:isolate;background:var(--cream);transform:none;border-radius:0;box-shadow:none}
.hero-art{animation:none!important;transform:none!important;will-change:auto;opacity:1}
.hero-scene{display:none}
.hero-copy{transform:none;opacity:1}
.replay-opening{position:absolute;right:5%;bottom:35px;z-index:2;border:1px solid #8b8d7b;background:#fff6e6e8;border-radius:22px;padding:10px 16px;display:flex;gap:8px;align-items:center;font-size:12px;min-height:44px}
.replay-opening:hover{background:var(--paper);border-color:var(--ink)}
.scroll-cue{display:flex;gap:12px;align-items:center;text-decoration:none;font-size:12px;z-index:2;animation:none}
.experience-hub{position:relative;z-index:2;margin-top:calc(-1 * var(--handoff,0px));border-radius:28px 28px 0 0;box-shadow:0 -12px 38px #5843220b;overflow:clip;background:var(--cream)}
.product-chooser .tabs button:hover{transform:none}
.tabs{position:relative}
.tabs button{position:relative;z-index:1;transition:background .2s,border-color .2s}
.tabs button:hover{transform:none}
.tabs button[aria-selected=true]{border-color:transparent;background:#fff0e1}
.selection-marker{position:absolute;z-index:2;pointer-events:none;left:0;top:0;border:2px solid var(--orange);border-radius:7px}
.tabs .chevron{transition:transform .25s}
.tabs button[aria-selected=true] .chevron{transform:rotate(90deg)}
#product-panel{min-height:710px}
.demo-scene[data-step="1"] .vessel-rig,.demo-scene[data-step="1"] .mascot-upper,.demo-scene[data-step="1"] .demo-vessel{animation:none}
.vessel-rig,.mascot-upper{will-change:transform}
.draw-slot{overflow:hidden}
.draw-slot img,.demo-scene[data-step="1"] .draw-slot img{transition:none;transform:translate(-50%,200px)}
.demo-scene .puppet-stage{bottom:55px;transition:opacity .35s}
.experience-hub .example .demo-scene{height:405px}
.demo-scene[data-step="2"] .puppet-stage{bottom:0;opacity:.16}
.demo-scene[data-step="2"] .draw-slot img{transform:translate(-50%,0)}
.demo-scene[data-step="2"] .interpretation{left:25%;right:0;bottom:0;transform-origin:0 65%}
.demo-scene[data-step="2"] .puppet-stage .draw-slot{left:10%;top:7%;height:85%;width:48px;overflow:visible;z-index:5}
.demo-scene[data-step="2"] .puppet-stage .draw-slot img{height:270px}
.scene-action{position:absolute;inset:0;z-index:3;border:0;background:transparent;padding:0;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;color:var(--ink)}
.scene-action-label{background:var(--orange);border-radius:25px;padding:10px 42px 10px 18px;min-height:44px;font-size:13px;font-weight:600;transition:background .2s,box-shadow .2s}
.scene-action>.icon{position:absolute;bottom:12px;left:calc(50% + 68px);width:18px;height:18px}
.scene-action:hover .scene-action-label{background:#ff873b;box-shadow:0 0 0 5px #ff741f24}
.scene-action:active .scene-action-label{box-shadow:0 0 0 2px #ff741f40}
.scene-action:focus-visible{outline:3px solid var(--teal);outline-offset:5px;border-radius:18px}
.scene-action:disabled{opacity:1;cursor:progress}
.scene-action:disabled .scene-action-label{background:#ffe3bd;padding-right:18px;box-shadow:none}
.scene-action:disabled>.icon{display:none}
.demo-scene[data-step="2"] .scene-action{display:none}
@media(max-width:700px){
 .hero-scroll .hero{height:auto;min-height:825px;padding-bottom:22px;background:var(--cream)}
 .hero-art{height:485px;bottom:auto;overflow:hidden;mask-image:linear-gradient(#000 0%,#000 72%,transparent 100%)}
 .hero-art img{width:110%;margin-left:-5%}
 .hero-copy{padding:460px 22px 20px}
 .hero h1{font-size:clamp(43px,12.1vw,53px);line-height:1.02}
 .intro{font-size:15px;line-height:1.55;margin:20px 0;max-width:380px}
 .availability{margin-top:17px;font-size:11px}
 .replay-opening{position:relative;bottom:auto;right:auto;margin:0 22px;min-height:36px;padding:5px 12px;font-size:11px}
 .scroll-cue{display:none}
 .experience-hub{border-radius:22px 22px 0 0}
 #product-panel{min-height:695px}
 .experience-hub .example .demo-scene{height:345px}
 .demo-scene[data-step="2"] .interpretation{left:16%;padding:20px 16px}
 .demo-scene[data-step="2"] .puppet-stage .draw-slot{left:5%;width:24px}
 .demo-scene[data-step="2"] .puppet-stage .draw-slot img{height:200px}
 .scene-action-label{font-size:12px}
 .scene-action>.icon{left:calc(50% + 62px)}
}
@media(max-width:370px){.hero-copy{padding-top:435px}.hero-art{height:465px}.hero-scroll .hero{min-height:805px}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}.hero-scroll .hero{position:relative;top:0}.experience-hub{margin-top:0;border-radius:0;box-shadow:none}.replay-opening{display:none}
}

/* S16: mobile brand and menu are persistent functional navigation. */
@media(max-width:700px){
 :root{--mobile-nav-height:calc(78px + env(safe-area-inset-top,0px))}
 html{scroll-padding-top:calc(var(--mobile-nav-height) + 12px)}
 .header{position:fixed;top:0;left:0;right:0;z-index:10;height:var(--mobile-nav-height);padding:calc(17px + env(safe-area-inset-top,0px)) 22px 17px;background:var(--cream);border-bottom:1px solid #26251f12}
 .hero-art{top:var(--mobile-nav-height)}
 .product-chooser{top:var(--mobile-nav-height)}
 .hero-copy{padding-top:calc(474px + env(safe-area-inset-top,0px))}
}
@media(max-width:370px){.hero-copy{padding-top:calc(449px + env(safe-area-inset-top,0px))}}