/* Preserve the approved top scene; the lower scene blends into graphite at both ends. */
.hero {
  --hero-scene-mask: linear-gradient(to bottom, #000 48%, rgba(0,0,0,.96) 60%, rgba(0,0,0,.76) 71%, rgba(0,0,0,.43) 81%, rgba(0,0,0,.16) 89%, rgba(0,0,0,.025) 96%, transparent 100%);
}
.hero::after, .hero::before, .hero .hero-video-layer {
  -webkit-mask-image: var(--hero-scene-mask); mask-image: var(--hero-scene-mask);
}
.hero::after { transition: opacity 800ms ease-out; }
.hero-video-layer {
  position: absolute; inset: -4% -4% 0; z-index: 0; pointer-events: none;
  opacity: 0; filter: brightness(.78) saturate(.72); transition: opacity 800ms ease-out;
}
.hero-video-layer video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.background-video-scene.is-video-playing > .hero-video-layer { opacity: 1; }
.hero.is-video-playing::after { opacity: 0; }
.background-video-scene > .hero-motion-toggle {
  position: absolute; z-index: 8; right: max(20px, env(safe-area-inset-right)); bottom: 24px;
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  color: #c5beb6; background: rgba(7,8,9,.55); border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px; font-size: .85rem; cursor: pointer;
  transition: color 180ms ease-out, border-color 180ms ease-out;
}
.background-video-scene > .hero-motion-toggle[hidden] { display: none; }
.home-lower-scene { position: relative; isolation: isolate; }
.home-lower-scene > .hero-video-layer {
  inset: 0; filter: brightness(.38) saturate(.65);
  -webkit-mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.18) 70px, #000 210px, #000 calc(100% - 230px), rgba(0,0,0,.16) calc(100% - 80px), transparent);
  mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.18) 70px, #000 210px, #000 calc(100% - 230px), rgba(0,0,0,.16) calc(100% - 80px), transparent);
}
.home-lower-scene > section { position: relative; z-index: 1; }
.home-lower-scene > .hero-motion-toggle { top: 0; bottom: auto; }
.home-lower-scene > .stream-section .info-main-title { width: calc(100% - 56px); padding-right: 0; }
@media (max-width: 767.98px) {
  .hero > .hero-motion-toggle { bottom: 4px; right: max(16px, env(safe-area-inset-right)); }
  .home-lower-scene > .hero-motion-toggle { right: max(16px, env(safe-area-inset-right)); }
}
@media (hover: hover) and (pointer: fine) {
  .background-video-scene > .hero-motion-toggle:hover { color: #fff; border-color: #f16e77; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video-layer, .background-video-scene > .hero-motion-toggle { display: none !important; }
  .hero::after { opacity: 1 !important; transition: none; }
}