/* ============================================================
   BRACE AUTO PARTS — Studio motion + indigo accent layer.
   Loaded AFTER /css/studio.css, ONLY on the three pilot pages
   (home / payment / case-studies) — so its scoped selectors
   never leak onto other pages.

   Discipline:
   - Motion animates transform / opacity / translate ONLY (composited);
     never a property that triggers layout.
   - All motion is gated behind prefers-reduced-motion: no-preference.
   - Hidden states used by scroll-reveal are added by JS only, so
     content is always fully visible without JS.
   - Reuses studio.css tokens (--st-ease, --st-shadow-tile,
     --st-hair-strong, --st-r-tile …). studio.css itself is untouched.
   ============================================================ */

/* ---------- F. Indigo calibration tokens (two bands) ----------
   Band A (default) is restrained, deep ink-leaning indigo.
   Band B (body.stm-indigo-b) pushes presence up a notch — still
   ink-leaning, low-saturation, never fluorescent. Toggle via
   ?indigo=b or #indigo-b (studio-motion.js). */
:root {
  --stm-ind-a:  #2e3378;  /* progress / kicker gradient, dark  — band A */
  --stm-ind-b:  #4a52a8;  /* progress / kicker gradient, light — band A (6.9:1 on white) */
}
body.stm-indigo-b {
  --stm-ind-a:  #333a8f;
  --stm-ind-b:  #5f68cc;  /* 4.8:1 on white — passes AA for small text */
}

/* ============================================================
   Static "breathing-room" glow behind every first-screen section.
   Static layer (not motion) → always on. The home hero already
   ships its own radial glow, so it is excluded here.
   ============================================================ */
main > section:first-of-type:not(.studio-hero) { position: relative; }
main > section:first-of-type:not(.studio-hero)::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 70% 30%, rgba(255,255,255,.9), transparent 70%);
}
main > section:first-of-type:not(.studio-hero) > .container { position: relative; z-index: 1; }

/* ============================================================
   E. Indigo accent 2 — four-step path progress bar + kicker.
   Applies to case-studies "From a trial order to a full container"
   grid, tagged .stm-path in the HTML.
   ============================================================ */
.stm-path > div { position: relative; }
.stm-path > div::before {
  content: ""; position: absolute; top: 0; left: 0; height: 2px;
  background: linear-gradient(90deg, var(--stm-ind-a), var(--stm-ind-b));
}
.stm-path > div:nth-child(1)::before { width: 25%; }
.stm-path > div:nth-child(2)::before { width: 50%; }
.stm-path > div:nth-child(3)::before { width: 75%; }
.stm-path > div:nth-child(4)::before { width: 100%; }
/* kicker → indigo gradient text (specificity ties studio.css's
   .studio .font-label.text-secondary and wins by source order) */
.stm-path .font-label.text-secondary {
  background: linear-gradient(90deg, var(--stm-ind-a), var(--stm-ind-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   MOTION — everything below is gated on reduced-motion.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* ---- A. Hero one-shot entrance (pure CSS, no JS dependency) ---- */
  @keyframes stm-rise { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }

  /* home hero — class-scoped stagger. The .st-turntable is deliberately NOT
     animated: a fill-mode:both opacity animation leaves it a permanent
     stacking context, which isolates the parts' mix-blend-mode:multiply and
     paints a hard white box behind each photo. Left-column copy still enters. */
  .studio-hero .st-kicker    { animation: stm-rise .6s var(--st-ease) both .05s; }
  .studio-hero h1            { animation: stm-rise .6s var(--st-ease) both .12s; }
  .studio-hero .st-lede      { animation: stm-rise .6s var(--st-ease) both .2s; }
  .studio-hero .st-form      { animation: stm-rise .6s var(--st-ease) both .28s; }
  .studio-hero .st-form-note { animation: stm-rise .6s var(--st-ease) both .34s; }
  .studio-hero .st-stats     { animation: stm-rise .6s var(--st-ease) both .42s; }

  /* payment / case-studies first-screen hero — nth-child stagger of the
     container's direct children (kicker → h1 → lede → button/icon row) */
  main > section:first-of-type:not(.studio-hero) > .container > * {
    animation: stm-rise .6s var(--st-ease) both;
  }
  main > section:first-of-type:not(.studio-hero) > .container > *:nth-child(1) { animation-delay: .05s; }
  main > section:first-of-type:not(.studio-hero) > .container > *:nth-child(2) { animation-delay: .12s; }
  main > section:first-of-type:not(.studio-hero) > .container > *:nth-child(3) { animation-delay: .2s; }
  main > section:first-of-type:not(.studio-hero) > .container > *:nth-child(4) { animation-delay: .28s; }
  main > section:first-of-type:not(.studio-hero) > .container > *:nth-child(5) { animation-delay: .34s; }

  /* ---- B. Scroll reveal (JS toggles .stm-io / .stm-in) ---- */
  .stm-io {
    opacity: 0; translate: 0 14px;
    transition: opacity .6s var(--st-ease), translate .6s var(--st-ease);
    transition-delay: var(--stm-d, 0s);
  }
  .stm-io.stm-in { opacity: 1; translate: 0 0; }

  /* ---- C. Hover lift (cards) + image micro-zoom + pill ---- */
  div[class*="bg-surface-container-low"][class*="p-7"],
  div[class*="bg-surface-container-low"][class*="p-8"],
  a[class*="bg-surface-container-low"],
  article[class*="bg-surface-container-low"] {
    transition: transform .32s var(--st-ease), box-shadow .32s var(--st-ease), border-color .32s var(--st-ease);
  }
  div[class*="bg-surface-container-low"][class*="p-7"]:hover,
  div[class*="bg-surface-container-low"][class*="p-8"]:hover,
  a[class*="bg-surface-container-low"]:hover,
  article[class*="bg-surface-container-low"]:hover {
    transform: translateY(-4px);
    box-shadow: var(--st-shadow-tile);
    border-color: var(--st-hair-strong);
  }

  /* While revealing, the reveal transition must out-rank the card hover
     transition (0-2-1 above beats bare .stm-io at 0-1-0); JS drops .stm-io
     after the reveal completes to restore the hover transition. */
  main .stm-io.stm-io {
    transition: opacity .6s var(--st-ease), translate .6s var(--st-ease);
    transition-delay: var(--stm-d, 0s);
  }

  /* case-studies figures — image micro-zoom (figure image box has overflow-hidden) */
  figure img { transition: transform .6s var(--st-ease); }
  figure:hover img { transform: scale(1.03); }

  /* pill lift on hover; preserve the existing press scale on :active */
  .st-pill:hover  { transform: translateY(-1px); }
  .st-pill:active { transform: translateY(0) scale(.97); }
}

/* Belt-and-suspenders: never leave a JS-revealed unit hidden for
   reduced-motion users. (studio-motion.js also early-returns, so
   .stm-io is never even added in that case.) */
@media (prefers-reduced-motion: reduce) {
  .stm-io { opacity: 1; translate: none; }
}

/* ============================================================
   G. Hero fluid canvas (/fluid.js — WebGL stable-fluids).
   Superseded the canvas-2D stm-liquid pilot on 2026-07-16.
   The canvas is inserted by the script under [data-fluid] hero
   content; placement / z-index are set inline in JS. No WebGL,
   no float textures, or reduced-motion => no canvas at all.
   ============================================================ */
.studio-hero { isolation: isolate; }   /* self-contained blend root: the
   ink paints above the hero gradient yet below all content, and the parts'
   mix-blend-mode:multiply still samples gradient+ink together — so the
   white photo backgrounds reveal the ink instead of a hard box. */

/* ============================================================
   H. Cursor spotlight — hover-lift cards.
   Gated on html.stm-spot (added by studio-motion.js only for
   fine-pointer, no-preference users), plus a (pointer: fine)
   media guard, so touch / no-JS / reduced-motion users see the
   page exactly as before. Position tracked via --stm-mx/--stm-my.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) and (pointer: fine) {
  /* anchor the spotlight ::after (has no visual effect on its own) */
  html.stm-spot div[class*="bg-surface-container-low"][class*="p-7"],
  html.stm-spot div[class*="bg-surface-container-low"][class*="p-8"],
  html.stm-spot a[class*="bg-surface-container-low"],
  html.stm-spot article[class*="bg-surface-container-low"],
  html.stm-spot form[class*="bg-surface-container-low"] {
    position: relative;
  }
  html.stm-spot div[class*="bg-surface-container-low"][class*="p-7"]::after,
  html.stm-spot div[class*="bg-surface-container-low"][class*="p-8"]::after,
  html.stm-spot a[class*="bg-surface-container-low"]::after,
  html.stm-spot article[class*="bg-surface-container-low"]::after,
  html.stm-spot form[class*="bg-surface-container-low"]::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none; opacity: 0;
    transition: opacity .3s var(--st-ease);
    background: radial-gradient(240px at var(--stm-mx, 50%) var(--stm-my, 50%),
      rgba(255, 255, 255, .5), rgba(74, 82, 168, .12) 45%, transparent 70%);
  }
  html.stm-spot div[class*="bg-surface-container-low"][class*="p-7"]:hover::after,
  html.stm-spot div[class*="bg-surface-container-low"][class*="p-8"]:hover::after,
  html.stm-spot a[class*="bg-surface-container-low"]:hover::after,
  html.stm-spot article[class*="bg-surface-container-low"]:hover::after,
  html.stm-spot form[class*="bg-surface-container-low"]:hover::after {
    opacity: 1;
  }
  /* band B — slightly stronger card sheen */
  html.stm-spot body.stm-indigo-b div[class*="bg-surface-container-low"][class*="p-7"]::after,
  html.stm-spot body.stm-indigo-b div[class*="bg-surface-container-low"][class*="p-8"]::after,
  html.stm-spot body.stm-indigo-b a[class*="bg-surface-container-low"]::after,
  html.stm-spot body.stm-indigo-b article[class*="bg-surface-container-low"]::after,
  html.stm-spot body.stm-indigo-b form[class*="bg-surface-container-low"]::after {
    background: radial-gradient(250px at var(--stm-mx, 50%) var(--stm-my, 50%),
      rgba(255, 255, 255, .6), rgba(95, 104, 204, .16) 45%, transparent 70%);
  }
}