/* ============================================================
   ANIMATIONS.CSS – Keyframes, scroll reveals, transitions UI
   Bonege Conseil – Consultant en Services Bancaires
   ============================================================ */

/* ============================================================
   1. KEYFRAMES GLOBAUX
   ============================================================ */

/* Bounce vertical (scroll hint) */
@keyframes bounceDown {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* Pulse doux (éléments CTA) */
@keyframes softPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 169, 110, 0.4); }
  50%       { box-shadow: 0 0 0 10px rgba(201, 169, 110, 0); }
}

/* Rotation spinner (loading form) */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Shimmer (placeholder) */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

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

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

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

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

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

/* Ligne de compétence (stat bar) */
@keyframes growRight {
  from { width: 0; }
  to   { width: 100%; }
}

/* Number counter – géré en JS, animation CSS support */
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   2. CLASSES DE REVEAL AU SCROLL (Intersection Observer)
   État initial = caché ; état visible = révélé
   ============================================================ */

/* ── Depuis le bas (défaut) ──────────────────────────────── */
[data-reveal="up"] {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity var(--duration-slower) var(--ease-out),
    transform var(--duration-slower) var(--ease-out);
}

[data-reveal="up"].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Depuis la gauche ─────────────────────────────────────── */
[data-reveal="left"] {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity var(--duration-slower) var(--ease-out),
    transform var(--duration-slower) var(--ease-out);
}

[data-reveal="left"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── Depuis la droite ─────────────────────────────────────── */
[data-reveal="right"] {
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity var(--duration-slower) var(--ease-out),
    transform var(--duration-slower) var(--ease-out);
}

[data-reveal="right"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── Scale in ─────────────────────────────────────────────── */
[data-reveal="scale"] {
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity var(--duration-slower) var(--ease-out),
    transform var(--duration-slower) var(--ease-spring);
}

[data-reveal="scale"].is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ── Délais de cascade pour les grilles ──────────────────── */
[data-delay="0"]   { transition-delay: 0ms; }
[data-delay="80"]  { transition-delay: 80ms; }
[data-delay="100"] { transition-delay: 100ms; }
[data-delay="160"] { transition-delay: 160ms; }
[data-delay="200"] { transition-delay: 200ms; }
[data-delay="240"] { transition-delay: 240ms; }
[data-delay="300"] { transition-delay: 300ms; }
[data-delay="320"] { transition-delay: 320ms; }
[data-delay="400"] { transition-delay: 400ms; }
[data-delay="500"] { transition-delay: 500ms; }

/* ── Préférence pour mouvement réduit ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal="up"],
  [data-reveal="left"],
  [data-reveal="right"],
  [data-reveal="scale"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  [data-delay] {
    transition-delay: 0ms !important;
  }
}

/* ============================================================
   3. ANIMATIONS DES ÉLÉMENTS HERO AU CHARGEMENT
   ============================================================ */

/* Le hero s'anime immédiatement (pas via IntersectionObserver) */
.hero__text [data-reveal="left"] {
  animation: slideLeft 0.9s var(--ease-out) forwards;
  animation-delay: 0.15s;
  opacity: 0; /* Visible après l'animation */
}

.hero__portrait [data-reveal="right"] {
  animation: slideRight 0.9s var(--ease-out) forwards;
  animation-delay: 0.3s;
  opacity: 0;
}

/* Séquence d'animation des éléments hero enfants */
.hero__eyebrow {
  animation: fadeIn 0.6s var(--ease-out) 0.2s forwards;
  opacity: 0;
}

.hero__title {
  animation: slideUp 0.8s var(--ease-out) 0.35s forwards;
  opacity: 0;
}

.hero__subtitle {
  animation: fadeIn 0.7s var(--ease-out) 0.55s forwards;
  opacity: 0;
}

.hero__pitch {
  animation: fadeIn 0.7s var(--ease-out) 0.70s forwards;
  opacity: 0;
}

.hero__actions {
  animation: slideUp 0.6s var(--ease-out) 0.85s forwards;
  opacity: 0;
}

.hero__trust-badges {
  animation: fadeIn 0.7s var(--ease-out) 1.0s forwards;
  opacity: 0;
}

.hero__scroll-hint {
  animation: fadeIn 1s var(--ease-out) 1.5s forwards;
  opacity: 0;
}

.portrait-frame {
  animation: scaleIn 0.9s var(--ease-spring) 0.4s forwards;
  opacity: 0;
}

/* Override: tout élément data-reveal dans le hero est forcé visible.
   Les enfants ont leurs propres animations CSS d'entrée. */
.hero [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* ── Animation spéciale du titre hero ──────────────────── */
.hero__title-first {
  animation: slideRight 0.7s var(--ease-out) 0.4s forwards;
  opacity: 0;
  display: block;
}

.hero__title-last {
  animation: slideLeft 0.7s var(--ease-out) 0.5s forwards;
  opacity: 0;
  display: block;
}

/* ============================================================
   4. TRANSITIONS D'INTERFACE
   ============================================================ */

/* Navigation active link indicator */
.nav-link.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Bouton submit en chargement */
.btn--loading {
  pointer-events: none;
  opacity: 0.8;
}

.btn--loading .btn__label::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  margin-left: var(--space-3);
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}

/* ============================================================
   5. TRANSITIONS AU SURVOL (HOVER)
   ============================================================ */

/* CTA button pulse doux */
.btn--gold {
  animation: none;
}

.btn--gold:focus-visible {
  animation: softPulse 1.5s ease-in-out infinite;
}

/* Timeline item hover */
.timeline__item {
  transition: none;
}

/* Stat card bar animation au scroll */
.stat-card.is-visible .stat-card__bar {
  animation: growRight 1s var(--ease-out) 0.3s forwards;
}

/* ============================================================
   6. TRANSITION DE LA NAVIGATION
   ============================================================ */

/* L'header lui-même transite entre transparent et opaque */
.site-header {
  /* Propriétés gérées dans components.css */
}

/* Overlay de menu mobile (fondu) */
.nav-menu {
  /* Propriétés gérées dans components.css */
}

/* ============================================================
   7. INDICATEUR DE SECTION ACTIVE (SCROLL SPY)
   ============================================================ */

/* Classe ajoutée par JS sur le nav-link actif */
.nav-link.is-active {
  color: var(--color-gold) !important;
}

.site-header.is-scrolled .nav-link.is-active {
  color: var(--color-navy-dark) !important;
}

/* ============================================================
   8. ANIMATION PORTRAIT FRAME (déco)
   ============================================================ */

.portrait-frame__deco--tl,
.portrait-frame__deco--br {
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.portrait-frame:hover .portrait-frame__deco--tl {
  transform: translate(-3px, -3px);
}

.portrait-frame:hover .portrait-frame__deco--br {
  transform: translate(3px, 3px);
}

.portrait-frame:hover .portrait-frame__accent {
  opacity: 0.8;
}