/* ---------------------------------------------
   CORNER HEART — nebula animation classes
   (.mist, .core-mist, .aura-wave, keyframes)
   Used by .header-mini-heartbeat in layout_start.php
--------------------------------------------- */

.mist {
    position: absolute;
    width: 250px;
    height: 250px;
    filter: blur(40px);
    mix-blend-mode: screen;
    opacity: var(--emo-intensity);
    transition: opacity 4s ease-in-out;
    transform: translateZ(50px);
}

.core-mist {
    background: radial-gradient(circle at 40% 40%, var(--emo-clr-light) 0%, var(--emo-clr-mid) 50%, transparent 80%);
    animation: 
        ethereal-beat var(--emo-bpm-speed) infinite ease-in-out, 
        cloud-morph var(--emo-morph-speed) infinite linear alternate;
}

.core-mist-2 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle at 60% 60%, var(--emo-clr-mid) 0%, var(--emo-clr-dark) 60%, transparent 80%);
    opacity: calc(var(--emo-intensity) * 0.7);
    animation: 
        ethereal-beat-reverse var(--emo-bpm-speed) infinite ease-in-out,
        cloud-morph calc(var(--emo-morph-speed) * 1.3) infinite linear alternate-reverse;
    transform: translateZ(20px);
}

.aura-wave {
    position: absolute;
    width: 220px;
    height: 220px;
    
    box-shadow: inset 0 0 60px var(--emo-clr-mid), 0 0 30px var(--emo-clr-light);
    background: radial-gradient(circle, transparent 30%, rgba(255,255,255,0.05) 70%, transparent 100%);
    
    filter: blur(15px);
    mix-blend-mode: color-dodge;
    opacity: 0;
    
    animation: 
        ghost-ripple var(--emo-bpm-speed) infinite ease-out,
        cloud-morph var(--emo-morph-speed) infinite linear alternate;
}

.aura-1 { animation-delay: 0s, 0s; }
.aura-2 { animation-delay: calc(var(--emo-bpm-speed) * 0.33), 2s; }
.aura-3 { animation-delay: calc(var(--emo-bpm-speed) * 0.66), 4s; }


/* ========================================================================== */
/* ANIMATIONS (Smoothed out to prevent glitching)                             */
/* ========================================================================== */

@keyframes ethereal-beat {
    0% {
        transform: translateZ(50px) scale(var(--emo-scale-rest));
        opacity: calc(var(--emo-intensity) * 0.4);
    }
    15% {
        transform: translateZ(120px) scale(var(--emo-scale-peak));
        opacity: calc(var(--emo-intensity) * 1.5);
    }
    100% {
        transform: translateZ(50px) scale(var(--emo-scale-rest));
        opacity: calc(var(--emo-intensity) * 0.4);
    }
}

@keyframes ethereal-beat-reverse {
    0% {
        transform: translateZ(20px) scale(var(--emo-scale-rest));
        opacity: calc(var(--emo-intensity) * 0.3);
    }
    15% {
        transform: translateZ(60px) scale(calc(var(--emo-scale-peak) * 1.1));
        opacity: calc(var(--emo-intensity) * 1);
    }
    100% {
        transform: translateZ(20px) scale(var(--emo-scale-rest));
        opacity: calc(var(--emo-intensity) * 0.3);
    }
}

@keyframes ghost-ripple {
    0% {
        transform: translateZ(100px) scale(var(--emo-scale-rest));
        opacity: 0;
    }
    15% {
        opacity: var(--emo-wave-opacity);
        transform: translateZ(80px) scale(calc(var(--emo-scale-peak) * 0.8));
    }
    100% {
        transform: translateZ(-250px) scale(var(--emo-wave-scale));
        opacity: 0;
    }
}

@keyframes cloud-morph {
    0%   { border-radius: 20% 80% 30% 70% / 60% 40% 60% 40%; transform: rotate(0deg); }
    20%  { border-radius: 70% 30% 80% 20% / 30% 70% 30% 70%; transform: rotate(45deg); }
    40%  { border-radius: 40% 60% 20% 80% / 80% 20% 80% 20%; transform: rotate(-20deg); }
    60%  { border-radius: 80% 20% 50% 50% / 40% 60% 40% 60%; transform: rotate(30deg); }
    80%  { border-radius: 30% 70% 70% 30% / 70% 30% 70% 30%; transform: rotate(-45deg); }
    100% { border-radius: 20% 80% 30% 70% / 60% 40% 60% 40%; transform: rotate(0deg); }
}