/* Cinematic homepage artwork. Content stays still while the scenery changes. */
.hero { background: #11151a; isolation: isolate; min-height: 100svh; }
.hero-scenes { position: absolute; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; }
.hero-scene { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease-in-out; }
.hero-scene.is-active { opacity: 1; }
.hero-scene img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 70% center; }
.hero-scene.is-active img, .hero-scene.is-leaving img { animation: hero-camera 12s linear both; }
.hero-scene[data-scene^="rdr-"] img { animation-direction: reverse; }
@keyframes hero-camera {
  from { transform: scale(1.005) translate3d(.3%, 0, 0); }
  to { transform: scale(1.035) translate3d(-.6%, -.35%, 0); }
}
.hero.is-paused .hero-scene img { animation-play-state: paused; }
.hero .hero-overlay { z-index: -2; background: linear-gradient(90deg, rgba(8,8,8,.85) 0%, rgba(8,8,8,.65) 32%, rgba(8,8,8,.25) 56%, rgba(8,8,8,.02) 78%), linear-gradient(180deg, rgba(8,8,8,.32), transparent 23%); }
.hero .hero-overlay-bottom { z-index: -1; height: 24%; }
.hero .hero-inner { padding-bottom: 130px; }
.hero p.lead { color: #c1c5cf; text-shadow: 0 2px 16px #0008; }
.scene-controls { position: absolute; z-index: 2; bottom: 32px; right: max(24px, calc((100vw - var(--maxw)) / 2 + 24px)); display: flex; align-items: center; gap: 17px; padding: 10px 12px 10px 18px; border: 1px solid #ffffff26; border-radius: 12px; background: #0a0c10a3; backdrop-filter: blur(12px); color: #fff; }
.scene-controls[hidden] { display: none; }
.scene-caption { width: 146px; flex: 0 0 auto; }
.scene-game { display: block; font-size: .58rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #c3ccda; }
.scene-name { display: block; font-size: .76rem; font-weight: 500; margin-top: 1px; }
.scene-steps { display: flex; gap: 4px; margin-top: 7px; }
.scene-step { flex: 1; min-width: 0; height: 2px; border-radius: 2px; background: #ffffff36; transition: background .4s; }
.scene-step.is-current { background: #c8dcff; }
.scene-buttons { display: flex; gap: 4px; }
.scene-button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #ffffff09; color: #e5ebf5; cursor: pointer; transition: background .2s; }
.scene-button:hover { background: #ffffff21; }
.scene-button:focus-visible { outline: 2px solid #afccff; outline-offset: 3px; }
.scene-button:disabled { opacity: .4; cursor: wait; }
.scene-button svg { width: 15px; height: 15px; }
.scene-button .scene-play, .scene-button[aria-pressed="true"] .scene-pause { display: none; }
.scene-button[aria-pressed="true"] .scene-play { display: block; }
@media (max-width: 760px) {
  .hero { min-height: max(740px, 100svh); align-items: flex-end; }
  .hero-scene img { object-position: 78% center; }
  .hero .hero-overlay { background: linear-gradient(0deg, #080808 0%, rgba(8,8,8,.91) 22%, rgba(8,8,8,.5) 48%, rgba(8,8,8,.08) 75%, rgba(8,8,8,.3) 100%); }
  .hero .hero-inner { padding-top: 320px; padding-bottom: 135px; }
  .hero-badge { margin-bottom: 18px; }
  .scene-controls { left: 24px; right: auto; bottom: 24px; padding: 9px 10px 9px 15px; }
  .scene-caption { width: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scene, .scene-step { transition: none; }
  .hero-scene img { animation: none !important; transform: none; }
}