/* =============================================================
   ANIMATIONS — calm, unhurried, never bouncy.
   Everything here is switched off entirely by the
   prefers-reduced-motion block at the bottom of this file.
   ============================================================= */

/* ---------- Scroll reveal ----------
   JS adds .is-in when the element enters the viewport. Elements
   animate once and then stay. If JS never runs, content is
   visible by default (see the :not(.js) guard in main.js). */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-reveal) var(--ease-out),
              transform var(--t-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* On mobile: shorter travel, faster — speed beats spectacle */
@media (max-width: 767px) {
  .js .reveal { transform: translateY(10px); transition-duration: 420ms; }
}

/* Soft scale-in used by the lightbox and image frames */
.js .reveal--scale { transform: translateY(14px) scale(.985); }
.js .reveal--scale.is-in { transform: none; }

/* ---------- Parallax (desktop only, transform only) ---------- */
.parallax { will-change: transform; }
@media (max-width: 1023px) {
  .parallax { transform: none !important; }
}

/* ---------- Timeline draw ---------- */
.timeline__progress { transform-origin: top; transform: scaleY(var(--draw, 0)); transition: transform 120ms linear; }

/* ---------- Counters ---------- */
.counter { font-variant-numeric: tabular-nums; }

/* ---------- Gentle attention pulse for the primary CTA ----------
   One slow breath on load, then it stops. Never loops forever. */
@keyframes sh-settle {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.js .settle { animation: sh-settle var(--t-slow) var(--ease-out) both; }

/* =============================================================
   REDUCED MOTION — full stop. No exceptions.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .parallax { transform: none !important; }
  .timeline__progress { transform: scaleY(1); }
}