/* V120 — one-image cinematic heroes, compact arrow navigation and safe render optimisations. */

/* Historical foreground copies are disabled even if an old cached template is served. */
.home-showcase-artwork,
.home-showcase-feather,
.release-cinematic-artwork,
.release-cinematic-feather,
.home-showcase-rail {
  display: none !important;
}

/* Homepage: one full-bleed image. It remains recognisable, but is soft enough
   that poster lettering and faces do not compete with the interface copy. */
.home-showcase-slide.is-poster-fallback .home-showcase-backdrop {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: .68 !important;
  background-position: center 30% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  filter: blur(8px) saturate(1.01) contrast(1.045) !important;
  transform: scale(1.075) !important;
}

.home-showcase-slide.is-poster-fallback.is-active .home-showcase-backdrop {
  transform: scale(1.075) !important;
}

.home-showcase-slide.is-poster-fallback::before {
  background:
    linear-gradient(90deg,
      rgba(3, 8, 16, .99) 0%,
      rgba(3, 9, 18, .94) 31%,
      rgba(3, 9, 18, .69) 51%,
      rgba(3, 9, 18, .34) 71%,
      rgba(3, 8, 16, .14) 100%),
    linear-gradient(0deg, rgba(3, 8, 16, .88) 0%, transparent 62%) !important;
}

.home-showcase-content {
  width: min(780px, 72%) !important;
  max-width: 780px !important;
}

.home-showcase-controls {
  position: absolute;
  z-index: 5;
  right: clamp(24px, 3.5vw, 52px);
  bottom: clamp(22px, 3vw, 34px);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px;
  border: 1px solid rgba(108, 184, 238, .18);
  border-radius: 999px;
  background: rgba(4, 12, 22, .68);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .25);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.home-showcase-arrow {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(117, 194, 245, .16);
  border-radius: 50%;
  background: rgba(14, 31, 49, .86);
  color: #eaf7ff;
  cursor: pointer;
  transition: transform .22s cubic-bezier(.2, .75, .2, 1), background-color .22s ease, border-color .22s ease;
}

.home-showcase-arrow:hover,
.home-showcase-arrow:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(66, 177, 247, .6);
  background: linear-gradient(135deg, #208df4, #35baf2);
  outline: none;
}

.home-showcase-counter {
  min-width: 56px;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  color: #72859a;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.home-showcase-counter strong {
  color: #fff;
  font-size: 15px;
}

/* Release hero: retain the real poster on the left and only one softly cropped
   decorative copy behind the content. The previous sharp second character is gone. */
.release-cinematic-hero.is-poster-fallback .release-cinematic-backdrop {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: .64 !important;
  background-position: center 24% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  filter: blur(8px) saturate(.98) contrast(1.045) !important;
  transform: scale(1.075) !important;
}

.release-page .release-cinematic-hero.is-poster-fallback::before {
  background:
    linear-gradient(90deg,
      rgba(3, 9, 17, .98) 0%,
      rgba(5, 12, 22, .91) 36%,
      rgba(5, 12, 22, .63) 56%,
      rgba(5, 12, 22, .31) 76%,
      rgba(3, 9, 17, .16) 100%),
    linear-gradient(0deg, rgba(3, 9, 17, .91) 0%, transparent 67%) !important;
}

/* Recommendations: no decorative divider. The heading begins on the same
   visual rail as the first poster after the carousel's previous button. */
.release-page .recommendations-heading,
.release-page .recommendations-section > .recommendations-heading {
  margin: 0 !important;
  padding: 0 0 13px 40px !important;
  border: 0 !important;
  border-bottom: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.release-page .recommendations-heading h2 {
  margin: 0 !important;
  color: #f5f9ff !important;
  font-size: clamp(22px, 1.8vw, 27px) !important;
  line-height: 1.12 !important;
  letter-spacing: -.035em !important;
}

.release-page .recommendations-carousel {
  margin-top: 0 !important;
}

/* Chromium can skip layout/paint work for sections well below the viewport.
   Intrinsic sizes keep scrolling stable while those sections are skipped. */
@supports (content-visibility: auto) {
  .new-episodes-section,
  .schedule-section,
  .releases-section,
  .home-seo-intro,
  .site-ad-section,
  .release-page .recommendations-section,
  .release-page .release-community-section-v87 {
    content-visibility: auto;
    contain-intrinsic-size: auto 560px;
  }
}

@media (max-width: 680px) {
  .home-showcase-slide.is-poster-fallback .home-showcase-backdrop,
  .release-cinematic-hero.is-poster-fallback .release-cinematic-backdrop {
    filter: blur(5.5px) saturate(1) contrast(1.04) !important;
    transform: scale(1.06) !important;
  }

  .home-showcase-slide.is-poster-fallback.is-active .home-showcase-backdrop {
    transform: scale(1.06) !important;
  }

  .home-showcase-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  .home-showcase-controls {
    right: 16px;
    bottom: 18px;
    padding: 5px;
  }

  .home-showcase-arrow {
    width: 38px;
    height: 38px;
  }

  .home-showcase-counter { min-width: 48px; }

  .release-page .recommendations-heading,
  .release-page .recommendations-section > .recommendations-heading {
    padding: 0 2px 11px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-showcase-arrow { transition: none; }
}
