/* ============================================================
   Pack — classic / motion.css

   Reveal vocabulary for the data-reveal-* contract declared by
   the signature structure. Pairs with motion.js (which
   wires the IntersectionObserver).

   MOTION-BBOX RULE: every animated element must have a non-zero
   bounding box at rest. Use transform + opacity for reveals,
   never width/height. See structure/contract.md.
   ============================================================ */

@layer pack {
  /* Hairline divider below section eyebrows — scaleX reveal.
     The static visual properties (height, width, background, margin)
     live in style.css so the divider remains a visible line even if
     the motion layer is omitted. */
  .hd-divider {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .hd-divider.is-visible { transform: scaleX(1); }

  /* Per-word fill on the about-section manifesto statement.
     Words start at low opacity and fade in as they cross the
     viewport threshold. motion.js adds .is-on per word. */
  .hd-statement .hd-word {
    opacity: 0.1;
    transition: opacity 0.35s ease;
  }
  .hd-statement .hd-word.is-on { opacity: 1; }

  /* Generic fade-up reveal — opacity + translateY. Used by stats,
     hero badge, anything decorated with data-reveal-fade. Stagger
     via data-reveal-delay="1..4". */
  [data-reveal-fade] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s cubic-bezier(0.19, 1, 0.22, 1),
                transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
  }
  [data-reveal-fade].is-revealed {
    opacity: 1;
    transform: translateY(0);
  }
  [data-reveal-fade][data-reveal-delay="1"] { transition-delay: 0.08s; }
  [data-reveal-fade][data-reveal-delay="2"] { transition-delay: 0.16s; }
  [data-reveal-fade][data-reveal-delay="3"] { transition-delay: 0.24s; }
  [data-reveal-fade][data-reveal-delay="4"] { transition-delay: 0.32s; }

  /* Per-avatar hover bounce on the hero review badge. Each avatar springs
     upward independently when hovered. CSS-only — no JS wiring needed since
     :hover is a UA-driven state. Static circle geometry lives in style.css;
     the transition + transform are here so a no-motion fallback ships a
     static (non-animated) avatar stack. */
  .hd-hero__review-avatar {
    transition: transform var(--dur-fast) var(--ease-standard);
    will-change: transform;
  }
  .hd-hero__review-avatar:hover { transform: translateY(-4px); }

  /* Up-arrow micro-interaction — translate diagonally on button hover. */
  .hd-btn--arrow::after { transition: transform var(--dur-fast) var(--ease-standard); }
  .hd-btn--arrow:hover::after { transform: translate(2px, -2px); }

  @media (prefers-reduced-motion: reduce) {
    .hd-hero__review-avatar,
    .hd-btn--arrow::after { transition: none; }
    .hd-hero__review-avatar:hover,
    .hd-btn--arrow:hover::after { transform: none; }
  }
}