/* animations.css - all motion effects of the site. Loaded after page CSS, before typography.css.
   Uses only opacity / translate / scale (GPU friendly, no layout shift).
   Everything is inside prefers-reduced-motion: no-preference, so visitors who turned motion off see a static site. */
@media (prefers-reduced-motion: no-preference) {

  /* ---------- Keyframes ---------- */
  @keyframes fadeUp   { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
  @keyframes zoomIn   { from { opacity: 0; scale: .94; }        to { opacity: 1; scale: 1; } }
  @keyframes slideIn  { from { opacity: 0; translate: -24px 0; } to { opacity: 1; translate: 0 0; } }
  @keyframes waPulse  {
    0%   { box-shadow: 0 6px 18px rgba(0,0,0,.3), 0 0 0 0 rgba(37,211,102,.5); }
    70%  { box-shadow: 0 6px 18px rgba(0,0,0,.3), 0 0 0 16px rgba(37,211,102,0); }
    100% { box-shadow: 0 6px 18px rgba(0,0,0,.3), 0 0 0 0 rgba(37,211,102,0); }
  }

  /* ---------- Page load: header ---------- */
  .logo img { animation: zoomIn .6s ease-out backwards; }
  nav > ul  { animation: fadeUp .6s .1s ease-out backwards; }
  .hd > .btn { animation: fadeUp .6s .2s ease-out backwards; }

  /* ---------- Page load: home hero (backwards fill so the slider's own fade keeps working) ---------- */
  .hero .lbl    { animation: slideIn .7s .05s ease-out backwards; }
  .hero h1      { animation: fadeUp .8s .15s ease-out backwards; }
  .hero p.d     { animation: fadeUp .8s .25s ease-out backwards; }
  .hero .cta    { animation: fadeUp .8s .35s ease-out backwards; }
  .hero .ctl    { animation: fadeUp .8s .45s ease-out backwards; }
  .grid4 > :nth-child(1) img { animation: zoomIn .8s .15s ease-out backwards; }
  .grid4 > :nth-child(2) img { animation: zoomIn .8s .25s ease-out backwards; }
  .grid4 > :nth-child(3) img { animation: zoomIn .8s .35s ease-out backwards; }
  .grid4 > :nth-child(4) img { animation: zoomIn .8s .45s ease-out backwards; }

  /* ---------- Page load: inner page banner ---------- */
  .ph h1 { animation: fadeUp .8s .1s ease-out backwards; }
  .ph .bc { animation: fadeUp .8s .25s ease-out backwards; }

  /* ---------- Scroll reveal (classes are added by js/animations.js) ---------- */
  .reveal { opacity: 0; }
  .reveal.in { opacity: 1; animation: fadeUp .7s cubic-bezier(.2,.7,.2,1) backwards; }
  .reveal.reveal-zoom.in { animation-name: zoomIn; }
  .reveal.reveal-left.in { animation-name: slideIn; }
  /* stagger siblings (cards in a grid come in one after another) */
  .reveal.in:nth-child(4n+2) { animation-delay: .08s; }
  .reveal.in:nth-child(4n+3) { animation-delay: .16s; }
  .reveal.in:nth-child(4n+4) { animation-delay: .24s; }

  /* ---------- Hover / micro interactions ---------- */
  .btn .ar { transition: translate .2s; }
  .btn:hover .ar { translate: 4px 0; }
  .btn { transition: background .2s, box-shadow .2s, translate .2s; }
  .btn:hover { box-shadow: 0 8px 20px rgba(196,32,32,.28); translate: 0 -2px; }
  .btn.o:hover { box-shadow: none; }
  .pc { transition: transform .25s, border-color .25s; }
  .pc img { transition: transform .5s; }
  .pc:hover img { transform: scale(1.05); }
  .pc-wide:hover img { transform: none; }
  .more a, .help a, nav a, footer a { transition: color .2s, background .2s, translate .2s; }
  .more a:hover { translate: 4px 0; }
  .cb { transition: border-color .2s, color .2s, scale .15s; }
  .cb:active { scale: .92; }
  .wa { animation: waPulse 2.6s infinite; }
  .wa:hover, .up:hover { scale: 1.08; }
  .wa, .up { transition: scale .2s; }
  header { transition: box-shadow .3s; }
  header.scrolled { box-shadow: 0 6px 22px rgba(0,0,0,.09); }
  .sg b, .yr b, .cards2 b { font-variant-numeric: tabular-nums; }
}