/**
 * ANIMATIONS ÉDUCATIVES MAGIQUES ✨
 * Effets attractifs spécialement conçus pour l'éducation
 */

/* ============================================
   PARTICULES ÉDUCATIVES FLOTTANTES
   ============================================ */
.education-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.particle {
    position: absolute;
    font-size: 2rem;
    opacity: 0.15;
    animation: floatParticle 15s infinite ease-in-out;
}

.particle.book { font-size: 2.5rem; }
.particle.star { font-size: 1.5rem; color: #C9A13B; }
.particle.cap { font-size: 2rem; color: #1F4E79; }
.particle.pencil { font-size: 2rem; }
.particle.lightbulb { font-size: 1.8rem; color: #C9A13B; }

.particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 12s; }
.particle:nth-child(2) { left: 20%; animation-delay: 2s; animation-duration: 15s; }
.particle:nth-child(3) { left: 30%; animation-delay: 4s; animation-duration: 13s; }
.particle:nth-child(4) { left: 40%; animation-delay: 1s; animation-duration: 16s; }
.particle:nth-child(5) { left: 50%; animation-delay: 3s; animation-duration: 14s; }
.particle:nth-child(6) { left: 60%; animation-delay: 5s; animation-duration: 17s; }
.particle:nth-child(7) { left: 70%; animation-delay: 2s; animation-duration: 15s; }
.particle:nth-child(8) { left: 80%; animation-delay: 4s; animation-duration: 13s; }
.particle:nth-child(9) { left: 90%; animation-delay: 1s; animation-duration: 16s; }

@keyframes floatParticle {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.15;
    }
    90% {
        opacity: 0.15;
    }
    100% {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}

/* ============================================
   GRADUATION CAP ANIMATION (Logo)
   ============================================ */
.graduation-float {
    animation: graduationFloat 3s ease-in-out infinite;
}

@keyframes graduationFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(5deg);
    }
}

/* ============================================
   SPARKLES EFFECT (Étoiles scintillantes)
   ============================================ */
.sparkle-container {
    position: relative;
    display: inline-block;
}

.sparkle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #C9A13B;
    border-radius: 50%;
    animation: sparkleAnimation 2s infinite;
    box-shadow: 0 0 10px #C9A13B;
}

.sparkle:nth-child(1) { top: 0; right: 0; animation-delay: 0s; }
.sparkle:nth-child(2) { top: 50%; left: 0; animation-delay: 0.5s; }
.sparkle:nth-child(3) { bottom: 0; right: 50%; animation-delay: 1s; }

@keyframes sparkleAnimation {
    0%, 100% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================
   TYPING EFFECT (Effet machine à écrire)
   ============================================ */
.typing-text {
    overflow: hidden;
    border-left: 3px solid #C9A13B;
    white-space: nowrap;
    animation: typing 3.5s steps(40, end), blink 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink {
    from, to { border-color: transparent; }
    50% { border-color: #C9A13B; }
}

/* ============================================
   BOOK FLIP ANIMATION
   ============================================ */
.book-flip {
    animation: bookFlip 4s ease-in-out infinite;
    transform-style: preserve-3d;
}

@keyframes bookFlip {
    0%, 100% {
        transform: perspective(1000px) rotateY(0deg);
    }
    50% {
        transform: perspective(1000px) rotateY(180deg);
    }
}

/* ============================================
   KNOWLEDGE WAVES (Ondes de connaissance)
   ============================================ */
.knowledge-wave {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(180deg, transparent, rgba(201, 161, 59, 0.1));
    animation: waveAnimation 8s ease-in-out infinite;
}

.wave:nth-child(2) {
    animation-delay: 2s;
    opacity: 0.5;
}

@keyframes waveAnimation {
    0%, 100% {
        transform: translateX(0) scale(1);
    }
    50% {
        transform: translateX(-25%) scale(1.1);
    }
}

/* ============================================
   SUCCESS CHECKMARK ANIMATION
   ============================================ */
.success-check {
    animation: successPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes successPop {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotate(10deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* ============================================
   PROGRESS GROWTH ANIMATION
   ============================================ */
.progress-grow {
    animation: progressGrowth 2s ease-out forwards;
}

@keyframes progressGrowth {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: var(--target-width);
        opacity: 1;
    }
}

/* ============================================
   FLOATING ICONS (Icônes flottantes)
   ============================================ */
.floating-icon {
    animation: floatingIcon 3s ease-in-out infinite;
}

.floating-icon:nth-child(even) {
    animation-direction: alternate-reverse;
}

@keyframes floatingIcon {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-20px) scale(1.1);
    }
}

/* ============================================
   COURSE CARD HOVER EFFECT (Effet carte interactive)
   ============================================ */
.course-card-interactive {
    position: relative;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.course-card-interactive::after {
    content: '📚';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 5rem;
    opacity: 0;
    transition: var(--transition);
}

.course-card-interactive:hover::after {
    transform: translate(-50%, -50%) scale(1) rotate(10deg);
    opacity: 0.1;
}

/* ============================================
   SHIMMER EFFECT (Effet brillance)
   ============================================ */
.shimmer {
    position: relative;
    overflow: hidden;
}

.shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(201, 161, 59, 0.3) 50%,
        transparent 100%
    );
    animation: shimmerMove 3s infinite;
}

@keyframes shimmerMove {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ============================================
   BADGE PULSE (Pulsation des badges)
   ============================================ */
.badge-pulse {
    animation: badgePulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes badgePulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.05);
    }
}

/* ============================================
   CONFETTI CELEBRATION (Confettis de réussite)
   ============================================ */
.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #C9A13B;
    animation: confettiFall 3s ease-out infinite;
}

.confetti:nth-child(odd) { background: #1F4E79; }
.confetti:nth-child(3n) { background: #A7C7A9; }

@keyframes confettiFall {
    0% {
        transform: translateY(-100px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* ============================================
   BOUNCE EFFECT (Rebond)
   ============================================ */
.bounce {
    animation: bounceAnimation 1s ease infinite;
}

@keyframes bounceAnimation {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

/* ============================================
   GLOW PULSE (Lueur pulsante)
   ============================================ */
.glow-pulse {
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(201, 161, 59, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(201, 161, 59, 0.6), 0 0 60px rgba(201, 161, 59, 0.4);
    }
}

/* ============================================
   ROTATE ICON (Rotation continue)
   ============================================ */
.rotate-slow {
    animation: rotateSlow 20s linear infinite;
}

@keyframes rotateSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================
   NUMBER COUNTER UP (Compteur animé)
   ============================================ */
.counter-up {
    animation: countUp 2s ease-out;
}

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

/* ============================================
   CARD REVEAL (Révélation des cartes)
   ============================================ */
.card-reveal {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
    animation: cardReveal 0.6s ease-out forwards;
}

.card-reveal:nth-child(1) { animation-delay: 0.1s; }
.card-reveal:nth-child(2) { animation-delay: 0.2s; }
.card-reveal:nth-child(3) { animation-delay: 0.3s; }
.card-reveal:nth-child(4) { animation-delay: 0.4s; }
.card-reveal:nth-child(5) { animation-delay: 0.5s; }
.card-reveal:nth-child(6) { animation-delay: 0.6s; }

@keyframes cardReveal {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================
   TEXT SHINE EFFECT (Texte brillant)
   ============================================ */
.text-shine {
    background: linear-gradient(
        90deg,
        #1F4E79 0%,
        #C9A13B 50%,
        #1F4E79 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShine 3s linear infinite;
}

@keyframes textShine {
    to {
        background-position: 200% center;
    }
}

/* ============================================
   BOOK PAGES TURN (Pages qui tournent)
   ============================================ */
.book-turn {
    position: relative;
    transform-style: preserve-3d;
    animation: bookPageTurn 4s ease-in-out infinite;
}

@keyframes bookPageTurn {
    0%, 100% {
        transform: rotateY(0deg);
    }
    25%, 75% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(180deg);
    }
}

/* ============================================
   STAR TWINKLE (Étoiles scintillantes)
   ============================================ */
.star-twinkle {
    animation: twinkle 1.5s ease-in-out infinite;
}

.star-twinkle:nth-child(2n) {
    animation-delay: 0.5s;
}

@keyframes twinkle {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.3;
        transform: scale(0.8);
    }
}

/* ============================================
   PENCIL WRITING ANIMATION
   ============================================ */
.pencil-write {
    animation: pencilWrite 2s ease-in-out infinite;
}

@keyframes pencilWrite {
    0%, 100% {
        transform: translateX(0) rotate(0deg);
    }
    25% {
        transform: translateX(5px) rotate(-15deg);
    }
    75% {
        transform: translateX(-5px) rotate(15deg);
    }
}

/* ============================================
   NOTIFICATION BADGE BOUNCE
   ============================================ */
.notification-bounce {
    animation: notificationBounce 2s ease infinite;
}

@keyframes notificationBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) scale(1);
    }
    40% {
        transform: translateY(-10px) scale(1.1);
    }
    60% {
        transform: translateY(-5px) scale(1.05);
    }
}

/* ============================================
   GROWING PLANT (Plante qui pousse - Symbole de croissance)
   ============================================ */
.grow-plant {
    animation: plantGrow 3s ease-out;
    transform-origin: bottom;
}

@keyframes plantGrow {
    from {
        transform: scaleY(0);
        opacity: 0;
    }
    to {
        transform: scaleY(1);
        opacity: 1;
    }
}

/* ============================================
   CERTIFICATE AWARD (Animation certificat)
   ============================================ */
.certificate-award {
    animation: certificateSlide 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes certificateSlide {
    0% {
        transform: translateY(100px) scale(0.5) rotate(-10deg);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* ============================================
   BRAIN PULSE (Cerveau pulsant - Intelligence)
   ============================================ */
.brain-pulse {
    animation: brainPulse 2s ease-in-out infinite;
}

@keyframes brainPulse {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.15);
        filter: brightness(1.2);
    }
}

/* ============================================
   RAINBOW TEXT (Texte arc-en-ciel éducatif)
   ============================================ */
.rainbow-text {
    background: linear-gradient(
        90deg,
        #1F4E79 0%,
        #C9A13B 25%,
        #A7C7A9 50%,
        #C9A13B 75%,
        #1F4E79 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbowMove 4s linear infinite;
}

@keyframes rainbowMove {
    to { background-position: 200% center; }
}

/* ============================================
   RIPPLE EFFECT (Effet d'ondulation)
   ============================================ */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(201, 161, 59, 0.3);
    transform: translate(-50%, -50%);
    animation: rippleEffect 2s ease-out infinite;
}

@keyframes rippleEffect {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
    }
}

/* ============================================
   SCALE UP ON HOVER (Zoom doux)
   ============================================ */
.scale-hover {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.scale-hover:hover {
    transform: scale(1.08);
}

/* ============================================
   SLIDE IN FROM RIGHT (Glissement droite)
   ============================================ */
.slide-in-right {
    animation: slideInRight 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slideInRight {
    from {
        transform: translateX(100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ============================================
   HEARTBEAT (Battement de cœur)
   ============================================ */
.heartbeat {
    animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
    }
    10%, 30% {
        transform: scale(0.9);
    }
    20%, 40% {
        transform: scale(1.1);
    }
}

/* ============================================
   ATTENTION SEEKER (Attire l'attention)
   ============================================ */
.attention {
    animation: attentionSeeker 2s ease-in-out infinite;
}

@keyframes attentionSeeker {
    0%, 100% {
        transform: scale(1);
    }
    10%, 20% {
        transform: scale(0.95) rotate(-3deg);
    }
    15%, 25% {
        transform: scale(1.05) rotate(3deg);
    }
}

/* ============================================
   LOADING DOTS (Points de chargement)
   ============================================ */
.loading-dots span {
    animation: loadingDots 1.4s infinite;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes loadingDots {
    0%, 80%, 100% {
        opacity: 0;
        transform: scale(0);
    }
    40% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================
   FLIP CARD (Carte qui se retourne)
   ============================================ */
.flip-card {
    perspective: 1000px;
}

.flip-card-inner {
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* ============================================
   MORPH SHAPE (Forme qui se transforme)
   ============================================ */
.morph-shape {
    animation: morphing 8s ease-in-out infinite;
}

@keyframes morphing {
    0%, 100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
}

/* ============================================
   RESPONSIVE ANIMATIONS - MOBILE
   ============================================ */
@media (max-width: 768px) {
    .particle {
        font-size: 1.5rem;
        opacity: 0.1;
    }
    
    .particle.book { font-size: 1.8rem; }
    .particle.star { font-size: 1.2rem; }
    .particle.cap { font-size: 1.5rem; }
    .particle.pencil { font-size: 1.5rem; }
    .particle.lightbulb { font-size: 1.4rem; }
    
    .sparkle {
        width: 6px;
        height: 6px;
    }
    
    .floating-icon {
        animation-duration: 4s;
    }
    
    @keyframes floatingIcon {
        0%, 100% {
            transform: translateY(0) scale(1);
        }
        50% {
            transform: translateY(-10px) scale(1.05);
        }
    }
}

@media (max-width: 480px) {
    .particle {
        font-size: 1.2rem;
        opacity: 0.08;
    }
    
    .particle.book { font-size: 1.5rem; }
    .particle.star { font-size: 1rem; }
    .particle.cap { font-size: 1.2rem; }
    .particle.pencil { font-size: 1.2rem; }
    .particle.lightbulb { font-size: 1.1rem; }
    
    /* Réduire l'intensité des animations sur mobile */
    .bounce {
        animation: bounceAnimationMobile 1s ease infinite;
    }
    
    @keyframes bounceAnimationMobile {
        0%, 20%, 50%, 80%, 100% {
            transform: translateY(0);
        }
        40% {
            transform: translateY(-10px);
        }
        60% {
            transform: translateY(-5px);
        }
    }
    
    .magnetic:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 15px 30px rgba(201, 161, 59, 0.3);
    }
    
    .shimmer::before {
        animation-duration: 4s;
    }
    
    .glow-pulse {
        animation: glowPulseMobile 2s ease-in-out infinite;
    }
    
    @keyframes glowPulseMobile {
        0%, 100% {
            box-shadow: 0 0 15px rgba(201, 161, 59, 0.2);
        }
        50% {
            box-shadow: 0 0 25px rgba(201, 161, 59, 0.4);
        }
    }
}

/* ============================================
   NEON GLOW (Lueur néon)
   ============================================ */
.neon-glow {
    animation: neonGlow 1.5s ease-in-out infinite alternate;
}

@keyframes neonGlow {
    from {
        text-shadow: 
            0 0 10px rgba(201, 161, 59, 0.5),
            0 0 20px rgba(201, 161, 59, 0.3);
    }
    to {
        text-shadow: 
            0 0 20px rgba(201, 161, 59, 0.8),
            0 0 30px rgba(201, 161, 59, 0.5),
            0 0 40px rgba(201, 161, 59, 0.3);
    }
}

/* ============================================
   MAGNETIC HOVER (Effet magnétique)
   ============================================ */
.magnetic {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.magnetic:hover {
    transform: translateY(-15px) scale(1.05);
    box-shadow: 0 20px 40px rgba(201, 161, 59, 0.4);
}

/* ============================================
   TYPEWRITER EFFECT (Machine à écrire)
   ============================================ */
.typewriter {
    overflow: hidden;
    border-left: 0.15em solid #C9A13B;
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: 0.1em;
    animation: 
        typewriter 4s steps(40, end),
        blinkCursor 0.75s step-end infinite;
}

@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blinkCursor {
    from, to { border-color: transparent; }
    50% { border-color: #C9A13B; }
}

/* ============================================
   FADE SCALE (Apparition avec zoom)
   ============================================ */
.fade-scale {
    animation: fadeScale 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes fadeScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================
   SLIDE UP DELAYED (Montée décalée)
   ============================================ */
.slide-up-1 { animation: slideUp 0.6s ease-out 0.1s both; }
.slide-up-2 { animation: slideUp 0.6s ease-out 0.2s both; }
.slide-up-3 { animation: slideUp 0.6s ease-out 0.3s both; }
.slide-up-4 { animation: slideUp 0.6s ease-out 0.4s both; }
.slide-up-5 { animation: slideUp 0.6s ease-out 0.5s both; }

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

/* ============================================
   JELLO EFFECT (Effet gelée)
   ============================================ */
.jello:hover {
    animation: jello 0.9s;
}

@keyframes jello {
    11.1% { transform: skewX(-12.5deg) skewY(-12.5deg); }
    22.2% { transform: skewX(6.25deg) skewY(6.25deg); }
    33.3% { transform: skewX(-3.125deg) skewY(-3.125deg); }
    44.4% { transform: skewX(1.5625deg) skewY(1.5625deg); }
    55.5% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
    66.6% { transform: skewX(0.390625deg) skewY(0.390625deg); }
    77.7% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
    88.8% { transform: skewX(0.09765625deg) skewY(0.09765625deg); }
    100% { transform: skewX(0) skewY(0); }
}