/* ==========================================================================
   NAILA - Animations
   ========================================================================== */

/* Fade/Slide Up Reveal */
.reveal {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}

.reveal.reveal-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Hero Background Animations */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.6;
    pointer-events: none;
}

@keyframes pulseNode {
    0% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.5); }
    100% { opacity: 0.2; transform: scale(1); }
}

@keyframes drawLine {
    from { stroke-dasharray: 100; stroke-dashoffset: 100; }
    to { stroke-dasharray: 100; stroke-dashoffset: 0; }
}

.node {
    animation: pulseNode 4s infinite alternate;
}

.node:nth-child(even) {
    animation-duration: 6s;
    animation-delay: 1s;
}

.connection {
    stroke-dasharray: 100;
    animation: drawLine 3s ease-out forwards;
}

/* Chatbot Loading Pulse */
.loading {
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

/* Accessibility: Reduce Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal {
        transform: none !important;
        opacity: 1 !important;
    }
}