/* --- 1. Keyframes for Futuristic Movement --- */

/* Smooth slide up with a fade */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Subtle floating effect for icons or hero images */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* Refined breathing glow — subtle ambient light, not a neon blast */
@keyframes pulseGlow {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(0, 170, 255, 0.18)); }
    50%       { filter: drop-shadow(0 0 7px rgba(0, 170, 255, 0.50)); }
}

/* Scanning line effect for cards or sections */
@keyframes scanline {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

/* --- 2. Utility Animation Classes --- */

/* Base class to hide elements before they reveal (best used with Intersection Observer) */
.reveal {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal.active {
    opacity: 1;
    animation: fadeInUp 0.8s forwards;
}

/* Floating Utility */
.motion-float {
    animation: float 6s ease-in-out infinite;
}

/* Glowing Utility */
.motion-glow {
    animation: pulseGlow 5s ease-in-out infinite;
}

/* Kill the glow on light backgrounds — blue drop-shadow on dark text looks wrong */
[data-bs-theme="light"] .motion-glow {
    animation: none;
    filter: none;
}

/* Staggered Delays (Apply to items in a list or grid) */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }

/* --- 3. Dynamic Hover Enhancements --- */

/* Subtle scale for interactive cards */
.dynamic-card {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}

.dynamic-card:hover {
    transform: scale(1.03) translateY(-5px);
}

/* Scanning effect on specific containers */
.scan-container {
    position: relative;
    overflow: hidden;
}

.scan-container::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 2px;
    /* Uses Bootstrap primary color variable to match theme */
    background: var(--bs-primary);
    opacity: 0.15;
    animation: scanline 6s linear infinite;
    pointer-events: none;
    z-index: 10;
}

/* Danger-tinted scan line for threat/reporting sections */
.scan-container-danger::after {
    background: var(--bs-danger);
}