/* EXP 21.0 — Homepage Performance Optimization */

html{
  content-visibility:auto;
}

body{
  font-display:swap;
}

.hero-v5{
  background:#120015;
  contain:layout paint style;
}

.hero-v5-video{
  background:#120015;
}

img{
  height:auto;
}

.reveal,
.music-section,
.about-section,
.sweet-vault-section,
.downloads-section,
.magazine-section,
.merch-section,
.gallery-section,
.contact-section,
.exp195-popstar-section{
  content-visibility:auto;
  contain-intrinsic-size:900px;
}

@media(max-width:760px){
  .ambient,
  .shooting-stars,
  .twinkle-stars{
    opacity:.45!important;
  }

  .sparkles{
    display:none!important;
  }

  .hero-v5-video{
    filter:none!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .shooting-stars,
  .twinkle-stars,
  .ambient,
  .sparkles{
    display:none!important;
  }
}

/* MOBILE RENDERING RECOVERY
   Some Chromium/Samsung mobile builds can leave content-visibility:auto
   sections unpainted even though their DOM and controls are interactive.
   Keep the desktop optimization, but render sections normally on phones. */
@media(max-width:760px){
  html{
    content-visibility:visible !important;
  }

  .reveal,
  .music-section,
  .about-section,
  .sweet-vault-section,
  .downloads-section,
  .magazine-section,
  .merch-section,
  .gallery-section,
  .contact-section,
  .exp195-popstar-section{
    content-visibility:visible !important;
    contain:initial !important;
    contain-intrinsic-size:auto !important;
  }

  /* Aesthetics / Visual World is a gallery-section.reveal. Its older
     reveal animation can leave it transparent on mobile if no observer
     adds .in-view, even though the section itself is present. */
  .gallery-section.reveal,
  #gallery.gallery-section.reveal{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }

  #gallery .gallery-grid,
  #gallery .gallery-item,
  #gallery .gallery-item img{
    visibility:visible !important;
    opacity:1 !important;
  }
}