/* ══════════════════════════════════════════════════════
   animations.css — Keyframes et classes d'animation
   Contient TOUS les @keyframes du projet ainsi que les
   classes utilitaires .reveal utilisées par l'Observer.
   Dépend de variables.css (--ease-out).
   ══════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   KEYFRAMES — HERO
───────────────────────────────────────── */

/* Entrée fade + remontée (partagée par tous les éléments du hero) */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Léger dézoom de l'image de fond au chargement */
@keyframes heroBgZoom {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}

/* Ligne décorative gauche — s'étire depuis le centre */
@keyframes decoLineLeft {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* Ligne décorative droite — s'étire vers la droite */
@keyframes decoLineRight {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* Losange central — apparition en scale */
@keyframes decoDiamond {
  from { opacity: 0; transform: rotate(45deg) scale(0); }
  to   { opacity: 1; transform: rotate(45deg) scale(1); }
}

/* Rebond de l'indicateur de scroll */
@keyframes heroScrollBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

/* ─────────────────────────────────────────
   CLASSES REVEAL — SCROLL ANIMATIONS
   Activées par IntersectionObserver (main.js)
   via l'ajout de la classe .is-visible
───────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out),
              transform 0.7s var(--ease-out);
}

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

/* Variante : glissement depuis la gauche */
.reveal--left {
  transform: translateX(-32px);
}
.reveal--left.is-visible {
  transform: translateX(0);
}

/* Variante : glissement depuis la droite */
.reveal--right {
  transform: translateX(32px);
}
.reveal--right.is-visible {
  transform: translateX(0);
}

/* ─────────────────────────────────────────
   MOBILE — variantes reveal sans translateX
   Évite tout débordement horizontal sur petit écran
   et donne un ressenti plus naturel au scroll.
───────────────────────────────────────── */
@media (max-width: 767px) {
  .reveal--left,
  .reveal--right {
    transform: translateY(20px);
  }
  .reveal--left.is-visible,
  .reveal--right.is-visible {
    transform: translateY(0);
  }
}

/* ─────────────────────────────────────────
   MENU MOBILE — entrée en glissement des liens
───────────────────────────────────────── */
@keyframes navLinkIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─────────────────────────────────────────
   BACK-TO-TOP — pulsation douce (mobile)
───────────────────────────────────────── */
@keyframes softPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(36, 111, 159, 0.36); }
  50%       { box-shadow: 0 6px 28px rgba(36, 111, 159, 0.48),
                          0 0 0 6px rgba(36, 111, 159, 0.08); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--left,
  .reveal--right {
    opacity: 1;
    transform: none;
    transition: none;
  }
}