/* ============================================================
   stxrm808 — SECTIONS PREMIUM (Phase 1)
   Additive premium-parity layer for the homepage content
   sections. Brings "The Catalog" (.home-gateway) and its
   Kits card up to the warm, deep, cinematic finish of the
   already-approved hero/producer/demos area.

   ADDITIVE ONLY: never edits style.css or flow.css. Loaded
   LAST so equal-specificity additions cascade on top without
   touching layout (grid, gaps, heights), copy, hrefs, the
   panel-grip geometry, or any hover transform already defined
   in style.css. Reuses the real :root tokens
   (--fire, --fire-glow, --ease-out).
   Scope is limited to .home-gateway and its children — the
   hero (.video-scrub/.hero) and the producer scrub are never
   targeted here.
   ============================================================ */

/* ─── The Catalog (.home-gateway) — warm depth on resting cards ─── */

/* Soft warm vignette inside every card at rest so the block reads
   as an intentional, lit surface instead of a flat panel. Only ADDS
   a layered ::before; the base .home-gateway__card border, background
   and translateY hover (style.css) stay fully intact. */
.home-gateway__card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 0%, var(--fire-glow), transparent 58%),
    linear-gradient(180deg, rgba(255, 120, 60, 0.05) 0%, transparent 22%);
  opacity: 0.55;
}

/* Keep the copy above the vignette so text stays crisp. */
.home-gateway__copy {
  position: relative;
  z-index: 2;
}

/* Hover lifts the warmth a touch — reinforces the existing translateY
   hover without altering it. */
.home-gateway__card:hover::before {
  opacity: 0.9;
}

/* Deeper, warmer drop under the visual so the imagery sits in space. */
.home-gateway__visual {
  box-shadow: inset 0 -32px 48px -28px rgba(0, 0, 0, 0.85);
}

/* ─── Kits card — premium resting finish ───
   Stronger warm radial behind the two tilted covers + richer cover
   imagery, WITHOUT touching the tilt/scale-on-hover transforms or the
   two-cover layout (all still owned by style.css). */
.home-gateway__visual--kits {
  background:
    radial-gradient(ellipse at 30% 45%, rgba(255, 90, 30, 0.30), transparent 58%),
    radial-gradient(ellipse at 70% 90%, var(--fire-glow), transparent 62%),
    #0a0807;
}

/* Covers read richer: a touch more contrast/warmth and a deeper drop. */
.home-gateway__visual--kits img {
  filter: saturate(1.08) contrast(1.05) brightness(1.02);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.78);
}

/* Card-level resting finish: the Kits offer reads as a premium, lit
   block (warmer floor + crisper edge) at rest — no layout, copy, link,
   tilt or hover-transform change (all still owned by style.css). */
.home-gateway__card--kits {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 90, 30, 0.10), transparent 45%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(0, 0, 0, 0.34)),
    #0b0a09;
  border-color: rgba(255, 120, 60, 0.16);
}

.home-gateway__card--kits::before {
  opacity: 0.7;
}

@media (prefers-reduced-motion: no-preference) {
  /* Card vignette only animates its hover opacity when motion is allowed (WR-02).
     Under reduced-motion the hover state still applies, it just snaps. */
  .home-gateway__card::before {
    transition: opacity .45s var(--ease-out);
  }

  /* Subtle warmth-bloom on hover for the Kits covers, layered on top of
     the existing tilt transform (no transform override). */
  .home-gateway__card--kits:hover .home-gateway__visual--kits {
    background:
      radial-gradient(ellipse at 30% 45%, rgba(255, 90, 30, 0.38), transparent 58%),
      radial-gradient(ellipse at 70% 90%, var(--fire-glow), transparent 62%),
      #0a0807;
    transition: background .55s var(--ease-out);
  }
}

/* ─── AURA / Plugins card — cinematic teaser finish ───
   The looping AURA trailer is the homepage AURA teaser; frame it in a
   warm, lit block so it reads as a deliberate plugin teaser rather than
   a flat black tile. Scoped to .home-gateway__card--plugins /
   __visual--plugins. No change to the video element, its src/poster/
   autoplay attributes, the copy, the plugins.html href, or the existing
   translateY/scale hover (all owned by style.css). Resting depth only. */
.home-gateway__card--plugins {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 90, 30, 0.10), transparent 45%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(0, 0, 0, 0.34)),
    #0b0a09;
  border-color: rgba(255, 120, 60, 0.16);
}

.home-gateway__card--plugins::before {
  opacity: 0.7;
}

/* Warm cinematic frame around the trailer: keep the base #000 (style.css)
   as the deepest layer, add a subtle warm inner glow + a soft top/bottom
   scrim so the looping video sits inside a framed block. The visual is
   position-relative in style.css, so this ::after layers cleanly above
   the video and below the panel border. */
.home-gateway__visual--plugins {
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 0 60px -28px var(--fire-glow),
    inset 0 -32px 48px -28px rgba(0, 0, 0, 0.85);
}

.home-gateway__visual--plugins::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 0%, var(--fire-glow), transparent 55%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, transparent 26%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.46) 0%, transparent 30%);
}

/* Deepen the trailer imagery slightly at equal specificity (the base
   saturate/contrast filter on .home-gateway__video stays; this scoped
   selector wins for the plugins card only). */
.home-gateway__card--plugins .home-gateway__video {
  filter: saturate(0.96) contrast(1.10) brightness(1.02);
}

/* ─── Bundles card — matching premium resting finish ───
   Bring the bundles card to the same warm, lit finish as the Kits and
   AURA cards so the Catalog row reads consistently premium end to end.
   Scoped to .home-gateway__card--bundles / __visual--bundles. The
   4-cover fan/grid layout (grid-template, gap, padding) and the hover
   transforms stay fully owned by style.css — resting depth only. */
.home-gateway__card--bundles {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 90, 30, 0.10), transparent 45%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(0, 0, 0, 0.34)),
    #0b0a09;
  border-color: rgba(255, 120, 60, 0.16);
}

.home-gateway__card--bundles::before {
  opacity: 0.7;
}

/* Warmer floor under the four covers + an inner vignette so the fan sits
   in lit space rather than on a flat panel. Only deepens the existing
   radial floor from style.css. */
.home-gateway__visual--bundles {
  box-shadow:
    inset 0 0 60px -30px var(--fire-glow),
    inset 0 -32px 48px -28px rgba(0, 0, 0, 0.85);
}

/* Covers read richer with a deeper drop, matching the Kits cover finish
   without touching the fan/grid layout. */
.home-gateway__visual--bundles img {
  filter: saturate(1.06) contrast(1.04) brightness(1.01);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.72);
}

/* ─── Footer — warm premium finish (closes the page) ───
   The footer joins the panel-grip family in flow.css (rounded top, warm
   top edge, overlap, top-most z-index). Here we ADD atmosphere only so it
   reads as a deliberate, lit final block instead of a flat var(--bg) fill.
   We do NOT replace the style.css `background: var(--bg)` semantics or
   touch the footer layout, copy, hrefs or SVGs — depth is layered on top
   via an inner top-glow and a faint warm radial scrim above the fill. */
.footer {
  /* faint warm top-inner glow that meets the panel-grip warm edge above,
     plus a soft floor shadow so the block has real depth, not a flat band */
  box-shadow:
    inset 0 1px 0 rgba(255, 120, 60, 0.06),
    inset 0 36px 64px -56px var(--fire-glow),
    inset 0 -120px 120px -110px rgba(0, 0, 0, 0.9);
}

/* Warm radial + top vignette layered above the fill, below the content.
   Inherits the panel-grip rounded top so the warmth follows the 36px
   corners. Subtle grain/vignette consistent with the rest of the page. */
.footer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-top-left-radius: 36px;
  border-top-right-radius: 36px;
  background:
    radial-gradient(ellipse at 50% 0%, var(--fire-glow), transparent 46%),
    linear-gradient(180deg, rgba(255, 120, 60, 0.04) 0%, transparent 18%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.34) 0%, transparent 24%);
  opacity: 0.85;
}

/* Keep all footer content crisply above the warm scrim. The container is
   the single content wrapper inside .footer (style.css owns its layout). */
.footer > .container {
  position: relative;
  z-index: 1;
}

/* ============================================================
   Phase 2 — Catalog-Row HOVER: Inner-Bloom + :has() Rack-Focus
   ------------------------------------------------------------
   Additive, pointer-only hover interaction for the three
   Catalog cards (.home-gateway__card incl. --kits/--plugins/
   --bundles). Hovering one card lights a warm INNER bloom on
   exactly that card; its siblings recede (lower opacity,
   desaturated, slightly scaled down) — pure CSS via :has(),
   no JS.

   HARD CONSTRAINTS honoured:
   - No edit to style.css; the :hover translateY(-5px) lift and
     scale(1.05) image zoom from style.css stay intact (we set
     NO transform on the hovered card here — Pitfall 1).
   - No outward-radiating glow: .home-gateway__card has
     overflow:hidden, so the bloom is an INSET glow + the
     existing inner ::before vignette (Pitfall 2).
   - No blurring: rack-focus = opacity + saturate/brightness +
     scale only, so it never fights the reveal-item GSAP filter
     entrance (Pitfall 3, locked decision 2).
   - Whole block gated behind @media (hover: hover) and
     (pointer: fine) so touch / no-hover keeps the clean
     Phase-1 resting state — no sticky hover (Pitfall 7).
   - Only locked tokens (--fire-glow / --ease-out) + the
     established warm rgba(255,68,0,…) family — P3-safe
     (Pitfall 6). No new colour family, no priority override.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {

  /* RACK-FOCUS — siblings recede the moment any card is hovered.
     scale(...) is the ONLY transform on non-hovered cards (they
     carry no resting transform in style.css), so there is no
     transform conflict. */
  .home-gateway__grid:has(.home-gateway__card:hover) .home-gateway__card:not(:hover) {
    opacity: 0.62;
    filter: saturate(0.7) brightness(0.92);
    transform: scale(0.985);
  }

  /* BLOOM — stronger warm inner core on the hovered card. The
     ::before vignette already exists (Phase 1 fades .55 -> .9);
     here it goes full + gains a warmer radial core. Inset only,
     never reaching past the clipped card edge. */
  .home-gateway__card:hover::before {
    opacity: 1;
    background:
      radial-gradient(ellipse at 50% 8%, var(--fire-glow), transparent 52%),
      radial-gradient(circle at 50% 42%, rgba(255, 68, 0, 0.13), transparent 62%);
  }

  /* INSET fire glow on the hovered card. The style.css :hover
     box-shadow (outer depth + faint fire ring) MUST be repeated
     here verbatim, otherwise the approved shadow is lost. No
     outward-only fire halo is added (overflow:hidden clips it). */
  .home-gateway__card:hover {
    box-shadow:
      inset 0 0 60px -18px var(--fire-glow),
      0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 68, 0, 0.06);
  }
}

/* Animated transitions only when motion is allowed; under
   reduced-motion the bloom/rack-focus still applies, it just
   snaps (Phase-1 motion-gating pattern). transform duration
   matches the .45s already declared in style.css. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .home-gateway__card {
    transition:
      transform .45s var(--ease-out),
      opacity .4s var(--ease-out),
      filter .4s var(--ease-out),
      border-color .35s ease,
      box-shadow .45s ease;
  }
}