/* Ustawienia: czas wejścia, wysokość spadku i odstęp między kartami. */
:root {
  --reveal-time: .8s;
  --reveal-drop: 60px;
  --reveal-stagger: .1s;
  --reveal-exit-time: .28s;
}

/* Bez poprawnie uruchomionego JS treść pozostaje widoczna. */
.reveal { --reveal-rest: translateZ(0); }
.reveal.depth-card {
  --reveal-rest: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.reveal-ready .reveal {
  opacity: 0;
  transform: var(--reveal-rest) translateY(calc(-1 * var(--reveal-drop)));
  transform-origin: 50% 100%;
  transition: opacity var(--reveal-exit-time) ease, transform var(--reveal-exit-time) ease;
}
.reveal-ready .reveal.is-in {
  opacity: 1;
  transform: var(--reveal-rest);
  animation: reveal-drop var(--reveal-time) both;
  animation-delay: calc(var(--i, 0) * var(--reveal-stagger));
}
/* Po animacji usuwamy tylko klasę pomocniczą; hover nadal obraca kartę. */
.reveal-ready .reveal.is-in.is-settled { animation: none; }
.reveal-ready .reveal.is-out {
  opacity: 0;
  transform: var(--reveal-rest) translateY(-24px);
  animation: none;
}
.reveal-ready .reveal.reveal-text { transform: translateY(24px); }
.reveal-ready .reveal.reveal-text.is-in {
  transform: none;
  animation-name: reveal-text;
}
.reveal-ready .reveal.reveal-text.is-out { transform: translateY(-18px); }

/* Ruch obejmuje wyłącznie transform i opacity, więc nie zmienia układu. */
@keyframes reveal-drop {
  0% { opacity: 0; transform: var(--reveal-rest) translateY(calc(-1 * var(--reveal-drop))) scale(1); }
  62% { opacity: 1; transform: var(--reveal-rest) translateY(2px) scale(1.025, .965); }
  80% { opacity: 1; transform: var(--reveal-rest) translateY(-7px) scale(.995, 1.015); }
  100% { opacity: 1; transform: var(--reveal-rest) translateY(0) scale(1); }
}
@keyframes reveal-text {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Klawiatura i aktywny formularz zawsze mają pierwszeństwo. */
.reveal-ready .reveal:focus-within {
  opacity: 1 !important;
  transform: var(--reveal-rest) !important;
  animation: none !important;
}
.reveal-ready .reveal.depth-card.is-settled:active {
  transform: var(--reveal-rest) scale(.985);
}

/* Telefon: krótsze wejście bez odbicia i obrotów. */
@media (max-width: 768px) {
  :root { --reveal-time: .4s; --reveal-drop: 24px; --reveal-stagger: .06s; }
  .reveal.depth-card { --reveal-rest: translateZ(0); }
  .reveal-ready .reveal.is-in { animation-name: reveal-mobile; }
  .reveal-ready .reveal.reveal-text.is-in { animation-name: reveal-text; }
}
@keyframes reveal-mobile {
  from { opacity: 0; transform: translateY(calc(-1 * var(--reveal-drop))); }
  to { opacity: 1; transform: translateY(0); }
}

/* Tryb systemowy pozostaje dostępny po usunięciu jawnego włączenia ruchu.
   W tej wersji właściciel zlecił stałe włączenie animacji (data-user-motion). */
@media (prefers-reduced-motion: reduce) {
  html:not([data-user-motion=enabled]) { scroll-behavior: auto !important; }
  html:not([data-user-motion=enabled]) *, html:not([data-user-motion=enabled]) *::before,
  html:not([data-user-motion=enabled]) *::after { animation: none !important; transition: none !important; }
  html.reveal-ready:not([data-user-motion=enabled]) .reveal {
    opacity: 1 !important; transform: none !important;
  }
}