/* ==========================================================================
   Animations-5091827364PFV.css
   PolisForge Control Center - All @keyframes Animations
   Color Palette: Dark Green (#1a4d2e, #236b3e, #143d23)
   Depends on: Variables-3918405726RCW.css
   ========================================================================== */

/* -----------------------------------------------------------------------
   GLITCH ANIMATIONS
   Green clip-path distortion effect
   ----------------------------------------------------------------------- */
@keyframes glitch-1 {
    0%, 100% {
        transform: translate(0);
        clip-path: polygon(0 0, 100% 0, 100% 42%, 0 42%);
    }
    10% {
        transform: translate(-4px, 2px);
        clip-path: polygon(0 10%, 100% 10%, 100% 35%, 0 35%);
    }
    20% {
        transform: translate(-3px, 3px);
        clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    }
    30% {
        transform: translate(3px, -1px);
        clip-path: polygon(0 5%, 100% 5%, 100% 38%, 0 38%);
    }
    40% {
        transform: translate(-3px, -3px);
        clip-path: polygon(0 15%, 100% 15%, 100% 48%, 0 48%);
    }
    50% {
        transform: translate(2px, 2px);
        clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%);
    }
    60% {
        transform: translate(3px, 3px);
        clip-path: polygon(0 8%, 100% 8%, 100% 42%, 0 42%);
    }
    70% {
        transform: translate(-2px, -2px);
        clip-path: polygon(0 2%, 100% 2%, 100% 44%, 0 44%);
    }
    80% {
        transform: translate(3px, -3px);
        clip-path: polygon(0 12%, 100% 12%, 100% 46%, 0 46%);
    }
    90% {
        transform: translate(-1px, 1px);
        clip-path: polygon(0 0, 100% 0, 100% 42%, 0 42%);
    }
}

@keyframes glitch-2 {
    0%, 100% {
        transform: translate(0);
        clip-path: polygon(0 58%, 100% 58%, 100% 100%, 0 100%);
    }
    10% {
        transform: translate(3px, -2px);
        clip-path: polygon(0 55%, 100% 55%, 100% 95%, 0 95%);
    }
    20% {
        transform: translate(3px, -3px);
        clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
    }
    30% {
        transform: translate(-2px, 1px);
        clip-path: polygon(0 52%, 100% 52%, 100% 92%, 0 92%);
    }
    40% {
        transform: translate(3px, 3px);
        clip-path: polygon(0 56%, 100% 56%, 100% 98%, 0 98%);
    }
    50% {
        transform: translate(-3px, -1px);
        clip-path: polygon(0 62%, 100% 62%, 100% 100%, 0 100%);
    }
    60% {
        transform: translate(-3px, -3px);
        clip-path: polygon(0 54%, 100% 54%, 100% 96%, 0 96%);
    }
    70% {
        transform: translate(2px, 2px);
        clip-path: polygon(0 58%, 100% 58%, 100% 100%, 0 100%);
    }
    80% {
        transform: translate(-3px, 3px);
        clip-path: polygon(0 50%, 100% 50%, 100% 94%, 0 94%);
    }
    90% {
        transform: translate(1px, -1px);
        clip-path: polygon(0 58%, 100% 58%, 100% 100%, 0 100%);
    }
}

/* -----------------------------------------------------------------------
   NEON GLOW
   Text-shadow pulse with green tones
   ----------------------------------------------------------------------- */
@keyframes neon-glow {
    0%, 100% {
        text-shadow:
            0 0 4px rgba(26, 77, 46, 0.4),
            0 0 8px rgba(26, 77, 46, 0.3),
            0 0 16px rgba(26, 77, 46, 0.2),
            0 0 32px rgba(26, 77, 46, 0.1);
    }
    25% {
        text-shadow:
            0 0 6px rgba(35, 107, 62, 0.5),
            0 0 12px rgba(35, 107, 62, 0.4),
            0 0 24px rgba(35, 107, 62, 0.25),
            0 0 48px rgba(35, 107, 62, 0.12);
    }
    50% {
        text-shadow:
            0 0 8px rgba(26, 77, 46, 0.6),
            0 0 16px rgba(26, 77, 46, 0.45),
            0 0 32px rgba(26, 77, 46, 0.3),
            0 0 64px rgba(26, 77, 46, 0.15);
    }
    75% {
        text-shadow:
            0 0 5px rgba(20, 61, 35, 0.45),
            0 0 10px rgba(20, 61, 35, 0.35),
            0 0 20px rgba(20, 61, 35, 0.22),
            0 0 40px rgba(20, 61, 35, 0.1);
    }
}

/* -----------------------------------------------------------------------
   SKELETON SHIMMER
   Background-position sweep for loading state
   ----------------------------------------------------------------------- */
@keyframes skeleton-shimmer {
    0% {
        background-position: 300% 0;
    }
    100% {
        background-position: -300% 0;
    }
}

/* -----------------------------------------------------------------------
   CLASSIFIED DOOR ANIMATIONS
   Slide left and right to reveal content
   ----------------------------------------------------------------------- */
@keyframes classified-slide-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes classified-slide-right {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}

/* -----------------------------------------------------------------------
   CARD ENTRANCE
   Opacity + translateY for staggered card loading
   ----------------------------------------------------------------------- */
@keyframes card-entrance {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* -----------------------------------------------------------------------
   PULSE RING
   Expanding ring that fades out
   ----------------------------------------------------------------------- */
@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* -----------------------------------------------------------------------
   FLOAT
   Gentle vertical movement with slight rotation
   ----------------------------------------------------------------------- */
@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-14px) rotate(1.5deg);
    }
    50% {
        transform: translateY(-6px) rotate(-0.5deg);
    }
    75% {
        transform: translateY(-18px) rotate(-1.5deg);
    }
}

/* -----------------------------------------------------------------------
   COUNT-UP GLOW
   Text-shadow intensity change for stat numbers
   ----------------------------------------------------------------------- */
@keyframes count-up-glow {
    0% {
        text-shadow:
            0 0 2px rgba(26, 77, 46, 0.2),
            0 0 6px rgba(26, 77, 46, 0.1);
    }
    50% {
        text-shadow:
            0 0 8px rgba(26, 77, 46, 0.5),
            0 0 20px rgba(26, 77, 46, 0.3),
            0 0 40px rgba(26, 77, 46, 0.15);
    }
    100% {
        text-shadow:
            0 0 4px rgba(26, 77, 46, 0.3),
            0 0 10px rgba(26, 77, 46, 0.15);
    }
}

/* -----------------------------------------------------------------------
   FADE IN
   Simple opacity transition
   ----------------------------------------------------------------------- */
@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* -----------------------------------------------------------------------
   SLIDE UP
   TranslateY with opacity for content reveals
   ----------------------------------------------------------------------- */
@keyframes slide-up {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* -----------------------------------------------------------------------
   SPIN
   Full rotation for loaders
   ----------------------------------------------------------------------- */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* -----------------------------------------------------------------------
   MODAL ENTER
   Scale + opacity for modal panel entrance
   ----------------------------------------------------------------------- */
@keyframes modal-enter {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* -----------------------------------------------------------------------
   DOOR OPEN ANIMATIONS
   Individual door slide for classified panels
   ----------------------------------------------------------------------- */
@keyframes door-open-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes door-open-right {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}

/* -----------------------------------------------------------------------
   ADDITIONAL UTILITY ANIMATIONS
   ----------------------------------------------------------------------- */

/* Gentle and steady pulse for linear indicators */
@keyframes gentle-steady-pulse {
    0%, 100% {
        opacity: 0.62;
        transform: scaleX(0.96);
    }
    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* Border glow for active/focused elements */
@keyframes border-glow {
    0%, 100% {
        box-shadow:
            0 0 4px rgba(26, 77, 46, 0.2),
            0 0 8px rgba(26, 77, 46, 0.1);
    }
    50% {
        box-shadow:
            0 0 8px rgba(26, 77, 46, 0.4),
            0 0 16px rgba(26, 77, 46, 0.2),
            0 0 32px rgba(26, 77, 46, 0.1);
    }
}

/* Stagger reveal for lists */
@keyframes stagger-reveal {
    0% {
        opacity: 0;
        transform: translateX(-12px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Subtle shake for errors or warnings */
@keyframes shake-subtle {
    0%, 100% { transform: translateX(0); }
    12% { transform: translateX(-4px); }
    25% { transform: translateX(4px); }
    37% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
    62% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
    87% { transform: translateX(-1px); }
}

/* Breathing scale for ambient elements */
@keyframes breathe {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.08);
        opacity: 0.9;
    }
}

/* Typewriter cursor blink */
@keyframes cursor-blink {
    0%, 49% {
        border-right-color: var(--accent-primary);
    }
    50%, 100% {
        border-right-color: transparent;
    }
}

/* -----------------------------------------------------------------------
   SCANLINE MOVE
   Translates a scanline band slowly down the screen (CRT effect)
   ----------------------------------------------------------------------- */
@keyframes scanline-move {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100vh);
    }
}

/* -----------------------------------------------------------------------
   TERMINAL BOOT
   Opacity flicker sequence simulating CRT power-on
   ----------------------------------------------------------------------- */
@keyframes terminal-boot {
    0% {
        opacity: 0;
        filter: brightness(0);
    }
    5% {
        opacity: 0.6;
        filter: brightness(2);
    }
    10% {
        opacity: 0.2;
        filter: brightness(0.5);
    }
    15% {
        opacity: 0.8;
        filter: brightness(1.5);
    }
    20% {
        opacity: 0.3;
        filter: brightness(0.8);
    }
    30% {
        opacity: 0.9;
        filter: brightness(1.2);
    }
    50% {
        opacity: 0.7;
        filter: brightness(1);
    }
    100% {
        opacity: 1;
        filter: brightness(1);
    }
}

/* -----------------------------------------------------------------------
   BORDER BREATHE
   Breathing green border glow for login panel
   ----------------------------------------------------------------------- */
@keyframes border-breathe {
    0%, 100% {
        border-color: rgba(26, 77, 46, 0.2);
        box-shadow:
            0 4px 8px rgba(0, 0, 0, 0.32),
            0 10px 24px rgba(0, 0, 0, 0.28),
            0 0 16px rgba(26, 77, 46, 0.09),
            inset 0 1px 0 rgba(247, 245, 242, 0.04);
    }
    50% {
        border-color: rgba(26, 77, 46, 0.34);
        box-shadow:
            0 5px 10px rgba(0, 0, 0, 0.33),
            0 12px 28px rgba(0, 0, 0, 0.3),
            0 0 20px rgba(26, 77, 46, 0.14),
            inset 0 1px 0 rgba(247, 245, 242, 0.04);
    }
}

/* -----------------------------------------------------------------------
   ANIMATION UTILITY CLASSES
   Apply animations via class names
   ----------------------------------------------------------------------- */
.animate-fade-in {
    animation: fade-in var(--duration-normal) var(--ease-smooth) both;
}

.animate-slide-up {
    animation: slide-up var(--duration-normal) var(--ease-reveal) both;
}

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

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

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

.animate-breathe {
    animation: breathe 4s ease-in-out infinite;
}

.animate-count-glow {
    animation: count-up-glow 1.5s var(--ease-reveal) both;
}

/* Stagger delay utility classes */
.delay-1 { animation-delay: 80ms; }
.delay-2 { animation-delay: 160ms; }
.delay-3 { animation-delay: 240ms; }
.delay-4 { animation-delay: 320ms; }
.delay-5 { animation-delay: 400ms; }
.delay-6 { animation-delay: 480ms; }
.delay-7 { animation-delay: 560ms; }
.delay-8 { animation-delay: 640ms; }

/* -----------------------------------------------------------------------
   REDUCED MOTION
   Override all animations when user prefers reduced motion
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .animate-fade-in,
    .animate-slide-up,
    .animate-float,
    .animate-neon-glow,
    .animate-pulse-ring,
    .animate-breathe,
    .animate-count-glow {
        animation: none !important;
    }

    .animate-fade-in {
        opacity: 1;
    }

    .animate-slide-up {
        opacity: 1;
        transform: translateY(0);
    }

    [class*="delay-"] {
        animation-delay: 0ms !important;
    }

    .animate-terminal-boot {
        opacity: 1;
        filter: none;
    }
}