/* 058 — Hero scroll-scrub definitivo + otimização desktop/mobile
   Objetivo: o vídeo do Hero é controlado pelo scroll; ao chegar no último frame,
   a página continua normalmente para a faixa rotativa, sem vão preto. */

:root{
  --rodagem-vh: 100svh;
}

html{
  scroll-behavior: auto !important;
  overflow-x: clip !important;
}

body{
  overflow-x: clip !important;
  text-rendering: optimizeLegibility;
}

img, video, iframe{
  max-width: 100%;
}

img{
  content-visibility: auto;
}

@media (min-width: 769px){
  body main > .hero-stage,
  body main > .hero-stage.hero-stage--scrub-locked,
  body main > .hero-stage.hero-stage--scrub-fixed,
  body main > .hero-stage.has-scroll-video{
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: var(--rodagem-hero-stage-height, 220svh) !important;
    min-height: var(--rodagem-hero-stage-height, 220svh) !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    contain: layout paint !important;
    overflow-anchor: none !important;
  }

  body main > .hero-stage > .hero,
  body main > .hero-stage.hero-stage--scrub-locked > .hero,
  body main > .hero-stage.has-scroll-video > .hero{
    display: block !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #050705 !important;
    transform: translateZ(0) !important;
    will-change: transform !important;
    z-index: 2 !important;
    isolation: isolate !important;
    border-radius: 0 !important;
    clip-path: none !important;
  }

  body main > .hero-stage > .hero .hero-art,
  body main > .hero-stage > .hero .hero-scroll-video,
  body main > .hero-stage > .hero.hero--scroll-video .hero-scroll-video,
  body main > .hero-stage > .hero.hero--scroll-video.hero-has-scrolled .hero-scroll-video{
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transform: translateZ(0) !important;
    filter: none !important;
    pointer-events: none !important;
  }

  body main > .hero-stage > .hero .hero-art{
    opacity: 1 !important;
    z-index: 0 !important;
  }

  body main > .hero-stage > .hero .hero-scroll-video{
    opacity: 0 !important;
    z-index: 1 !important;
    background: #050705 !important;
  }

  body main > .hero-stage > .hero .hero-scroll-video.is-video-ready{
    opacity: 1 !important;
  }

  body main > .hero-stage > .hero.hero--scroll-video:has(.hero-scroll-video.is-video-ready) .hero-art{
    opacity: 0 !important;
  }

  body main > .hero-stage > .hero::before,
  body main > .hero-stage > .hero::after,
  body main > .hero-stage::before,
  body main > .hero-stage::after{
    display: none !important;
    content: none !important;
  }

  body main > .hero-stage > .hero > *:not(.hero-art):not(.hero-scroll-video){
    position: relative !important;
    z-index: 3 !important;
  }

  body main > .hero-stage + .marquee,
  body main > .hero-stage.hero-stage--scrub-locked + .marquee,
  body main > .hero-stage.has-scroll-video + .marquee{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 20 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    transform: translateZ(0) !important;
    clear: both !important;
    contain: layout paint !important;
  }

  body main > .hero-stage + .marquee + .section,
  body main > .hero-stage + .marquee + #music{
    margin-top: 0 !important;
  }

  .reveal,
  .gallery-card,
  .video-card,
  .social-card,
  .music-card,
  .event-row{
    backface-visibility: hidden;
  }
}

@media (max-width: 768px){
  html, body{
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body main > .hero-stage{
    overflow: hidden !important;
  }

  .hero-scroll-video{
    transform: none !important;
    will-change: auto !important;
  }

  .hero-gradient-glow,
  .hero-light-sweep,
  .hero-grain,
  .cursor-ring,
  .cursor-dot{
    display: none !important;
  }

  .reveal,
  .gallery-card,
  .video-card,
  .social-card,
  .music-card,
  .event-row{
    transition-duration: .25s !important;
    animation-duration: .25s !important;
  }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}