/**
 * ============================================================================
 * SENTINEL COMMAND - ANIMATIONS & KEYFRAMES
 * ============================================================================
 * 
 * This file contains all CSS animations for the Bit Sentinel theme.
 * Includes hero effects, UI transitions, and micro-interactions.
 * 
 * CATEGORIES:
 * 1. Core UI Animations (fade, slide, spin)
 * 2. Sentinel Brand Animations (pulses, glows)
 * 3. Hero Section Animations (scan line, breach points, radar)
 * 4. Component Animations (accordion, enter/exit)
 * 
 * ============================================================================
 */

/* ============================================================================
 * 1. CORE UI ANIMATIONS
 * ============================================================================ */

/* Fade In - Standard entrance animation */
@keyframes fade-in {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide Up - Content reveal animation */
@keyframes slide-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Spin - Loading indicators */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Ping - Notification indicator */
@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Pulse - Subtle attention animation */
@keyframes pulse {
    50% {
        opacity: 0.5;
    }
}

/* Bounce - Interactive feedback */
@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: none;
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

/* ============================================================================
 * 2. SENTINEL BRAND ANIMATIONS
 * ============================================================================ */

/* Pulse Red - Alert/offensive operations indicator */
@keyframes pulse-red {
    0%, 100% {
        box-shadow: 0 0 0 0 hsl(357 90% 58% / 0.4);
    }
    50% {
        box-shadow: 0 0 0 15px hsl(357 90% 58% / 0);
    }
}

/* Pulse Blue - Defensive/monitoring indicator */
@keyframes pulse-blue {
    0%, 100% {
        box-shadow: 0 0 0 0 hsl(196 68% 66% / 0.4);
    }
    50% {
        box-shadow: 0 0 0 15px hsl(196 68% 66% / 0);
    }
}

/* Pulse Cyan - Education/training indicator */
@keyframes pulse-cyan {
    0%, 100% {
        box-shadow: 0 0 0 0 hsl(196 62% 54% / 0.4);
    }
    50% {
        box-shadow: 0 0 0 15px hsl(196 62% 54% / 0);
    }
}

/* Glow Pulse - Subtle glow animation */
@keyframes glow-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Float - Ambient floating elements */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* ============================================================================
 * 3. HERO SECTION ANIMATIONS - Scan Line & Breach Detection
 * ============================================================================ */

/* Scan Line - Vertical scan effect */
@keyframes scan-line {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100vh);
    }
}

/* Scan Down (Blue theme) - Hero section scan line */
@keyframes scan-down-blue {
    0% {
        top: -2px;
    }
    100% {
        top: 100%;
    }
}

/* Radar Expand - Ping effect for detected breaches */
@keyframes radar-expand-blue-main {
    0% {
        width: 14px;
        height: 14px;
        opacity: 1;
    }
    100% {
        width: 160px;
        height: 160px;
        opacity: 0;
        border-color: hsl(196 68% 66% / 0.3);
    }
}

@keyframes radar-expand-cyan {
    0% {
        width: 14px;
        height: 14px;
        opacity: 1;
    }
    100% {
        width: 160px;
        height: 160px;
        opacity: 0;
        border-color: hsl(180 70% 50% / 0.3);
    }
}

@keyframes radar-expand-light-blue {
    0% {
        width: 14px;
        height: 14px;
        opacity: 1;
    }
    100% {
        width: 160px;
        height: 160px;
        opacity: 0;
        border-color: hsl(210 80% 70% / 0.3);
    }
}

/* Dot Blink - Breach point blinking */
@keyframes dot-blink-blue-main {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 20px 6px hsl(196 68% 66% / 0.8);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.3);
        box-shadow: 0 0 40px 12px hsl(196 68% 66% / 1);
    }
}

@keyframes dot-blink-cyan {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 20px 6px hsl(180 70% 50% / 0.8);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.3);
        box-shadow: 0 0 40px 12px hsl(180 70% 50% / 1);
    }
}

@keyframes dot-blink-light-blue {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 20px 6px hsl(210 80% 70% / 0.8);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.3);
        box-shadow: 0 0 40px 12px hsl(210 80% 70% / 1);
    }
}

/* Breach Appear - Staggered appearance of breach points */
@keyframes breach-appear-blue-1 {
    0%, 19% { opacity: 0; visibility: hidden; }
    20% { opacity: 1; visibility: visible; }
    45% { opacity: 0.8; visibility: visible; }
    55%, 100% { opacity: 0; visibility: hidden; }
}

@keyframes breach-appear-blue-2 {
    0%, 34% { opacity: 0; visibility: hidden; }
    35% { opacity: 1; visibility: visible; }
    60% { opacity: 0.8; visibility: visible; }
    70%, 100% { opacity: 0; visibility: hidden; }
}

@keyframes breach-appear-blue-3 {
    0%, 54% { opacity: 0; visibility: hidden; }
    55% { opacity: 1; visibility: visible; }
    80% { opacity: 0.8; visibility: visible; }
    90%, 100% { opacity: 0; visibility: hidden; }
}

@keyframes breach-appear-blue-4 {
    0%, 69% { opacity: 0; visibility: hidden; }
    70% { opacity: 1; visibility: visible; }
    92% { opacity: 0.6; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}

@keyframes breach-appear-blue-5 {
    0%, 84% { opacity: 0; visibility: hidden; }
    85% { opacity: 1; visibility: visible; }
    96% { opacity: 0.5; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}

/* ============================================================================
 * 4. COMPONENT ANIMATIONS
 * ============================================================================ */

/* Accordion - Expand/collapse */
@keyframes accordion-down {
    from {
        height: 0;
    }
    to {
        height: var(--radix-accordion-content-height, auto);
    }
}

@keyframes accordion-up {
    from {
        height: var(--radix-accordion-content-height, auto);
    }
    to {
        height: 0;
    }
}

/* Enter/Exit - Modal and overlay animations */
@keyframes enter {
    from {
        opacity: var(--tw-enter-opacity, 1);
        transform: translate3d(
            var(--tw-enter-translate-x, 0),
            var(--tw-enter-translate-y, 0),
            0
        ) scale3d(
            var(--tw-enter-scale, 1),
            var(--tw-enter-scale, 1),
            var(--tw-enter-scale, 1)
        ) rotate(var(--tw-enter-rotate, 0));
    }
}

@keyframes exit {
    to {
        opacity: var(--tw-exit-opacity, 1);
        transform: translate3d(
            var(--tw-exit-translate-x, 0),
            var(--tw-exit-translate-y, 0),
            0
        ) scale3d(
            var(--tw-exit-scale, 1),
            var(--tw-exit-scale, 1),
            var(--tw-exit-scale, 1)
        ) rotate(var(--tw-exit-rotate, 0));
    }
}

/* ============================================================================
 * 5. ANIMATION UTILITY CLASSES
 * ============================================================================ */

/* Apply animations */
.animate-fade-in {
    animation: fade-in 0.5s ease-out forwards;
}

.animate-slide-up {
    animation: slide-up 0.6s ease-out forwards;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

.animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-bounce {
    animation: bounce 1s infinite;
}

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

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

/* Sentinel Pulse Animations */
.pulse-red {
    animation: pulse-red 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.pulse-blue {
    animation: pulse-blue 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.pulse-cyan {
    animation: pulse-cyan 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Hero Scan Line - Blue */
.scan-line-blue {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, hsl(196 68% 66% / 0.7), transparent);
    box-shadow: 0 0 30px 4px hsl(196 68% 66% / 0.5);
    animation: scan-down-blue 8s linear infinite;
}

/* Hero Scan Line - Red (Emergency) */
.scan-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, hsl(357 90% 58% / 0.7), transparent);
    box-shadow: 0 0 30px 4px hsl(357 90% 58% / 0.5);
    animation: scan-down 8s linear infinite;
}

/* Hero Scan Line - Cyan */
.scan-line-cyan {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, hsl(180 70% 50% / 0.7), transparent);
    box-shadow: 0 0 30px 4px hsl(180 70% 50% / 0.5);
    animation: scan-down 8s linear infinite;
}

/* Hero Scan Line - Orange (Phish Enterprise) */
.scan-line-orange {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, hsl(30 90% 55% / 0.7), transparent);
    box-shadow: 0 0 30px 4px hsl(30 90% 55% / 0.5);
    animation: scan-down 8s linear infinite;
}

/* Hero Scan Line - Green/Emerald (CyberEDU Students) */
.scan-line-green,
.scan-line-emerald {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, hsl(160 84% 39% / 0.7), transparent);
    box-shadow: 0 0 30px 4px hsl(160 84% 39% / 0.5);
    animation: scan-down 8s linear infinite;
}

/* Hero Scan Line - Rose (CyberEDU Academia) */
.scan-line-rose {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, hsl(330 80% 60% / 0.7), transparent);
    box-shadow: 0 0 30px 4px hsl(330 80% 60% / 0.5);
    animation: scan-down 8s linear infinite;
}

@keyframes scan-down {
    0% { top: -2px; }
    100% { top: 100%; }
}

.animate-scan {
    animation: scan-line 8s linear infinite;
}

/* Accordion animations */
.animate-accordion-down {
    animation: accordion-down 0.2s ease-out;
}

.animate-accordion-up {
    animation: accordion-up 0.2s ease-out;
}

/* Breach Point Animations (for hero) */
.breach-point-blue {
    position: absolute;
    visibility: hidden;
    opacity: 0;
}

.breach-blue-1 { animation: breach-appear-blue-1 8s linear infinite; }
.breach-blue-2 { animation: breach-appear-blue-2 8s linear infinite; }
.breach-blue-3 { animation: breach-appear-blue-3 8s linear infinite; }
.breach-blue-4 { animation: breach-appear-blue-4 8s linear infinite; }
.breach-blue-5 { animation: breach-appear-blue-5 8s linear infinite; }

.breach-dot-blue {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    position: relative;
    z-index: 10;
}

.dot-blue-blue {
    background: hsl(196 68% 66%);
    box-shadow: 0 0 20px 6px hsl(196 68% 66% / 0.8);
    animation: dot-blink-blue-main 0.8s ease-in-out infinite;
}

.dot-blue-cyan {
    background: hsl(180 70% 50%);
    box-shadow: 0 0 20px 6px hsl(180 70% 50% / 0.8);
    animation: dot-blink-cyan 0.8s ease-in-out infinite;
}

.dot-blue-light-blue {
    background: hsl(210 80% 70%);
    box-shadow: 0 0 20px 6px hsl(210 80% 70% / 0.8);
    animation: dot-blink-light-blue 0.8s ease-in-out infinite;
}

.radar-ping-blue {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    opacity: 0;
}

.ping-blue-blue {
    border: 2px solid hsl(196 68% 66%);
    animation: radar-expand-blue-main 1.5s ease-out infinite;
}

.ping-blue-cyan {
    border: 2px solid hsl(180 70% 50%);
    animation: radar-expand-cyan 1.5s ease-out infinite;
}

.ping-blue-light-blue {
    border: 2px solid hsl(210 80% 70%);
    animation: radar-expand-light-blue 1.5s ease-out infinite;
}

.radar-ping-blue-2 { animation-delay: 0.3s !important; }
.radar-ping-blue-3 { animation-delay: 0.6s !important; }

/* ============================================================================
 * 5.5 BREACH POINT ANIMATIONS - RED/EMERGENCY THEME
 * ============================================================================ */

/* Breach Points - Red Theme (Emergency Response page) */
.breach-point {
    position: absolute;
    visibility: hidden;
    opacity: 0;
}

/* Breach points animate visibility and opacity together - synced with scan line (8s cycle) */
.breach-1 { animation: breach-appear-1 8s linear infinite; }
.breach-2 { animation: breach-appear-2 8s linear infinite; }
.breach-3 { animation: breach-appear-3 8s linear infinite; }
.breach-4 { animation: breach-appear-4 8s linear infinite; }
.breach-5 { animation: breach-appear-5 8s linear infinite; }

.breach-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    position: relative;
    z-index: 10;
}

.dot-red {
    background: hsl(357 90% 58%);
    box-shadow: 0 0 20px 6px hsl(357 90% 58% / 0.8);
    animation: dot-blink-red 0.8s ease-in-out infinite;
}

.dot-blue {
    background: hsl(196 68% 66%);
    box-shadow: 0 0 20px 6px hsl(196 68% 66% / 0.8);
    animation: dot-blink-blue 0.8s ease-in-out infinite;
}

.dot-orange {
    background: hsl(30 90% 55%);
    box-shadow: 0 0 20px 6px hsl(30 90% 55% / 0.8);
    animation: dot-blink-orange 0.8s ease-in-out infinite;
}

.dot-green,
.dot-emerald {
    background: hsl(160 84% 39%);
    box-shadow: 0 0 20px 6px hsl(160 84% 39% / 0.8);
    animation: dot-blink-green 0.8s ease-in-out infinite;
}

.dot-cyan {
    background: hsl(180 70% 50%);
    box-shadow: 0 0 20px 6px hsl(180 70% 50% / 0.8);
    animation: dot-blink-cyan 0.8s ease-in-out infinite;
}

.dot-rose {
    background: hsl(330 80% 60%);
    box-shadow: 0 0 20px 6px hsl(330 80% 60% / 0.8);
    animation: dot-blink-rose 0.8s ease-in-out infinite;
}

.radar-ping {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    opacity: 0;
    /* Pings inherit visibility from parent .breach-point */
}

.ping-red {
    border: 2px solid hsl(357 90% 58%);
    animation: radar-expand-red 1.5s ease-out infinite;
}

.ping-blue {
    border: 2px solid hsl(196 68% 66%);
    animation: radar-expand-blue 1.5s ease-out infinite;
}

.ping-orange {
    border: 2px solid hsl(30 90% 55%);
    animation: radar-expand-orange 1.5s ease-out infinite;
}

.ping-green,
.ping-emerald {
    border: 2px solid hsl(160 84% 39%);
    animation: radar-expand-green 1.5s ease-out infinite;
}

.ping-cyan {
    border: 2px solid hsl(180 70% 50%);
    animation: radar-expand-cyan 1.5s ease-out infinite;
}

.ping-rose {
    border: 2px solid hsl(330 80% 60%);
    animation: radar-expand-rose 1.5s ease-out infinite;
}

.radar-ping-2 { animation-delay: 0.3s !important; }
.radar-ping-3 { animation-delay: 0.6s !important; }

/* Red theme keyframes */
@keyframes dot-blink-red {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 20px 6px hsl(357 90% 58% / 0.8); }
    50% { opacity: 0.6; transform: scale(1.3); box-shadow: 0 0 40px 12px hsl(357 90% 58% / 1); }
}

@keyframes dot-blink-blue {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 20px 6px hsl(196 68% 66% / 0.8); }
    50% { opacity: 0.6; transform: scale(1.3); box-shadow: 0 0 40px 12px hsl(196 68% 66% / 1); }
}

@keyframes dot-blink-orange {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 20px 6px hsl(30 90% 55% / 0.8); }
    50% { opacity: 0.6; transform: scale(1.3); box-shadow: 0 0 40px 12px hsl(30 90% 55% / 1); }
}

@keyframes dot-blink-green {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 20px 6px hsl(160 84% 39% / 0.8); }
    50% { opacity: 0.6; transform: scale(1.3); box-shadow: 0 0 40px 12px hsl(160 84% 39% / 1); }
}

@keyframes dot-blink-cyan {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 20px 6px hsl(180 70% 50% / 0.8); }
    50% { opacity: 0.6; transform: scale(1.3); box-shadow: 0 0 40px 12px hsl(180 70% 50% / 1); }
}

@keyframes dot-blink-rose {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 20px 6px hsl(330 80% 60% / 0.8); }
    50% { opacity: 0.6; transform: scale(1.3); box-shadow: 0 0 40px 12px hsl(330 80% 60% / 1); }
}

@keyframes radar-expand-red {
    0% { width: 14px; height: 14px; opacity: 1; }
    100% { width: 160px; height: 160px; opacity: 0; border-color: hsl(357 90% 58% / 0.3); }
}

@keyframes radar-expand-blue {
    0% { width: 14px; height: 14px; opacity: 1; }
    100% { width: 160px; height: 160px; opacity: 0; border-color: hsl(196 68% 66% / 0.3); }
}

@keyframes radar-expand-orange {
    0% { width: 14px; height: 14px; opacity: 1; }
    100% { width: 160px; height: 160px; opacity: 0; border-color: hsl(30 90% 55% / 0.3); }
}

@keyframes radar-expand-green {
    0% { width: 14px; height: 14px; opacity: 1; }
    100% { width: 160px; height: 160px; opacity: 0; border-color: hsl(160 84% 39% / 0.3); }
}

@keyframes radar-expand-cyan {
    0% { width: 14px; height: 14px; opacity: 1; }
    100% { width: 160px; height: 160px; opacity: 0; border-color: hsl(180 70% 50% / 0.3); }
}

@keyframes radar-expand-rose {
    0% { width: 14px; height: 14px; opacity: 1; }
    100% { width: 160px; height: 160px; opacity: 0; border-color: hsl(330 80% 60% / 0.3); }
}

@keyframes breach-appear-1 {
    0%, 19% { opacity: 0; visibility: hidden; }
    20% { opacity: 1; visibility: visible; }
    45% { opacity: 0.8; visibility: visible; }
    55%, 100% { opacity: 0; visibility: hidden; }
}

@keyframes breach-appear-2 {
    0%, 34% { opacity: 0; visibility: hidden; }
    35% { opacity: 1; visibility: visible; }
    60% { opacity: 0.8; visibility: visible; }
    70%, 100% { opacity: 0; visibility: hidden; }
}

@keyframes breach-appear-3 {
    0%, 54% { opacity: 0; visibility: hidden; }
    55% { opacity: 1; visibility: visible; }
    80% { opacity: 0.8; visibility: visible; }
    90%, 100% { opacity: 0; visibility: hidden; }
}

@keyframes breach-appear-4 {
    0%, 69% { opacity: 0; visibility: hidden; }
    70% { opacity: 1; visibility: visible; }
    92% { opacity: 0.6; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}

@keyframes breach-appear-5 {
    0%, 84% { opacity: 0; visibility: hidden; }
    85% { opacity: 1; visibility: visible; }
    96% { opacity: 0.5; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}

/* ============================================================================
 * 6. ANIMATION MODIFIERS
 * ============================================================================ */

/* Animation delays */
.animation-delay-100 { animation-delay: 100ms; }
.animation-delay-200 { animation-delay: 200ms; }
.animation-delay-300 { animation-delay: 300ms; }
.animation-delay-400 { animation-delay: 400ms; }
.animation-delay-500 { animation-delay: 500ms; }
.animation-delay-700 { animation-delay: 700ms; }
.animation-delay-1000 { animation-delay: 1000ms; }

/* Animation durations */
.duration-75 { animation-duration: 75ms; }
.duration-100 { animation-duration: 100ms; }
.duration-150 { animation-duration: 150ms; }
.duration-200 { animation-duration: 200ms; }
.duration-300 { animation-duration: 300ms; }
.duration-500 { animation-duration: 500ms; }
.duration-700 { animation-duration: 700ms; }
.duration-1000 { animation-duration: 1000ms; }

/* Reduce motion preference */
@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;
    }
    
    .animate-float,
    .animate-scan,
    .scan-line-blue,
    .breach-point-blue,
    .radar-ping-blue {
        animation: none !important;
    }
}