/* animations.css - Keyframe animations for Neural Forge One */

/* Blink animation for cursor effects */
@keyframes blink {
    0%, 49% {
        opacity: 1;
    }
    50%, 100% {
        opacity: 0;
    }
}

/* Scanline animation for boot sequence */
@keyframes scanline {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100%);
    }
}

/* Glitch animation using clip-path */
@keyframes glitch {
    0% {
        clip-path: inset(40% 0 50% 0);
        transform: translate(0);
    }
    10% {
        clip-path: inset(80% 0 10% 0);
        transform: translate(-2px, 2px);
    }
    20% {
        clip-path: inset(10% 0 80% 0);
        transform: translate(2px, -2px);
    }
    30% {
        clip-path: inset(50% 0 30% 0);
        transform: translate(-2px, 0);
    }
    40% {
        clip-path: inset(20% 0 60% 0);
        transform: translate(2px, 2px);
    }
    50% {
        clip-path: inset(60% 0 20% 0);
        transform: translate(0, -2px);
    }
    60% {
        clip-path: inset(30% 0 50% 0);
        transform: translate(-2px, -2px);
    }
    70% {
        clip-path: inset(70% 0 20% 0);
        transform: translate(2px, 0);
    }
    80% {
        clip-path: inset(15% 0 70% 0);
        transform: translate(0, 2px);
    }
    90% {
        clip-path: inset(55% 0 35% 0);
        transform: translate(-2px, 0);
    }
    100% {
        clip-path: inset(25% 0 65% 0);
        transform: translate(0);
    }
}

/* Fade in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Fade out animation */
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Slide in from left */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide in from right */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide in from top */
@keyframes slideInTop {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide in from bottom */
@keyframes slideInBottom {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pulse animation for interaction cues */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Utility classes for applying animations */
.animate-blink {
    animation: blink 1s step-end infinite;
}

.animate-glitch {
    animation: glitch 0.3s steps(2, end) infinite;
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

.animate-fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

.animate-slide-in-left {
    animation: slideInLeft 0.3s ease-out forwards;
}

.animate-slide-in-right {
    animation: slideInRight 0.3s ease-out forwards;
}

.animate-slide-in-top {
    animation: slideInTop 0.3s ease-out forwards;
}

.animate-slide-in-bottom {
    animation: slideInBottom 0.3s ease-out forwards;
}

.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}


/* Reduced Motion Support */
/* Respect user's motion preferences 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;
    }
    
    /* Disable specific animations that might cause discomfort */
    .animate-blink,
    .animate-glitch,
    .animate-pulse {
        animation: none !important;
    }
    
    /* Provide instant transitions instead of animations */
    .animate-fade-in,
    .animate-fade-out,
    .animate-slide-in-left,
    .animate-slide-in-right,
    .animate-slide-in-top,
    .animate-slide-in-bottom {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    
    /* Disable scanline effect */
    .scanlines {
        animation: none !important;
        opacity: 0 !important;
    }
    
    /* Keep cursor visible but static */
    .cursor,
    .hover-cursor,
    .typing-cursor {
        animation: none !important;
        opacity: 1 !important;
    }
}