/* ==========================================================================
   animations.css — Classes d'animation JS-driven (IntersectionObserver)
   Source  : new-template/index.html (inline <style>, section ANIMATIONS)
   Phase   : B — tâche B2
   Scope   : global (toutes les pages via inc_header.cfm)

   NOTE : ces classes sont AJOUTÉES DYNAMIQUEMENT par js/animations.js via
   IntersectionObserver. Elles ne peuvent PAS passer en classes Tailwind car
   le purge CSS supprimerait les classes jamais présentes dans le HTML initial.
   Elles restent donc obligatoirement en CSS custom.

   Utilisation :
     - Ajouter la classe de départ (.fade-up, .fade-left, etc.) sur l'élément.
     - js/animations.js ajoute .visible quand l'élément entre dans le viewport.
     - La transition CSS s'applique alors.
   ========================================================================== */

/* ===== ÉTATS INITIAUX (avant animation) ===== */

/* Fondu + montée */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Fondu + entrée depuis la gauche */
.fade-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Fondu + entrée depuis la droite */
.fade-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Fondu simple */
.fade-in {
  opacity: 0;
  transition: opacity 1s ease-out;
}

/* Zoom depuis légèrement réduit */
.scale-in {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* ===== ÉTAT VISIBLE (ajouté par JS) ===== */
.fade-up.visible,
.fade-left.visible,
.fade-right.visible,
.fade-in.visible {
  opacity: 1;
  transform: none;
}

.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* ===== DÉLAIS DE TRANSITION (stagger) ===== */
/* Utilisés inline : style="transition-delay:0.1s" etc.
   Préférable à des classes utilitaires pour éviter la prolifération. */

/* ===== BARRE ANIMÉE (hover .work-card, .critique) ===== */
.bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transition: transform 0.5s;
  transform-origin: left;
}

/* Déclenchement au survol du parent :
   le parent doit positionner overflow:hidden et position:relative */
.work-card:hover .bar,
.critique:hover .bar,
.news-card:hover .bar {
  transform: scaleX(1);
}

/* ===== DÉSACTIVATION POUR PRÉFÉRENCES RÉDUITES ===== */
@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .fade-left,
  .fade-right,
  .fade-in,
  .scale-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .scroll-indicator {
    animation: none;
  }

  .bar {
    transition: none;
  }
}