/* Манго-тест тема для трека "AUTOMOTIVO MANGOS" */

/* Базовое включение темы */
body.mango-test {
    --mango-bg-1: #0f0f0f;
    --mango-bg-2: #1a1a1a;
    --mango-primary: #F59E0B; /* amber-500 */
    --mango-primary-2: #F97316; /* orange-500 */
    --mango-accent: #22C55E; /* green-500 */
    --mango-pink: #FB7185; /* rose-400 */
    --mango-yellow: #FDE047; /* yellow-300 */
    --mango-shadow: rgba(249, 115, 22, 0.45);

    background: radial-gradient(1200px 1200px at 70% 30%, rgba(253, 224, 71, 0.08), transparent 35%),
                radial-gradient(900px 900px at 20% 80%, rgba(34, 197, 94, 0.09), transparent 35%),
                linear-gradient(180deg, var(--mango-bg-1), var(--mango-bg-2));
    transition: background 500ms ease, filter 400ms ease;
}

/* Пульс с басом */
body.mango-test .elements-circle {
    position: relative;
    filter: drop-shadow(0 20px 60px rgba(249, 115, 22, .25));
}

body.mango-test .plasma-effect {
    background: conic-gradient(from 0deg,
        rgba(253, 224, 71, .25), rgba(249, 115, 22, .2), rgba(34, 197, 94, .25), rgba(251, 113, 133, .2), rgba(253, 224, 71, .25)
    );
    animation: mangoSpin 6s linear infinite;
    mix-blend-mode: screen;
}

/* Атакующие вспышки */
body.mango-test.mango-intense .plasma-effect {
    animation-duration: 2.4s;
    filter: saturate(1.35) contrast(1.15) brightness(1.1);
}

/* Ритмическая вибрация центра */
body.mango-test .center-text {
    color: #0a0a0a;
    background: linear-gradient(135deg, var(--mango-yellow), var(--mango-primary));
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 10px 40px var(--mango-shadow);
    animation: mangoPulse 2.2s ease-in-out infinite;
}

body.mango-test.mango-intense .center-text {
    animation-duration: 1.1s;
}

/* Яркая обводка на плеере */
body.mango-test .audio-player {
    border: 2px solid rgba(253, 224, 71, .25);
    box-shadow: 0 20px 80px rgba(249, 115, 22, .25), inset 0 0 0 1px rgba(255,255,255,.06);
    backdrop-filter: blur(8px) saturate(1.15);
}

/* Кнопки — манго-жар */
body.mango-test .control-button img {
    filter: drop-shadow(0 6px 20px rgba(249, 115, 22, .35));
    transition: transform .14s ease, filter .14s ease;
}

body.mango-test .control-button:hover img {
    transform: translateY(-1px) scale(1.06);
    filter: drop-shadow(0 10px 28px rgba(253, 224, 71, .45));
}

/* Прогресс-бар — поток манго-сока */
body.mango-test #progressBar {
    background: linear-gradient(90deg, var(--mango-yellow), var(--mango-primary), var(--mango-primary-2));
    box-shadow: 0 6px 24px rgba(253, 224, 71, .35);
}

/* Обложка — дыхание жара */
body.mango-test #currentTrackCover {
    box-shadow: 0 18px 60px rgba(249, 115, 22, .30), 0 2px 0 rgba(253,224,71,.25) inset;
    transform: translateZ(0);
    animation: mangoHover 5s ease-in-out infinite;
}

/* Лирика — кислотные блики */
body.mango-test .floating-lyrics {
    text-shadow: 0 8px 40px rgba(251, 113, 133, .35);
}

/* Индикатор режима (если CSS подгрузился раньше JS-инлайна) */
#mangoModeIndicator {
    pointer-events: none;
}

/* Анимации */
@keyframes mangoSpin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.03); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes mangoPulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    45% { transform: scale(1.04); filter: brightness(1.08); }
}

@keyframes mangoHover {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-2px) scale(1.015); }
}

/* Интенсивный режим — агрессивные вспышки и дрожь */
body.mango-test.mango-intense {
    animation: mangoShake .18s linear infinite;
}

@keyframes mangoShake {
    0% { transform: translate(0, 0); }
    25% { transform: translate(1px, -1px); }
    50% { transform: translate(-1px, 1px); }
    75% { transform: translate(1px, 1px); }
    100% { transform: translate(0, 0); }
}

/* ===== Оверлеи и визуальные слои ===== */
.mango-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
}

.mango-visualizer {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100vh;
}

.mango-scan {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(253, 224, 71, .06) 48%,
        rgba(249, 115, 22, .08) 52%,
        transparent 100%
    );
    background-size: 100% 200%;
    animation: mangoScanMove 3.6s linear infinite;
    mix-blend-mode: overlay;
    opacity: calc(.35 + var(--mango-intensity, .2) * .4);
}

@keyframes mangoScanMove {
    0% { background-position: 0% 0%; }
    100% { background-position: 0% 200%; }
}

.mango-rays::before {
    content: '';
    position: absolute;
    inset: -10%;
    background: conic-gradient(from 0deg,
        hsla(calc(var(--mango-hue, 42)), 95%, 60%, .06),
        hsla(calc(var(--mango-hue, 42) + 90), 95%, 60%, .08),
        hsla(calc(var(--mango-hue, 42) + 180), 95%, 60%, .06),
        hsla(calc(var(--mango-hue, 42) + 270), 95%, 60%, .08),
        hsla(calc(var(--mango-hue, 42)), 95%, 60%, .06)
    );
    filter: blur(18px) saturate(1.2);
    animation: mangoRays 8s linear infinite;
}

@keyframes mangoRays {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Рипл-кольца */
.mango-ring {
    position: absolute;
    width: 2px;
    height: 2px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    box-shadow: 0 0 0 0 hsla(var(--ring-hue, 42), 95%, 60%, .35);
    animation: mangoRing 1s ease-out forwards;
}

@keyframes mangoRing {
    0% { box-shadow: 0 0 0 0 hsla(var(--ring-hue, 42), 95%, 60%, .35); opacity: 1; }
    100% { box-shadow: 0 0 0 80vmin hsla(var(--ring-hue, 42), 95%, 60%, 0); opacity: 0; }
}

/* Частицы */
.mango-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        hsla(var(--p-hue, 42), 95%, 65%, .95),
        hsla(var(--p-hue, 42), 95%, 55%, .45)
    );
    transform: translate(-50%, -50%);
    filter: blur(.3px) drop-shadow(0 8px 18px rgba(249, 115, 22, .45));
    animation: mangoParticle var(--life, 800ms) ease-out forwards;
}

@keyframes mangoParticle {
    0% { opacity: 1; transform: translate(-50%, -50%) translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(.85); }
}

/* Флэш на бит */
body.mango-test.mango-beat::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(50vmin 50vmin at 50% 50%, rgba(253, 224, 71, .18), transparent 70%);
    opacity: .9;
    animation: mangoBeatFlash 120ms ease-out forwards;
    pointer-events: none;
    z-index: 9998;
}

@keyframes mangoBeatFlash {
    0% { opacity: .9; }
    100% { opacity: 0; }
}