/**
 * StreamVerse — Ambient Neon Glow / Flowing Light Trails
 *
 * A sophisticated animated abstract background — thin flowing curved
 * lines (organic contour waves, like slow-moving cinematic light
 * trails) layered over soft, large, blurred Purple/Cyan atmospheric
 * gradients, sitting behind existing page content.
 *
 * Implementation notes:
 *  - Pure CSS on EXISTING elements only (::before/::after generated
 *    content, and inline SVG as a background-image data URI) — no new
 *    HTML elements anywhere in the document.
 *  - Applied to .movie-carousel AND .sports-carousel — the two large
 *    flat dark surfaces in the current build with real negative space
 *    and no full-bleed artwork of their own already occupying them.
 *    Both sections already use the exact same --color-bg-base token
 *    (confirmed identical computed background-color at runtime), so
 *    this is not a color fix — it's why the two sections originally
 *    read as visually inconsistent despite that: this ambient layer
 *    was added to Movies first, leaving Sports flat and undecorated by
 *    comparison. Adding the identical treatment to Sports fixed THAT
 *    problem, but introduced a second one: each section's own
 *    `overflow: hidden` clipped its glow exactly at that section's own
 *    edge, so there was still a hard, visible seam exactly at the
 *    Movies/Sports boundary — two independently-clipped decorative
 *    layers that happened to share a color, not one continuous
 *    background. Fixed by removing the per-section overflow:hidden
 *    (see movie-carousel.css / sports-carousel.css) so each section's
 *    glow can bleed naturally past its own edge into its transparent
 *    neighbor, with horizontal overflow now contained once, at the
 *    page level (body, in base.css) instead of separately per section.
 *    The Hero's background is the active movie's own photo, at
 *    full opacity, edge-to-edge — adding a competing line/glow layer
 *    there would either be invisible underneath it or, layered above
 *    it, reduce the image's own clarity, which the brief explicitly
 *    rules out. The Header already reads as part of the same
 *    atmosphere for free, via its own backdrop-filter blur picking up
 *    whatever now sits behind it.
 *  - Two independent layers per section (violet / cyan), each its own
 *    ::before or ::after, each combining the SAME SVG line art used on
 *    Movies with its own soft radial-gradient atmosphere in one
 *    `background` stack, so the lines are never a flat vector graphic
 *    sitting on a flat black field — there's always gradient depth
 *    immediately behind them. Reusing the identical line art (not a
 *    new shape) is deliberate: it's what makes the two sections read
 *    as the same background system rather than two similar-but-
 *    different decorations.
 *  - Only `transform` and `opacity` are animated (GPU-compositable,
 *    no layout/paint cost per frame) — the gradient stops, the SVG
 *    itself, and any background-position are never animated.
 *  - Every layer uses its own size, position, direction, AND duration
 *    so nothing drifts in visible lockstep with anything else, in
 *    either section — per the "different speeds and directions"
 *    request. Sports' timings/offsets are deliberately different
 *    numbers from Movies' (not just longer/shorter versions of the
 *    same cycle), so the two sections' motion never reads as a
 *    mechanical copy-paste of each other.
 *  - A single shared, modest `drop-shadow` filter per layer gives the
 *    flowing lines their own soft halo (the "glow around selected
 *    lines" ask) without blurring them into an indistinct blob — this
 *    is intentionally a much smaller blur radius than would be used
 *    for a pure atmospheric glow, since it has to ride along the thin
 *    stroke paths and stay legible as lines.
 *  - prefers-reduced-motion is already handled by the sitewide floor
 *    in base.css (`*, *::before, *::after { animation-duration:
 *    0.001ms !important; ... }`), which applies to this generated
 *    content automatically. That freezes the animation on its first
 *    keyframe rather than removing the layer — the background artwork
 *    itself stays fully intact, only the motion stops, matching the
 *    brief's explicit "keep the visual background itself intact"
 *    requirement without needing a separate override here.
 *  - Applied identically (same technique, mirrored positions, distinct
 *    timing) to BOTH .movie-carousel and .sports-carousel — this is
 *    what actually keeps the page reading as one continuous surface
 *    rather than a sequence of separate dark blocks. The two sections'
 *    background-color was already the exact same --color-bg-base
 *    token before this layer existed; what was missing was that only
 *    Movies had this atmosphere and Sports had none at all, which is
 *    what made Sports read as a flatter, "blacker" block by contrast
 *    even though the underlying color never actually changed.
 */

.movie-carousel,
.sports-carousel {
  /* Establishes the positioning context for the glow/line layers
     below. Deliberately NO overflow:hidden here (this rule used to
     have one) — that was the actual, final piece of the seam bug:
     ambient-glow.css loads after movie-carousel.css/sports-carousel.css
     in the page's <head>, so THIS rule's overflow:hidden was silently
     overriding the removal made in those files, keeping each section's
     glow clipped exactly at its own edge no matter what those files
     said. Horizontal overflow is now contained once, at the page level
     (body, in base.css) — nav buttons were already verified safe
     against clipping by the (now-removed) per-section overflow at
     every breakpoint where they're visible, so removing it introduces
     no new clipping risk for them. */
  position: relative;
}

.movie-carousel__inner,
.sports-carousel__inner {
  /* Keeps each section's real content (title, carousel, nav buttons)
     stacked above its ambient layer, regardless of the before/after
     generated-content paint order below. */
  position: relative;
  z-index: 1;
}

.movie-carousel::before,
.movie-carousel::after,
.sports-carousel::before,
.sports-carousel::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  will-change: transform, opacity;
  background-repeat: no-repeat;
}

/* Layer 1 — Electric Violet flowing lines, upper-left, drifting mostly
   horizontally with a gentle vertical bob. */
.movie-carousel::before {
  width: 1100px;
  height: 780px;
  top: -260px;
  left: -220px;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20900%20700%27%3E%3Cpath%20d%3D%27M-80%2C420%20C120%2C260%20260%2C540%20460%2C340%20C610%2C190%20720%2C380%20950%2C260%27%20fill%3D%27none%27%20stroke%3D%27rgba%28124%2C58%2C237%2C0.4%29%27%20stroke-width%3D%271.6%27/%3E%3Cpath%20d%3D%27M-80%2C520%20C140%2C610%20320%2C360%20520%2C500%20C680%2C610%20800%2C440%20950%2C500%27%20fill%3D%27none%27%20stroke%3D%27rgba%28124%2C58%2C237%2C0.22%29%27%20stroke-width%3D%271.2%27/%3E%3Cpath%20d%3D%27M-80%2C220%20C160%2C120%20300%2C260%20480%2C140%20C640%2C40%20760%2C160%20950%2C90%27%20fill%3D%27none%27%20stroke%3D%27rgba%28139%2C92%2C246%2C0.16%29%27%20stroke-width%3D%271%27/%3E%3C/svg%3E"),
    radial-gradient(
      circle,
      rgba(124, 58, 237, 0.16) 0%,
      rgba(124, 58, 237, 0.06) 45%,
      transparent 72%
    );
  background-size: 900px 700px, 100% 100%;
  background-position: center, center;
  filter: drop-shadow(0 0 10px rgba(124, 58, 237, 0.28)) blur(0.3px);
  animation: flow-drift-violet 28s ease-in-out infinite alternate;
}

/* Layer 2 — Electric Cyan flowing lines, lower-right, drifting mostly
   vertically/diagonally, slower and out of phase with layer 1 so the
   two never appear to move in sync. */
.movie-carousel::after {
  width: 1000px;
  height: 720px;
  bottom: -260px;
  right: -200px;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20900%20700%27%3E%3Cpath%20d%3D%27M-80%2C180%20C180%2C300%20320%2C60%20540%2C210%20C700%2C320%20820%2C140%20950%2C240%27%20fill%3D%27none%27%20stroke%3D%27rgba%2834%2C211%2C238%2C0.34%29%27%20stroke-width%3D%271.6%27/%3E%3Cpath%20d%3D%27M-80%2C560%20C160%2C440%20380%2C620%20580%2C470%20C730%2C360%20840%2C520%20950%2C430%27%20fill%3D%27none%27%20stroke%3D%27rgba%2834%2C211%2C238%2C0.18%29%27%20stroke-width%3D%271.2%27/%3E%3C/svg%3E"),
    radial-gradient(
      circle,
      rgba(34, 211, 238, 0.13) 0%,
      rgba(34, 211, 238, 0.05) 45%,
      transparent 72%
    );
  background-size: 900px 700px, 100% 100%;
  background-position: center, center;
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.22)) blur(0.3px);
  animation: flow-drift-cyan 37s ease-in-out infinite alternate;
  animation-delay: -9s; /* starts partway into its own cycle, so it's
                            never at the same phase as layer 1 even on
                            first paint */
}

@keyframes flow-drift-violet {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.65;
  }
  50% {
    transform: translate(56px, 24px) rotate(1.2deg);
    opacity: 0.9;
  }
  100% {
    transform: translate(-28px, 44px) rotate(-0.8deg);
    opacity: 0.75;
  }
}

@keyframes flow-drift-cyan {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.6;
  }
  50% {
    transform: translate(-40px, -46px) rotate(-1deg);
    opacity: 0.85;
  }
  100% {
    transform: translate(34px, -20px) rotate(0.9deg);
    opacity: 0.7;
  }
}

/* ------------------------------------------------------------------
 * Live Sports — same two-layer technique as Movies immediately above,
 * mirrored corners (violet now lower-left, cyan now upper-right) and
 * distinct timing (31s / 42s, different phase offsets) so the two
 * sections clearly share one visual language without being an
 * identical copy-paste repeat as the page scrolls.
 * ------------------------------------------------------------------ */

.sports-carousel::before {
  width: 1050px;
  height: 760px;
  bottom: -250px;
  left: -200px;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20900%20700%27%3E%3Cpath%20d%3D%27M-80%2C420%20C120%2C260%20260%2C540%20460%2C340%20C610%2C190%20720%2C380%20950%2C260%27%20fill%3D%27none%27%20stroke%3D%27rgba%28124%2C58%2C237%2C0.4%29%27%20stroke-width%3D%271.6%27/%3E%3Cpath%20d%3D%27M-80%2C520%20C140%2C610%20320%2C360%20520%2C500%20C680%2C610%20800%2C440%20950%2C500%27%20fill%3D%27none%27%20stroke%3D%27rgba%28124%2C58%2C237%2C0.22%29%27%20stroke-width%3D%271.2%27/%3E%3Cpath%20d%3D%27M-80%2C220%20C160%2C120%20300%2C260%20480%2C140%20C640%2C40%20760%2C160%20950%2C90%27%20fill%3D%27none%27%20stroke%3D%27rgba%28139%2C92%2C246%2C0.16%29%27%20stroke-width%3D%271%27/%3E%3C/svg%3E"),
    radial-gradient(
      circle,
      rgba(124, 58, 237, 0.15) 0%,
      rgba(124, 58, 237, 0.05) 45%,
      transparent 72%
    );
  background-size: 900px 700px, 100% 100%;
  background-position: center, center;
  filter: drop-shadow(0 0 10px rgba(124, 58, 237, 0.26)) blur(0.3px);
  animation: flow-drift-violet 31s ease-in-out infinite alternate;
  animation-delay: -14s;
}

.sports-carousel::after {
  width: 950px;
  height: 700px;
  top: -240px;
  right: -180px;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20900%20700%27%3E%3Cpath%20d%3D%27M-80%2C180%20C180%2C300%20320%2C60%20540%2C210%20C700%2C320%20820%2C140%20950%2C240%27%20fill%3D%27none%27%20stroke%3D%27rgba%2834%2C211%2C238%2C0.34%29%27%20stroke-width%3D%271.6%27/%3E%3Cpath%20d%3D%27M-80%2C560%20C160%2C440%20380%2C620%20580%2C470%20C730%2C360%20840%2C520%20950%2C430%27%20fill%3D%27none%27%20stroke%3D%27rgba%2834%2C211%2C238%2C0.18%29%27%20stroke-width%3D%271.2%27/%3E%3C/svg%3E"),
    radial-gradient(
      circle,
      rgba(34, 211, 238, 0.12) 0%,
      rgba(34, 211, 238, 0.04) 45%,
      transparent 72%
    );
  background-size: 900px 700px, 100% 100%;
  background-position: center, center;
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.2)) blur(0.3px);
  animation: flow-drift-cyan 42s ease-in-out infinite alternate;
  animation-delay: -4s;
}


/* ==================================================================
 * Live Sports section — SAME treatment as Movies above, reusing the
 * identical SVG line art (see the file header comment for why: this
 * is what makes the two sections read as one continuous background
 * system rather than two separately-decorated blocks). Different
 * layer positions and animation timings from Movies' own, so the
 * motion doesn't look like a mechanical copy-paste of the section
 * above it.
 * ================================================================== */

.sports-carousel::before,
.sports-carousel::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  will-change: transform, opacity;
  background-repeat: no-repeat;
}

/* Layer 1 — Electric Violet flowing lines, upper-right this time (the
   mirror opposite corner from Movies' violet layer), drifting mostly
   vertically. */
.sports-carousel::before {
  width: 1050px;
  height: 760px;
  top: -250px;
  right: -200px;
  left: auto;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20900%20700%27%3E%3Cpath%20d%3D%27M-80%2C420%20C120%2C260%20260%2C540%20460%2C340%20C610%2C190%20720%2C380%20950%2C260%27%20fill%3D%27none%27%20stroke%3D%27rgba%28124%2C58%2C237%2C0.4%29%27%20stroke-width%3D%271.6%27/%3E%3Cpath%20d%3D%27M-80%2C520%20C140%2C610%20320%2C360%20520%2C500%20C680%2C610%20800%2C440%20950%2C500%27%20fill%3D%27none%27%20stroke%3D%27rgba%28124%2C58%2C237%2C0.22%29%27%20stroke-width%3D%271.2%27/%3E%3Cpath%20d%3D%27M-80%2C220%20C160%2C120%20300%2C260%20480%2C140%20C640%2C40%20760%2C160%20950%2C90%27%20fill%3D%27none%27%20stroke%3D%27rgba%28139%2C92%2C246%2C0.16%29%27%20stroke-width%3D%271%27/%3E%3C/svg%3E"),
    radial-gradient(
      circle,
      rgba(124, 58, 237, 0.15) 0%,
      rgba(124, 58, 237, 0.05) 45%,
      transparent 72%
    );
  background-size: 900px 700px, 100% 100%;
  background-position: center, center;
  filter: drop-shadow(0 0 10px rgba(124, 58, 237, 0.26)) blur(0.3px);
  animation: flow-drift-violet-sports 33s ease-in-out infinite alternate;
}

/* Layer 2 — Electric Cyan flowing lines, lower-left, drifting mostly
   horizontally, out of phase with every other layer on the page. */
.sports-carousel::after {
  width: 980px;
  height: 700px;
  bottom: -230px;
  left: -180px;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20900%20700%27%3E%3Cpath%20d%3D%27M-80%2C180%20C180%2C300%20320%2C60%20540%2C210%20C700%2C320%20820%2C140%20950%2C240%27%20fill%3D%27none%27%20stroke%3D%27rgba%2834%2C211%2C238%2C0.34%29%27%20stroke-width%3D%271.6%27/%3E%3Cpath%20d%3D%27M-80%2C560%20C160%2C440%20380%2C620%20580%2C470%20C730%2C360%20840%2C520%20950%2C430%27%20fill%3D%27none%27%20stroke%3D%27rgba%2834%2C211%2C238%2C0.18%29%27%20stroke-width%3D%271.2%27/%3E%3C/svg%3E"),
    radial-gradient(
      circle,
      rgba(34, 211, 238, 0.12) 0%,
      rgba(34, 211, 238, 0.04) 45%,
      transparent 72%
    );
  background-size: 900px 700px, 100% 100%;
  background-position: center, center;
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.2)) blur(0.3px);
  animation: flow-drift-cyan-sports 25s ease-in-out infinite alternate;
  animation-delay: -6s;
}

@keyframes flow-drift-violet-sports {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.6;
  }
  50% {
    transform: translate(-30px, 42px) rotate(-1deg);
    opacity: 0.85;
  }
  100% {
    transform: translate(38px, -18px) rotate(0.9deg);
    opacity: 0.7;
  }
}

@keyframes flow-drift-cyan-sports {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.55;
  }
  50% {
    transform: translate(46px, -30px) rotate(1.1deg);
    opacity: 0.8;
  }
  100% {
    transform: translate(-22px, -50px) rotate(-0.7deg);
    opacity: 0.65;
  }
}


/* ==================================================================
 * Live Channels section — SAME treatment as Movies and Sports above,
 * reusing the identical SVG line art (see the file header comment:
 * this is what makes all three sections read as one continuous
 * background system rather than three separately-decorated blocks).
 * Different layer positions and timings from both Movies' and
 * Sports' own, so the motion never looks like a copy-paste of either
 * section above it.
 * ================================================================== */

.channels-carousel::before,
.channels-carousel::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  will-change: transform, opacity;
  background-repeat: no-repeat;
}

/* Layer 1 — Electric Violet flowing lines, upper-left (same corner as
   Movies' own violet layer, but a different size/timing so it doesn't
   read as a mechanical repeat), drifting mostly diagonally. */
.channels-carousel::before {
  width: 1000px;
  height: 720px;
  top: -230px;
  left: -190px;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20900%20700%27%3E%3Cpath%20d%3D%27M-80%2C420%20C120%2C260%20260%2C540%20460%2C340%20C610%2C190%20720%2C380%20950%2C260%27%20fill%3D%27none%27%20stroke%3D%27rgba%28124%2C58%2C237%2C0.4%29%27%20stroke-width%3D%271.6%27/%3E%3Cpath%20d%3D%27M-80%2C520%20C140%2C610%20320%2C360%20520%2C500%20C680%2C610%20800%2C440%20950%2C500%27%20fill%3D%27none%27%20stroke%3D%27rgba%28124%2C58%2C237%2C0.22%29%27%20stroke-width%3D%271.2%27/%3E%3Cpath%20d%3D%27M-80%2C220%20C160%2C120%20300%2C260%20480%2C140%20C640%2C40%20760%2C160%20950%2C90%27%20fill%3D%27none%27%20stroke%3D%27rgba%28139%2C92%2C246%2C0.16%29%27%20stroke-width%3D%271%27/%3E%3C/svg%3E"),
    radial-gradient(
      circle,
      rgba(124, 58, 237, 0.14) 0%,
      rgba(124, 58, 237, 0.05) 45%,
      transparent 72%
    );
  background-size: 900px 700px, 100% 100%;
  background-position: center, center;
  filter: drop-shadow(0 0 10px rgba(124, 58, 237, 0.24)) blur(0.3px);
  animation: flow-drift-violet-channels 30s ease-in-out infinite alternate;
  animation-delay: -12s;
}

/* Layer 2 — Electric Cyan flowing lines, lower-right, drifting mostly
   horizontally, out of phase with every other layer on the page. */
.channels-carousel::after {
  width: 950px;
  height: 680px;
  bottom: -220px;
  right: -170px;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20900%20700%27%3E%3Cpath%20d%3D%27M-80%2C180%20C180%2C300%20320%2C60%20540%2C210%20C700%2C320%20820%2C140%20950%2C240%27%20fill%3D%27none%27%20stroke%3D%27rgba%2834%2C211%2C238%2C0.34%29%27%20stroke-width%3D%271.6%27/%3E%3Cpath%20d%3D%27M-80%2C560%20C160%2C440%20380%2C620%20580%2C470%20C730%2C360%20840%2C520%20950%2C430%27%20fill%3D%27none%27%20stroke%3D%27rgba%2834%2C211%2C238%2C0.18%29%27%20stroke-width%3D%271.2%27/%3E%3C/svg%3E"),
    radial-gradient(
      circle,
      rgba(34, 211, 238, 0.11) 0%,
      rgba(34, 211, 238, 0.04) 45%,
      transparent 72%
    );
  background-size: 900px 700px, 100% 100%;
  background-position: center, center;
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.19)) blur(0.3px);
  animation: flow-drift-cyan-channels 28s ease-in-out infinite alternate;
  animation-delay: -4s;
}

@keyframes flow-drift-violet-channels {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.55;
  }
  50% {
    transform: translate(40px, -34px) rotate(1.2deg);
    opacity: 0.8;
  }
  100% {
    transform: translate(-26px, 30px) rotate(-0.8deg);
    opacity: 0.65;
  }
}

@keyframes flow-drift-cyan-channels {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.5;
  }
  50% {
    transform: translate(-44px, 26px) rotate(-1.1deg);
    opacity: 0.75;
  }
  100% {
    transform: translate(30px, 44px) rotate(0.7deg);
    opacity: 0.6;
  }
}