/* ──────────────────────────────────────────────
 * Trustcast Motion Layer — iter-10
 *
 * Native CSS only. No JS animation libs imported here.
 *
 * Three building blocks:
 *   1. Keyframes (reveal-up, reveal-fade, line-draw, shu-pulse)
 *   2. Scroll-reveal classes — gated by IntersectionObserver in BaseLayout
 *   3. Micro-interaction primitives (hover, focus, press)
 *
 * Reduced motion: every animated rule has a prefers-reduced-motion override
 *   at the bottom of this file.
 *
 * Trigger lives in BaseLayout.astro (~12 lines):
 *   const io = new IntersectionObserver((entries) => {
 *     for (const e of entries) if (e.isIntersecting) {
 *       e.target.classList.add('is-in');
 *       io.unobserve(e.target);
 *     }
 *   }, { rootMargin: '0px 0px -10% 0px', threshold: 0.1 });
 *   document.querySelectorAll('.reveal, .reveal-stagger, .line-draw, .numeric-emphasis')
 *     .forEach(el => io.observe(el));
 * ────────────────────────────────────────────── */

/* ── 1. Keyframes ──────────────────────────────── */

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes reveal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes line-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes shu-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(199, 62, 29, 0.32); }
  60%  { box-shadow: 0 0 0 10px rgba(199, 62, 29, 0); }
  100% { box-shadow: 0 0 0 0 rgba(199, 62, 29, 0); }
}

/* ── 2. Scroll-reveal classes ──────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-medium) var(--ease-trust),
              transform var(--dur-medium) var(--ease-trust);
}
.reveal.is-in,
[data-reveal="static"] .reveal {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children — applied on parent, takes effect after .is-in */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-medium) var(--ease-trust),
              transform var(--dur-medium) var(--ease-trust);
  transition-delay: 0ms;
}
.reveal-stagger.is-in > * {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.is-in > *:nth-child(1) { transition-delay: calc(var(--stagger-step) * 0); }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: calc(var(--stagger-step) * 1); }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: calc(var(--stagger-step) * 2); }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: calc(var(--stagger-step) * 3); }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay: calc(var(--stagger-step) * 4); }

/* Line-draw — for hairlines and section seams */
.line-draw {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--dur-slow) var(--ease-trust);
}
.line-draw.is-in {
  transform: scaleX(1);
}

/* ── 3. Micro-interactions ─────────────────────── */

a, button, .btn, [role="button"] {
  transition:
    color var(--dur-fast) var(--ease-trust),
    background-color var(--dur-fast) var(--ease-trust),
    border-color var(--dur-fast) var(--ease-trust),
    transform var(--dur-fast) var(--ease-trust);
}

/* Underline-grow link — animated underline, paper baseline */
.link-prose {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-base) var(--ease-trust),
              color var(--dur-fast) var(--ease-trust);
}
.link-prose:hover {
  background-size: 100% 1px;
  color: var(--shu);
}

/* Focus ring — single canonical ring */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  transition: outline-offset var(--dur-instant) var(--ease-trust);
}

/* Press feedback — subtle, tactile, 1px */
.btn:active,
button:active {
  transform: translateY(1px);
}

/* Card hover — opt-in via .card-block--lift */
.card-block--lift {
  transition: transform var(--dur-base) var(--ease-trust),
              box-shadow var(--dur-base) var(--ease-trust),
              border-color var(--dur-base) var(--ease-trust);
}

/* Dopamine numeric — soft Shu pulse on first scroll-into-view */
.numeric-emphasis.is-in {
  animation: shu-pulse var(--dur-glacial) var(--ease-trust) 1;
}

/* ── Reduced motion ───────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > *,
  .line-draw {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .numeric-emphasis.is-in { animation: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}