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

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

@keyframes iconPop {
    0% {
        transform: scale(0.95);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes iconFill {
    0% {
        font-variation-settings: 'FILL' 0;
    }

    100% {
        font-variation-settings: 'FILL' 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

@keyframes popIn {
    0% {
        transform: scale(0.8);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* Animations */
@keyframes checkboxPop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes checkmark {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(-45deg);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.2) rotate(0deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes categorySelect {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Sequential Login Dialog Animations */
@keyframes headingIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes descIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes actionsIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes welcomeTextIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes imgBlurIn {
    0% {
        opacity: 0;
        filter: blur(24px) brightness(1.2);
        mix-blend-mode: var(--blend-mode);
        transform: scale(1.05);
    }

    60% {
        opacity: 1;
        filter: blur(8px) brightness(1.05);
        mix-blend-mode: var(--blend-mode);
        transform: scale(1.01);
    }

    100% {
        opacity: 0.8;
        filter: var(--filters);
        mix-blend-mode: var(--blend-mode);
        transform: scale(1);
    }
}

@keyframes highlight-pop {
    0% {
        transform: scale(0.8) rotate(-2deg);
        opacity: 0;
    }

    60% {
        transform: scale(1.1) rotate(1deg);
        opacity: 1;
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@media (min-width: 768px) {
    @keyframes imgBlurIn {
        100% {
            opacity: 1;
            filter: blur(0) brightness(0.9);
            transform: scale(1);
        }
    }
}

[data-theme="light"] {
   --filters: blur(0) brightness(0.9) contrast(2);
   --blend-mode: overlay;
}

[data-theme="dark"] {
    --filters: blur(0) brightness(0.6);
    --blend-mode: normal;
}

@media (prefers-color-scheme: light) {
    [data-theme="system"] {
        --filters: blur(0) brightness(0.9) contrast(2);
        --blend-mode: overlay;
    }
}

@media (prefers-color-scheme: dark) {
    [data-theme="system"] {
        --filters: blur(0) brightness(0.6);
        --blend-mode: normal;
    }
}