/* ============================================================
   ANIMATIONS.CSS — fade-in, hover effects, micro-interakcje
   Kompas / kolonie-dla-dzieci.pl
   ============================================================ */

/* ── FADE-IN (obsługiwane przez main.js IntersectionObserver) ──
   Dodaj data-animate do elementu, żeby go animować.
   Opcje: data-animate="fade-up" | "fade-left" | "fade-right" | "scale"
   Delay: data-delay="100" (ms)
── */

[data-animate] {
  opacity: 0;
  transition: opacity .55s ease, transform .55s ease;
}
[data-animate="fade-up"]    { transform: translateY(28px); }
[data-animate="fade-left"]  { transform: translateX(-28px); }
[data-animate="fade-right"] { transform: translateX(28px); }
[data-animate="scale"]      { transform: scale(.95); }

[data-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* Delay przez atrybut data-delay (ustawiany inline w HTML) */
/* Przykład: <div data-animate="fade-up" style="transition-delay: 150ms"> */

/* ── NAV SCROLLED ── */
.nav--scrolled {
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
}

/* ── HOVER — zdjęcia ── */
.img-hover {
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.img-hover img {
  transition: transform .4s ease;
}
.img-hover:hover img {
  transform: scale(1.04);
}

/* ── CARD HOVER (już w components.css, tu rozszerzenie) ── */
.card--anim {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* ── BUTTON PULSE (np. główny CTA) ── */
@keyframes pulse-orange {
  0%, 100% { box-shadow: 0 4px 16px rgba(255,133,0,.35); }
  50%       { box-shadow: 0 4px 32px rgba(255,133,0,.6); }
}
.btn--pulse {
  animation: pulse-orange 2.4s ease-in-out infinite;
}

/* ── STAGGER (dla kart w siatce) ── */
/* Dodaj .stagger-children do wrappera — dzieci dostaną opóźnienia */
.stagger-children > * { opacity: 0; transform: translateY(20px); transition: opacity .45s ease, transform .45s ease; }
.stagger-children > *.is-visible { opacity: 1; transform: none; }
.stagger-children > *:nth-child(1) { transition-delay: 0ms; }
.stagger-children > *:nth-child(2) { transition-delay: 80ms; }
.stagger-children > *:nth-child(3) { transition-delay: 160ms; }
.stagger-children > *:nth-child(4) { transition-delay: 240ms; }
.stagger-children > *:nth-child(5) { transition-delay: 320ms; }
.stagger-children > *:nth-child(6) { transition-delay: 400ms; }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  .stagger-children > *,
  .btn--pulse,
  .img-hover img {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── FALLBACK: jeśli JS nie działa, pokaż wszystko ── */
.no-js [data-animate],
.no-js .stagger-children > * {
  opacity: 1 !important;
  transform: none !important;
}