/**
 * On Method 2026 — hero readability system.
 * Video-game HUD legibility pass over the five animated heroes.
 *
 * What this fixes:
 *  1. DEAD SCRIMS — `.om-fx-frame > * { z-index: 1 }` in main.css puts every
 *     hero canvas ABOVE the `::before` readability scrims (z-index auto), so
 *     the scrims in chip/satellite/xwing painted behind their own canvases
 *     and did nothing. Re-layered: canvas (0) < scrim (1) < copy (2).
 *  2. HEADLINE LIFT — hero H1s use gradient-clipped text, so classic
 *     text-shadow would bleed through the transparent glyphs. A soft
 *     drop-shadow filter follows the rendered glyph shapes instead.
 *  3. BODY COPY LIFT — solid-color copy (kicker/sub/meta/secondary CTA)
 *     gets stacked dark text-shadows that hold up against explosions,
 *     warp flashes, and light-trail bursts without muddying the type.
 *  4. CTA POP — the gold pill keeps its brand color but gains separation
 *     shadow so it never dissolves into a bright canvas moment.
 *  5. CONTACT SCRIM — the warp hero had no scrim at all; added one.
 *  6. PHONE — full-width stacked copy gets a vertical scrim wash and a
 *     slightly larger kicker.
 *
 * Does NOT touch: copy content, canvas JS, animation intensity, karaoke
 * timing, or the fashion-theme light-text CSS vars.
 */

/* ============ 1. Layer repair: canvas < scrim < copy ============ */
.om-hero--chip .chip-canvas,
.om-hero--satellite .sat-canvas,
.om-hero--yacht .xwing-canvas {
  z-index: 0;
}
.om-hero--chip::before,
.om-hero--satellite::before,
.om-hero--yacht::before {
  z-index: 1;
}
.om-hero--chip .om-wrap,
.om-hero--satellite .om-wrap,
.om-hero--yacht .om-wrap {
  z-index: 2;
}

/* Contact warp hero: add the scrim it never had. Sits above the starfield
   (z 0), below the flash + copy (z 1, later in DOM). */
.om-hero--warp::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(2,3,10,0.62) 0%, rgba(2,3,10,0.30) 45%, transparent 70%);
  z-index: 1;
}

/* ============ 2. Headline lift (gradient-clipped safe) ============ */
.om-hero--chip .om-hero__copy h1,
.om-hero--satellite .om-hero__copy h1,
.om-hero--yacht .om-hero__copy h1,
.om-hero--warp .om-hero__copy h1 {
  filter: drop-shadow(0 2px 14px rgba(0,0,0,0.85)) drop-shadow(0 0 2px rgba(0,0,0,0.9));
}

/* ============ 3. Body copy lift ============ */
.om-hero--chip .om-kicker,
.om-hero--satellite .om-kicker,
.om-hero--yacht .om-kicker,
.om-hero--warp .om-kicker {
  text-shadow: 0 1px 8px rgba(0,0,0,0.85), 0 0 2px rgba(0,0,0,0.9);
}
.om-hero--chip .om-sub,
.om-hero--satellite .om-sub,
.om-hero--yacht .om-sub,
.om-hero--warp .om-sub {
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 2px 14px rgba(0,0,0,0.75);
}
.om-hero--chip .om-meta,
.om-hero--satellite .om-meta,
.om-hero--yacht .om-meta,
.om-hero--warp .om-meta {
  text-shadow: 0 1px 8px rgba(0,0,0,0.85);
}
.om-hero--chip .om-btn-secondary,
.om-hero--satellite .om-btn-secondary,
.om-hero--yacht .om-btn-secondary,
.om-hero--warp .om-btn-secondary {
  text-shadow: 0 1px 8px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.9);
}

/* ============ 4. CTA pop (brand gold untouched) ============ */
.om-hero--chip .om-cta-row .om-btn,
.om-hero--satellite .om-cta-row .om-btn,
.om-hero--yacht .om-cta-row .om-btn,
.om-hero--warp .om-cta-row .om-btn {
  box-shadow: 0 6px 28px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.10);
}

/* ============ 5. About: crawl page text elements ============ */
.sw-hero .sw-galaxy {
  text-shadow: 0 1px 10px rgba(0,0,0,0.9), 0 0 24px rgba(75,213,238,0.35);
}
.sw-hero .sw-cta .om-btn {
  box-shadow: 0 6px 28px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.10);
}
.sw-hero .sw-cta .om-btn-secondary {
  text-shadow: 0 1px 8px rgba(0,0,0,0.9);
}
.sw-hero .sw-skip {
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
}

/* ============ 6. Phone: vertical scrim wash + kicker scale ============ */
@media (max-width: 700px) {
  .om-hero--chip::before,
  .om-hero--satellite::before,
  .om-hero--yacht::before,
  .om-hero--warp::before {
    background: linear-gradient(180deg,
      rgba(1,2,8,0.74) 0%,
      rgba(1,2,8,0.46) 38%,
      rgba(1,2,8,0.30) 68%,
      rgba(1,2,8,0.62) 100%);
  }
  .om-hero--chip .om-kicker,
  .om-hero--satellite .om-kicker,
  .om-hero--yacht .om-kicker,
  .om-hero--warp .om-kicker {
    font-size: 0.78rem;
  }
}