/* BusNaTrase.pl — animacje sekcji dynamicznych (szablon 2a)
   Podpiąć po komponenty.css; do dodawania/usuwania służy animacje.js.
   Charakter: dostojny, spokojny — bez bounce, bez obrotów, nic >500 ms.
   Wejście 420 ms / wyjście 260 ms / kaskada +60 ms.
   Easing: cubic-bezier(0.22, 1, 0.36, 1). */

:root {
  --bnt-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --bnt-anim-in: 420ms;
  --bnt-anim-out: 260ms;
  --bnt-stagger: 60ms;
}

/* ===== 1. Wejście elementu (pole, wiersz przystanku, karta sekcji) ===== */
@keyframes bnt-enter {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.bnt-anim-enter {
  animation: bnt-enter var(--bnt-anim-in) var(--bnt-ease-out) both;
}

/* Nowa karta dodatkowo: bursztynowa poświata gasnąca ~900 ms — kieruje wzrok. */
@keyframes bnt-card-glow {
  0%   { box-shadow: 0 0 0 3px rgba(240, 168, 40, 0.35); }
  100% { box-shadow: 0 0 0 3px rgba(240, 168, 40, 0); }
}
.bnt-anim-enter-card {
  animation: bnt-enter var(--bnt-anim-in) var(--bnt-ease-out) both,
             bnt-card-glow 900ms var(--bnt-ease-out) 160ms both;
}

/* ===== 2. Kaskada — animacje.js nadaje --bnt-i (0,1,2…) ===== */
.bnt-anim-stagger { animation-delay: calc(var(--bnt-i, 0) * var(--bnt-stagger)); }

/* ===== 3. „Dobicie" znacznika segmentu (cyfra 1/2/3) ===== */
@keyframes bnt-badge-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  70%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); }
}
.bnt-anim-badge {
  animation: bnt-badge-pop 360ms var(--bnt-ease-out) 120ms both;
}

/* ===== 4. Wyjście (usunięcie) ===== */
@keyframes bnt-exit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}
.bnt-anim-exit {
  animation: bnt-exit var(--bnt-anim-out) ease-in both;
}

/* ===== 5. Przycisk „+ Dodaj…" — potwierdzenie kliknięcia ===== */
@keyframes bnt-press { 50% { transform: scale(0.985); } }
.bnt-btn-dashed:active, .bnt-btn-outline:active { animation: bnt-press 180ms var(--bnt-ease-out); }

/* ===== 6. Dostępność ===== */
@media (prefers-reduced-motion: reduce) {
  .bnt-anim-enter, .bnt-anim-enter-card, .bnt-anim-badge, .bnt-anim-exit { animation: none; }
}