/* ============================================================
   Czarna Nić - animations.css
   Stany początkowe elementów hero (przed przejęciem przez GSAP)
   + keyframes. Zasady:
   - stany ukryte TYLKO pod body[data-state="loading"] - timeout
     bezpieczeństwa w HTML flipuje na "ready", więc martwy JS
     nigdy nie zostawia pustej strony;
   - prefers-reduced-motion pokazuje wszystko od razu;
   - animujemy wyłącznie transform/opacity.
   ============================================================ */

/* ---------- Stany początkowe hero ---------- */

body[data-state="loading"] .hero__line-inner {
  transform: translateY(112%);
}

body[data-state="loading"] .hero__meta,
body[data-state="loading"] .hero__sub,
body[data-state="loading"] .hero__cta,
body[data-state="loading"] .hero__hint,
body[data-state="loading"] .nav {
  opacity: 0;
}

/* Łagodne ujawnienie, gdy flip na "ready" robi timeout awaryjny
   zamiast GSAP. Transitions zdefiniowane TYLKO w stanie docelowym
   (after-change style) - więc działają przy flipie atrybutu, ale
   nigdy nie walczą z GSAP-em animującym w trakcie "loading". */
body[data-state="ready"] .hero__line-inner {
  transition: transform var(--dur-3) var(--ease-craft);
}

body[data-state="ready"] .hero__meta,
body[data-state="ready"] .hero__sub,
body[data-state="ready"] .hero__cta,
body[data-state="ready"] .hero__hint,
body[data-state="ready"] .nav {
  transition: opacity var(--dur-3) var(--ease-craft);
}

/* ---------- Keyframes ---------- */

@keyframes hint-run {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

@keyframes grip-pulse {
  0%, 100% { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(193, 112, 46, 0.55); }
  50%      { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 0 14px rgba(193, 112, 46, 0); }
}

/* ---------- Reduced motion - pełny, elegancki fallback ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  body[data-state="loading"] .hero__line-inner { transform: none; }

  body[data-state="loading"] .hero__meta,
  body[data-state="loading"] .hero__sub,
  body[data-state="loading"] .hero__cta,
  body[data-state="loading"] .hero__hint,
  body[data-state="loading"] .nav {
    opacity: 1;
  }

  .hero__line-inner,
  .hero__meta, .hero__sub, .hero__cta, .hero__hint, .nav {
    transition: none;
  }

  .hero__hint-line::after { animation: none; }
  .compare__grip { animation: none; }
}