/* === 🌌 Harmonix Mascotte V3.5 — FlowSync Edition === */
.mascot-wrapper {
    width: 100%;
    height: 100%;
    transform: scale(0.9);
}

.mascot-container {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.25));
    transition: filter 0.3s ease;
}

/* Idle smooth breathing */
.dancing-mascot {
    width: 85%;
    height: 85%;
    transform-origin: center;
    animation: mascotIdle 4s ease-in-out infinite;
}

@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);
    }
}

/* 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;
}

/* 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;
    }
}

/* Aura colors */
[data-mood="calm"] .mascot-aura {
    background: radial-gradient(circle, rgba(173, 216, 230, 0.5) 0%, transparent 70%);
}

[data-mood="moderate"] .mascot-aura {
    background: radial-gradient(circle, rgba(255, 215, 0, 0.5) 0%, transparent 70%);
}

[data-mood="energetic"] .mascot-aura {
    background: radial-gradient(circle, rgba(255, 69, 0, 0.7) 0%, rgba(255, 215, 0, 0.5) 50%, transparent 70%);
}