/**
 * StreamVerse — Multi-Device Ecosystem
 *
 * A new, purely decorative section between Live Channels and the Trust/
 * Guarantee Banner: a centered heading/subtitle (same construction as
 * every other section header on the site — .channels-carousel__title/
 * __subtitle, .trial-cta__title/__subtitle — just center-aligned) above
 * a static four-device composition (TV, laptop, tablet, phone). No data,
 * no carousel, no JS: every device is a plain CSS-built "frame" shape
 * (matching the site's existing hand-rolled-component convention — no
 * icon library, no illustration library) around a real screenshot of
 * this site's own homepage (assets/images/devices/real-*.png — see
 * index.html), cropped with object-fit: cover and a per-device
 * object-position (never stretched/distorted) rather than a CSS-drawn
 * placeholder UI. Existing assets were checked first
 * (assets/images/hero/hero-mockup-*-placeholder.svg) — those are
 * explicit two-device (TV+Phone) wireframe placeholders, literally
 * labeled "PLACEHOLDER — replace with production composite," and not
 * usable as-is for a four-device production visual — so this section's
 * device chrome is built fresh, but reuses the same visual materials as
 * hero-media-dormant.css's parked "TV + Phone" treatment: existing
 * elevated-surface colors, --shadow-modal/--shadow-card-hover, and the
 * site's own --color-accent (violet) / --color-highlight (cyan) tokens
 * for the ambient glow — no new colors introduced anywhere in this file.
 *
 * Ambient glow is deliberately its OWN simple two-blob radial-gradient
 * treatment, not a reuse of ambient-glow.css's flowing-line-art system
 * used on Movies/Sports/Channels: that system was tuned for large, flat,
 * empty dark surfaces, and layering its animated line art behind an
 * already-detailed four-device illustration here risked exactly the
 * "cluttered/neon" look this section explicitly needs to avoid. Kept
 * fully self-contained in this one new file for that reason, rather
 * than extending ambient-glow.css's existing (and carefully-tuned)
 * cross-section blending.
 *
 * Sits inside #main-content (base.css), so it already inherits the same
 * horizontal-overflow containment every other section's decorative
 * bleed relies on — no extra overflow handling needed here for that.
 */

.device-ecosystem {
  position: relative;
  padding-block: var(--space-7);
}

.device-ecosystem__inner {
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (min-width: 768px) {
  .device-ecosystem__inner {
    padding-inline: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .device-ecosystem__inner {
    padding-inline: var(--space-7);
  }
}

/* ------------------------------------------------------------------
 * Header — same title/subtitle construction as every other section
 * (.channels-carousel__title etc.), just centered per request.
 * ------------------------------------------------------------------ */

.device-ecosystem__header {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.device-ecosystem__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  line-height: var(--text-h2-line-height);
  font-weight: 700;
  color: var(--color-text-primary);
}

.device-ecosystem__subtitle {
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg-line-height);
  color: #A3AED0; /* matches the sitewide secondary/muted-text convention */
}

/* ------------------------------------------------------------------
 * Composition — a fixed-height stage; every device is absolutely
 * positioned/sized as a percentage of this box, so the whole
 * arrangement scales as one unit at each breakpoint below.
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
 * Composition — .device-ecosystem__stage is a FIXED 920x440px box
 * (the desktop reference design, pixel-for-pixel — every device/frame
 * rule below was tuned against these exact dimensions) that gets
 * uniformly scaled down via transform to fit
 * .device-ecosystem__composition's own fluid, responsive width.
 * Scaling the whole stage as one rigid unit — rather than resizing
 * devices individually via percentages — is what makes every
 * fixed-pixel frame detail (borders, corner radii, bezel padding,
 * shadows) shrink at the exact same rate as the devices themselves,
 * so the frame reads identically at any size instead of looking
 * proportionally thicker/more rounded once the devices get smaller (a
 * fixed 1px border or 12px radius does NOT get proportionally
 * thinner/tighter on its own just because its parent box got smaller
 * via width/height percentages).
 *
 * The --stage-scale custom property below is set by
 * assets/js/device-ecosystem.js from the composition's actual
 * rendered width (scale = renderedWidth / 920) — the seemingly pure-
 * CSS alternative, transform: scale(calc(100cqw / 920px)) using a
 * container-query width unit, was tried first but doesn't reliably
 * compute in current browsers (calc()'s length-divided-by-length-
 * produces-a-number rule isn't consistently supported inside scale()
 * yet), so this reads the real width in JS instead. The media queries
 * further below are a CSS-only approximate fallback for the brief
 * moment before that script runs (or the rare case JS is disabled),
 * so the composition is never left at its full, undscaled 920px size
 * on a narrow viewport.
 * ------------------------------------------------------------------ */

.device-ecosystem__composition {
  position: relative;
  margin-top: var(--space-7);
  margin-inline: auto;
  width: 100%;
  max-width: 920px;
  aspect-ratio: 920 / 440;
}

@media (min-width: 768px) {
  .device-ecosystem__composition {
    margin-top: var(--space-8);
  }
}

.device-ecosystem__stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 920px;
  height: 440px;
  transform: scale(var(--stage-scale, 1));
  transform-origin: top left;
}

/* Approximate CSS-only fallback (device-ecosystem.js sets the exact,
   continuously-correct --stage-scale on load and on resize/observed
   size change — this only covers the brief moment before that script
   runs, or the rare case JS is unavailable, so the composition is
   never left at its full undscaled 920px size on a narrow viewport). */
@media (max-width: 479.98px) {
  .device-ecosystem__composition { --stage-scale: 0.35; }
}
@media (min-width: 480px) and (max-width: 767.98px) {
  .device-ecosystem__composition { --stage-scale: 0.55; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .device-ecosystem__composition { --stage-scale: 0.82; }
}

/* Two soft, blurred, low-opacity radial glows — violet upper-left,
   cyan lower-right. Restrained on purpose (0.16/0.14 peak opacity,
   heavy blur, no flowing line art, no fast motion) — a premium ambient
   hint behind the devices, not a neon backdrop. */
.device-ecosystem__glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(48px);
  pointer-events: none;
}

.device-ecosystem__glow--violet {
  top: -10%;
  left: 6%;
  width: 46%;
  height: 60%;
  background: radial-gradient(circle, var(--color-accent) 0%, transparent 72%);
  opacity: 0.16;
}

.device-ecosystem__glow--cyan {
  bottom: -12%;
  right: 4%;
  width: 42%;
  height: 55%;
  background: radial-gradient(circle, var(--color-highlight) 0%, transparent 72%);
  opacity: 0.14;
}

/* Restrained opacity-only breathing (no scale/position/blur change) —
   a small, slow pulse within each layer's own low-opacity range above
   (violet 0.12–0.2, cyan 0.1–0.18), so it reads as "gently alive"
   rather than "flashing." Two separate keyframes, one per layer, so
   the animation never overrides either glow up to a much brighter
   shared value. */
@media (prefers-reduced-motion: no-preference) {
  .device-ecosystem__glow--violet {
    animation: device-glow-breathe-violet 6s ease-in-out infinite;
  }

  .device-ecosystem__glow--cyan {
    animation: device-glow-breathe-cyan 6s ease-in-out infinite;
    animation-delay: -3s; /* out of phase with the violet layer */
  }
}

@keyframes device-glow-breathe-violet {
  0%, 100% {
    opacity: 0.12;
  }
  50% {
    opacity: 0.2;
  }
}

@keyframes device-glow-breathe-cyan {
  0%, 100% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.18;
  }
}

/* ------------------------------------------------------------------
 * Shared device chrome — every .device is an absolutely-positioned
 * box; .device__frame is the visible bezel (elevated-surface fill,
 * subtle border, shadow), .device__screen the dark inner display.
 * ------------------------------------------------------------------ */

.device {
  position: absolute;
}

.device__frame {
  height: 100%;
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-card-hover);
}

.device__screen {
  position: relative; /* positioning context for the reflection + image below */
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--color-bg-surface); /* shows briefly while the screenshot loads */
}

/* Subtle diagonal glass sheen on every screen — same restrained,
   premium intent as the ambient glow above, not a hard highlight. */
.device__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.07) 0%, transparent 42%);
  pointer-events: none;
}

/* ------------------------------------------------------------------
 * Real StreamVerse screenshots (assets/images/devices/) — one per
 * device, cropped with object-fit: cover rather than stretched, so
 * proportions are always preserved; object-position is tuned per
 * device below to keep each screenshot's most important content
 * (headline/CTA, nav + heading, etc.) inside the visible crop instead
 * of a blind center-crop. .device__screen's own overflow: hidden +
 * border-radius above does the actual clipping/masking to each
 * screen's shape; the ::after reflection above renders on top of the
 * image since it comes later in the DOM.
 * ------------------------------------------------------------------ */

.device__screen-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------------
 * TV — central, largest, lowest z-index ("slightly in the background").
 * ------------------------------------------------------------------ */

.device--tv {
  z-index: 1;
  top: 4%;
  left: 50%;
  width: 58%;
  aspect-ratio: 16 / 9;
  transform: translateX(-50%) scale(0.97);
}

.device--tv .device__frame {
  padding: 10px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
}

.device--tv .device__screen {
  border-radius: var(--radius-sm);
}

.device--tv .device__screen-img {
  /* Hero screenshot: headline/CTA sit in the left half, background
     art bleeds off to the right — crop from the right so the actual
     StreamVerse copy never gets cut. */
  object-position: left top;
}

.device__tv-stand {
  position: absolute;
  left: 50%;
  bottom: -22px;
  width: 26%;
  height: 10px;
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-full);
  transform: translateX(-50%);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* ------------------------------------------------------------------
 * Laptop — right of the TV, tilted slightly toward center.
 * ------------------------------------------------------------------ */

.device--laptop {
  z-index: 2;
  top: 20%;
  left: 68%;
  width: 34%;
  aspect-ratio: 16 / 10;
  transform: rotate(-5deg);
  transform-origin: bottom left;
}

.device--laptop .device__frame {
  padding: 6px 6px 8px;
  border-radius: var(--radius-sm);
}

.device--laptop .device__screen {
  border-radius: 3px;
}

.device--laptop .device__screen-img {
  /* Movies-grid screenshot: logo + "Popular Movies" heading sit at
     the left edge — crop from the right (losing the trailing poster
     and header CTA) rather than centering, which would slice through
     the heading text itself. */
  object-position: left top;
}

.device__laptop-base {
  position: absolute;
  left: 50%;
  bottom: -7%;
  width: 118%;
  height: 8%;
  background-color: var(--color-bg-elevated-hover);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xs);
  transform: translateX(-50%);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

/* ------------------------------------------------------------------
 * Tablet — left of the TV, a gentle opposing tilt for balance.
 * ------------------------------------------------------------------ */

.device--tablet {
  z-index: 2;
  top: 24%;
  left: -1%;
  width: 20%;
  aspect-ratio: 3 / 4;
  transform: rotate(4deg);
  transform-origin: bottom right;
}

.device--tablet .device__frame {
  padding: 8px;
  border-radius: var(--radius-md);
}

.device--tablet .device__screen {
  border-radius: var(--radius-xs);
}

.device--tablet .device__screen-img {
  object-position: top;
}

/* ------------------------------------------------------------------
 * Phone — front-center-bottom, highest z-index, slight overlap with
 * the TV's lower edge to read as the closest/foreground device.
 * ------------------------------------------------------------------ */

.device--phone {
  z-index: 3;
  bottom: 0;
  left: 50%;
  width: 12%;
  max-width: 84px;
  aspect-ratio: 9 / 18.5;
  transform: translateX(-50%);
}

.device--phone .device__frame {
  padding: 3px;
  border-radius: var(--radius-lg);
}

.device--phone .device__screen {
  border-radius: calc(var(--radius-lg) - 3px);
}

.device--phone .device__screen-img {
  object-position: top;
}

/* Below 1024px the composition itself already shrinks fluidly (see
   .device-ecosystem__composition's width/aspect-ratio above), and
   every device position/size above is percentage-based — so the same
   desktop arrangement scales down as one proportional unit at every
   width, including 320–430px phone sizes, with no separate mobile or
   tablet layout needed. */