/* ============================================================
   Sip'Stroke — Animations (Tier 1)
   reveal-on-scroll · count-up · smooth scroll · button hover ·
   Ken Burns hero · page transitions

   CANONICAL ANIMATION SOURCE. Each HTML page currently still
   ships its own inline .reveal CSS + IntersectionObserver that
   adds .visible — those are now redundant and should be stripped
   in a follow-up cleanup pass. This file deliberately uses the
   SAME class convention (.reveal -> .reveal.visible) so it is a
   drop-in match for the existing markup and JS.

   Every rule lives inside (prefers-reduced-motion: no-preference).
   Users who opt out of motion get a static, fully-visible site —
   the absence of these rules IS the fallback (no JS needed).
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* ---- A. Reveal / fade-in on scroll ---- */
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* ---- B. Number count-up ---- */
  /* tabular-nums fixes digit width so the number doesn't jitter
     horizontally while counting. JS drives the actual count. */
  [data-count] {
    font-variant-numeric: tabular-nums;
  }

  /* ---- C. Smooth scroll ---- */
  html {
    scroll-behavior: smooth;
  }

  /* ---- D. Button hover lift ---- */
  /* Pure addition — no `transition` declared here. Every page's
     inline `.btn { transition: all 0.25s ease }` already animates
     this new transform + box-shadow. .btn-primary's inline hover
     sets translateY(-1px); the rule below overrides only that
     value. (.btn-ghost is covered by `.btn:hover` — elements
     carry both classes.) */
  .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  }
  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  }

  /* ---- E. Ken Burns hero ---- */
  /* Parameters mirror the inline `kenBurns` animation that 5 pages
     (index/experience/menu/book/visit) already use — so tagging a
     .hero-bg with .hero-kenburns reproduces the identical effect,
     plus the mobile-disable below that the inline version lacks. */
  .hero-kenburns {
    animation: ssKenBurns 24s ease-in-out infinite alternate;
    will-change: transform;
  }
  @keyframes ssKenBurns {
    0%   { transform: scale(1.05) translate(0, 0); }
    100% { transform: scale(1.18) translate(-1.5%, -1.5%); }
  }
  /* Off on small screens — performance + battery. */
  @media (max-width: 768px) {
    .hero-kenburns { animation: none; }
  }

  /* ---- F. Page transitions ---- */
  body {
    transition: opacity 0.4s ease;
  }
  body.page-leaving,
  body.page-entering {
    opacity: 0;
  }

}