/* SEOMONSTER Animations & Transitions */

/* ===== Keyframes ===== */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 113, 227, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(0, 113, 227, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 113, 227, 0);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

@keyframes fade-in-scale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slide-in-right {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

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

@keyframes skeleton-pulse {
    0% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.6;
    }
}

@keyframes spin-smooth {
    to {
        transform: rotate(360deg);
    }
}

@keyframes bg-drift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ===== Animation Utilities ===== */
.animate-fade-in {
    animation: fade-in var(--duration-normal, 0.3s) var(--ease-out, ease-out) forwards;
}

.animate-fade-in-up {
    opacity: 0;
    /* start hidden to prevent flash */
    animation: fade-in-up var(--duration-normal, 0.4s) var(--ease-spring, cubic-bezier(0.175, 0.885, 0.32, 1.275)) forwards;
}

.animate-scale-in {
    opacity: 0;
    animation: fade-in-scale var(--duration-fast, 0.2s) var(--ease-out, ease-out) forwards;
}

/* Stagger Children */
.stagger-children>* {
    opacity: 0;
    animation: fade-in-up var(--duration-normal, 0.4s) var(--ease-out, ease-out) forwards;
}

.stagger-children>*:nth-child(1) {
    animation-delay: 0.05s;
}

.stagger-children>*:nth-child(2) {
    animation-delay: 0.1s;
}

.stagger-children>*:nth-child(3) {
    animation-delay: 0.15s;
}

.stagger-children>*:nth-child(4) {
    animation-delay: 0.2s;
}

.stagger-children>*:nth-child(5) {
    animation-delay: 0.25s;
}

.stagger-children>*:nth-child(6) {
    animation-delay: 0.3s;
}

.stagger-children>*:nth-child(7) {
    animation-delay: 0.35s;
}

.stagger-children>*:nth-child(8) {
    animation-delay: 0.4s;
}

.stagger-children>*:nth-child(n+9) {
    animation-delay: 0.45s;
}

/* ===== Skeleton Loading ===== */
.skeleton {
    background: linear-gradient(90deg,
            var(--color-bg, #f0f0f0) 25%,
            var(--glass-bg-2, #e0e0e0) 50%,
            var(--color-bg, #f0f0f0) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: var(--radius-sm, 8px);
}

.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
    border-radius: 4px;
}

/* ===== HTMX Transitions ===== */
.htmx-swapping {
    opacity: 0;
    transition: opacity 200ms ease-out;
}

.htmx-settling {
    opacity: 1;
    transition: opacity 200ms ease-in;
}

.htmx-added {
    animation: fade-in-scale 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* ===== Subtle Micro-interactions ===== */
.stat-card {
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.stat-card:hover {
    box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.06));
}