/*
 * ANIMATIONS — Évelyne Saboukoulou
 * Toutes les animations de scroll et transitions
 * ─────────────────────────────────────────────
 */

/* ─── État initial : éléments masqués ─────────
   L'Intersection Observer ajoute .is-visible
   pour déclencher les transitions.
   ──────────────────────────────────────────── */

.fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.75s ease-out, transform 0.75s ease-out;
}

.fade-in {
  opacity: 0;
  transition: opacity 0.75s ease-out;
}

.slide-left {
  opacity: 0;
  transform: translateX(-42px);
  transition: opacity 0.75s ease-out, transform 0.75s ease-out;
}

.slide-right {
  opacity: 0;
  transform: translateX(42px);
  transition: opacity 0.75s ease-out, transform 0.75s ease-out;
}

.scale-in {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

/* ─── Déclencheur : .is-visible ────────────── */
.fade-up.is-visible,
.fade-in.is-visible,
.slide-left.is-visible,
.slide-right.is-visible,
.scale-in.is-visible {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* ─── Délais échelonnés ────────────────────── */
.delay-1 { transition-delay: 0.08s;  }
.delay-2 { transition-delay: 0.18s;  }
.delay-3 { transition-delay: 0.30s;  }
.delay-4 { transition-delay: 0.44s;  }
.delay-5 { transition-delay: 0.58s;  }

/* ─── Séparateur doré animé ────────────────── */
.sep-anim {
  display: block;
  width: 50px;
  height: 1px;
  background: linear-gradient(to right, #6B0F2B, #C9A84C);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s ease-out 0.2s;
}

.is-visible .sep-anim,
.sep-anim.is-visible { transform: scaleX(1); }

/* ─── Hover lift ───────────────────────────── */
.hover-lift {
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 45px rgba(107, 15, 43, 0.16);
}

/* ─── Pulse sur CTA principal ──────────────── */
@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.32); }
  50%       { box-shadow: 0 0 0 10px rgba(201, 168, 76, 0); }
}

.pulse { animation: pulse-gold 2.6s ease-in-out infinite; }

/* ─── Parallax (classe CSS uniquement) ─────── */
.parallax-bg {
  will-change: transform;
}

/* ─── Keyframes globaux ────────────────────── */

/* Fondu montant — utilisé en @keyframes direct si besoin */
@keyframes fadeUpIn {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

/* Glissement depuis la gauche */
@keyframes slideFromLeft {
  from { opacity: 0; transform: translateX(-42px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Glissement depuis la droite */
@keyframes slideFromRight {
  from { opacity: 0; transform: translateX(42px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Zoom léger */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* Ligne de scroll dans le hero */
@keyframes scrollDrop {
  0%   { transform: scaleY(0) translateY(-100%); opacity: 1; }
  50%  { transform: scaleY(1) translateY(0%);    opacity: 1; }
  100% { transform: scaleY(0) translateY(100%);  opacity: 0; }
}

/* Clignotement discret */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* Rotation (loader) */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ─── Classes d'animation directe (sans IO) ── */
.anim-fade-up    { animation: fadeUpIn     0.75s ease-out both; }
.anim-fade-in    { animation: fadeIn       0.75s ease-out both; }
.anim-slide-left { animation: slideFromLeft 0.75s ease-out both; }
.anim-slide-right{ animation: slideFromRight 0.75s ease-out both; }
.anim-scale-in   { animation: scaleIn      0.7s  ease-out both; }

/* ─── Spinner loader ───────────────────────── */
.spinner {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 1.5px solid rgba(201, 168, 76, 0.28);
  border-top-color: #C9A84C;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}

/* ─── Ligne décorative animée sur hover ─────── */
.link-underline {
  position: relative;
  display: inline-block;
}

.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s ease-out;
}

.link-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}