/* ── LawCommand page motion system ─────────────────────────────────
   Loaded after the page's inline styles. Every rule is scoped under
   html.lc-motion — motion.js only adds that class when the user has
   NOT requested reduced motion, so with reduced motion (or no JS)
   this sheet changes nothing.

   Theme tokens (copies from index.html):
   bg #0b0e14 · gold #c9a24b · gold-soft #ddbd72 · text #ece6d6 · dim #948b77
   ─────────────────────────────────────────────────────────────────── */

/* ── 1. Smooth scroll (Lenis) ──────────────────────────────────────
   While Lenis is lerping the native scroll position, CSS
   `scroll-behavior: smooth` (set on html by the page) fights it.
   motion.js adds .lc-lenis only when Lenis actually initialized. */
html.lc-motion.lc-lenis { scroll-behavior: auto; }

/* ── 2. Word-stagger reveals ───────────────────────────────────────
   motion.js splits h1 / h2 / .statement p into <span class="lcw">
   word units at runtime and adds .lc-split to the element; words
   stay hidden until the observer adds .lc-in. Per-word
   transition-delay is set inline by JS (~35ms stagger). */
html.lc-motion .lc-split .lcw {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.55em, 0);
  will-change: transform, opacity;
}
html.lc-motion .lc-split.lc-in .lcw {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),  /* strong ease-out */
    opacity 0.65s ease;
  will-change: auto;
}
/* Gradient text (h1 .gold): background-clip:text does not repaint
   correctly across animated inline-block descendants in Chrome, so
   each word inside a gradient span carries the gradient itself and
   the parent span's own clipped background is neutralized. */
html.lc-motion .lc-split .gold {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: inherit;
}
html.lc-motion .lc-split .gold .lcw {
  background: linear-gradient(120deg, #ddbd72, #c9a24b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* The loader's own hero hand-off (body.lc-hero-in .hero h1) animates the
   h1 block as a whole — the word stagger replaces it (never both). */
html.lc-motion body.lc-hero-in .hero h1.lc-split { animation: none; }

/* ── 3. Ghost type behind the statement band ───────────────────────
   JS injects .lc-ghost and drives its translate3d on scroll
   (apparent ~0.3x scroll speed). */
html.lc-motion .statement { position: relative; overflow: hidden; }
html.lc-motion .statement .wrap { position: relative; z-index: 1; }
html.lc-motion .lc-ghost {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  transform: translate(-50%, -50%);
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: 18vw;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px #c9a24b;
  opacity: 0.12; /* spec said ~5%, but 5% of a 1px stroke on #0b0e14 is
                      imperceptible — 12% keeps the ghost present-but-quiet */
  pointer-events: none;
  user-select: none;
}

/* ── 4. Glyph drift field inside .band.feat2 ───────────────────────
   JS injects .lc-glyphs (sibling of .wrap — never an ancestor, so
   the sticky feature stack keeps working) with ~24 .lc-glyph spans.
   Three opacity tiers; duration/delay/size/position inline via JS. */
html.lc-motion .band.feat2 { position: relative; }
html.lc-motion .band.feat2 .wrap { position: relative; z-index: 1; }
html.lc-motion .lc-glyphs {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
html.lc-motion .lc-glyph {
  position: absolute;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  color: #c9a24b;
  line-height: 1;
  animation: lcGlyphDrift var(--lc-gd, 40s) ease-in-out var(--lc-gdel, 0s) infinite;
  will-change: transform;
}
html.lc-motion .lc-glyph.lc-g1 { opacity: 0.10; }
html.lc-motion .lc-glyph.lc-g2 { opacity: 0.20; }
html.lc-motion .lc-glyph.lc-g3 { opacity: 0.35; }
@keyframes lcGlyphDrift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -52px, 0); }
}

/* ── 5. HUD micro-chrome ───────────────────────────────────────────
   Section index (JS-driven) + two registration marks. Both sit below
   the sticky header (z-index 50) and never intercept pointer events. */
html.lc-motion .lc-hud {
  position: fixed;
  left: 18px;
  bottom: 16px;
  z-index: 40;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  color: rgba(201, 162, 75, 0.55);
  pointer-events: none;
  user-select: none;
  font-variant-numeric: tabular-nums;
}
html.lc-motion body::before,
html.lc-motion body::after {
  content: '+';
  position: fixed;
  z-index: 40;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  color: rgba(201, 162, 75, 0.45);
  pointer-events: none;
  user-select: none;
}
html.lc-motion body::before { top: 74px; left: 18px; }
html.lc-motion body::after { bottom: 14px; right: 18px; }

/* ── 6. Magnetic primary CTAs ──────────────────────────────────────
   JS writes the pull vector as an inline transform every frame, so
   the CSS transform transition would double-smooth it — drop
   transform from the transition list while motion is active. The
   inline style is cleared when the button settles back at rest,
   which hands :hover's translateY(-2px) back to the stylesheet. */
html.lc-motion .btn-primary { transition: box-shadow 0.15s ease; }

/* ── Belt and braces: even if the class were added in error, nothing
   here may animate under prefers-reduced-motion. ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.lc-motion .lc-split .lcw { opacity: 1; transform: none; transition: none; }
  html.lc-motion .lc-glyph { animation: none; }
  html.lc-motion .lc-ghost,
  html.lc-motion .lc-hud { display: none; }
  html.lc-motion body::before,
  html.lc-motion body::after { content: none; }
}