/**
 * StreamVerse — Movie Showcase (Hero full-bleed background)
 *
 * Replaces the earlier boxed/framed showcase (right-column card with a
 * border/glass frame) with the active movie's artwork as the Hero
 * section's own full-bleed background — no visible frame, border, or
 * container around the image anywhere.
 *
 * Layering (all inside .hero, which is position:relative + overflow:hidden):
 *   .hero__bg           position:absolute, inset:0, z-index:0 — holds
 *                        the two crossfading <img> layers
 *   .hero__bg-image      the images themselves, object-fit:cover
 *   .hero__gradient      position:absolute, inset:0, z-index:1 — dark
 *                        overlay, stronger on the left for text contrast
 *   .hero__inner          position:relative, z-index:2 — text content,
 *                          on top of everything
 *
 * All values are existing tokens; the only non-token values are the
 * gradient's rgba stops (built from --color-bg-base's own RGB) and the
 * min-height, which has no equivalent token (see hero.css comment).
 */

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills the Hero with no empty space, per request */
  /* Crossfade only — opacity, no scale/zoom (avoids aggressive zoom/parallax) */
  transition: opacity var(--duration-transition) var(--ease-standard);
}

.hero__bg-image:not(.is-active) {
  opacity: 0;
}

.hero__bg-image.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg-image {
    transition: none; /* instant swap, no crossfade */
  }
}

/* ------------------------------------------------------------------
 * Gradient overlay — strong on the left (text sits there), lighter on
 * the right (more of the artwork shows through), per request.
 * Built entirely from --color-bg-base (#080A0F) at varying opacity —
 * no new color introduced.
 * ------------------------------------------------------------------ */

.hero__gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Bottom fade-to-page-background — the actual fix for the visible
       seam between Hero and Popular Movies. The existing "to top" layer
       below tops out at 0.55 opacity (tuned for text contrast, not for
       fully dissolving into the next section), so the image was still
       ~45% visible right at the Hero's bottom edge — a hard jump against
       Movies' fully-opaque background right next to it. This layer is
       the one difference: it reaches #080A0F at true 100% (not rgba
       alpha — the exact same solid color the page background already
       is) by the very bottom, confined to roughly the bottom third of
       the Hero (per "affect only the lower part, don't darken the
       whole Hero") and fully transparent above that, so it never
       touches the text content sitting higher up. */
    linear-gradient(
      to top,
      #080A0F 0%,
      rgba(8, 10, 15, 0.88) 8%,
      rgba(8, 10, 15, 0.5) 18%,
      rgba(8, 10, 15, 0) 32%
    ),
    linear-gradient(
      to right,
      rgba(8, 10, 15, 0.92) 0%,
      rgba(8, 10, 15, 0.72) 35%,
      rgba(8, 10, 15, 0.25) 70%,
      rgba(8, 10, 15, 0.05) 100%
    ),
    linear-gradient(
      to top,
      rgba(8, 10, 15, 0.55) 0%,
      rgba(8, 10, 15, 0) 35%
    );
}

/* Mobile/tablet: content stacks directly over the full-width image
   (no separate column to fall back on), so the overlay needs to read
   as one strong, more uniform dark wash rather than a left-to-right
   split, while still letting some artwork show through on the right. */
@media (max-width: 1023.98px) {
  .hero__gradient {
    background:
      /* Same bottom-to-page-background fade as desktop — see the
         comment on the base .hero__gradient rule above. */
      linear-gradient(
        to top,
        #080A0F 0%,
        rgba(8, 10, 15, 0.88) 8%,
        rgba(8, 10, 15, 0.5) 18%,
        rgba(8, 10, 15, 0) 32%
      ),
      linear-gradient(
        to right,
        rgba(8, 10, 15, 0.88) 0%,
        rgba(8, 10, 15, 0.6) 60%,
        rgba(8, 10, 15, 0.3) 100%
      ),
      linear-gradient(
        to top,
        rgba(8, 10, 15, 0.75) 0%,
        rgba(8, 10, 15, 0.15) 55%
      );
  }
}

/* ------------------------------------------------------------------
 * Entrance animation — background fades/scales in as its own group,
 * same timing as the rest of the site's B10-derived pattern
 * ------------------------------------------------------------------ */

.hero__bg,
.hero__gradient {
  opacity: 0;
  transition: opacity 400ms var(--ease-standard);
}

.hero.is-loaded .hero__bg,
.hero.is-loaded .hero__gradient {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg,
  .hero__gradient {
    transition: none;
    opacity: 1;
  }
}