/* Base Styles */
:root {
    --primary: #0d59f2;
}

body {
    background-color: #f3f4f6;
}

.welcome-gradient {
    background: linear-gradient(135deg, #101622 0%, #1e293b 60%, #305c44 100%);
}

#screen-container {
    transition: opacity 0.3s ease-in-out;
}

/* Animations */
@keyframes slideIn {
    from {
        transform: translateX(20px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.screen-fade {
    animation: slideIn 0.3s ease-out;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

/* Bottom Nav highlight */
.nav-active {
    color: #0d59f2 !important;
}

.nav-active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
}

/* Pulsating Waves Animation */
@keyframes wave-pulse {
    0% {
        transform: scale(1);
        opacity: 0.4;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

.wave {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: wave-pulse 2s infinite ease-out;
    pointer-events: none;
    z-index: 0;
}

.wave-1 {
    animation-delay: 0s;
}

.wave-2 {
    animation-delay: 0.5s;
}

.wave-3 {
    animation-delay: 1s;
}

/* === DANGER MODE ANIMATIONS === */

@keyframes dangerPulse {

    0%,
    100% {
        border-color: #fca5a5;
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }

    50% {
        border-color: #ef4444;
        box-shadow: 0 0 24px 6px rgba(239, 68, 68, 0.25);
    }
}

@keyframes shake {

    0%,
    100% {
        transform: rotate(-4deg);
    }

    25% {
        transform: rotate(4deg);
    }

    50% {
        transform: rotate(-3deg);
    }

    75% {
        transform: rotate(3deg);
    }
}

@keyframes ctaPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 30px rgba(220, 38, 38, 0.5);
    }

    50% {
        transform: scale(1.025);
        box-shadow: 0 0 48px rgba(220, 38, 38, 0.75);
    }
}

@keyframes bounceX {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(6px);
    }
}

@keyframes ping {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

@keyframes shine {
    0% {
        left: -80px;
        opacity: 0.8;
    }

    60%,
    100% {
        left: 110%;
        opacity: 0;
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px) scale(1);
        opacity: 0.5;
    }

    50% {
        transform: translateY(-8px) scale(1.3);
        opacity: 1;
    }
}