/* ============================================================
   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); }

  /* About-intro avatar stack — per-avatar smooth hover lift.
     Slower duration (500ms) + same gentle ease-out for a smoother,
     unhurried glide. Lift bumped to -10px so the motion reads. */
  .hd-about__exp-avatar {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
  }
  .hd-about__exp-avatar:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
    z-index: 2;
  }

  /* Team card photo — zoom on card hover. Photo wrap clips overflow
     so the scaled-up image stays within the rounded frame. */
  .hd-team-dentix__photo {
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    will-change: transform;
  }
  .hd-team-dentix__card:hover .hd-team-dentix__photo {
    transform: scale(1.06);
  }

  /* About-intro twin panel — NO panel-wide hover.
     Each interactive element (corner arrow link, CTA pill) has its own
     scoped hover. The panel itself does not react to hover, so cursor
     entering the corner button doesn't accidentally trigger a whole-
     block style change. Fixes the "button hover bleeds to whole block
     container" bug. */

  @media (prefers-reduced-motion: reduce) {
    .hd-hero__review-avatar,
    .hd-btn--arrow::after,
    .hd-about__exp-avatar,
    .hd-about__twin-panel,
    .hd-team-dentix__photo { transition: none; animation: none; }
    .hd-hero__review-avatar:hover,
    .hd-about__exp-avatar:hover,
    .hd-btn--arrow:hover::after,
    .hd-team-dentix__card:hover .hd-team-dentix__photo { transform: none; }
  }
}