/* ==========================================
   SORINE — ANIMATIONS
========================================== */

/* PERSONNAGE FLOTTANT */

.character-image {
    animation: characterFloat 5s ease-in-out infinite;
}

@keyframes characterFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

/* HALO */

.character-glow {
    animation: glowPulse 4s ease-in-out infinite;
}

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

    50% {
        opacity: 1;
        transform: scale(1.18);
    }
}

/* MÉTAMORPHOSE */

.character-image.transforming {
    animation: characterTransform 700ms ease-in-out both;
}

@keyframes characterTransform {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        opacity: 0;
        transform: scale(0.85);
        filter: brightness(2);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
    }
}

/* FLASH MAGIQUE */

.profile-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;

    border-radius: inherit;

    background: radial-gradient(
        circle at 50% 35%,
        var(--accent-secondary),
        transparent 65%
    );

    opacity: 0;
    pointer-events: none;
}

.profile-card.is-transforming::after {
    animation: magicFlash 700ms ease;
}

@keyframes magicFlash {
    0%, 100% {
        opacity: 0;
    }

    50% {
        opacity: 0.35;
    }
}

/* QUEUE */

.decor-tail {
    transform-origin: 75% 65%;
    animation: sorineTailFlow 10s ease-in-out infinite;
}

@keyframes tailSway {
    0%, 100% {
        transform: rotate(-3deg);
    }

    50% {
        transform: rotate(4deg);
    }
}

/* AILES */

.decor-wings-top,
.decor-wings-bottom {
    animation: wingsGlow 5s ease-in-out infinite;
}

@keyframes wingsGlow {
    0%, 100% {
        opacity: 0.85;
    }

    50% {
        opacity: 1;
    }
}

/* SCINTILLEMENTS */

.card-star {
    animation: starTwinkle 3s ease-in-out infinite;
}

.star-right {
    animation-delay: 1.5s;
}

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

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* PARTICULES */

.particle {
    position: absolute;
    bottom: -20px;

    left: var(--left);
    width: var(--size);
    height: var(--size);

    border-radius: 50%;
    opacity: 0;

    animation:
        particleRise var(--duration)
        linear infinite;

    animation-delay: var(--delay);
}

@keyframes particleRise {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
    }

    15% {
        opacity: 0.8;
    }

    85% {
        opacity: 0.6;
    }

    100% {
        opacity: 0;
        transform: translate3d(
            var(--drift),
            -110vh,
            0
        );
    }
}

/* APPARITION DE LA CARTE */

.profile-card {
    animation: cardEntrance 0.8s ease-out both;
}

@keyframes cardEntrance {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* APPARITION DES LIENS */

.social-link {
    animation: linkEntrance 0.6s ease-out both;
}

.social-link:nth-child(1) { animation-delay: 0.1s; }
.social-link:nth-child(2) { animation-delay: 0.15s; }
.social-link:nth-child(3) { animation-delay: 0.2s; }
.social-link:nth-child(4) { animation-delay: 0.25s; }
.social-link:nth-child(5) { animation-delay: 0.3s; }
.social-link:nth-child(6) { animation-delay: 0.35s; }
.social-link:nth-child(7) { animation-delay: 0.4s; }
.social-link:nth-child(8) { animation-delay: 0.45s; }
.social-link:nth-child(9) { animation-delay: 0.5s; }
.social-link:nth-child(10) { animation-delay: 0.55s; }

@keyframes linkEntrance {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ACCESSIBILITÉ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* =====================================================
   SORINE — ANIMATIONS NATURELLES
   Queue et oreilles de la forme mystique
===================================================== */

/* =====================================================
   QUEUE — BALAYAGE FLUIDE
===================================================== */

.decor-tail {
    transform-origin: 75% 65%;

    animation:
        sorineTailFlow 7s ease-in-out infinite;

    will-change: transform;
}

@keyframes sorineTailFlow {

    0% {
        transform: rotate(-8deg);
    }

    25% {
        transform: rotate(-2deg);
    }

    50% {
        transform: rotate(8deg);
    }

    75% {
        transform: rotate(2deg);
    }

    100% {
        transform: rotate(-8deg);
    }
}

/* =====================================================
   OREILLES — MOUVEMENT DOUX ET CURIEUX
===================================================== */

.decor-ears {
    transform-origin: center bottom;

    animation:
        sorineEarsFlow 9s ease-in-out infinite;

    will-change: transform;
}

@keyframes sorineEarsFlow {

    0%,
    100% {
        transform:
            translateX(-50%)
            rotate(0deg);
    }

    20% {
        transform:
            translateX(-50%)
            rotate(-1deg);
    }

    40% {
        transform:
            translateX(-50%)
            rotate(0deg);
    }

    55% {
        transform:
            translateX(-50%)
            rotate(1.5deg);
    }

    70% {
        transform:
            translateX(-50%)
            rotate(-0.5deg);
    }

    85% {
        transform:
            translateX(-50%)
            rotate(0deg);
    }
}

/* =====================================================
   ACCESSIBILITÉ
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .decor-tail,
    .decor-ears {
        animation: none !important;
        will-change: auto;
    }
}


/* =====================================================
   SORINE — ANIMATIONS MYSTIQUES
   TEST DE FONCTIONNEMENT
===================================================== */

/* QUEUE : BALAYAGE FLUIDE */

body.theme-mystique .decor-tail {
    transform-origin: 75% 65%;

    animation: sorineTailSmooth 6s ease-in-out infinite !important;
}

@keyframes sorineTailSmooth {
    0%, 100% {
        transform: rotate(-12deg);
    }

    50% {
        transform: rotate(12deg);
    }
}

/* OREILLES : INCLINAISON DOUCE */

body.theme-mystique .decor-ears {
    transform-origin: center bottom;

    animation: sorineEarsSmooth 5s ease-in-out infinite !important;
}

@keyframes sorineEarsSmooth {
    0%, 100% {
        transform: translateX(-50%) rotate(-4deg);
    }

    50% {
        transform: translateX(-50%) rotate(4deg);
    }
}



/* =====================================================
   SORINE — ANIMATIONS DES AILES CÉLESTES
===================================================== */

/* AILES SUPÉRIEURES */

body.theme-celeste .decor-wings-top {
    animation: sorineTopWings 7s ease-in-out infinite;
    will-change: transform;
}

@keyframes sorineTopWings {
    0%, 100% {
        transform:
            translateX(-50%)
            translateY(0)
            scaleX(1);
    }

    50% {
        transform:
            translateX(-50%)
            translateY(-25px)
            scaleX(1.07);
    }
}

/* AILES INFÉRIEURES */

body.theme-celeste .decor-wings-bottom {
    animation: sorineBottomWings 9s ease-in-out infinite;
    will-change: transform;
}

@keyframes sorineBottomWings {
    0%, 100% {
        transform:
            translateX(-50%)
            translateY(0)
            scaleX(1);
    }

    50% {
        transform:
            translateX(-50%)
            translateY(30px)
            scaleX(1.06);
    }
}

/* ACCESSIBILITÉ */

@media (prefers-reduced-motion: reduce) {
    body.theme-celeste .decor-wings-top,
    body.theme-celeste .decor-wings-bottom {
        animation: none !important;
        transform: translateX(-50%);
        will-change: auto;
    }
}


/* =====================================================
   SORINE — BATTEMENTS DES AILES CÉLESTES
===================================================== */

/* =====================================================
   AILES SUPÉRIEURES
   Ouverture et fermeture
===================================================== */

body.theme-celeste img.decor-wings-top {
    transform-origin: center 45%;

    animation:
        sorineWingFlapTop 5.5s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite;

    will-change: transform;
}

@keyframes sorineWingFlapTop {

    /* Ailes ouvertes */

    0%,
    100% {
        transform:
            translateX(-50%)
            rotate(0deg)
            scaleX(1);
    }

    /* Les extrémités se soulèvent */

    25% {
        transform:
            translateX(-50%)
            rotate(-1deg)
            scaleX(1.08)
            scaleY(0.96);
    }

    /* Ailes légèrement refermées */

    50% {
        transform:
            translateX(-50%)
            rotate(0deg)
            scaleX(0.92)
            scaleY(1.04);
    }

    /* Retour en ouverture */

    75% {
        transform:
            translateX(-50%)
            rotate(1deg)
            scaleX(1.05)
            scaleY(0.98);
    }
}

/* =====================================================
   AILES INFÉRIEURES
   Battement décalé
===================================================== */

body.theme-celeste img.decor-wings-bottom {
    transform-origin: center 15%;

    animation:
        sorineWingFlapBottom 6.5s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite;

    will-change: transform;
}

@keyframes sorineWingFlapBottom {

    0%,
    100% {
        transform:
            translateX(-50%)
            rotate(0deg)
            scaleX(1);
    }

    25% {
        transform:
            translateX(-50%)
            rotate(0.8deg)
            scaleX(0.94)
            scaleY(1.02);
    }

    50% {
        transform:
            translateX(-50%)
            rotate(0deg)
            scaleX(1.07)
            scaleY(0.97);
    }

    75% {
        transform:
            translateX(-50%)
            rotate(-0.8deg)
            scaleX(1.02)
            scaleY(0.99);
    }
}

/* =====================================================
   ACCESSIBILITÉ
===================================================== */

@media (prefers-reduced-motion: reduce) {
    body.theme-celeste img.decor-wings-top,
    body.theme-celeste img.decor-wings-bottom {
        animation: none;
        transform: translateX(-50%);
        will-change: auto;
    }
}


/* =====================================================
   SORINE CÉLESTE — BATTEMENT DES AILES
   Ne modifie pas la forme mystique
===================================================== */

/* AILES SUPÉRIEURES */

body.theme-celeste .celeste-decoration img.decor-wings-top {
    transform-origin: center 40%;

    animation:
        celesteWingFlapTop 5s
        ease-in-out infinite !important;

    will-change: transform;
}

@keyframes celesteWingFlapTop {

    /* Ailes complètement ouvertes */

    0%, 100% {
        transform:
            translateX(-50%)
            scaleX(1)
            scaleY(1);
    }

    /* Fermeture progressive */

    25% {
        transform:
            translateX(-50%)
            scaleX(0.9)
            scaleY(1.02);
    }

    /* Ailes resserrées */

    50% {
        transform:
            translateX(-50%)
            scaleX(0.72)
            scaleY(1.06);
    }

    /* Réouverture */

    75% {
        transform:
            translateX(-50%)
            scaleX(0.9)
            scaleY(1.02);
    }
}

/* =====================================================
   AILES INFÉRIEURES
===================================================== */

body.theme-celeste .celeste-decoration img.decor-wings-bottom {
    transform-origin: center 20%;

    animation:
        celesteWingFlapBottom 5.8s
        ease-in-out infinite !important;

    will-change: transform;
}

@keyframes celesteWingFlapBottom {

    0%, 100% {
        transform:
            translateX(-50%)
            scaleX(1)
            scaleY(1);
    }

    25% {
        transform:
            translateX(-50%)
            scaleX(0.94)
            scaleY(1.01);
    }

    50% {
        transform:
            translateX(-50%)
            scaleX(0.78)
            scaleY(1.05);
    }

    75% {
        transform:
            translateX(-50%)
            scaleX(0.94)
            scaleY(1.01);
    }
}


/* =====================================================
   FEUX FOLLETS MYSTIQUES — ANIMATION PERMANENTE
===================================================== */


@media (prefers-reduced-motion: reduce) {

    body.theme-mystique .wisp-flame {
        animation-duration: 0.32s !important;
        animation-iteration-count: infinite !important;
    }

    body.theme-mystique .wisp-flame::before {
        animation-duration: 0.45s !important;
        animation-iteration-count: infinite !important;
    }

    body.theme-mystique .wisp-flame::after {
        animation-duration: 1.2s !important;
        animation-iteration-count: infinite !important;
    }

    body.theme-mystique .spark-one {
        animation-duration: 1.1s !important;
        animation-iteration-count: infinite !important;
    }

    body.theme-mystique .spark-two {
        animation-duration: 1.6s !important;
        animation-iteration-count: infinite !important;
    }
}



/* =====================================================
   SORINE CÉLESTE — PLUMES TOUJOURS ANIMÉES
===================================================== */

@media (prefers-reduced-motion: reduce) {

    body.theme-celeste .celeste-feather {
        animation-duration:
            var(--duration, 18s) !important;

        animation-iteration-count:
            infinite !important;
    }

    body.theme-celeste .feather-shape {
        animation-duration: 3.5s !important;
        animation-iteration-count: infinite !important;
    }
}