/* =====================================================================
   Lunar · ruch. Wejście hero, karty wjeżdżające od dołu, odsłanianie wykresów.
   Krzywe pochodzą z tokenów w style.css (--ease-out, --ease-in-out).
   ===================================================================== */

/* ---------- Hero: wejście przy załadowaniu (rzadkie, pierwsze wrażenie) ----------
   Animuje tylko opacity oraz osobne właściwości `translate` i `scale`,
   więc nie koliduje z animacjami `transform` (dryf księżyca, skok strzałki). */
.hero-art {
  animation:
    hero-art-in 1600ms var(--ease-out) both,
    lunar-drift 36s ease-in-out 1600ms infinite alternate;
}
.hero-brand { animation: hero-drop 700ms var(--ease-out) 700ms both; }
.hero-title { animation: hero-rise 1000ms var(--ease-out) 300ms both; }
.hero-title-wrap {
  animation:
    hero-glow-in 1400ms var(--ease-out) 450ms both,
    lunar-title-breathe 6s ease-in-out 1850ms infinite;
}
.hero-sub { animation: hero-rise 900ms var(--ease-out) 480ms both; }
.hero-greeting { animation: hero-rise 900ms var(--ease-out) 640ms both; }
.hero-arrow { animation: hero-fade 900ms var(--ease-out) 1250ms both; }

@keyframes hero-art-in { from { opacity: 0; scale: 1.06; } to { opacity: 1; scale: 1; } }
@keyframes hero-rise { from { opacity: 0; translate: 0 24px; } }
@keyframes hero-drop { from { opacity: 0; translate: 0 -10px; } }
@keyframes hero-fade { from { opacity: 0; } }
@keyframes hero-glow-in { from { opacity: 0; translate: 0 24px; } to { opacity: .36; translate: 0 0; } }

/* Przewijanie w dół: napisy unoszą się wolniej niż strona i gasną (paralaksa).
   Animacja sterowana przewijaniem działa poza głównym wątkiem; starsze
   przeglądarki po prostu jej nie pokażą. */
@supports (animation-timeline: scroll()) {
  .hero-copy {
    animation: hero-away linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 100vh;
  }
  @keyframes hero-away { to { opacity: .1; translate: 0 -14vh; } }
}

/* ---------- Karty: wjazd od dołu, raz, gdy pojawią się na ekranie ----------
   Klasa .js-motion jest dodawana przez skrypt, więc bez JS karty są po prostu widoczne.
   Przejścia (nie keyframes), żeby wejście było przerywalne. */
.js-motion .enter {
  animation: none;
  opacity: 0;
  translate: 0 28px;
  transition:
    opacity 600ms var(--ease-out),
    translate 700ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js-motion .enter[data-visible] { opacity: 1; translate: 0 0; }

/* Wykres odsłania się od lewej po wjechaniu karty — linia „dojeżdża” do aktualnej ceny. */
.chart-reveal.revealed { transition: clip-path 1300ms var(--ease-in-out) 200ms; }

/* ---------- Ograniczony ruch: mniej i łagodniej, nie zero ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-art, .hero-brand, .hero-title, .hero-sub, .hero-greeting, .hero-arrow { animation: hero-fade 400ms ease both !important; }
  .hero-title-wrap { animation: none !important; }
  .hero-copy { animation: none !important; }
  .js-motion .enter { translate: none; transition: opacity 300ms ease; transition-delay: 0ms; }
}