/* ===================================================================
   WILD PIXEL — PAGE BG TRACKING (locked May 2, 2026)
   Per BACKGROUND-CONTINUITY.md.

   Rule: bg colors never meet at a hard horizontal line. Body has a
   --bg-page CSS variable that toggles via class on scroll past hero.
   CSS transition (~700ms) animates the change to completion regardless
   of whether the user keeps scrolling — so there's no stuck-in-mid-fade
   state. Text colors and other elements that use --bg-fg track too.

   Activated by `body.is-interior-page` (set by the interior-page injector).
   The page-bg-tracking.js sibling handles the scroll-triggered class swap.
   =================================================================== */

/* @property registration makes the custom properties animatable as colors.
   Without this, CSS variable changes snap instantly even when the
   underlying property has a transition — text would jump while bg fades. */
@property --bg-page {
  syntax: '<color>';
  inherits: true;
  initial-value: #1E1E1C;
}
@property --bg-fg {
  syntax: '<color>';
  inherits: true;
  initial-value: #EEEEE3;
}
@property --bg-fg-em {
  syntax: '<color>';
  inherits: true;
  initial-value: #FF6B4F;
}
@property --bg-fg-soft {
  syntax: '<color>';
  inherits: true;
  initial-value: #C8C8BE;
}
/* Hero text-shadow value — registered as universal so it can swap between
   a real shadow and 'none' across the bg states. Not animatable as a
   shadow, but the toggle is instant and the surrounding bg fades over
   700ms so visually the halo just disappears with the dark canvas. */
@property --hero-h1-shadow {
  syntax: '*';
  inherits: true;
  initial-value: 0 2px 24px rgba(0, 0, 0, 0.45);
}

body.bg-tracks,
body.is-interior-page {
  /* Page bg starts dark (matches the hero register) */
  --bg-page:    #1E1E1C;
  --bg-fg:      #EEEEE3;
  --bg-fg-em:   #FF6B4F;
  --bg-fg-soft: #C8C8BE;
  /* Hero text-shadow killed always per Mike — interior heroes don't need it. */
  --hero-h1-shadow: none !important;

  background-color: var(--bg-page);
  color: var(--bg-fg);
  transition: background-color 700ms cubic-bezier(0.4, 0, 0.2, 1),
              color            700ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light-bg state — visitor scrolled past hero. */
body.bg-tracks.is-bg-light,
body.is-interior-page.is-bg-light {
  --bg-page:    #F5F0E2;   /* paper-warm */
  --bg-fg:      #1E1E1C;   /* charcoal */
  --bg-fg-em:   #C13E2D;   /* salmon-deep */
  --bg-fg-soft: #A2A29A;   /* slate */
}

/* Belt-and-braces: nuke text-shadow on hero h1 + sub regardless of state. */
body.is-interior-page .hero h1,
body.is-interior-page .hero-sub {
  text-shadow: none !important;
}

/* Dark-bg state at footer — visitor approaching footer, bg flips back. */
body.bg-tracks.is-bg-dark-foot,
body.is-interior-page.is-bg-dark-foot {
  --bg-page:    #1E1E1C;
  --bg-fg:      #EEEEE3;
  --bg-fg-em:   #FF6B4F;
  --bg-fg-soft: #C8C8BE;
}

/* Targeted transitions — applied to elements that consume the body-bg
   vars, so they animate smoothly when the body class swaps. Scoped to
   hero / form / interactive-on-body classes that are known to use
   var(--bg-fg) and var(--bg-fg-em). Avoids clobbering hover transitions
   on buttons, cards, nav, etc. that have their own color-bearing
   transitions. */
body.is-interior-page .hero,
body.is-interior-page .hero *,
body.is-interior-page .hero-eyebrow,
body.is-interior-page .hero-eyebrow *,
body.is-interior-page .hero-eyebrow-line,
body.is-interior-page .hero-eyebrow-line::before,
body.is-interior-page .hero-eyebrow-sub,
body.is-interior-page .hero h1,
body.is-interior-page .hero h1 em,
body.is-interior-page .hero-sub,
body.is-interior-page .hero-meta,
body.is-interior-page .hero-meta-item,
body.is-interior-page .hero-meta-item strong,
body.is-interior-page .hero-meta-item .meta-divider,
body.is-interior-page .hero-meta-item .coord,
body.is-interior-page .hero-ctas {
  transition-property: background-color, color, border-color, fill, stroke;
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sections that opt into transparent bg — inherit the body. Most
   inner-page sections should be transparent so the body bg shows through;
   exceptions are dark cards / interactive surfaces with their own bg. */
body.bg-tracks .bg-tracks-section,
body.is-interior-page .bg-tracks-section {
  background: transparent !important;
}