/* Keyframes */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleUp {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes glow {
    0% {
        box-shadow: 0 0 5px rgba(0, 212, 255, 0.2);
    }

    50% {
        box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
    }

    100% {
        box-shadow: 0 0 5px rgba(0, 212, 255, 0.2);
    }
}

@keyframes pulse {
    0% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.6;
    }
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes draw {
    from {
        stroke-dashoffset: 1000;
    }

    to {
        stroke-dashoffset: 0;
    }
}

/* Animation Utility Classes */
[data-animate] {
    opacity: 0;
    transition: opacity 0.3s ease;
}

[data-animate].visible {
    opacity: 1;
}

[data-animate="fade-in"].visible {
    animation: fadeIn 800ms ease-out forwards;
}

[data-animate="slide-left"].visible {
    animation: slideInLeft 800ms ease-out forwards;
}

[data-animate="slide-right"].visible {
    animation: slideInRight 800ms ease-out forwards;
}

[data-animate="fade-scale"].visible,
.animate-fade-scale.visible {
    animation: scaleUp 800ms ease-out forwards;
}

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

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

/* Staggered entry classes */
.delay-100 {
    animation-delay: 100ms;
}

.delay-200 {
    animation-delay: 200ms;
}

.delay-300 {
    animation-delay: 300ms;
}

.delay-400 {
    animation-delay: 400ms;
}

.delay-500 {
    animation-delay: 500ms;
}

@keyframes circuitPulse {
    0% {
        stroke-dashoffset: 1000;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes nodeGlow {

    0%,
    100% {
        r: 10;
        filter: drop-shadow(0 0 4px #00D4FF);
    }

    50% {
        r: 12;
        filter: drop-shadow(0 0 12px #00D4FF);
    }
}

/* Circuit Background Styles */


#circuit-svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Responsive Scaling */
@media (max-width: 1024px) {
    #circuit-svg {
        transform: scale(0.8);
    }
}

@media (max-width: 768px) {
    #circuit-svg {
        transform: scale(0.6);
    }

    /* Simplify for mobile: reduce clutter */
    .circuit-lines path:nth-child(n+8),
    .pulses use:nth-child(n+4),
    .circuit-nodes circle:nth-child(n+10) {
        display: none;
    }
}

.circuit-line-path {
    fill: none;
    stroke: #00D4FF;
    stroke-width: 1;
    opacity: 0.1;
}

.circuit-line {
    fill: none;
    stroke: #00D4FF;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 100, 1000;
    filter: url(#glow);
    animation: circuitPulse 4s linear infinite;
    will-change: stroke-dashoffset;
}

.node {
    fill: #00D4FF;
    filter: url(#glow);
    opacity: 0.4;
    transition: all 0.5s ease;
}

.node.purple {
    fill: #7C3AED;
}

.node.active {
    animation: nodeGlow 500ms ease-in-out forwards;
}

/* Performance optimization */
.animate-fade,
.animate-slide-left,
.animate-slide-right,
.animate-scale,
.animate-float,
#circuit-background {
    will-change: transform, opacity;
}