/* ==========================================================================
   RS2 HOMEPAGE HERO
   Four-layer parallax + client ticker.
   Motion is CSS scroll-driven (compositor thread). Zero JavaScript.
   Loaded on front page only via redsky-child/functions.php
   Depends on tokens.css (handle rs2-tokens) for --rs-* variables.
   ========================================================================== */


/* ============ STRUCTURE ============ */
/* Geometry lives here, not in Divi's UI. Divi 5's unit picker has no svh
   option and silently drops the unit, turning 100svh into 100px. */

.rs2-hero {
  position: relative;
  min-height: 100svh;
  overflow: clip;               /* contain translated layers */
  isolation: isolate;           /* local stacking context */

  /* Hero-local accent (eyebrow). Mock uses yellow; swap value here
     once the accent ruling lands. Not a brand token on purpose. */
  --rs2-accent: #F5C518;

  /* Foreground dune drift distance. ONE dial: the dune starts sunk
     below the section edge by this amount and rises exactly this far,
     so its bottom edge never crosses the hero boundary mid-scroll.
     Sink and drift are bound to this variable and cannot desync. */
  --rs2-fg-drift: 12vh;
}

.rs2-hero .rs2-hero__stage {
  width: 100%;
  max-width: 100%;              /* defeat Divi's 1080px row cap */
  min-height: 100svh;
}

.rs2-hero .rs2-hero__stage > .et_pb_column {
  width: 100%;
  min-height: 100svh;
}


/* ============ LAYER PLUMBING ============ */

/* Layer stacking lives HERE, not in Divi's Position panel.
   bg 1, card 2, copy 3, fg 4, ticker 5. Divi z-index fields
   are now optional; CSS is authoritative. */

.rs2-hero .rs2-para--bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.rs2-hero .rs2-para--bg .et_pb_image_wrap {
  display: block;
  width: 100%;
  height: 100%;
}

.rs2-hero .rs2-para--bg img {
  width: 100%;
  height: 115%;                 /* travel headroom for parallax */
  object-fit: cover;
  object-position: center 60%;  /* pins the horizon; tune against the mock */
}

/* Foreground dune cutout: pinned to the hero's bottom edge,
   above copy and card (z 4), below the ticker (z 5).
   pointer-events none so it never blocks clicks on the card,
   buttons, or ticker it overlaps. */
.rs2-hero .rs2-para--fg {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 4;
  pointer-events: none;
}

.rs2-hero .rs2-para--fg .et_pb_image_wrap {
  display: block;
  width: 100%;
}

.rs2-hero .rs2-para--fg img {
  display: block;
  width: 100%;
  height: auto;
}


/* ============ COPY BLOCK ============ */

.rs2-hero .rs2-para--copy {
  position: absolute;
  z-index: 3;
  inset: clamp(120px, 24svh, 240px) auto auto clamp(24px, 6vw, 110px);
  width: min(640px, 46vw);
  display: flex;
  flex-direction: column;
  gap: var(--rs-space-6);
}

.rs2-hero .rs2-para--copy .rs2-eyebrow {
  font-family: var(--rs-font-body);
  font-size: var(--rs-fs-sm);
  font-weight: var(--rs-fw-medium);
  letter-spacing: var(--rs-tracking-wide);
  color: var(--rs2-accent);
  max-width: 52ch;
}

.rs2-hero .rs2-para--copy h1 {
  font-family: var(--rs-font-display);
  font-size: var(--rs-fs-6xl);
  font-weight: var(--rs-fw-bold);
  line-height: var(--rs-lh-tight);
  letter-spacing: var(--rs-tracking-tight);
  color: var(--rs-color-paper);
  margin: 0;
}

.rs2-hero .rs2-para--copy .rs2-subhead {
  font-family: var(--rs-font-body);
  font-size: var(--rs-fs-lg);
  line-height: var(--rs-lh-normal);
  color: rgb(255 255 255 / 0.88);
  max-width: 46ch;
}

/* Buttons: styled entirely in Divi module settings by design.
   No button rules in this file; see build notes for the Divi recipe. */


/* ============ STAT CARD ============ */
/* Divi supplies position/z-index and the flex row on the stats band;
   these rules supply geometry, surface, and typography.
   All figures inside are QUARANTINED pending Sean's ratification. */

.rs2-hero .rs2-para--card {
  position: absolute;
  z-index: 2;
  /* Dual-edge anchor: left pinned at 55vw (clear of the copy block),
     right pinned 140px PAST the viewport so the card always bleeds
     off-screen at any window size. Width is fluid by consequence. */
  inset: clamp(110px, 15svh, 190px) -140px auto 55vw;
  /* Glass frame: this padding IS the wrap-around border effect */
  padding: 0 10px 10px;
  background: rgb(255 255 255 / 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: var(--rs-radius-lg);
  box-shadow: var(--rs-shadow-l3);
  overflow: hidden;
}

.rs2-card__label {
  padding: var(--rs-space-4) var(--rs-space-6);
  background: transparent;          /* the glass frame shows through */
  font-family: var(--rs-font-mono);
  font-size: var(--rs-fs-xs);
  font-weight: var(--rs-fw-medium);
  letter-spacing: var(--rs-tracking-wider);
  text-transform: uppercase;
  color: var(--rs-color-ink-soft);
}

/* Stats band + table together form the white inner surface
   inside the glass frame: top radii on stats, bottom radii on table */
.rs2-card__stats {
  padding: var(--rs-space-8) var(--rs-space-8) var(--rs-space-5);
  background: var(--rs-color-paper);
  border-radius: var(--rs-radius-md) var(--rs-radius-md) 0 0;
}

.rs2-card__stats .rs2-stat {
  flex: 1 1 0;
  min-width: 104px;
}

/* Numbers are H3s (per builder markup); captions are the p that follows */
.rs2-stat h3 {
  margin: 0;
  font-family: var(--rs-font-display);
  font-size: var(--rs-fs-3xl);
  font-weight: var(--rs-fw-semibold);
  line-height: var(--rs-lh-tight);
  color: var(--rs-color-ink);
}

.rs2-stat p {
  margin: var(--rs-space-2) 0 0;
  font-family: var(--rs-font-body);
  font-size: var(--rs-fs-xs);
  line-height: 1.4;
  color: var(--rs-color-graphite);
}

/* Placement table (Code module) */
.rs2-card__table {
  padding: 0 var(--rs-space-8) var(--rs-space-8);
  background: var(--rs-color-paper);
  border-radius: 0 0 var(--rs-radius-md) var(--rs-radius-md);
}

.rs2-card__table table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--rs-font-body);
  font-size: var(--rs-fs-xs);
  color: var(--rs-color-steel);
}

.rs2-card__table th {
  padding: var(--rs-space-2) var(--rs-space-3);
  text-align: left;
  font-weight: var(--rs-fw-medium);
  color: var(--rs-color-graphite);
  border-bottom: var(--rs-border-hair) solid var(--rs-color-fog);
  white-space: nowrap;
}

.rs2-card__table td {
  padding: var(--rs-space-2) var(--rs-space-3);
  border-bottom: var(--rs-border-hair) solid var(--rs-color-fog);
  white-space: nowrap;
}

.rs2-card__table tr:last-child td {
  border-bottom: none;
}

.rs2-card__table .rs2-num {
  font-family: var(--rs-font-mono);
  color: var(--rs-color-silver);
}

.rs2-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--rs-radius-sm);
  background: var(--rs-color-fog);
  color: var(--rs-color-steel);
  font-size: 11px;
  line-height: 1.6;
}

.rs2-chip--active {
  background: #D9F0E3;
  color: var(--rs-color-success);
}


/* ============ SCROLL-DRIVEN PARALLAX ============ */
/* Supported: Chromium, Safari 26+. Firefox falls back to a static hero. */

@supports (animation-timeline: scroll()) {
  @media (min-width: 981px) and (prefers-reduced-motion: no-preference) {

    .rs2-para {
      animation-timeline: scroll(root);
      animation-range: 0 100vh;         /* motion mapped to first viewport of scroll */
      animation-fill-mode: both;
      animation-timing-function: linear;
    }

    .rs2-para--bg   { animation-name: rs2-drift-bg; }
    .rs2-para--card { animation-name: rs2-drift-card; }
    .rs2-para--copy { animation-name: rs2-drift-copy; }
    .rs2-para--fg   { animation-name: rs2-drift-fg; }

    /* Dune starts sunk by its full drift distance (clipped by the
       section's overflow) and rises TO flush, never past it. Scoped
       to the motion gate: static fallbacks (Firefox, reduced motion,
       sub-981px) keep the dune flush at rest with no sink. */
    .rs2-hero .rs2-para--fg {
      bottom: calc(-1 * var(--rs2-fg-drift));
    }

    /* Background lags the scroll: appears distant */
    @keyframes rs2-drift-bg   { to { transform: translateY(14vh); } }

    /* Card drifts up slightly ahead of scroll */
    @keyframes rs2-drift-card { to { transform: translateY(-6vh); } }

    /* Copy nearly pinned, tiny lift for cohesion */
    @keyframes rs2-drift-copy { to { transform: translateY(-2vh); } }

    /* Foreground outruns the scroll: rises from its sunken start to
       exactly flush with the hero's bottom edge at end of range */
    @keyframes rs2-drift-fg   {
      to { transform: translateY(calc(-1 * var(--rs2-fg-drift))); }
    }
  }
}


/* ============ CLIENT TICKER · HERO PLACEMENT ============ */
/* The ticker component itself (surface, mask, marquee, run geometry,
   dots, hover pause, phone blur fallback, reduced-motion) now lives
   in rs2-components.css, enqueued SITEWIDE at priority 24. This file
   only positions the hero's instance as the z-5 overlay. Loads at
   priority 25, so it wins by specificity AND cascade order. */

.rs2-hero .rs2-logos {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 5;
}


/* ============ MOTION KILL SWITCHES ============ */

@media (prefers-reduced-motion: reduce) {
  .rs2-para {
    animation: none !important;
  }
  /* Ticker's reduced-motion rule lives with the component
     in rs2-components.css. */
}

/* Tablet and below: layered composition stacks into flow.
   Copy 46vw + card 56vw would collide between 768 and 980px,
   so the stacking breakpoint is 980, matching the motion gate.

   STACKING NOTE (learned the hard way, Jul 2026): position: static
   ignores z-index entirely, so static copy/card were painted UNDER
   the absolutely positioned background (z-index 1) and the hero
   looked empty on mobile. relative keeps identical flow layout but
   restores z-index. inset must be reset to auto or the desktop
   offsets re-apply as relative nudges. */
@media (max-width: 980px) {
  .rs2-para {
    animation: none !important;
  }

  /* Background becomes a top banner (first viewport only) instead of
     stretching the full tall column; fades into the section's dark
     base so the card below sits on solid #0B0E13. */
  .rs2-hero .rs2-para--bg {
    height: 100svh;
    inset: 0 0 auto 0;
    -webkit-mask-image: linear-gradient(to bottom,
        black 0%, black 78%, transparent 100%);
    mask-image: linear-gradient(to bottom,
        black 0%, black 78%, transparent 100%);
  }

  /* Motion is off here, so the 115% parallax headroom only over-crops */
  .rs2-hero .rs2-para--bg img {
    height: 100%;
  }

  .rs2-hero .rs2-para--copy {
    position: relative !important;
    inset: auto !important;
    z-index: 3;
    width: 100%;
    padding: var(--rs-space-20) var(--rs-space-6) var(--rs-space-10);
  }

  .rs2-hero .rs2-para--card {
    position: relative !important;
    inset: auto !important;
    z-index: 3;
    width: auto;
    margin: 0 var(--rs-space-6) var(--rs-space-10);
  }

  /* Foreground dune, mobile treatment: pinned to the bottom of the
     first-viewport image banner (top: 100svh + translate -100%), NOT
     the section's distant bottom edge, where it floated as an orphan
     strip below the card. Sits at z 2: above the photo, below the
     copy, so text stays readable over it. Its opaque silhouette also
     hides the bg mask-fade seam. Transform is safe here: parallax
     keyframes are gated to 981px+. */
  .rs2-hero .rs2-para--fg {
    inset: 100svh 0 auto 0;
    transform: translateY(-100%);
    z-index: 2;
  }

  .rs2-card__table {
    overflow-x: auto;
  }

  .rs2-card__table table {
    min-width: 640px;   /* keeps 5 columns readable; container scrolls */
  }
}

/* Phone only: no expensive blur on the card glass.
   (Ticker's phone fallback moved to rs2-components.css.) */
@media (max-width: 767px) {
  .rs2-hero .rs2-para--card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgb(255 255 255 / 0.9);
  }
}