/* HBO Intro - Scoped styles to avoid conflicts */

/* Video layer */
#hbo-intro-video-container {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

#hbo-intro-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ring layer (behind content) */
#hbo-intro-ring-container {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 1s ease-out;
  pointer-events: none;
}

#hbo-intro-ring-container img {
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
}

/* Visible states */
#hbo-intro-ring-container.show {
  opacity: 1;
}

/* Video fade out */
#hbo-intro-video-container.fade-out {
  animation: hboIntroFadeOut 1.5s ease-out forwards;
}

@keyframes hboIntroFadeOut {
  to { opacity: 0; }
}

/* Ring persists as background */
#hbo-intro-ring-container.background {
  position: absolute;
  z-index: 0;
  opacity: 1;
}

/* Keep hero visible for intro video, hide only hero content initially */
.cs-hero-cinematic .hero-cinematic-content {
  opacity: 0;
  transition: opacity 1s ease-out;
}

.cs-hero-cinematic.hbo-intro-visible .hero-cinematic-content {
  opacity: 1;
}

/* Responsive */
@media (min-width: 1025px) {
  #hbo-intro-video-container,
  #hbo-intro-ring-container {
    inset: 0;
    -webkit-clip-path: inset(var(--hbo-intro-nav-offset, var(--nav-height, 68px)) 0 0 0);
    clip-path: inset(var(--hbo-intro-nav-offset, var(--nav-height, 68px)) 0 0 0);
  }
}