/* ===== ANIMATIONS.CSS ===== */
/* SecurityScope.net Animation System */
/* Modern, minimalist cybersecurity animations with pixel art aesthetic */

/* ===== MATRIX RAIN ANIMATION ===== */
@keyframes matrix-rain {
    0% { 
        transform: translateY(-100px); 
        opacity: 0; 
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% { 
        transform: translateY(calc(100vh + 100px)); 
        opacity: 0; 
    }
}

.matrix-char {
    position: absolute;
    color: var(--accent-primary);
    font-family: 'Courier New', monospace;
    font-size: 18px;
    font-weight: bold;
    animation: matrix-rain linear infinite;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    text-shadow: 0 0 8px var(--accent-primary);
}

.matrix-char:nth-child(2n) {
    color: var(--accent-secondary);
    text-shadow: 0 0 8px var(--accent-secondary);
}

.matrix-char:nth-child(3n) {
    color: var(--accent-light);
    text-shadow: 0 0 8px var(--accent-light);
}

/* ===== GLOW EFFECTS ===== */
@keyframes glow-pulse {
    0%, 100% { 
        box-shadow: 
            0 0 5px var(--accent-primary),
            0 0 10px var(--accent-primary),
            0 0 15px var(--accent-primary),
            inset 0 0 5px var(--accent-glow); 
    }
    50% { 
        box-shadow: 
            0 0 10px var(--accent-primary),
            0 0 20px var(--accent-primary),
            0 0 30px var(--accent-primary),
            inset 0 0 10px var(--accent-glow); 
    }
}

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

@keyframes glow-pulse-soft {
    0%, 100% { 
        box-shadow: 
            0 0 2px var(--accent-primary),
            0 0 4px var(--accent-primary); 
    }
    50% { 
        box-shadow: 
            0 0 4px var(--accent-primary),
            0 0 8px var(--accent-primary); 
    }
}

.glow-effect-soft {
    animation: glow-pulse-soft 3s ease-in-out infinite;
}

@keyframes text-glow {
    0%, 100% {
        text-shadow: 
            0 0 5px currentColor,
            0 0 10px currentColor;
    }
    50% {
        text-shadow: 
            0 0 10px currentColor,
            0 0 20px currentColor,
            0 0 30px currentColor;
    }
}

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

/* ===== COUNTER ANIMATIONS ===== */
@keyframes count-up {
    from { 
        opacity: 0; 
        transform: translateY(30px) scale(0.8);
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1);
    }
}

.count-up {
    animation: count-up 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes number-roll {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.number-roll {
    display: inline-block;
    animation: number-roll 0.5s ease-out forwards;
}

/* ===== CARD ANIMATIONS ===== */
@keyframes card-lift {
    0% { 
        transform: translateY(0) rotateX(0); 
    }
    100% { 
        transform: translateY(-10px) rotateX(5deg); 
    }
}

.card-lift {
    animation: card-lift 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes card-glow {
    0%, 100% { 
        box-shadow: 
            8px 8px 0 rgba(0, 0, 0, 0.2),
            0 0 0 var(--accent-glow);
    }
    50% { 
        box-shadow: 
            8px 8px 0 rgba(0, 0, 0, 0.2),
            0 0 30px var(--accent-glow);
    }
}

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

@keyframes card-enter {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.card-enter {
    animation: card-enter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ===== SLIDE ANIMATIONS ===== */
@keyframes slide-in-right {
    from { 
        opacity: 0; 
        transform: translateX(100px); 
    }
    to { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

.animate-slide-in-right {
    animation: slide-in-right 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes slide-in-left {
    from { 
        opacity: 0; 
        transform: translateX(-100px); 
    }
    to { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

.animate-slide-in-left {
    animation: slide-in-left 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes slide-in-up {
    from { 
        opacity: 0; 
        transform: translateY(50px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.animate-slide-in-up {
    animation: slide-in-up 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes slide-in-down {
    from { 
        opacity: 0; 
        transform: translateY(-50px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.animate-slide-in-down {
    animation: slide-in-down 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ===== FADE ANIMATIONS ===== */
@keyframes fade-in {
    from { 
        opacity: 0; 
    }
    to { 
        opacity: 1; 
    }
}

.animate-fade-in {
    animation: fade-in 0.6s ease-out forwards;
}

@keyframes fade-in-up {
    from { 
        opacity: 0; 
        transform: translateY(30px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes fade-in-down {
    from { 
        opacity: 0; 
        transform: translateY(-30px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.animate-fade-in-down {
    animation: fade-in-down 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes fade-in-left {
    from { 
        opacity: 0; 
        transform: translateX(-30px); 
    }
    to { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

.animate-fade-in-left {
    animation: fade-in-left 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes fade-in-right {
    from { 
        opacity: 0; 
        transform: translateX(30px); 
    }
    to { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

.animate-fade-in-right {
    animation: fade-in-right 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ===== BOUNCE ANIMATIONS ===== */
@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        transform: translate3d(0, -20px, 0);
    }
    70% {
        transform: translate3d(0, -10px, 0);
    }
    90% {
        transform: translate3d(0, -4px, 0);
    }
}

.animate-bounce {
    animation: bounce 1.5s ease-in-out infinite;
    transform-origin: center bottom;
}

@keyframes bounce-gentle {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-15px);
    }
    60% {
        transform: translateY(-7px);
    }
}

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

@keyframes bounce-subtle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

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

/* ===== ROTATE ANIMATIONS ===== */
@keyframes rotate {
    from { 
        transform: rotate(0deg); 
    }
    to { 
        transform: rotate(360deg); 
    }
}

.animate-rotate {
    animation: rotate 2s linear infinite;
}

@keyframes rotate-slow {
    from { 
        transform: rotate(0deg); 
    }
    to { 
        transform: rotate(360deg); 
    }
}

.animate-rotate-slow {
    animation: rotate-slow 8s linear infinite;
}

@keyframes rotate-reverse {
    from { 
        transform: rotate(360deg); 
    }
    to { 
        transform: rotate(0deg); 
    }
}

.animate-rotate-reverse {
    animation: rotate-reverse 2s linear infinite;
}

/* ===== PULSE ANIMATIONS ===== */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

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

@keyframes pulse-soft {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

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

@keyframes pulse-strong {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 var(--accent-glow);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px transparent;
    }
}

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

/* ===== TYPING ANIMATIONS ===== */
@keyframes typing {
    from { 
        width: 0; 
    }
    to { 
        width: 100%; 
    }
}

@keyframes blink-caret {
    from, to { 
        border-color: transparent; 
    }
    50% { 
        border-color: var(--accent-primary); 
    }
}

.typing-animation {
    overflow: hidden;
    border-right: 3px solid var(--accent-primary);
    white-space: nowrap;
    animation: 
        typing 3.5s steps(40, end) forwards,
        blink-caret 0.75s step-end infinite;
}

@keyframes typewriter {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

.typewriter {
    overflow: hidden;
    border-right: 2px solid var(--accent-primary);
    white-space: nowrap;
    animation: 
        typewriter 4s steps(44) 1s forwards,
        blink-caret 0.5s step-end infinite;
}

/* ===== SHIMMER ANIMATION ===== */
@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.shimmer {
    position: relative;
    overflow: hidden;
}

.shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    animation: shimmer 2s ease-in-out infinite;
}

/* ===== LOADING ANIMATIONS ===== */
@keyframes spin {
    0% { 
        transform: rotate(0deg); 
    }
    100% { 
        transform: rotate(360deg); 
    }
}

.loading {
    position: relative;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--accent-primary);
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading .btn-text {
    opacity: 0;
}

@keyframes dots {
    0%, 20% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.loading-dots span {
    animation: dots 1.5s infinite;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

/* ===== NOTIFICATION ANIMATIONS ===== */
@keyframes slide-in-notification {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-out-notification {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

.pixel-notification {
    position: fixed;
    top: 100px;
    right: 20px;
    padding: 1.5rem;
    background: var(--bg-card);
    border: 4px solid var(--border-color);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
    transform: translateX(400px);
    transition: all 0.3s ease;
    z-index: 9999;
    max-width: 400px;
    font-family: 'Space Grotesk', sans-serif;
    border-radius: 0;
}

.pixel-notification.show {
    animation: slide-in-notification 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.pixel-notification.hide {
    animation: slide-out-notification 0.3s ease forwards;
}

.pixel-notification.success {
    border-color: var(--accent-primary);
    background: var(--bg-card);
}

.pixel-notification.error {
    border-color: #ef4444;
    background: var(--bg-card);
}

.pixel-notification.warning {
    border-color: #f59e0b;
    background: var(--bg-card);
}

.pixel-notification.info {
    border-color: #3b82f6;
    background: var(--bg-card);
}

/* ===== THEME TRANSITION ===== */
.theme-transition * {
    transition: 
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease !important;
}

/* ===== HOVER EFFECTS ===== */
.hover-lift {
    transition: 
        transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 
        var(--shadow-lg),
        0 15px 30px rgba(0, 0, 0, 0.3);
}

.hover-glow {
    transition: 
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 
        0 0 20px var(--accent-glow),
        0 0 40px var(--accent-glow);
    border-color: var(--accent-primary);
}

.hover-scale {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-shake {
    transition: transform 0.3s ease;
}

.hover-shake:hover {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* ===== STAGGERED ANIMATIONS ===== */
.stagger-item {
    opacity: 0;
    transform: translateY(30px);
    animation: fade-in-up 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.stagger-item:nth-child(1) { animation-delay: 0.1s; }
.stagger-item:nth-child(2) { animation-delay: 0.2s; }
.stagger-item:nth-child(3) { animation-delay: 0.3s; }
.stagger-item:nth-child(4) { animation-delay: 0.4s; }
.stagger-item:nth-child(5) { animation-delay: 0.5s; }
.stagger-item:nth-child(6) { animation-delay: 0.6s; }
.stagger-item:nth-child(7) { animation-delay: 0.7s; }
.stagger-item:nth-child(8) { animation-delay: 0.8s; }
.stagger-item:nth-child(9) { animation-delay: 0.9s; }
.stagger-item:nth-child(10) { animation-delay: 1s; }

/* ===== TEXT ANIMATIONS ===== */
@keyframes text-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.text-shimmer {
    background: linear-gradient(
        90deg,
        var(--text-primary),
        var(--text-accent),
        var(--text-primary)
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: text-shimmer 3s ease-in-out infinite;
}

@keyframes text-flicker {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

.text-flicker {
    animation: text-flicker 2s ease-in-out infinite;
}

/* ===== PARTICLE EFFECTS ===== */
@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    33% {
        transform: translateY(-20px) rotate(120deg);
    }
    66% {
        transform: translateY(10px) rotate(240deg);
    }
}

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

@keyframes float-reverse {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    33% {
        transform: translateY(15px) rotate(-120deg);
    }
    66% {
        transform: translateY(-10px) rotate(-240deg);
    }
}

.float-reverse {
    animation: float-reverse 7s ease-in-out infinite;
}

/* ===== GRADIENT ANIMATIONS ===== */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.gradient-animate {
    background: linear-gradient(-45deg, 
        var(--accent-primary), 
        var(--accent-secondary), 
        var(--accent-light),
        var(--accent-primary));
    background-size: 400% 400%;
    animation: gradient-shift 8s ease infinite;
}

/* ===== SCROLL INDICATOR ===== */
@keyframes scroll-bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.scroll-indicator {
    animation: scroll-bounce 2s infinite;
}

/* ===== PROGRESS INDICATOR ===== */
@keyframes progress-indeterminate {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.progress-indeterminate .pixel-progress-fill {
    animation: progress-indeterminate 1.5s ease-in-out infinite;
}

/* ===== CYBER-SPECIFIC ANIMATIONS ===== */
@keyframes scan-line {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(400%);
        opacity: 0;
    }
}

.scan-line {
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent, 
        var(--accent-primary), 
        transparent);
    animation: scan-line 2s linear infinite;
}

@keyframes radar-sweep {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.radar-sweep {
    animation: radar-sweep 4s linear infinite;
}

@keyframes data-stream {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(1000%);
        opacity: 0;
    }
}

.data-stream {
    animation: data-stream 3s linear infinite;
}

/* ===== RESPONSIVE ANIMATION CONTROLS ===== */
@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;
    }
}

/* ===== ANIMATION UTILITY CLASSES ===== */
.animate-once {
    animation-iteration-count: 1 !important;
}

.animate-infinite {
    animation-iteration-count: infinite !important;
}

.animate-paused {
    animation-play-state: paused !important;
}

.animate-running {
    animation-play-state: running !important;
}

.animate-fill-forwards {
    animation-fill-mode: forwards !important;
}

.animate-fill-backwards {
    animation-fill-mode: backwards !important;
}

.animate-fill-both {
    animation-fill-mode: both !important;
}

/* ===== ANIMATION DELAY UTILITIES ===== */
.delay-100 { animation-delay: 0.1s !important; }
.delay-200 { animation-delay: 0.2s !important; }
.delay-300 { animation-delay: 0.3s !important; }
.delay-400 { animation-delay: 0.4s !important; }
.delay-500 { animation-delay: 0.5s !important; }
.delay-600 { animation-delay: 0.6s !important; }
.delay-700 { animation-delay: 0.7s !important; }
.delay-800 { animation-delay: 0.8s !important; }
.delay-900 { animation-delay: 0.9s !important; }
.delay-1000 { animation-delay: 1s !important; }
.delay-1500 { animation-delay: 1.5s !important; }
.delay-2000 { animation-delay: 2s !important; }

/* ===== ANIMATION DURATION UTILITIES ===== */
.duration-100 { animation-duration: 0.1s !important; }
.duration-200 { animation-duration: 0.2s !important; }
.duration-300 { animation-duration: 0.3s !important; }
.duration-400 { animation-duration: 0.4s !important; }
.duration-500 { animation-duration: 0.5s !important; }
.duration-600 { animation-duration: 0.6s !important; }
.duration-700 { animation-duration: 0.7s !important; }
.duration-800 { animation-duration: 0.8s !important; }
.duration-900 { animation-duration: 0.9s !important; }
.duration-1000 { animation-duration: 1s !important; }
.duration-1500 { animation-duration: 1.5s !important; }
.duration-2000 { animation-duration: 2s !important; }
.duration-3000 { animation-duration: 3s !important; }
.duration-4000 { animation-duration: 4s !important; }
.duration-5000 { animation-duration: 5s !important; }

/* ===== EASING UTILITIES ===== */
.ease-linear { animation-timing-function: linear !important; }
.ease-in { animation-timing-function: ease-in !important; }
.ease-out { animation-timing-function: ease-out !important; }
.ease-in-out { animation-timing-function: ease-in-out !important; }
.ease-bounce { animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
.ease-elastic { animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55) !important; }

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
.will-change-transform {
    will-change: transform;
}

.will-change-opacity {
    will-change: opacity;
}

.will-change-contents {
    will-change: transform, opacity;
}

/* ===== PRINT STYLES ===== */
@media print {
    * {
        animation: none !important;
        transition: none !important;
    }
    
    .pixel-notification,
    .scroll-indicator,
    .loading::after {
        display: none !important;
    }
}

/* ===== HIGH CONTRAST MODE SUPPORT ===== */
@media (prefers-contrast: high) {
    .glow-effect,
    .glow-effect-soft,
    .text-glow {
        animation: none;
        box-shadow: none;
        text-shadow: 0 0 1px currentColor;
    }
}

/* ===== DARK/LIGHT THEME SPECIFIC ANIMATIONS ===== */
[data-theme="dark"] .matrix-char {
    text-shadow: 
        0 0 8px var(--accent-primary),
        0 0 16px var(--accent-primary);
}

[data-theme="light"] .matrix-char {
    text-shadow: 
        0 0 4px var(--accent-primary),
        0 0 8px var(--accent-primary);
}

[data-theme="light"] .shimmer::before {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 0, 0, 0.05),
        transparent
    );
}