/* A stationary frame: only opacity changes; pointer/scroll never move the artwork. */
.hero-gallery,.hero-frame{position:absolute;inset:0;width:100%;height:100%}
.hero-gallery{pointer-events:none;background:#080706;inset:104px 0 92px;width:100%;height:calc(100% - 196px)}
.hero-frame{display:block;object-fit:contain;object-position:right center;opacity:0;transform:none}
.hero-frame.is-active{opacity:1}
.hero .hero-eyebrow{margin:22px 0 0;line-height:1.6}
html[data-motion=on] .hero-frame{transition:opacity 1.2s ease}
.hero .hero-shade{background:linear-gradient(90deg,#08070630,transparent 75%),linear-gradient(0deg,#080706 0%,transparent 26%,transparent 87%,#08070670)}
.hero-controls{position:absolute;left:var(--gutter);right:var(--gutter);bottom:62px;display:flex;justify-content:flex-end;align-items:center;gap:14px;z-index:3}
.hero-controls[hidden]{display:none}
.hero-world-selector{display:flex;flex-wrap:wrap;gap:4px 14px}
.hero-controls button{min-height:44px;min-width:44px;padding:8px 2px;font:var(--text-ui) var(--sans);letter-spacing:.02em;color:#c9c3b5;background:transparent;border:0;border-bottom:1px solid #76634775;cursor:pointer}
@media(min-width:521px){.hero-controls button:not(.hero-playback){padding-inline:9px;background:#080807b8;border:1px solid #76634775}}
.hero-controls button[aria-pressed=true]{color:#f1ebdd;border-color:#c6a76a}
.hero-controls button:hover{color:#f1ebdd}
.hero-controls button:focus-visible{outline:2px solid #e1c58b;outline-offset:4px}
.hero-controls .hero-playback{padding:8px 10px;border:1px solid #76634775;font-size:var(--text-ui);white-space:nowrap}
.hero-controls .hero-playback:disabled{color:#999087;cursor:default}
@media(max-width:1150px){.hero-controls{justify-content:flex-start;bottom:64px}.hero-index{bottom:165px}}
@media(max-width:800px){.hero{height:auto;min-height:830px}.hero-content{padding-bottom:210px}.hero-controls{bottom:66px;align-items:flex-end;gap:18px}.hero-world-selector{max-width:460px}.hero-frame{object-position:65% center}.hero .hero-shade{background:linear-gradient(90deg,#08070675,transparent 90%),linear-gradient(0deg,#080706 2%,#08070680 25%,transparent 58%,#08070644)}}
@media(max-width:520px){.hero{min-height:810px}.hero-content{padding-bottom:218px}.hero-controls{gap:10px;bottom:70px}.hero-world-selector{gap:0 13px;max-width:250px}.hero-controls button{font-size:var(--text-ui);letter-spacing:.02em}.hero-controls .hero-playback{padding:8px 6px}.hero-frame{object-position:63% center}.hero .hero-shade{background:linear-gradient(90deg,#08070675,transparent 100%),linear-gradient(0deg,#080706 1%,#080706ac 24%,transparent 62%,#08070640)}}
@media(prefers-reduced-motion:reduce){.hero-frame{transition:none!important}}

/* Keep the original image fully inside a header/control-safe stage on every ratio. */
@media(max-width:1150px) and (min-width:801px){.hero-gallery{inset:112px 0 120px;height:calc(100% - 232px)}.hero-frame{object-position:right center}}
@media(max-width:800px){
  .hero{min-height:0;height:auto;padding-top:126px}
  .hero-scene{position:relative;inset:auto;height:clamp(250px,55vw,420px);z-index:0;overflow:hidden}
  .hero-gallery{inset:12px 0;width:100%;height:calc(100% - 24px)}
  .hero-frame{object-position:center;object-fit:contain}
  .hero .hero-shade{background:linear-gradient(0deg,#080706,transparent 16%)}
  .hero-content{padding:20px var(--gutter) 30px;max-width:none}
  .hero-controls{position:relative;inset:auto;margin:0 var(--gutter) 24px;align-items:flex-start;justify-content:space-between;gap:12px}
  .hero-world-selector{max-width:none;gap:6px 14px}
  .hero-bottom{position:relative;inset:auto;margin:0 var(--gutter) 28px}
}