/* === 🌌 Harmonix Mascotte V3.5 — FlowSync Edition (Nettoyé) === */

/* --- Éléments Structurels et Visuels --- */

.mascot-wrapper {
    width: 100%;
    height: 100%;
    transform: scale(0.9);
}

.mascot-container {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ombre dorée légère pour l'effet de présence */
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.25));
    transition: filter 0.3s ease;
}

.dancing-mascot {
    width: 85%;
    height: 85%;
    transform-origin: center;
    /* État par défaut : Respiration/Pulse douce */
    animation: mascotIdle 4s ease-in-out infinite;
}

/* Aura (dynamic background) */
.mascot-aura {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.6) 0%, transparent 70%);
    opacity: 0.25;
    pointer-events: none;
    z-index: -1;
    transition: opacity 0.2s ease, filter 0.2s ease, transform 0.25s ease;
}

/* --- Keyframes & Animations (Idle) --- */

@keyframes mascotIdle {

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

    50% {
        transform: scale(1.05);
        filter: brightness(1.1);
    }
}

/* Eyes blink */
.eye {
    animation: blink 5s infinite ease-in-out;
    transform-origin: center;
}

@keyframes blink {

    0%,
    90%,
    100% {
        transform: scaleY(1);
    }

    95% {
        transform: scaleY(0.1);
    }
}

/* Wave idle */
.sound-wave {
    position: absolute;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(to top, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 1));
    transform-origin: bottom;
    opacity: 0.4;
    animation: waveIdle 2.5s ease-in-out infinite;
}

@keyframes waveIdle {

    0%,
    100% {
        transform: scaleY(0.5);
        opacity: 0.3;
    }

    50% {
        transform: scaleY(1);
        opacity: 0.7;
    }
}

/* --- 💃 Mode Danse Activé (.playing) --- */

.mascot-container.playing .dancing-mascot {
    /* Écrase l'animation 'mascotIdle' par défaut avec la danse */
    animation: mascotDance 1.4s ease-in-out infinite;
}

/* Danse loop (rotations + bounce) */
@keyframes mascotDance {

    /* Suppression du 'mascotIdle' ici pour éviter le doublon */
    0% {
        transform: translateY(0) rotate(0deg);
    }

    20% {
        transform: translateY(-3px) rotate(-4deg);
    }

    40% {
        transform: translateY(2px) rotate(3deg);
    }

    60% {
        transform: translateY(-2px) rotate(-2deg);
    }

    80% {
        transform: translateY(1px) rotate(4deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

/* Aura en mode danse */
.mascot-container.playing .mascot-aura {
    animation: mascotDance 1.4s ease-in-out infinite;
}

@keyframes auraPulse {
    0% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.55;
        transform: scale(1.5);
    }

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

/* 🎅 Bonnet de Noël (CSP-SAFE) */
.christmas-hat {
    position: absolute;
    width: 55%;
    top: -20%;
    left: 50%;
    transform: translateX(-50%) rotate(-8deg);
    pointer-events: none;
    z-index: 12;
    animation: hatBounce 3s ease-in-out infinite;
}

/* Couleurs */
.christmas-hat .hat-red {
    fill: #d90429;
}

.christmas-hat .hat-white {
    fill: #ffffff;
}

/* Animation */
@keyframes hatBounce {
    0%, 100% { transform: translateX(-50%) rotate(-8deg) translateY(0); }
    50%      { transform: translateX(-50%) rotate(-5deg) translateY(-4px); }
}