/* ===================================
   Vivace Music Logo Animation
   Replicating vivace-music.org style
   =================================== */

.vivace-logo-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.06) 0%, rgba(168, 85, 247, 0.03) 50%, transparent 100%);
    border-radius: 50%;
    padding: 2.5rem;
}

.vivace-logo-container::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: linear-gradient(
        45deg,
        rgba(236, 72, 153, 0.5),
        rgba(245, 158, 11, 0.5),
        rgba(251, 191, 36, 0.5),
        rgba(245, 158, 11, 0.5),
        rgba(236, 72, 153, 0.5)
    );
    background-size: 400% 400%;
    animation: fireWave 6s ease-in-out infinite;
    filter: blur(15px);
    opacity: 0.7;
    z-index: -1;
}

.vivace-logo-container::after {
    content: '';
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(245, 158, 11, 0.4) 0%,
        rgba(236, 72, 153, 0.3) 40%,
        transparent 70%
    );
    animation: firePulse 4s ease-in-out infinite;
    filter: blur(25px);
    z-index: -2;
}

@keyframes fireWave {
    0%, 100% {
        background-position: 0% 50%;
        transform: rotate(0deg) scale(1);
    }
    25% {
        background-position: 100% 50%;
        transform: rotate(90deg) scale(1.05);
    }
    50% {
        background-position: 0% 100%;
        transform: rotate(180deg) scale(1);
    }
    75% {
        background-position: 100% 100%;
        transform: rotate(270deg) scale(1.05);
    }
}

@keyframes firePulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.15);
    }
}

[data-theme="light"] .vivace-logo-container {
    background: radial-gradient(circle, 
                rgba(235, 237, 242, 1) 0%, 
                rgba(228, 230, 237, 0.98) 30%,
                rgba(220, 223, 232, 0.92) 50%, 
                rgba(210, 215, 225, 0.7) 80%, 
                transparent 100%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
                0 2px 8px rgba(0, 0, 0, 0.06),
                inset 0 0 0 1px rgba(99, 102, 241, 0.15);
}

[data-theme="dark"] .vivace-logo-container {
    background: radial-gradient(circle, 
                rgba(30, 35, 48, 0.95) 0%,
                rgba(99, 102, 241, 0.12) 30%, 
                rgba(168, 85, 247, 0.06) 60%, 
                transparent 100%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
                inset 0 0 0 1px rgba(99, 102, 241, 0.15);
}

.vivace-logo-part1,
.vivace-logo-part2 {
    position: absolute;
    width: 100%;
    max-width: 400px;
    height: auto;
    display: block;
    opacity: 0;
}

.vivace-logo-part1 {
    z-index: 102;
}

.vivace-logo-part2 {
    z-index: 101;
}

/* Keyframe Animations - Inspired by vivace-music.org */
@keyframes rotateScaleIn {
    0% {
        opacity: 0;
        transform: scale(0.2) rotate(-90deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes scaleFadeIn {
    0% {
        opacity: 0;
        transform: scale(1.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animated state - triggered by JavaScript */
.vivace-logo-part1.show {
    animation: rotateScaleIn 2.5s ease forwards;
}

.vivace-logo-part2.show {
    animation: scaleFadeIn 2.5s ease forwards;
}

@media (max-width: 768px) {
    .vivace-logo-container {
        max-width: 300px;
    }
    
    .vivace-logo-part1,
    .vivace-logo-part2 {
        max-width: 250px;
    }
}