/* ============================================================
   ANIMATIONS — @keyframes + globalny strażnik prefers-reduced-motion
   Etap 1: keyframes dojdą w kolejnych etapach. Tu strażnik ruchu.
   ============================================================ */

/* Gdy użytkownik prosi o ograniczony ruch:
   - wyłączamy płynne przewijanie (snap nadal działa, ale skacze bez animacji)
   - zerujemy przejścia i animacje w całej stronie
   - stany końcowe animacji będą ustawiane bezpośrednio (per karta w kolejnych etapach) */
@media (prefers-reduced-motion: reduce) {
  .scroll {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   KARTA 1 — HERO (Etap 2): budowa warstwa po warstwie
   ============================================================ */

/* Ułożenie pojedynczej warstwy: pojawia się „gorąca" i stygnie. */
@keyframes layer-place {
  0% {
    opacity: 0;
    transform: translateY(12px) scaleX(0.55);
    background-color: var(--accent-hot);
    box-shadow: 0 0 16px rgba(255, 106, 43, 0.85);
  }
  55% {
    opacity: 1;
    transform: translateY(0) scaleX(1);
  }
  100% {
    background-color: #2e333b;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  }
}

/* Dysza wznosi się wraz z rosnącym obiektem. */
@keyframes nozzle-rise {
  from { transform: translate(-50%, 0); }
  to   { transform: translate(-50%, calc(-1 * var(--obj-h))); }
}

/* Pulsujący, gorący czubek dyszy. */
@keyframes tip-glow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 106, 43, 0.5)); }
  50%      { filter: drop-shadow(0 0 12px rgba(255, 106, 43, 0.95)); }
}

/* Wejście tekstu hero. */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   KARTA 2 — PROBLEM/ROZWIĄZANIE (Etap 3): wzrost paska postępu
   ============================================================ */
@keyframes bar-grow {
  from { width: 0; }
  to   { width: var(--w); }
}

/* ============================================================
   KARTA 3 — MATERIAŁY (Etap 4): fade treści przy zmianie materiału
   ============================================================ */
@keyframes fade-swap {
  from { opacity: 0.3; }
  to   { opacity: 1; }
}