/* === Single Background Poster === */
section.hero#home{
  position:relative;
  min-height:88vh;
  overflow:hidden;
}

/* Hide any old hero-slider if it still exists */
section.hero#home > .hero-slider{ display:none !important; }

/* Single background image wall - Fixed background (stays in place on scroll) */
section.hero#home .poster-wall{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image: url('https://img.optivexiptv.com/hero/movie-poster-collage.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Fixed background attachment - image stays fixed while element scrolls */
  background-attachment: fixed;
  /* Hardware acceleration for smooth performance */
  transform: translateZ(0);
  backface-visibility: hidden;
  /* Prevent any JavaScript transforms */
  will-change: auto;
}

/* Ensure poster wall only shows within hero section */
section.hero#home{
  position:relative;
  min-height:88vh;
  overflow:hidden;
  z-index:0;
}

/* Fallback for mobile devices that don't support background-attachment: fixed */
@media (max-width: 768px) {
  section.hero#home .poster-wall{
    background-attachment: scroll;
    position:absolute;
  }
}

/* Hide tiles grid - no longer needed */
section.hero#home .poster-wall .tiles{
  display:none !important;
}

/* Hide individual poster images */
section.hero#home .poster-wall img{
  display:none !important;
}

/* contrast vignette */
section.hero#home .poster-wall .wall-vignette{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.42) 70%),
    linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.72) 85%);
  pointer-events:none;
}

/* Keep sections above */
section[id]{ position:relative; isolation:isolate; z-index:0; }
section[id]>*{ position:relative; z-index:1; }