/*
  Ruch na stronie (Jan dopuścił ruch 13.11.2026). Oszczędnie: wejście hero, odpowiedź FAQ, nacisk przycisku, uniesienie karty kroku.
  Reguły (tools/spojnosc.mjs je wymusza):
  1. cały ruch wyłącznie w bloku @media (prefers-reduced-motion: no-preference) poniżej,
  2. tylko transform i opacity, czasy i krzywa z tokenów (--d-1, --d-2, --d-3, --ease),
  3. nic, co przesuwa układ (CLS), nic zapętlonego, bez paralaksy, karuzel i animacji zależnych od przewijania,
  4. bez tego pliku (albo przy ograniczonym ruchu) strona wygląda i działa tak samo, tylko stoi.
*/
@media (prefers-reduced-motion: no-preference) {
  /* wejście hero: tekst wjeżdża po kolei, ilustracja lekko się unosi (bez opacity, żeby nie opóźniać LCP) */
  @keyframes wz-rise { from { opacity: 0; transform: translateY(12px); } }
  @keyframes wz-settle { from { transform: translateY(16px) scale(.985); } }
  @keyframes wz-nerv { 0%, 100% { transform: none; } 20% { transform: translateX(-2%) rotate(-1.5deg); } 40% { transform: translateX(2%) rotate(1.5deg); } 60% { transform: translateX(-1%) rotate(-1deg); } 80% { transform: translateX(1%) rotate(.5deg); } }
  .hero-text > * { animation: wz-rise var(--d-3) var(--ease) both; }
  .hero-text > :nth-child(2) { animation-delay: 60ms; }
  .hero-text > :nth-child(3) { animation-delay: 120ms; }
  .hero-text > :nth-child(4) { animation-delay: 180ms; }
  .hero-text > :nth-child(5) { animation-delay: 240ms; }
  .hero-art { animation: wz-settle calc(var(--d-3) * 2) var(--ease) both; }
  /* L-ka raz zadrży przed WORD-em i stoi dalej */
  .hero-art .hero-car { transform-origin: 50% 90%; animation: wz-nerv 900ms ease-in-out 900ms 1 both; }

  /* odpowiedź FAQ pojawia się miękko */
  .faq details[open] .faq-a { animation: wz-rise var(--d-2) var(--ease) both; }

  /* nacisk jak w aplikacji */
  .btn:active { transform: scale(.975); }

  /* karta kroku unosi się pod kursorem */
  @media (hover: hover) {
    .cols-3 > .card { transition: transform var(--d-2) var(--ease); }
    .cols-3 > .card:hover { transform: translateY(-4px); }
  }
}