/* =============================================================
   animations.css — Animations professionnelles & discrètes
   Page : About — Site Dr. C. Joscky Ibrahim AHO
   ============================================================= */


/* ─────────────────────────────────────────────
   1. PRÉFÉRENCE ACCESSIBILITÉ
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ─────────────────────────────────────────────
   2. ÉTAT INITIAL — éléments cachés avant révélation
   ───────────────────────────────────────────── */
.anim-reveal {
  opacity: 0;
  transition:
    opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--anim-delay, 0s);
  will-change: opacity, transform;
}

.anim-reveal[data-anim="fade-up"]    { transform: translateY(30px); }
.anim-reveal[data-anim="fade-left"]  { transform: translateX(-30px); }
.anim-reveal[data-anim="fade-right"] { transform: translateX(30px); }
.anim-reveal[data-anim="fade-in"]    { transform: none; }

.anim-reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}


/* ─────────────────────────────────────────────
   3. HERO — animation au chargement immédiat
   ───────────────────────────────────────────── */

/* Image portrait */
.anim-hero-image {
  animation: heroPortraitIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes heroPortraitIn {
  from {
    opacity: 0;
    transform: translateX(-28px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Textes hero en cascade */
.anim-fade-up {
  animation: fadeUpHero 0.72s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: var(--anim-delay, 0s);
}

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


/* ─────────────────────────────────────────────
   4. TIMELINE — dot d'entrée animé
   ───────────────────────────────────────────── */

/* Le dot de la timeline apparaît avec un scale après révélation de l'item */
.timeline__item .timeline__dot {
  transform: scale(0);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: 0.3s;
}

.timeline__item.is-visible .timeline__dot {
  transform: scale(1);
}

/* Ligne de connexion entre dots : dessin progressif */
.timeline__item {
  --line-progress: 0%;
}

.timeline__item.is-visible {
  --line-progress: 100%;
}


/* ─────────────────────────────────────────────
   5. VISION CARDS — hover premium
   ───────────────────────────────────────────── */
/* Icône vision card : légère rotation au hover */
.vision-card__icon {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vision-card:hover .vision-card__icon {
  transform: rotate(-4deg) scale(1.08);
}


/* ─────────────────────────────────────────────
   6. CTA CARDS — hover & bouton
   ───────────────────────────────────────────── */
.cta-card__button {
  transition: opacity 0.2s ease;
}

.cta-card__button:hover {
  opacity: 0.88;
}


/* ─────────────────────────────────────────────
   7. CITATION FINALE — légère pulsation subtile
   ───────────────────────────────────────────── */
.philosophical-vision__quote.is-visible .philosophical-vision__quote-text {
  animation: quoteBreath 6s ease-in-out infinite;
  animation-delay: 0.8s;
}

@keyframes quoteBreath {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.82; }
}


/* ─────────────────────────────────────────────
   8. MICRO-INTERACTIONS PARTAGÉES
  ───────────────────────────────────────────── */

/* Footer links */
.footer__link {
  transition: opacity 0.2s ease;
}
.footer__link:hover {
  opacity: 0.7;
}

/* Liens sociaux footer — icône uniquement */
.footer__social-link i {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.footer__social-link:hover i {
  transform: rotate(-10deg) scale(1.12);
}