/* Animation delay classes for CSP compliance in root landing page */

.animation-delay-0 {
    animation-delay: 0.0s !important;
}

.animation-delay-100ms {
    animation-delay: 0.1s !important;
}

.animation-delay-200ms {
    animation-delay: 0.2s !important;
}

.animation-delay-300ms {
    animation-delay: 0.3s !important;
}

.animation-delay-400ms {
    animation-delay: 0.4s !important;
}

.animation-delay-500ms {
    animation-delay: 0.5s !important;
}

.animation-delay-600ms {
    animation-delay: 0.6s !important;
}

/* Pulse delay classes for Matrix-themed elements */
.pulse-delay-200ms {
    animation-delay: 0.2s !important;
}

/* Matrix rain effect keyframes and classes */
@keyframes matrix-fall {
    0% { top: -20px; opacity: 0.3; }
    50% { opacity: 0.6; }
    100% { top: 100%; opacity: 0; }
}

.matrix-rain-drop {
    position: absolute;
    color: var(--matrix-green);
    font-family: "Courier New", monospace;
    font-size: 12px;
    opacity: 0.3;
    pointer-events: none;
    animation: matrix-fall linear infinite;
}

/* Audience features visibility classes - work with Tailwind's hidden class */
.features-hidden {
    display: none !important;
}

.features-visible {
    display: block !important;
}

/* Audience card states - using correct selector */
[data-audience] {
    transition: all 0.3s ease;
}

[data-audience].selected {
    border-color: var(--matrix-bright-green) !important;
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.4) !important;
}

/* Matrix rain animation duration variants */
.matrix-rain-duration-3s { animation-duration: 3s; }
.matrix-rain-duration-4s { animation-duration: 4s; }
.matrix-rain-duration-5s { animation-duration: 5s; }
.matrix-rain-duration-6s { animation-duration: 6s; }

/* Matrix rain positioning classes */
.matrix-rain-left-10 { left: 10%; }
.matrix-rain-left-20 { left: 20%; }
.matrix-rain-left-30 { left: 30%; }
.matrix-rain-left-40 { left: 40%; }
.matrix-rain-left-50 { left: 50%; }
.matrix-rain-left-60 { left: 60%; }
.matrix-rain-left-70 { left: 70%; }
.matrix-rain-left-80 { left: 80%; }
.matrix-rain-left-90 { left: 90%; }