/* ============================================
   Loading Screen Animations
   ============================================ */

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    height: 100%;
    width: 100%;
    padding: 30px;
}

.loading-logo {
    width: 50px;
    height: 50px;
    min-width: 30px;
    min-height: 30px;
    max-width: 50px;
    max-height: 50px;
    filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.5));
}

/* Ripple Effect on Circles */
@keyframes ripple {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.6;
    }
}

.ripple-circle.ripple-1 {
    animation: ripple 2s ease-in-out infinite;
}

.ripple-circle.ripple-2 {
    animation: ripple 2s ease-in-out infinite 0.2s;
}

.ripple-circle.ripple-3 {
    animation: ripple 2s ease-in-out infinite 0.4s;
}

.ripple-circle.ripple-4 {
    animation: ripple 2s ease-in-out infinite 0.6s;
}

/* Center Pulse */
@keyframes pulse {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

.pulse-center {
    animation: pulse 1.5s ease-in-out infinite;
    transform-origin: center;
}

/* Rotating Arrow */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rotating-arrow {
    animation: rotate 3s linear infinite;
    transform-origin: 30px 30px;
}

/* Glow Circle Pulse */
@keyframes glowPulse {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.8;
    }
}

.glow-circle {
    animation: glowPulse 2s ease-in-out infinite;
}

/* Loading Text Fade */
@keyframes textFade {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

.loading-text {
    color: #f8fafc;
    font-size: 1.2rem;
    font-weight: 500;
    text-align: center;
    animation: textFade 2s ease-in-out infinite;
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}