/*
 * Fichier    : animations.css
 * Rôle       : Tous les @keyframes (float, pulse, fadeUp, scroll, toasts,
 *              modals, orbes...) et classes utilitaires d'animation.
 *              Gre aussi le scroll reveal (IntersectionObserver classes).
 * Emplacement: assets/css/animations.css
 * Auteur     : RCBG
 * Projet     : Franck Emery v1.0.0
 */


/* ============================================================
   KEYFRAMES GLOBAUX
============================================================ */

/*  Apparition verticale (page load, modals, dashboard tabs)  */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*  Disparition verticale  */
@keyframes fadeDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(12px);
  }
}

/*  Fondu simple  */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/*  Apparition depuis la gauche  */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/*  Apparition depuis la droite  */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/*  Apparition depuis le bas (toast)  */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*  Disparition vers le bas  */
@keyframes slideOutDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(16px);
  }
}

/*  Apparition pop avec rebond lger (modal)  */
@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.90) translateY(12px);
  }
  60% {
    opacity: 1;
    transform: scale(1.02) translateY(-2px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/*  Disparition pop  */
@keyframes popOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.92);
  }
}

/*  Scale in (icnes, badges)  */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* ============================================================
   ORBES HERO (flottement indpendant  fond hero visiteur)
============================================================ */

@keyframes float-orb-1 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  30% {
    transform: translate(50px, 70px) scale(1.06);
  }
  65% {
    transform: translate(-30px, 35px) scale(0.96);
  }
}

@keyframes float-orb-2 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  35% {
    transform: translate(-60px, -45px) scale(1.09);
  }
  70% {
    transform: translate(25px, -65px) scale(0.94);
  }
}

@keyframes float-orb-3 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  40% {
    transform: translate(40px, -50px) scale(1.04);
  }
  75% {
    transform: translate(-20px, 30px) scale(0.97);
  }
}


/* ============================================================
   BADGE STATUT  PULSE (point clignotant hero)
============================================================ */

@keyframes statusPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.40;
    transform: scale(0.6);
  }
}

/* Halo pulsant autour du point */
@keyframes statusHalo {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}


/* ============================================================
   INDICATEUR DE SCROLL (ligne qui se dessine et s'efface)
============================================================ */

@keyframes scrollAnim {
  0% {
    transform: scaleY(0);
    transform-origin: top center;
    opacity: 1;
  }
  45% {
    transform: scaleY(1);
    transform-origin: top center;
    opacity: 1;
  }
  55% {
    transform: scaleY(1);
    transform-origin: bottom center;
    opacity: 1;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom center;
    opacity: 0.3;
  }
}


/* ============================================================
   FLASH BANNER  ROTATION DE MESSAGES
============================================================ */

@keyframes flashTextIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes flashTextOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}


/* ============================================================
   CARROUSEL  SLIDE TRANSITION
============================================================ */

/* La transition principale est gre via transform en JS.
   Ces keyframes servent aux tats d'entre/sortie forcs. */

@keyframes carouselSlideIn {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes carouselSlideInReverse {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/* ============================================================
   SHIMMER (ligne dcorative 404, dégradés)
============================================================ */

@keyframes shimmer {
  0%, 100% {
    opacity: 0.5;
    width: 60px;
  }
  50% {
    opacity: 1;
    width: 100px;
  }
}

/* Shimmer de chargement (skeleton loader) */
@keyframes shimmerLoad {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}


/* ============================================================
   HOVER LINE (service cards  ligne dégradée en haut)
============================================================ */

@keyframes lineReveal {
  from {
    transform: scaleX(0);
    transform-origin: left center;
  }
  to {
    transform: scaleX(1);
    transform-origin: left center;
  }
}


/* ============================================================
   BOUNCE (feedback confirmation)
============================================================ */

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(-6px);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}


/* ============================================================
   SPIN (icne chargement)
============================================================ */

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Spin en sens inverse */
@keyframes spinReverse {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}


/* ============================================================
   TYPING DOTS (si nécessaire)
============================================================ */

@keyframes typingDot {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}


/* ============================================================
   SCROLL REVEAL  CLASSES UTILITAIRES
   Appliques par IntersectionObserver dans animations.js
============================================================ */

/* tat initial : invisible + dcal vers le bas */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 500ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* tat rvl : visible */
.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variante : depuis la gauche */
.reveal--left {
  opacity: 0;
  transform: translateX(-24px);
  transition:
    opacity 500ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal--left.reveal--visible {
  opacity: 1;
  transform: translateX(0);
}

/* Variante : depuis la droite */
.reveal--right {
  opacity: 0;
  transform: translateX(24px);
  transition:
    opacity 500ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal--right.reveal--visible {
  opacity: 1;
  transform: translateX(0);
}

/* Variante : scale (cards, stat) */
.reveal--scale {
  opacity: 0;
  transform: scale(0.95) translateY(16px);
  transition:
    opacity 450ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal--scale.reveal--visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Dlais de stagger pour les grilles */
.reveal--delay-1  { transition-delay: 60ms; }
.reveal--delay-2  { transition-delay: 120ms; }
.reveal--delay-3  { transition-delay: 180ms; }
.reveal--delay-4  { transition-delay: 240ms; }
.reveal--delay-5  { transition-delay: 300ms; }
.reveal--delay-6  { transition-delay: 360ms; }
.reveal--delay-7  { transition-delay: 420ms; }
.reveal--delay-8  { transition-delay: 480ms; }
.reveal--delay-9  { transition-delay: 540ms; }
.reveal--delay-10 { transition-delay: 600ms; }

/*  Respect de la prfrence de mouvement rduit  */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--scale {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ============================================================
   CLASSES D'ANIMATION UTILITAIRES
   (ajoutables via JS pour dclencher une animation ponctuelle)
============================================================ */

/* Apparition rapide */
.anim-fade-in {
  animation: fadeIn 0.25s ease both;
}

/* Apparition du bas  usage gnral */
.anim-fade-up {
  animation: fadeUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Pop avec rebond (modal, confirmation) */
.anim-pop-in {
  animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Scale discret (badges, icons) */
.anim-scale-in {
  animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Slide depuis la gauche */
.anim-slide-left {
  animation: slideInLeft 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Slide depuis la droite */
.anim-slide-right {
  animation: slideInRight 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Rotation continue (loader) */
.anim-spin {
  animation: spin 0.8s linear infinite;
}

/* Bounce discret */
.anim-bounce {
  animation: bounce 0.6s ease both;
}

/* Pulsation infinie (badge statut) */
.anim-pulse {
  animation: statusPulse 2s ease-in-out infinite;
}

/* Dlais utilitaires */
.anim-delay-100 { animation-delay: 100ms; }
.anim-delay-200 { animation-delay: 200ms; }
.anim-delay-300 { animation-delay: 300ms; }
.anim-delay-400 { animation-delay: 400ms; }
.anim-delay-500 { animation-delay: 500ms; }


/* ============================================================
   MICRO-INTERACTIONS HOVER COMMUNES
   (réutilisésés dans visitor.css et admin.css)
============================================================ */

/* lvation card au hover */
.hover-lift {
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* lvation bouton au hover */
.hover-lift-sm {
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.hover-lift-sm:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Glow accent au hover */
.hover-glow {
  transition: box-shadow var(--transition-base);
}

.hover-glow:hover {
  box-shadow: var(--shadow-accent);
}


/* ============================================================
   SKELETON LOADER (tats de chargement)
============================================================ */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg3) 25%,
    var(--bg4) 50%,
    var(--bg3) 75%
  );
  background-size: 400px 100%;
  animation: shimmerLoad 1.4s ease-in-out infinite;
  border-radius: var(--radius-md);
}

.skeleton--text {
  height: 14px;
  width: 100%;
}

.skeleton--title {
  height: 20px;
  width: 60%;
}

.skeleton--thumb {
  width: 60px;
  height: 45px;
  border-radius: var(--radius-sm);
}

.skeleton--card {
  height: 120px;
  width: 100%;
  border-radius: var(--radius-lg);
}


/* ============================================================
   RESPECT DE LA PRFRENCE DE MOUVEMENT RDUIT
   (appliqu  tous les keyframes et transitions)
============================================================ */

@media (prefers-reduced-motion: reduce) {

  /* Dsactiver toutes les animations et transitions complexes */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Exception : maintenir les transitions de thème (non perceptibles) */
  body,
  .nav-top,
  .nav-side,
  .sidebar,
  .auth-card,
  .modal__panel,
  .form-input,
  .form-textarea,
  .form-select {
    transition:
      background-color 0ms,
      border-color 0ms,
      color 0ms;
  }
}