.hero-stage{display:block;position:relative;aspect-ratio:1280/840;overflow:hidden;background:var(--soft)}
.hero-shot .hero-frame{position:absolute;inset:0 0 0 30%;width:70%;height:100%;aspect-ratio:auto;opacity:0;transform:scale(.985);transition:opacity .75s ease,transform 1s cubic-bezier(.2,.7,.2,1);pointer-events:none;backface-visibility:hidden}
.hero-shot .hero-frame[data-effect="glide-left"]{transform:translateX(28px) scale(.99)}
.hero-shot .hero-frame[data-effect="glide-right"]{transform:translateX(-28px) scale(.99)}
.hero-shot .hero-frame[data-effect="rise"]{transform:translateY(22px) scale(.99)}
.hero-shot .hero-frame[data-effect="turn"]{transform:perspective(1400px) rotateY(-8deg) translateX(16px) scale(.99);transform-origin:left center}
.hero-shot .hero-frame.is-current{opacity:1;transform:translate3d(0,0,0) scale(1)}
.hero-shot .hero-frame img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.hero-frame img.moving{animation:scene-near 7.3s ease-out both;animation-play-state:paused}
.hero-frame[data-drift="far"] img.moving{animation-name:scene-far}
.hero-frame[data-drift="pan"] img.moving{animation-name:scene-pan}
.hero-presentation[data-playing="true"] .hero-frame.is-current img.moving{animation-play-state:running}
@keyframes scene-near{from{transform:scale(1)}to{transform:scale(1.035)}}
@keyframes scene-far{from{transform:scale(1.035)}to{transform:scale(1)}}
@keyframes scene-pan{from{transform:scale(1.025) translateX(.4%)}to{transform:scale(1.035) translateX(-.4%)}}
.hero-scene-label{position:absolute;z-index:2;left:26px;top:50%;width:25%;transform:translateY(-50%);text-align:left;pointer-events:none}
#hero-scene-tag{display:block;color:var(--accent);font-size:9px;font-weight:700;letter-spacing:.13em;margin-bottom:16px}
#hero-slogan{display:block;color:var(--text);font-size:clamp(17px,1.65vw,24px);line-height:1.55;letter-spacing:-.045em;white-space:pre-line;font-weight:700}
#hero-detail{display:block;font-size:10px;color:var(--muted);line-height:1.8;margin-top:15px}
.hero-playback{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.hero-scenes{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px;max-width:430px;flex:1;min-width:0}
.hero-scenes button,#hero-pause{font:inherit;font-size:10px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;min-height:30px}
.hero-scenes button{padding:4px 2px}
.hero-scenes button[aria-pressed="true"]{background:var(--soft);border-color:var(--line);color:var(--text)}
#hero-pause{padding:4px 8px;white-space:nowrap;flex:none}
.hero-scenes button:hover,#hero-pause:hover{background:var(--soft)}
.hero-scenes button:focus-visible,#hero-pause:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#hero-pause:disabled{cursor:default;opacity:.7}
.hero-shot .image-caption>:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-shot .image-caption>:last-child{white-space:nowrap}
@media(min-width:1001px){.first-view{padding-top:42px}.hero h1{font-size:clamp(46px,4.3vw,64px);margin-bottom:20px}.hero .eyebrow{margin-bottom:16px}.hero-actions{margin-top:22px}#release-label{margin:14px 0 18px}.hero-stage{height:clamp(280px,33vh,350px);aspect-ratio:auto}}
@media(max-width:1000px) and (min-width:621px){.hero-stage{height:340px;aspect-ratio:auto}}
@media(max-width:620px){.hero-scene-label{display:none}.hero-shot .hero-frame{inset:0;width:100%}.hero-scenes{grid-template-columns:repeat(6,minmax(24px,1fr));max-width:226px;gap:2px}.hero-scenes button{font-size:9px;min-height:28px}.hero-playback{gap:8px}.hero-shot .image-caption{gap:8px}}
@media(prefers-reduced-motion:reduce){.hero-shot .hero-frame{transition:none}.hero-frame img.moving{animation:none}}