/* ============================================================
   SPIS TREŚCI - animations.css (animacje wejścia on-scroll, bez biblioteki)
   1. KEYFRAMES
   2. STAN STARTOWY (element ukryty, tylko pod html.wb-anim)
   3. WEJŚCIE (.anim-in dokłada reveal.js)
   ------------------------------------------------------------
   Użycie: atrybut  data-anim="fade-up|fade|fade-left|fade-right|zoom"
   na elemencie; opcjonalnie  data-anim-delay="200"  (ms).

   Mechanizm: reveal.js (IntersectionObserver) dokłada klasę .anim-in, gdy
   element wchodzi w kadr, i zdejmuje ją dopiero, gdy element wyjdzie DOŁEM
   (pod viewport) - dzięki czemu animacja gra ponownie przy kolejnym scrollu
   w dół, a scroll w górę niczego nie animuje (element już przewinięty
   pozostaje widoczny).

   Wejście robimy ANIMACJĄ (keyframes), a nie transition - dzięki temu NIE
   nadpisujemy transition elementu, więc płynne hovery przycisków działają.
   Bez fill forwards, więc po animacji element wraca do naturalnego stanu
   (opacity z .anim-in), a animacja nie blokuje transformów z :hover.

   Bezpieczeństwo:
   - Chowamy TYLKO pod html.wb-anim (klasę dodaje reveal.js) - brak JS = widoczne.
   - prefers-reduced-motion: reduce = brak ruchu, treść od razu widoczna.
   ============================================================ */

/* === 1. KEYFRAMES === */
@keyframes wb-fade       { from { opacity: 0; }                              to { opacity: 1; } }
@keyframes wb-fade-up    { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: none; } }
@keyframes wb-fade-left  { from { opacity: 0; transform: translateX(2rem); } to { opacity: 1; transform: none; } }
@keyframes wb-fade-right { from { opacity: 0; transform: translateX(-2rem); } to { opacity: 1; transform: none; } }
@keyframes wb-zoom       { from { opacity: 0; transform: scale(0.92); }      to { opacity: 1; transform: none; } }

/* === 2. STAN STARTOWY (tylko gdy JS aktywny) === */
html.wb-anim [data-anim] { opacity: 0; }

/* === 3. WEJŚCIE (animacja, nie transition) === */
html.wb-anim [data-anim].anim-in {
    opacity: 1;
    animation: wb-fade-up .7s ease backwards;
}
html.wb-anim [data-anim="fade"].anim-in       { animation-name: wb-fade; }
html.wb-anim [data-anim="fade-up"].anim-in    { animation-name: wb-fade-up; }
html.wb-anim [data-anim="fade-left"].anim-in  { animation-name: wb-fade-left; }
html.wb-anim [data-anim="fade-right"].anim-in { animation-name: wb-fade-right; }
html.wb-anim [data-anim="zoom"].anim-in       { animation-name: wb-zoom; }

/* === Redukcja ruchu: treść od razu widoczna, bez animacji === */
@media (prefers-reduced-motion: reduce) {
    html.wb-anim [data-anim] { opacity: 1; animation: none; }
}