/* ============================================================================
   Narrative animations — scroll-reveal, staggered entries, hover micro-fx.

   Principles (emil):
     - ease-out 200-300ms for entrances
     - transform + opacity only (GPU-friendly)
     - respect prefers-reduced-motion
     - frequently-seen interactions get NO animation
   ============================================================================ */

/* ─── Scroll reveal ───────────────────────────────────────────────────
   Elements marked with data-reveal start invisible + translated down,
   and animate into place when they intersect the viewport.
   A JS IntersectionObserver adds .is-revealed when visible.
*/
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Snap variant — faster pop for cards in a grid */
[data-reveal="snap"] {
  transform: translateY(8px) scale(0.98);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="snap"].is-revealed {
  transform: translateY(0) scale(1);
}

/* Hero variant — longer, softer */
[data-reveal="hero"] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 700ms var(--ease-out-soft),
    transform 700ms var(--ease-out-soft);
  transition-delay: var(--reveal-delay, 80ms);
}
[data-reveal="hero"].is-revealed {
  opacity: 1;
  transform: translateY(0);
}


/* ─── Pattern icon flourish on card hover ─────────────────────────── */

.pattern-card .pattern-icon,
.pattern-section-icon {
  display: inline-flex;
  transition: transform var(--dur-base) var(--ease-spring),
              color var(--dur-fast) ease;
}
@media (hover: hover) {
  .pattern-card:hover .pattern-icon { transform: translateY(-2px) rotate(-4deg); }
}

/* Pattern CTA arrow — slight translate on hover */
.pattern-section-cta .arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease);
}
@media (hover: hover) {
  .pattern-section-cta:hover .arrow { transform: translateX(4px); }
}


/* ─── Underline slide-in for inline links ─────────────────────────── */

.link-underline {
  position: relative;
  color: var(--accent);
  text-decoration: none;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .link-underline:hover::after { transform: scaleX(1); }
}


/* ─── Number counter fade-in (for stat-value) ────────────────────── */

[data-reveal] .stat-value,
[data-reveal] .stat-num,
[data-reveal] .composition-num {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0ms) + 150ms);
}
[data-reveal].is-revealed .stat-value,
[data-reveal].is-revealed .stat-num,
[data-reveal].is-revealed .composition-num {
  opacity: 1;
}


/* ─── Accent underline sweep on h1/h2 (narrative markers) ────────── */

.t-display[data-reveal-underline]::after,
.t-display[data-reveal-underline]::after,
h1[data-reveal-underline]::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  margin-top: var(--s-3);
  background: linear-gradient(90deg, var(--accent), transparent);
  transition: width 900ms var(--ease-out-soft);
  transition-delay: 200ms;
}
[data-reveal-underline].is-revealed::after {
  width: 120px;
}


/* ─── Respect reduced motion ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal="snap"],
  [data-reveal="hero"],
  [data-reveal] .stat-value,
  [data-reveal] .stat-num,
  [data-reveal] .composition-num,
  [data-reveal-underline]::after {
    opacity: 1 !important;
    transform: none !important;
    width: 120px !important;
    transition: none !important;
  }
}