/* ====================================================================
   CAP SUR L'AFRIQUE — Micro-interactions & animations (GPU, 60fps)
   Uniquement transform / opacity pour rester fluide.
   ==================================================================== */

@keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes slideOutRight { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(60px); } }
@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }
@keyframes pulseSoft { 0%,100%{opacity:1} 50%{opacity:.55} }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }

.animate-fade-in-up { animation: fadeInUp .7s var(--transition) both; }
.animate-fade-in { animation: fadeIn .6s ease both; }
.animate-scale-in { animation: scaleIn .5s var(--transition) both; }
.animate-float { animation: floaty 6s ease-in-out infinite; }
.animate-shake { animation: shake .5s ease; }
.animate-pulse-soft { animation: pulseSoft 1.6s ease-in-out infinite; }

/* Apparition en cascade (stagger) */
[data-stagger] > * { opacity: 0; animation: fadeInUp .6s var(--transition) forwards; }
[data-stagger] > *:nth-child(1){animation-delay:.05s}
[data-stagger] > *:nth-child(2){animation-delay:.12s}
[data-stagger] > *:nth-child(3){animation-delay:.19s}
[data-stagger] > *:nth-child(4){animation-delay:.26s}
[data-stagger] > *:nth-child(5){animation-delay:.33s}
[data-stagger] > *:nth-child(6){animation-delay:.40s}
[data-stagger] > *:nth-child(7){animation-delay:.47s}
[data-stagger] > *:nth-child(8){animation-delay:.54s}

/* Effet ripple au clic */
.ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,.5); animation: rippleAnim .6s ease-out; pointer-events: none; }
@keyframes rippleAnim { to { transform: scale(3.2); opacity: 0; } }

/* Lien soulignement animé */
.lien-anime { position: relative; }
.lien-anime::after { content:''; position:absolute; left:0; bottom:-2px; height:1.5px; width:0; background: currentColor; transition: width var(--transition); }
.lien-anime:hover::after { width: 100%; }

/* Check animé (succès) */
.check-anime path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: drawCheck .5s .15s var(--transition) forwards; }

/* Transition de page : le contenu apparaît en fondu + léger glissement */
@keyframes pageIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.page-enter { animation: pageIn .55s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Soulignement de section décoratif */
.trait-deco { position: relative; }
.trait-deco::after { content: ''; display: block; width: 56px; height: 4px; border-radius: 999px; margin-top: .75rem; background: linear-gradient(90deg, var(--emeraude), var(--ocre)); }

/* Respecte les préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}