/* Layer 4: Banner Layer */
/* Uses scroll-snap for moving, same technique as thumbnails */

[data-layer="hero"] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: var(--z-banner);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  pointer-events: none;
  scroll-padding-top: 0;
}

/* Hero layers use the same track-based scroll pattern as thumbnails.
   Each layer has sections that can be scrolled to via offsetTop positioning. */

/* Hide scrollbar */
[data-layer="hero"]::-webkit-scrollbar {
  display: none;
}

/* Banner track - scrollable content */
.banner-track {
  position: relative;
  padding-top: 0;
  display: flex;
  flex-direction: column;
}

/* Banner sections - each section is a scroll target with offsetTop positioning */
/* Section 0 (hero): offsetTop = 0 - hero fully visible */
/* Section 1 (under-nav): offsetTop = heroHeight - navbarHeight - hero bottom aligned with navbar */
/* Section 2 (hidden): offsetTop = 100vh - hero completely off-screen */

.banner-section {
  scroll-snap-align: start;
}

/* Hero section: Height set by JS at runtime via --hero-offset CSS variable.
   JS calculates: heroOffset = (100vh - navbarBottom) - navbarBottom.
   Hero bottom is positioned at navbarHeight from screen bottom.
   Fallback to 60vh if CSS variable not set. */
.banner-section-hero {
  height: var(--hero-offset, 60vh);
  overflow: visible;
}

/* Under-nav section: spacer between hero and hidden positions */
.banner-section-under-nav {
  min-height: 40vh;
}

/* Hidden section: scrolling here hides hero completely */
.banner-section-hidden {
  min-height: 100vh;
}

.banner-container {
  position: relative;
  width: 100%;
  height: var(--hero-height, 56.25vw);
  display: flex;
  align-items: flex-start;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Position hero bottom at navbar height from screen bottom.
     --hero-translate-y is calculated at runtime by ViewportConfig.js
     and set as a CSS variable by AppController.js */
  transform: translateY(var(--hero-translate-y, -15%));
  opacity: 1;
  transition: opacity var(--transition-slow);
}

.banner-image.fade-out {
  opacity: 0;
}

/* Fade entire hero layer when trailer plays */
[data-layer="hero"].hero-faded {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
}

/* Crossfade support: two stacked images for smooth transitions */
.banner-image-current,
.banner-image-next {
  position: absolute;
  top: 0;
  left: 0;
}

.banner-image-current {
  opacity: 0;
  z-index: 1;
}

/* First render: fade in once image is loaded in DOM */
.banner-image-current.first-render-visible {
  opacity: 1;
}

.banner-image-next {
  opacity: 0;
  z-index: 0;
}

/* During crossfade transition */
.banner-image-current.crossfade-out {
  opacity: 0;
}

.banner-image-next.crossfade-in {
  opacity: 1;
}

.banner-carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

.banner-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.banner-slide.active {
  opacity: 1;
}

/* Playlist mode: use contain to prevent stretching playlist thumbnails */
/* Playlists only have square/16:9 thumbnails, not wide banner images */
[data-layer="hero"][data-entity-type="playlist"] .banner-image {
  object-fit: contain;
  background-color: #000;
}

/* Screensaver mode: full viewport banner without offset, transform, or scroll */
[data-layer="hero"][data-screensaver="true"] {
  overflow: hidden;
}

[data-layer="hero"][data-screensaver="true"] .banner-section-hero {
  height: 100vh;
}

[data-layer="hero"][data-screensaver="true"] .banner-container {
  height: 100vh;
}

[data-layer="hero"][data-screensaver="true"] .banner-image {
  transform: none;
  object-position: center center;
}

/* Hide extra sections in screensaver mode to prevent scroll gaps */
[data-layer="hero"][data-screensaver="true"] .banner-section-under-nav,
[data-layer="hero"][data-screensaver="true"] .banner-section-hidden {
  display: none;
}

/* ============================================
   Carousel Indicators (merged from layer-carousel.css)
   ============================================ */

/* Carousel indicators container - positioned within banner-container so they scroll with the banner */
[data-layer="hero"] .carousel-indicators {
  position: absolute;
  right: var(--gutter);
  bottom: calc(100vh - 70vh);  /* Positioned at 70% viewport height from top (30vh from bottom of hero) */
  z-index: var(--z-carousel);
  display: flex;
  align-items: center;
  gap: 0.741vh;            /* 8px at 1080p */
  padding: 0.741vh 0.833vw; /* 8px vertical at 1080p, 16px horizontal at 1920px */
  background: rgba(0, 0, 0, 0.4);
  border-radius: 999px;
  backdrop-filter: blur(0.417vw); /* 8px at 1920px */
  pointer-events: auto;
  transition: transform var(--transition-slow);
}

/* Override global .focusable focus ring for carousel indicators */
[data-layer="hero"] .carousel-indicators.focusable:focus,
[data-layer="hero"] .carousel-indicators.focusable.focused {
  outline: none;
  box-shadow: none;
}

[data-layer="hero"] .carousel-indicator.focusable:focus,
[data-layer="hero"] .carousel-indicator.focusable.focused {
  outline: none;
  box-shadow: none;
}

/* Change pill background when carousel is the active navigation layer */
[data-layer="hero"] .carousel-indicators.nav-active {
  background: rgba(0, 0, 0, 0.6);
}

.carousel-indicator {
  width: 1.204vh;  /* 13px at 1080p */
  height: 1.204vh; /* 13px at 1080p */
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: transform var(--transition-fast), background-color var(--transition-fast);
  border: none;
  padding: 0;
}

.carousel-indicator.active {
  background: rgba(255, 255, 255, 0.95);
}

.carousel-indicator.focused {
  outline: none;
  transform: scale(1.2);
  background: rgba(255, 255, 255, 1);
}

.carousel-indicator:hover {
  background: rgba(255, 255, 255, 0.7);
}

/* Hide carousel indicators when there's only 1 item (e.g., channel screen) */
.carousel-indicator:only-child {
  display: none;
}

/* Hide the entire indicators container when there's only 1 item */
.carousel-indicators:has(.carousel-indicator:only-child) {
  display: none;
}