/* ============================================================
   Pixella — Animation Helpers
   ============================================================ */

/* Smooth entrance defaults (overridden by GSAP) */
.anim-fade-up,
.anim-fade-in,
.anim-scale-in,
.anim-slide-left,
.anim-slide-right {
    will-change: transform, opacity;
}

/* Reduce motion for accessibility */
@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;
    }

    .pixella-hero-canvas {
        display: none;
    }

    .stat-card,
    .category-card,
    .step-card,
    .pixella-hero-badge,
    .pixella-hero h1,
    .hero-subtitle,
    .pixella-hero-actions {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Subtle hover lift for all interactive elements */
.interactive-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

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

/* Pulse animation for badge dots */
@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

/* Gradient border animation */
@keyframes gradient-rotate {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.gradient-border {
    background-size: 200% 200%;
    animation: gradient-rotate 3s ease infinite;
}

/* Typewriter cursor */
@keyframes blink-cursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.typewriter-cursor::after {
    content: '|';
    animation: blink-cursor 0.8s infinite;
    color: var(--color-primary);
    font-weight: 300;
}

/* Float animation */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.float-anim {
    animation: float 3s ease-in-out infinite;
}

/* Shimmer loading placeholder */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.shimmer {
    background: linear-gradient(
        90deg,
        var(--color-bg-subtle) 25%,
        var(--color-bg-muted) 50%,
        var(--color-bg-subtle) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}