/* =====================================================================
   ZAPFLIX — CINEMATIC HERO (homepage billboard)
   Wide text-free backdrop, title logo, meta row, Top-10 kicker, animated
   progress dashes. Same palette as the liquid-glass theme: black canvas,
   ZapFlix red accent, white/glass pill buttons. Loaded last on index.php.
   ===================================================================== */

.zf-hero {
  --zf-hero-bg: var(--zfx-bg, #050506);
  --zf-hero-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --zf-hero-gutter: calc(4% + env(safe-area-inset-left, 0px));
  --zf-hero-overlap: clamp(48px, 6.5vw, 128px);
  /* Width of the copy block; the progress dashes share the same row and use the rest. */
  --zf-hero-copy: min(42%, 600px);
  position: relative;
  height: min(94vh, 1080px);
  min-height: 600px;
  margin-bottom: calc(-1 * var(--zf-hero-overlap));
  /* A sideways phone keeps the page out of the notch (body padding, zapflix-nav.css): the
     artwork still runs edge to edge and only the copy moves in. env() is 0 elsewhere. */
  margin-left: calc(-1 * env(safe-area-inset-left, 0px));
  margin-right: calc(-1 * env(safe-area-inset-right, 0px));
  overflow: hidden;
  isolation: isolate;
  background: var(--zf-hero-bg);
  outline: none;
  touch-action: pan-y;
}

/* ---------- slides & crossfade ---------- */
.zf-hero .billboard-slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.9s var(--zf-hero-ease), visibility 0s linear 0.9s;
}
.zf-hero .billboard-slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
  transition: opacity 0.9s var(--zf-hero-ease), visibility 0s linear 0s;
}
/* The 19 slides that are not on screen skip style/layout/paint entirely (they used to be
   laid out on every page load). app.js keeps .is-leaving on the outgoing slide for its
   0.9s fade, so the crossfade is unchanged. */
.zf-hero .billboard-slide:not(.active):not(.is-leaving) { content-visibility: hidden; }

/* ---------- artwork ---------- */
.zf-hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0b0b0d;
}
.zf-hero-media picture { display: contents; }
.zf-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  opacity: 0;
  transform: scale(1.06);
  transform-origin: 60% 40%;
  transition: opacity 0.9s var(--zf-hero-ease);
  backface-visibility: hidden;
  image-rendering: auto;
}
.zf-hero-img.is-loaded { opacity: 1; }
/* Slow "Ken Burns" settle while a slide is on screen — compositor-only. */
.zf-hero .billboard-slide.active .zf-hero-img {
  animation: zfHeroSettle 11s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
@keyframes zfHeroSettle {
  from { transform: scale(1.08); }
  to   { transform: scale(1.0); }
}

/* Portrait-only titles: blurred poster wash + the sharp poster as a framed card. */
.zf-hero-poster {
  position: absolute;
  top: 44%;
  inset-inline-end: 9%;
  height: min(60%, 600px);
  aspect-ratio: 2 / 3;
  width: auto;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.4);
  transform: translateY(-46%) scale(0.97);
  opacity: 0;
  transition: opacity 0.9s var(--zf-hero-ease), transform 1.1s var(--zf-hero-ease);
  z-index: 1;
}
.zf-hero-poster.is-loaded { opacity: 1; }
.zf-hero .billboard-slide.active .zf-hero-poster.is-loaded { transform: translateY(-50%) scale(1); }
@media (min-width: 701px), (orientation: landscape) and (max-height: 500px) {
  .zf-hero-media.is-portrait .zf-hero-img {
    filter: blur(34px) saturate(1.25) brightness(0.55);
    transform: scale(1.25);
    animation: none !important;
  }
}

/* ---------- scrims: left reading side + bottom fade into the page ---------- */
.zf-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 5, 6, 0.9) 0%, rgba(5, 5, 6, 0.62) 26%, rgba(5, 5, 6, 0.18) 52%, rgba(5, 5, 6, 0) 68%),
    linear-gradient(0deg, var(--zf-hero-bg) 0%, rgba(5, 5, 6, 0.78) 12%, rgba(5, 5, 6, 0.25) 30%, rgba(5, 5, 6, 0) 44%),
    linear-gradient(180deg, rgba(5, 5, 6, 0.6) 0%, rgba(5, 5, 6, 0) 16%);
}
html[dir="rtl"] .zf-hero-scrim {
  background:
    linear-gradient(270deg, rgba(5, 5, 6, 0.9) 0%, rgba(5, 5, 6, 0.62) 26%, rgba(5, 5, 6, 0.18) 52%, rgba(5, 5, 6, 0) 68%),
    linear-gradient(0deg, var(--zf-hero-bg) 0%, rgba(5, 5, 6, 0.78) 12%, rgba(5, 5, 6, 0.25) 30%, rgba(5, 5, 6, 0) 44%),
    linear-gradient(180deg, rgba(5, 5, 6, 0.6) 0%, rgba(5, 5, 6, 0) 16%);
}

/* ---------- copy block ---------- */
.zf-hero-content {
  position: absolute;
  z-index: 3;
  inset-inline-start: var(--zf-hero-gutter);
  bottom: calc(var(--zf-hero-overlap) + clamp(56px, 7vh, 96px));
  width: var(--zf-hero-copy);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
}

.zf-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.zf-hero-kicker-top {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: linear-gradient(160deg, var(--zfx-red-bright, #ff2c36), var(--zfx-red-deep, #b00610));
  box-shadow: 0 4px 14px rgba(229, 9, 20, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  font-size: 7.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  text-shadow: none;
}
.zf-hero-kicker-top b { font-size: 13px; font-weight: 900; letter-spacing: -0.02em; margin-top: 1px; }

.zf-hero-title {
  margin: 0 0 18px;
  font-size: clamp(36px, 4.4vw, 76px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: #fff;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.55);
  text-wrap: balance;
  max-width: 100%;
}
.zf-hero-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 460px);
  max-height: clamp(96px, 19vh, 200px);
  object-fit: contain;
  object-position: left bottom;
  filter: drop-shadow(0 6px 26px rgba(0, 0, 0, 0.55));
  opacity: 0;
  transition: opacity 0.6s var(--zf-hero-ease);
}
html[dir="rtl"] .zf-hero-logo { object-position: right bottom; }
.zf-hero-logo.is-loaded { opacity: 1; }
/* Text title is kept for SEO/screen readers; visible only when no logo art exists. */
.zf-hero-title.has-logo .zf-hero-title-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.zf-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 6px;
  margin-bottom: 14px;
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.zf-hero-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.zf-hero-meta > span + span::before {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  margin: 0 11px;
}
.zf-hero-vote svg { color: var(--zfx-red, #e50914); filter: drop-shadow(0 0 6px rgba(229, 9, 20, 0.5)); }
.zf-hero-new {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(229, 9, 20, 0.22);
  box-shadow: inset 0 0 0 1px rgba(229, 9, 20, 0.6);
}
.zf-hero-meta > .zf-hero-new::before { display: none; }
.zf-hero-meta > .zf-hero-new { margin-inline-start: 12px; }

.zf-hero-synopsis {
  margin: 0 0 26px;
  max-width: 52ch;
  font-size: clamp(14px, 1.05vw, 17.5px);
  line-height: 1.55;
  font-weight: 450;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- buttons ---------- */
.zf-hero .billboard-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  direction: inherit;
  justify-content: flex-start;
}
.zf-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 30px 0 24px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.28s var(--zf-hero-ease), background-color 0.28s var(--zf-hero-ease),
    box-shadow 0.28s var(--zf-hero-ease), border-color 0.28s var(--zf-hero-ease);
}
html[dir="rtl"] .zf-hero-btn { padding: 0 24px 0 30px; }
.zf-hero-btn svg { flex: none; }
.zf-hero-btn--play {
  background: #fff;
  color: #0a0a0b;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}
.zf-hero-btn--info {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 30px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
}
@media (hover: hover) and (pointer: fine) {
  .zf-hero-btn--play:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 0 4px rgba(255, 255, 255, 0.12); }
  .zf-hero-btn--info:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36), 0 14px 36px rgba(0, 0, 0, 0.4); }
}
.zf-hero-btn:active { transform: scale(0.96); transition-duration: 0.12s; }
.zf-hero-btn:focus-visible,
.zf-hero-dot:focus-visible,
.zf-hero-arrow:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.9);
  outline-offset: 3px;
}

/* ---------- staggered entrance of the active slide's copy ---------- */
.zf-hero .billboard-slide .zf-hero-content > * {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}
.zf-hero .billboard-slide.active .zf-hero-content > * {
  animation: zfHeroRise 0.75s var(--zf-hero-ease) both;
}
.zf-hero .billboard-slide.active .zf-hero-content > :nth-child(1) { animation-delay: 0.12s; }
.zf-hero .billboard-slide.active .zf-hero-content > :nth-child(2) { animation-delay: 0.2s; }
.zf-hero .billboard-slide.active .zf-hero-content > :nth-child(3) { animation-delay: 0.28s; }
.zf-hero .billboard-slide.active .zf-hero-content > :nth-child(4) { animation-delay: 0.36s; }
.zf-hero .billboard-slide.active .zf-hero-content > :nth-child(5) { animation-delay: 0.44s; }
@keyframes zfHeroRise {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ---------- progress dashes ---------- */
.zf-hero-dots {
  position: absolute;
  z-index: 4;
  inset-inline-end: var(--zf-hero-gutter);
  bottom: calc(var(--zf-hero-overlap) + clamp(60px, 7.5vh, 100px));
  display: flex;
  align-items: center;
  gap: clamp(3px, 0.45vw, 6px);
  /* Never reach into the buttons: on a narrow window (half a screen) the 20 dashes
     shrink to the space beside the copy block instead of running across it. */
  max-width: calc(100% - 2 * var(--zf-hero-gutter) - var(--zf-hero-copy) - 40px);
}
.zf-hero-dot {
  position: relative;
  flex: 0 1 auto;
  width: 18px;
  min-width: 5px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: width 0.45s var(--zf-hero-ease);
}
.zf-hero-dot::before,
.zf-hero-dot i {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 3px;
}
.zf-hero-dot::before { background: rgba(255, 255, 255, 0.28); transition: background 0.3s; }
.zf-hero-dot:hover::before { background: rgba(255, 255, 255, 0.6); }
/* The fill grows with transform (compositor only). Animating its width re-ran layout
   for the whole page on every frame of every slide. */
.zf-hero-dot i { background: #fff; transform: scaleX(0); transform-origin: left center; }
html[dir="rtl"] .zf-hero-dot i { transform-origin: right center; }
.zf-hero-dot.active { width: 44px; }
.zf-hero-dot.active::before { background: rgba(255, 255, 255, 0.3); }
.zf-hero-dot.active i {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.45);
  animation: zfHeroProgress var(--zf-hero-interval, 8s) linear both;
}
.zf-hero.is-paused .zf-hero-dot.active i,
.zf-hero.is-static .zf-hero-dot.active i { animation-play-state: paused; }
@keyframes zfHeroProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- edge arrows (desktop, revealed on hover) ---------- */
.zf-hero-arrow {
  position: absolute;
  z-index: 4;
  top: 42%;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(10, 10, 12, 0.38);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.3s var(--zf-hero-ease), transform 0.3s var(--zf-hero-ease), background 0.25s;
}
.zf-hero-arrow--prev { inset-inline-start: 1.2%; }
.zf-hero-arrow--next { inset-inline-end: 1.2%; }
html[dir="rtl"] .zf-hero-arrow svg { transform: scaleX(-1); }
.zf-hero:hover .zf-hero-arrow,
.zf-hero:focus-within .zf-hero-arrow { opacity: 1; transform: scale(1); }
.zf-hero-arrow:hover { background: rgba(229, 9, 20, 0.85); box-shadow: 0 10px 30px rgba(229, 9, 20, 0.35); }
@media (hover: none) { .zf-hero-arrow { display: none; } }

/* ---------- large screens ---------- */
@media (min-width: 1800px) {
  .zf-hero { --zf-hero-copy: min(38%, 680px); }
  .zf-hero-logo { max-width: min(100%, 540px); }
}

/* ---------- tablet ---------- */
@media (max-width: 1100px) and (min-width: 701px) {
  .zf-hero { height: min(78vh, 760px); min-height: 520px; --zf-hero-copy: min(58%, 560px); }
  .zf-hero-poster { inset-inline-end: 5%; height: 56%; }
}

/* ---------- short screens: a phone turned sideways ----------
   The hero is one screen tall and its copy shrinks so it never runs up under the header
   (it used to start behind the logo on an 852×393 phone). */
@media (orientation: landscape) and (max-height: 500px) {
  .zf-hero {
    --zf-hero-overlap: 24px;
    --zf-hero-copy: min(64%, 560px);
    height: 100svh;
    min-height: 330px;
    max-height: 520px;
  }
  /* --zf-hero-tab: the phone layer's bottom tab bar (zf-mobile.css), 0 without it */
  .zf-hero-content { bottom: calc(var(--zf-hero-overlap) + 14px + var(--zf-hero-tab, 0px)); }
  /* the copy is wider here, so the dashes get a fixed share of the far side and shrink */
  .zf-hero-dots { bottom: calc(var(--zf-hero-overlap) + 26px + var(--zf-hero-tab, 0px)); max-width: min(26%, 240px); gap: 3px; }
  .zf-hero-dot { width: 10px; min-width: 3px; }
  .zf-hero-dot.active { width: 22px; }
  .zf-hero-kicker { gap: 8px; margin-bottom: 8px; font-size: 12.5px; }
  .zf-hero-kicker-top { width: 26px; height: 26px; font-size: 6.5px; }
  .zf-hero-kicker-top b { font-size: 11.5px; }
  .zf-hero-title { margin-bottom: 8px; font-size: clamp(24px, 7vh, 34px); }
  .zf-hero-logo { max-width: min(100%, 300px); max-height: min(17vh, 80px); }
  /* one line: the badge leads, a long genre list is cut at the end instead of wrapping */
  .zf-hero-meta {
    align-self: stretch;
    flex-wrap: nowrap;
    overflow: hidden;
    margin-bottom: 8px;
    font-size: 13px;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  html[dir="rtl"] .zf-hero-meta {
    -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(270deg, #000 calc(100% - 28px), transparent);
  }
  .zf-hero-meta > span { flex: none; }
  .zf-hero-meta > .zf-hero-new { order: -1; margin-inline: 0 12px; }
  .zf-hero-synopsis { display: none; }
  .zf-hero .billboard-buttons { flex-wrap: nowrap; gap: 10px; }
  .zf-hero-btn { min-width: 0; height: 42px; padding: 0 20px 0 16px; font-size: 14.5px; gap: 8px; }
  html[dir="rtl"] .zf-hero-btn { padding: 0 16px 0 20px; }
  .zf-hero-btn span { overflow: hidden; text-overflow: ellipsis; }
  .zf-hero-poster { height: 62%; }
}

/* ---------- phones held upright: portrait poster art, centered copy ---------- */
@media (max-width: 700px) and (orientation: portrait), (max-width: 700px) and (min-height: 501px) {
  .zf-hero {
    --zf-hero-overlap: 18px;
    height: min(84svh, 760px);
    min-height: 500px;
  }
  .zf-hero-img { object-position: center top; }
  .zf-hero .billboard-slide.active .zf-hero-img { animation-duration: 14s; }
  .zf-hero-poster { display: none; }
  .zf-hero-scrim,
  html[dir="rtl"] .zf-hero-scrim {
    background:
      linear-gradient(0deg, var(--zf-hero-bg) 0%, rgba(5, 5, 6, 0.9) 18%, rgba(5, 5, 6, 0.45) 40%, rgba(5, 5, 6, 0) 62%),
      linear-gradient(180deg, rgba(5, 5, 6, 0.7) 0%, rgba(5, 5, 6, 0) 22%);
  }
  .zf-hero-content {
    inset-inline: 5%;
    width: auto;
    bottom: calc(var(--zf-hero-overlap) + 34px);
    align-items: center;
    text-align: center;
  }
  .zf-hero-kicker { font-size: 13px; margin-bottom: 12px; }
  /* The title leads the card's copy, above the Top 10 line: the title logo when TMDB has one,
     otherwise the name itself (two lines at most). Many posters carry no readable title. */
  .zf-hero-title { order: -1; font-size: clamp(26px, 7.4vw, 34px); line-height: 1.08; margin-bottom: 10px; }
  html[dir="rtl"] .zf-hero-title { letter-spacing: 0; line-height: 1.25; }
  .zf-hero-title-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.7);
  }
  .zf-hero-logo { max-width: 70%; max-height: 84px; margin: 0 auto; object-position: center bottom !important; }
  .zf-hero-meta { justify-content: center; font-size: 13px; margin-bottom: 16px; }
  .zf-hero-meta > span + span::before { margin: 0 8px; }
  .zf-hero-synopsis { display: none; }
  .zf-hero .billboard-buttons { width: 100%; flex-wrap: nowrap; gap: 10px; justify-content: center; }
  .zf-hero-btn { flex: 1 1 0; min-width: 0; height: 48px; padding: 0 14px !important; font-size: 15px; gap: 8px; }
  .zf-hero-btn span { overflow: hidden; text-overflow: ellipsis; }
  .zf-hero-dots {
    inset-inline: 0;
    bottom: calc(var(--zf-hero-overlap) + 8px);
    justify-content: center;
    gap: 4px;
    max-width: none;
  }
  .zf-hero-dot { width: 10px; }
  .zf-hero-dot.active { width: 28px; }
}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .zf-hero .billboard-slide,
  .zf-hero .billboard-slide.active { transition-duration: 0.01s; }
  .zf-hero .billboard-slide.active .zf-hero-img,
  .zf-hero .billboard-slide.active .zf-hero-content > * { animation: none !important; opacity: 1; transform: none; }
  .zf-hero-img { transform: none; }
  .zf-hero .billboard-slide .zf-hero-content > * { opacity: 1; transform: none; }
}

/* Only the slide on screen pays for the glass blur of its buttons (20 slides, CLAUDE.md 5.57). */
.billboard-slide:not(.active) .zf-hero-btn { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Not released yet (release gate, CLAUDE.md 5.93): the date in place of the play button, not clickable. */
.zf-hero-btn--soon {
  cursor: default;
  background: rgba(229, 9, 20, 0.16);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(229, 9, 20, 0.55);
}