/* ============================================================
   SiteVerse — animations.css
   Keyframes + stany początkowe elementów animowanych.
   Stany początkowe działają TYLKO gdy JS jest aktywny
   (html.js) i intro trwa (body[data-state="loading"]) —
   bez JS oraz przy prefers-reduced-motion wszystko jest widoczne.
   ============================================================ */

/* ---------- Stany początkowe intro (hero) ---------- */

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

html.js body[data-state="loading"] [data-hero-meta],
html.js body[data-state="loading"] [data-hero-sub],
html.js body[data-state="loading"] [data-hero-cta] {
  opacity: 0;
  transform: translateY(14px);
}

html.js body[data-state="loading"] [data-hero-globe] {
  opacity: 0;
}

html.js body[data-state="loading"] [data-hero-strip] {
  opacity: 0;
  transform: translateY(24px);
}

/* Nawigacja pojawia się razem z intro (GSAP przejmuje inline) */
html.js body[data-state="loading"] .nav {
  opacity: 0;
  transform: translateY(-10px);
}

/* ---------- Marquee kadrów w hero ---------- */

@keyframes strip-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.hero__strip-track {
  animation: strip-scroll 46s linear infinite;
}

/* ---------- Formularz — linia biegnąca po przycisku (loading) ---------- */

@keyframes submit-run {
  from { transform: translateX(-101%); }
  to   { transform: translateX(101%); }
}

/* ---------- Reduced motion — wszystko widoczne, bez ruchu ---------- */

@media (prefers-reduced-motion: reduce) {
  html.js body[data-state="loading"] .hero__line-inner,
  html.js body[data-state="loading"] [data-hero-meta],
  html.js body[data-state="loading"] [data-hero-sub],
  html.js body[data-state="loading"] [data-hero-cta],
  html.js body[data-state="loading"] [data-hero-globe],
  html.js body[data-state="loading"] [data-hero-strip],
  html.js body[data-state="loading"] .nav {
    opacity: 1;
    transform: none;
  }

  .hero__strip-track { animation: none; }

  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}