:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-duration: 0.75s;
  --stagger-step: 90ms;
}

/* Pojedynczy element - fade up przy scrollu */
html.js .reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity var(--reveal-duration) var(--ease-out-expo),
    transform var(--reveal-duration) var(--ease-out-expo);
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Kontener - dzieci pojawiają się kaskadowo */
html.js .reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s var(--ease-out-expo),
    transform 0.65s var(--ease-out-expo);
}

html.js .reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

html.js .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
html.js .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: calc(var(--stagger-step) * 1); }
html.js .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: calc(var(--stagger-step) * 2); }
html.js .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: calc(var(--stagger-step) * 3); }
html.js .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: calc(var(--stagger-step) * 4); }
html.js .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: calc(var(--stagger-step) * 5); }
html.js .reveal-stagger.is-visible > *:nth-child(7) { transition-delay: calc(var(--stagger-step) * 6); }

/* CTA box - lekki scale */
html.js .reveal-scale {
  opacity: 0;
  transform: translateY(32px) scale(0.97);
  transition:
    opacity 0.85s var(--ease-out-expo),
    transform 0.85s var(--ease-out-expo);
}

html.js .reveal-scale.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Hero - wejście przy ładowaniu strony */
html.js .hero-entrance > * {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.8s var(--ease-out-expo),
    transform 0.8s var(--ease-out-expo);
}

html.js .hero-entrance.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

html.js .hero-entrance.is-visible > *:nth-child(1) { transition-delay: 0.1s; }
html.js .hero-entrance.is-visible > *:nth-child(2) { transition-delay: 0.22s; }
html.js .hero-entrance.is-visible > *:nth-child(3) { transition-delay: 0.34s; }
html.js .hero-entrance.is-visible > *:nth-child(4) { transition-delay: 0.46s; }

/* Nav - subtelne wejście */
html.js .nav-entrance {
  opacity: 0;
  transform: translateY(-12px);
  transition:
    opacity 0.6s var(--ease-out-expo),
    transform 0.6s var(--ease-out-expo);
}

html.js .nav-entrance.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .reveal-stagger > *,
  html.js .reveal-scale,
  html.js .hero-entrance > *,
  html.js .nav-entrance {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero__title .word {
    opacity: 1 !important;
    transform: none !important;
  }

  .btn--shift:hover .btn__text-slider {
    transform: none !important;
  }
}