/* ============================================
   NetPilot v2 — Animations
   ============================================ */

/* --- Scroll-triggered reveal animations --- */
.np-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--np-ease-out), transform 0.8s var(--np-ease-out);
}

.np-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.np-reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s var(--np-ease-out), transform 0.8s var(--np-ease-out);
}

.np-reveal-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.np-reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s var(--np-ease-out), transform 0.8s var(--np-ease-out);
}

.np-reveal-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.np-reveal-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.8s var(--np-ease-out), transform 0.8s var(--np-ease-out);
}

.np-reveal-scale.visible {
    opacity: 1;
    transform: scale(1);
}

/* Staggered delays for grid items */
.np-delay-1 { transition-delay: 0.1s; }
.np-delay-2 { transition-delay: 0.2s; }
.np-delay-3 { transition-delay: 0.3s; }
.np-delay-4 { transition-delay: 0.4s; }
.np-delay-5 { transition-delay: 0.5s; }
.np-delay-6 { transition-delay: 0.6s; }
.np-delay-7 { transition-delay: 0.7s; }
.np-delay-8 { transition-delay: 0.8s; }

/* --- Hero animations --- */
@keyframes np-fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes np-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes np-slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes np-glow-pulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(0, 212, 170, 0.1);
    }
    50% {
        box-shadow: 0 0 40px rgba(0, 212, 170, 0.25);
    }
}

@keyframes np-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes np-gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes np-spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Hero element animations */
.np-hero-title {
    animation: np-fadeUp 0.8s var(--np-ease-out) forwards;
}

.np-hero-subtitle {
    animation: np-fadeUp 0.8s var(--np-ease-out) 0.15s forwards;
    opacity: 0;
}

.np-hero-cta {
    animation: np-fadeUp 0.8s var(--np-ease-out) 0.3s forwards;
    opacity: 0;
}

.np-hero-image {
    animation: np-fadeUp 1s var(--np-ease-out) 0.5s forwards;
    opacity: 0;
}

.np-hero-badge {
    animation: np-slideDown 0.6s var(--np-ease-out) forwards;
}

/* --- Floating animation for decorative elements --- */
.np-float {
    animation: np-float 4s ease-in-out infinite;
}

.np-float-delay {
    animation: np-float 4s ease-in-out 1s infinite;
}

/* --- Glow animation for cards --- */
.np-glow {
    animation: np-glow-pulse 3s ease-in-out infinite;
}

/* --- Gradient animation --- */
.np-gradient-animate {
    background-size: 200% 200%;
    animation: np-gradient-shift 6s ease infinite;
}

/* --- Header scroll animation --- */
.np-header {
    transition: background var(--np-duration) var(--np-ease),
                backdrop-filter var(--np-duration) var(--np-ease),
                box-shadow var(--np-duration) var(--np-ease);
}

.np-header.scrolled {
    background: rgba(10, 22, 40, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* --- Counter animation --- */
.np-counter {
    display: inline-block;
}

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

    .np-reveal,
    .np-reveal-left,
    .np-reveal-right,
    .np-reveal-scale {
        opacity: 1;
        transform: none;
    }
}