/* File: /assets/css/animations.css */
/* ─────────────────────────────────────────────────────────────
   ANIMATIONS CSS — Won Marketing
   Keyframes + classes utilitaires d'animation.
   Les animations au scroll sont déclenchées par JS
   via l'ajout de la classe .is-visible sur les éléments.
───────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════
   RESPECT DES PRÉFÉRENCES UTILISATEUR
═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:   0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration:  0.01ms !important;
        scroll-behavior:      auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   KEYFRAMES FONDAMENTAUX
═══════════════════════════════════════════════════════════ */

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

/* Fondu sortant */
@keyframes fadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Montée + fondu (scroll reveal principal) */
@keyframes fadeUp {
    from {
        opacity:   0;
        transform: translateY(32px);
    }
    to {
        opacity:   1;
        transform: translateY(0);
    }
}

/* Descente + fondu */
@keyframes fadeDown {
    from {
        opacity:   0;
        transform: translateY(-24px);
    }
    to {
        opacity:   1;
        transform: translateY(0);
    }
}

/* Entrée depuis la gauche */
@keyframes fadeLeft {
    from {
        opacity:   0;
        transform: translateX(-40px);
    }
    to {
        opacity:   1;
        transform: translateX(0);
    }
}

/* Entrée depuis la droite */
@keyframes fadeRight {
    from {
        opacity:   0;
        transform: translateX(40px);
    }
    to {
        opacity:   1;
        transform: translateX(0);
    }
}

/* Zoom entrant */
@keyframes zoomIn {
    from {
        opacity:   0;
        transform: scale(0.88);
    }
    to {
        opacity:   1;
        transform: scale(1);
    }
}

/* Zoom sortant */
@keyframes zoomOut {
    from {
        opacity:   1;
        transform: scale(1);
    }
    to {
        opacity:   0;
        transform: scale(0.92);
    }
}

/* Rebond d'entrée */
@keyframes bounceIn {
    0%   { opacity: 0; transform: scale(0.75); }
    60%  { opacity: 1; transform: scale(1.05); }
    80%  { transform: scale(0.97); }
    100% { opacity: 1; transform: scale(1); }
}

/* Glissement vers le haut (cards) */
@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ─── Effets de fond / décoration ─── */

/* Rotation lente (éléments décoratifs) */
@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Flottement (icônes, blobs) */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-14px); }
}

/* Flottement lent */
@keyframes floatSlow {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33%       { transform: translateY(-10px) rotate(1.5deg); }
    66%       { transform: translateY(-5px) rotate(-1deg); }
}

/* Pulsation douce (badge, point live) */
@keyframes pulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%       { transform: scale(1.06); opacity: 0.85; }
}

/* Pulsation lumineuse (glow) */
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(79, 110, 247, 0.4); }
    50%       { box-shadow: 0 0 0 12px rgba(79, 110, 247, 0); }
}

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

/* Frappe texte (curseur clignotant) */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* Dégradé animé (hero background) */
@keyframes gradientShift {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}

/* Ondulation (bouton CTA) */
@keyframes ripple {
    0%   { transform: scale(0);   opacity: 0.6; }
    100% { transform: scale(2.5); opacity: 0; }
}

/* Entrée navbar (scroll vers le bas) */
@keyframes navbarSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* Compteur tick */
@keyframes countUp {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

/* Ligne de progression */
@keyframes progressLine {
    from { width: 0%; }
    to   { width: var(--progress, 100%); }
}

/* Blob morphing (arrière-plan héro) */
@keyframes morphBlob {
    0%  { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    50% { border-radius: 50% 60% 30% 60% / 30% 40% 70% 50%; }
    75% { border-radius: 40% 30% 60% 50% / 60% 50% 40% 30%; }
    100%{ border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

/* Apparition séquentielle des lettres */
@keyframes letterReveal {
    from {
        opacity:   0;
        transform: translateY(1em) rotateX(-40deg);
    }
    to {
        opacity:   1;
        transform: translateY(0) rotateX(0deg);
    }
}

/* ═══════════════════════════════════════════════════════════
   CLASSES UTILITAIRES — ANIMATION AU CHARGEMENT
═══════════════════════════════════════════════════════════ */

.animate-fade-in    { animation: fadeIn  var(--transition-slow) var(--ease-out-expo) both; }
.animate-fade-up    { animation: fadeUp  var(--transition-slow) var(--ease-out-expo) both; }
.animate-fade-down  { animation: fadeDown var(--transition-slow) var(--ease-out-expo) both; }
.animate-fade-left  { animation: fadeLeft var(--transition-slow) var(--ease-out-expo) both; }
.animate-fade-right { animation: fadeRight var(--transition-slow) var(--ease-out-expo) both; }
.animate-zoom-in    { animation: zoomIn  var(--transition-slow) var(--ease-out-expo) both; }
.animate-bounce-in  { animation: bounceIn 600ms var(--ease-out-back) both; }
.animate-float      { animation: float 4s ease-in-out infinite; }
.animate-float-slow { animation: floatSlow 7s ease-in-out infinite; }
.animate-spin-slow  { animation: spinSlow 20s linear infinite; }
.animate-pulse      { animation: pulse 2.5s ease-in-out infinite; }
.animate-glow-pulse { animation: glowPulse 2.5s ease-in-out infinite; }
.animate-gradient   { animation: gradientShift 8s ease infinite; }
.animate-morph      { animation: morphBlob 10s ease-in-out infinite; }

/* Délais d'animation (chaînage séquentiel) */
.delay-100  { animation-delay:  100ms; }
.delay-150  { animation-delay:  150ms; }
.delay-200  { animation-delay:  200ms; }
.delay-300  { animation-delay:  300ms; }
.delay-400  { animation-delay:  400ms; }
.delay-500  { animation-delay:  500ms; }
.delay-600  { animation-delay:  600ms; }
.delay-700  { animation-delay:  700ms; }
.delay-800  { animation-delay:  800ms; }
.delay-1000 { animation-delay: 1000ms; }
.delay-1200 { animation-delay: 1200ms; }

/* Durées personnalisées */
.duration-300  { animation-duration: 300ms; }
.duration-500  { animation-duration: 500ms; }
.duration-700  { animation-duration: 700ms; }
.duration-1000 { animation-duration: 1000ms; }
.duration-1500 { animation-duration: 1500ms; }

/* ═══════════════════════════════════════════════════════════
   SCROLL REVEAL — ÉTAT INITIAL (avant apparition)
   JS ajoute .is-visible pour déclencher l'animation
═══════════════════════════════════════════════════════════ */

/* Masquage initial des éléments à révéler */
[data-reveal] {
    opacity: 0;
    transition:
        opacity    0.65s var(--ease-out-expo),
        transform  0.65s var(--ease-out-expo);
    will-change: opacity, transform;
}

/* Directions de révélation */
[data-reveal="up"]    { transform: translateY(36px); }
[data-reveal="down"]  { transform: translateY(-24px); }
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="zoom"]  { transform: scale(0.88); }
[data-reveal="fade"]  { transform: none; }

/* Délais inline via data-delay="N" (géré en JS) */

/* État visible — déclenché par IntersectionObserver */
[data-reveal].is-visible {
    opacity:   1;
    transform: none;
}

/* ═══════════════════════════════════════════════════════════
   SKELETON LOADER
═══════════════════════════════════════════════════════════ */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--clr-bg-muted) 25%,
        var(--clr-border)   50%,
        var(--clr-bg-muted) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.6s ease-in-out infinite;
    border-radius: var(--radius-md);
}

/* ═══════════════════════════════════════════════════════════
   EFFETS DE SURVOL RÉUTILISABLES
═══════════════════════════════════════════════════════════ */

/* Élévation au survol */
.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.hover-lift:hover {
    transform:  translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Élévation forte */
.hover-lift-lg {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.hover-lift-lg:hover {
    transform:  translateY(-8px);
    box-shadow: var(--shadow-xl);
}

/* Scale au survol */
.hover-scale {
    transition: transform var(--transition-base);
}
.hover-scale:hover {
    transform: scale(1.03);
}

/* Glow coloré au survol */
.hover-glow {
    transition: box-shadow var(--transition-base);
}
.hover-glow:hover {
    box-shadow: var(--shadow-brand);
}

/* Icône qui monte au survol du parent */
.group:hover .group-icon {
    transform: translateY(-3px);
    transition: transform var(--transition-base) var(--ease-out-back);
}

/* ═══════════════════════════════════════════════════════════
   BOUTON — EFFET RIPPLE
═══════════════════════════════════════════════════════════ */
.btn-ripple {
    position: relative;
    overflow: hidden;
}
.btn-ripple .ripple-effect {
    position:      absolute;
    border-radius: 50%;
    background:    rgba(255, 255, 255, 0.35);
    transform:     scale(0);
    animation:     ripple 600ms linear;
    pointer-events:none;
}

/* ═══════════════════════════════════════════════════════════
   TEXTE GRADIENT ANIMÉ
═══════════════════════════════════════════════════════════ */
.text-gradient {
    background:             var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
    background-size:         200% auto;
}
.text-gradient-animate {
    background:             var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
    background-size:         200% auto;
    animation:              gradientShift 4s linear infinite;
}

/* ═══════════════════════════════════════════════════════════
   BLOB DÉCORATIF (héro / sections)
═══════════════════════════════════════════════════════════ */
.blob {
    position:      absolute;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    filter:        blur(64px);
    opacity:       0.35;
    pointer-events:none;
    animation:     morphBlob 12s ease-in-out infinite;
    will-change:   border-radius;
}
.blob--primary {
    background: var(--clr-primary-400);
}
.blob--accent {
    background: var(--clr-accent-400);
    animation-delay: -4s;
}

/* ═══════════════════════════════════════════════════════════
   CURSEUR CLIGNOTANT (typewriter)
═══════════════════════════════════════════════════════════ */
.typewriter-cursor::after {
    content:   '|';
    display:   inline-block;
    color:     var(--clr-primary-400);
    animation: blink 0.9s step-end infinite;
    margin-left: 2px;
}

/* ═══════════════════════════════════════════════════════════
   TRANSITION DE PAGE (fade entre pages)
═══════════════════════════════════════════════════════════ */
.page-transition {
    animation: fadeIn 400ms var(--ease-out-expo) both;
}

/* ═══════════════════════════════════════════════════════════
   NOTIFICATION / TOAST
═══════════════════════════════════════════════════════════ */
@keyframes toastIn {
    from { transform: translateY(100%) scale(0.92); opacity: 0; }
    to   { transform: translateY(0) scale(1);       opacity: 1; }
}
@keyframes toastOut {
    from { transform: translateY(0) scale(1);       opacity: 1; }
    to   { transform: translateY(100%) scale(0.92); opacity: 0; }
}

.toast-enter { animation: toastIn  350ms var(--ease-out-back) both; }
.toast-leave { animation: toastOut 280ms var(--ease-in-out)   both; }

/* ═══════════════════════════════════════════════════════════
   OVERLAY / MODAL
═══════════════════════════════════════════════════════════ */
@keyframes overlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes modalIn {
    from { opacity: 0; transform: scale(0.93) translateY(16px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.overlay-enter { animation: overlayIn 250ms ease both; }
.modal-enter   { animation: modalIn   350ms var(--ease-out-expo) both; }

/* ═══════════════════════════════════════════════════════════
   STAGGER — ANIMATION SÉQUENTIELLE ENFANTS
   Utilisé via JS : ajouter .stagger-children sur le parent
═══════════════════════════════════════════════════════════ */
.stagger-children > * {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity   0.55s var(--ease-out-expo),
        transform 0.55s var(--ease-out-expo);
}
.stagger-children.is-visible > *:nth-child(1)  { opacity: 1; transform: none; transition-delay:  60ms; }
.stagger-children.is-visible > *:nth-child(2)  { opacity: 1; transform: none; transition-delay: 130ms; }
.stagger-children.is-visible > *:nth-child(3)  { opacity: 1; transform: none; transition-delay: 200ms; }
.stagger-children.is-visible > *:nth-child(4)  { opacity: 1; transform: none; transition-delay: 270ms; }
.stagger-children.is-visible > *:nth-child(5)  { opacity: 1; transform: none; transition-delay: 340ms; }
.stagger-children.is-visible > *:nth-child(6)  { opacity: 1; transform: none; transition-delay: 410ms; }
.stagger-children.is-visible > *:nth-child(7)  { opacity: 1; transform: none; transition-delay: 480ms; }
.stagger-children.is-visible > *:nth-child(8)  { opacity: 1; transform: none; transition-delay: 550ms; }
.stagger-children.is-visible > *:nth-child(n+9){ opacity: 1; transform: none; transition-delay: 600ms; }