/* ==========================================================================
   Animations — @keyframes, scroll-trigger classes, parallax
   ========================================================================== */

/* ---- Keyframes ---- */
@keyframes nc-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes nc-fade-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes nc-fade-down {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes nc-slide-left {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes nc-slide-right {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes nc-scale-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

@keyframes nc-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ---- Scroll-triggered animation base ---- */
.nc-animate {
    opacity: 1;
    transition-delay: var(--nc-delay, 0s);
}

.nc-animate--visible {
    animation-duration: 0.6s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Variants */
.nc-animate--fade-up.nc-animate--visible {
    animation-name: nc-fade-up;
}

.nc-animate--fade-down.nc-animate--visible {
    animation-name: nc-fade-down;
}

.nc-animate--fade-in.nc-animate--visible {
    animation-name: nc-fade-in;
}

.nc-animate--slide-left.nc-animate--visible {
    animation-name: nc-slide-left;
}

.nc-animate--slide-right.nc-animate--visible {
    animation-name: nc-slide-right;
}

.nc-animate--scale-in.nc-animate--visible {
    animation-name: nc-scale-in;
}

/* ---- Stagger ---- */
.nc-stagger > .nc-animate:nth-child(1) { --nc-delay: 0s; }
.nc-stagger > .nc-animate:nth-child(2) { --nc-delay: 0.1s; }
.nc-stagger > .nc-animate:nth-child(3) { --nc-delay: 0.2s; }
.nc-stagger > .nc-animate:nth-child(4) { --nc-delay: 0.3s; }
.nc-stagger > .nc-animate:nth-child(5) { --nc-delay: 0.4s; }
.nc-stagger > .nc-animate:nth-child(6) { --nc-delay: 0.5s; }
.nc-stagger > .nc-animate:nth-child(7) { --nc-delay: 0.6s; }
.nc-stagger > .nc-animate:nth-child(8) { --nc-delay: 0.7s; }

/* Stagger delay applied to animation-delay */
.nc-animate--visible {
    animation-delay: var(--nc-delay, 0s);
}

/* ---- Parallax ---- */
.nc-parallax {
    will-change: transform;
}

/* ---- Hover effects ---- */
.nc-hover-lift {
    transition: transform var(--nc-transition-base), box-shadow var(--nc-transition-base);
}

.nc-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--nc-shadow-lg);
}

.nc-hover-glow {
    transition: box-shadow var(--nc-transition-base);
}

.nc-hover-glow:hover {
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.3);
}

/* ---- Loading spinner ---- */
.nc-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--nc-color-border);
    border-top-color: var(--nc-color-primary);
    border-radius: 50%;
    animation: nc-spin 0.6s linear infinite;
}

/* ---- Skeleton loading ---- */
.nc-skeleton {
    background: linear-gradient(90deg, var(--nc-color-surface-alt) 25%, #e2e8f0 50%, var(--nc-color-surface-alt) 75%);
    background-size: 200% 100%;
    animation: nc-pulse 1.5s ease-in-out infinite;
    border-radius: var(--nc-radius-md);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .nc-animate {
        opacity: 1;
    }

    .nc-parallax {
        transform: none !important;
    }
}