/* ============================================================
   FISS — animations.css
   Toutes les animations et keyframes
   ============================================================ */

/* ── Entrées globales ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeInFast {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ── Login ── */
@keyframes loginIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ── Modaux ── */
@keyframes modalIn {
  from { opacity: 0; transform: scale(.95) translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ── Toast ── */
@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes toastOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(10px); }
}

/* ── Pulse pour les badges actifs ── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .5; }
}

/* ── Star shimmer ── */
@keyframes starShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Spinner de chargement ── */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  width: 20px; height: 20px; border: 2px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin .6s linear infinite;
  display: inline-block;
}

/* ── Bar de progression ── */
@keyframes barGrow {
  from { width: 0; }
  to   { width: var(--target-width, 100%); }
}

/* ── Staggered children ── */
.stagger > * { animation: slideInUp .3s ease both; }
.stagger > *:nth-child(1) { animation-delay: .05s; }
.stagger > *:nth-child(2) { animation-delay: .10s; }
.stagger > *:nth-child(3) { animation-delay: .15s; }
.stagger > *:nth-child(4) { animation-delay: .20s; }
.stagger > *:nth-child(5) { animation-delay: .25s; }
.stagger > *:nth-child(6) { animation-delay: .30s; }

/* ── Hover lift ── */
.lift { transition: transform var(--transition), box-shadow var(--transition); }
.lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* ── Active press ── */
.btn:active { transform: translateY(0) scale(.98); }

/* ── Notification dot pulse ── */
.notif-dot { animation: pulse 2s ease infinite; }

/* ── House bar animation (déclenché au chargement de la page houses) ── */
.house-bar { animation: barGrow .8s ease both; animation-delay: .2s; }

/* ── Visibilité des pages (injectées par le router) ── */
/* Note : les pages sont maintenant injectées dans #page-content via fetch()
   donc on n'a plus besoin de .page / .page.active pour les cacher/montrer.
   Mais on garde l'animation d'entrée pour le container. */
#page-content { animation: fadeIn .2s ease; }