/* ===== LOGO ANIMATIONS ===== */
@keyframes logoShrink {
    0% {
        width: 50vw;
        height: 50vh;
        filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.3));
    }
    100% {
        width: 10vw;
        height: 10vw;
        filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.4));
    }
}

@keyframes logoGlow {
    0%, 100% {
        filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 25px rgba(59, 130, 246, 0.6));
    }
}

/* ===== SUNBURST REVEAL ANIMATIONS ===== */
@keyframes sunburstFadeIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes segmentSlideIn {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(-10deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes segmentGlow {
    0%, 100% {
        filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.6));
    }
}

/* ===== LOADING ANIMATIONS ===== */
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

/* ===== HOVER ANIMATIONS ===== */
@keyframes hoverGlow {
    0% {
        filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.3));
        transform: scale(1);
    }
    100% {
        filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.8));
        transform: scale(1.05);
    }
}

@keyframes hoverPulse {
    0%, 100% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
}

/* ===== BACKGROUND ANIMATIONS ===== */
@keyframes backgroundShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ===== FOOTER ANIMATIONS ===== */
@keyframes footerSlideUp {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ===== UTILITY ANIMATION CLASSES ===== */
.animate-logo-shrink {
    animation: logoShrink 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-logo-glow {
    animation: logoGlow 3s ease-in-out infinite;
}

.animate-sunburst-reveal {
    animation: sunburstFadeIn 1.5s ease-out forwards;
}

.animate-segment-slide {
    animation: segmentSlideIn 0.8s ease-out forwards;
}

.animate-segment-glow {
    animation: segmentGlow 2s ease-in-out infinite;
}

.animate-fade-out {
    animation: fadeOut 0.5s ease-out forwards;
}

.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

.animate-hover-glow {
    animation: hoverGlow 0.3s ease-out forwards;
}

.animate-hover-pulse {
    animation: hoverPulse 1s ease-in-out infinite;
}

.animate-footer-slide {
    animation: footerSlideUp 1s ease-out forwards;
}

/* ===== STAGGERED ANIMATIONS ===== */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }
.stagger-7 { animation-delay: 0.7s; }
.stagger-8 { animation-delay: 0.8s; }

/* ===== RESPONSIVE ANIMATION ADJUSTMENTS ===== */
@media (max-width: 768px) {
    @keyframes logoShrink {
        0% {
            width: 60vw;
            height: 60vw;
        }
        100% {
            width: 15vw;
            height: 15vw;
        }
    }
}

@media (max-width: 480px) {
    @keyframes logoShrink {
        0% {
            width: 70vw;
            height: 70vw;
        }
        100% {
            width: 20vw;
            height: 20vw;
        }
    }
}

/* ===== REDUCED MOTION SUPPORT ===== */
@media (prefers-reduced-motion: reduce) {
    .animate-logo-shrink,
    .animate-logo-glow,
    .animate-sunburst-reveal,
    .animate-segment-slide,
    .animate-segment-glow,
    .animate-fade-out,
    .animate-pulse,
    .animate-hover-glow,
    .animate-hover-pulse,
    .animate-footer-slide {
        animation: none;
    }
    
    .logo.animated {
        width: 10vw;
        height: 10vw;
        min-width: 80px;
        min-height: 80px;
        max-width: 120px;
        max-height: 120px;
    }
    
    .sunburst-container.visible {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
.animate-logo-shrink,
.animate-sunburst-reveal,
.animate-segment-slide {
    will-change: transform, opacity, width, height;
}

.animate-logo-glow,
.animate-segment-glow,
.animate-hover-glow {
    will-change: filter, transform;
}