/* ============================================================================
   ClaudeLight — shared motion layer
   Loaded by index.html, dark.html, pif.html and amm.html AFTER each page's own
   <style>, so it can refine what those already define. Everything here is
   additive: the pages' existing .reveal observers keep working untouched.

   Two rules held throughout:
     1. Animate transform and opacity only — never width/top/left — so nothing
        triggers layout during a scroll.
     2. Every effect degrades to nothing under prefers-reduced-motion, which is
        honoured at the bottom of this file rather than sprinkled through it.
   ============================================================================ */

:root {
  /* One easing for the whole site: a soft overshoot-free ease-out that reads
     as "settled" rather than "sprung". */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --anim-fast: 0.28s;
  --anim-base: 0.55s;
  --anim-slow: 0.8s;
}

/* ─────────────────────────────────────────────────────────────
   1. Scroll-in animations — [data-anim] on any element
   motion.js adds .anim-in when the element first enters view.
   ───────────────────────────────────────────────────────────── */
html.js [data-anim] {
  opacity: 0;
  transition: opacity var(--anim-base) var(--ease), transform var(--anim-base) var(--ease);
  will-change: opacity, transform;
}
html.js [data-anim="up"]    { transform: translateY(26px); }
html.js [data-anim="left"]  { transform: translateX(-28px); }
html.js [data-anim="right"] { transform: translateX(28px); }
html.js [data-anim="scale"] { transform: scale(0.94); }
html.js [data-anim="fade"]  { transform: none; }
html.js [data-anim].anim-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ─────────────────────────────────────────────────────────────
   2. Stagger — children of .stagger arrive one after another.
   Put .stagger on a grid or list; motion.js adds .in when it
   scrolls into view. The delays are on the CHILDREN, so the
   container itself never moves and layout stays stable.
   ───────────────────────────────────────────────────────────── */
html.js .stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--anim-base) var(--ease), transform var(--anim-base) var(--ease);
}
html.js .stagger.in > *,
html.js .stagger.visible > * {
  opacity: 1;
  transform: none;
}
.stagger.in > *:nth-child(1),  .stagger.visible > *:nth-child(1)  { transition-delay: 0.00s; }
.stagger.in > *:nth-child(2),  .stagger.visible > *:nth-child(2)  { transition-delay: 0.06s; }
.stagger.in > *:nth-child(3),  .stagger.visible > *:nth-child(3)  { transition-delay: 0.12s; }
.stagger.in > *:nth-child(4),  .stagger.visible > *:nth-child(4)  { transition-delay: 0.18s; }
.stagger.in > *:nth-child(5),  .stagger.visible > *:nth-child(5)  { transition-delay: 0.24s; }
.stagger.in > *:nth-child(6),  .stagger.visible > *:nth-child(6)  { transition-delay: 0.30s; }
.stagger.in > *:nth-child(7),  .stagger.visible > *:nth-child(7)  { transition-delay: 0.36s; }
.stagger.in > *:nth-child(8),  .stagger.visible > *:nth-child(8)  { transition-delay: 0.42s; }
.stagger.in > *:nth-child(9),  .stagger.visible > *:nth-child(9)  { transition-delay: 0.46s; }
.stagger.in > *:nth-child(10), .stagger.visible > *:nth-child(10) { transition-delay: 0.50s; }
.stagger.in > *:nth-child(11), .stagger.visible > *:nth-child(11) { transition-delay: 0.54s; }
.stagger.in > *:nth-child(12), .stagger.visible > *:nth-child(12) { transition-delay: 0.58s; }
.stagger.in > *:nth-child(13), .stagger.visible > *:nth-child(13) { transition-delay: 0.61s; }
.stagger.in > *:nth-child(14), .stagger.visible > *:nth-child(14) { transition-delay: 0.64s; }
.stagger.in > *:nth-child(15), .stagger.visible > *:nth-child(15) { transition-delay: 0.67s; }
.stagger.in > *:nth-child(16), .stagger.visible > *:nth-child(16) { transition-delay: 0.70s; }
.stagger.in > *:nth-child(17), .stagger.visible > *:nth-child(17) { transition-delay: 0.73s; }
/* Beyond 17 everything lands together — a longer cascade starts to feel slow. */
.stagger.in > *:nth-child(n + 18),
.stagger.visible > *:nth-child(n + 18) { transition-delay: 0.76s; }

/* ─────────────────────────────────────────────────────────────
   3. Section labels — the gold rule draws itself in
   Only labels that are already .reveal are touched, so a label
   without one is never left ruleless if JS fails.
   ───────────────────────────────────────────────────────────── */
.section-label.reveal::before {
  width: 0;
  transition: width var(--anim-base) var(--ease) 0.12s;
}
.section-label.reveal.visible::before { width: 28px; }

/* ─────────────────────────────────────────────────────────────
   4. Hero — entrance choreography and living background
   ───────────────────────────────────────────────────────────── */
/* The pages fade the whole hero block in with their own `fadeUp`. Once the
   children are choreographed individually that reads as doubled motion, so the
   block itself stops moving and the sequence carries the entrance. */
.hero-content.hero-seq { animation: none; opacity: 1; }

.hero-seq > * {
  opacity: 0;
  animation: heroRise 0.75s var(--ease) both;
}
.hero-seq > *:nth-child(1) { animation-delay: 0.10s; }
.hero-seq > *:nth-child(2) { animation-delay: 0.20s; }
.hero-seq > *:nth-child(3) { animation-delay: 0.32s; }
.hero-seq > *:nth-child(4) { animation-delay: 0.44s; }
.hero-seq > *:nth-child(5) { animation-delay: 0.54s; }
@keyframes heroRise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* The eyebrow's gold dash draws after the eyebrow itself lands. */
.hero-eyebrow::before {
  animation: ruleDraw 0.6s var(--ease) 0.35s both;
}
@keyframes ruleDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero-eyebrow::before { transform-origin: left center; }

/* The diagonal hatch on the sage panel drifts, very slowly. 58px is the
   pattern's period along X (41px at -45°), so the loop is seamless. */
.hero-visual::before {
  animation: hatchDrift 26s linear infinite;
}
@keyframes hatchDrift { to { transform: translateX(-58px); } }

/* The grid behind the landing hero breathes rather than drifts. */
.hero-bg-lines { animation: gridBreathe 14s ease-in-out infinite; }
@keyframes gridBreathe {
  0%, 100% { opacity: 0.04; transform: scale(1); }
  50%      { opacity: 0.07; transform: scale(1.03); }
}

/* Stat cards lift very slightly on hover — enough to feel alive, not enough
   to look like a button. */
.hero-stat-card {
  transition: transform var(--anim-fast) var(--ease), background var(--anim-fast), border-color var(--anim-fast);
}
.hero-stat-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Counting numbers reserve their own width so the layout cannot jitter while
   the digits tick up. */
[data-count] { font-variant-numeric: tabular-nums; }

/* ─────────────────────────────────────────────────────────────
   5. Cards — depth on hover, and a nudge for the icon inside
   ───────────────────────────────────────────────────────────── */
.card, .benefit-card, .class-card, .usecase-card, .feature-card {
  transition: transform var(--anim-fast) var(--ease),
              box-shadow var(--anim-fast) var(--ease),
              border-color var(--anim-fast) var(--ease);
}
.card:hover, .benefit-card:hover { transform: translateY(-5px); border-color: var(--gold); }
.card-icon, .benefit-icon { transition: transform var(--anim-fast) var(--ease), background var(--anim-fast); }
.card:hover .card-icon,
.benefit-card:hover .benefit-icon { transform: translateY(-2px) rotate(-4deg); }
.card-icon svg, .benefit-icon svg { transition: transform var(--anim-fast) var(--ease); }
.card:hover .card-icon svg,
.benefit-card:hover .benefit-icon svg { transform: scale(1.1); }

/* Pills and chips settle in a wave and respond to the pointer. */
.pill, .coverage-pill, .field-chip, .user-chip {
  transition: transform var(--anim-fast) var(--ease), background var(--anim-fast), border-color var(--anim-fast);
}
.pill:hover, .coverage-pill:hover, .field-chip:hover, .user-chip:hover { transform: translateY(-2px); }

/* ─────────────────────────────────────────────────────────────
   6. Buttons and links
   ───────────────────────────────────────────────────────────── */
.btn-primary, .btn-outline, .nav-cta, .nav-quote, .nav-login {
  transition: transform var(--anim-fast) var(--ease), background var(--anim-fast),
              color var(--anim-fast), box-shadow var(--anim-fast), border-color var(--anim-fast);
}
.btn-primary:hover, .btn-outline:hover { box-shadow: 0 10px 26px rgba(15, 26, 20, 0.18); }
.nav-cta:hover, .nav-quote:hover { transform: translateY(-1px); }

/* motion.js wraps a trailing → or ↓ so it can travel on hover. */
.arw { display: inline-block; transition: transform var(--anim-fast) var(--ease); }
a:hover > .arw, button:hover > .arw { transform: translateX(4px); }
a:hover > .arw.down, button:hover > .arw.down { transform: translateY(3px); }

/* Nav links grow a gold underline instead of only changing colour. */
.nav-links a:not(.nav-cta):not(.nav-quote):not(.nav-login):not(.theme-toggle) {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size var(--anim-fast) var(--ease), color 0.2s;
  padding-bottom: 3px;
}
.nav-links a:not(.nav-cta):not(.nav-quote):not(.nav-login):not(.theme-toggle):hover,
.nav-links a.current:not(.nav-cta):not(.nav-quote):not(.nav-login) { background-size: 100% 1.5px; }

/* The nav itself arrives once, on load. */
nav#navbar { animation: navDrop 0.6s var(--ease) both; }
@keyframes navDrop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* ─────────────────────────────────────────────────────────────
   7. Reading progress — a hairline across the very top
   ───────────────────────────────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--brand-gold, #a97526), var(--gold, #c8a84b), var(--sage, #2d5a3d));
  z-index: 200;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   8. Keyboard focus — visible, on brand, and never on mouse clicks
   ───────────────────────────────────────────────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ─────────────────────────────────────────────────────────────
   9. Reduced motion — one place, not scattered
   Anything that moves is stilled; anything that was hidden
   pending an animation is shown outright.
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html.js [data-anim], html.js .stagger > *, .hero-seq > * { opacity: 1 !important; transform: none !important; }
  .section-label.reveal::before { width: 28px !important; }
  .scroll-progress { display: none; }
}