/* 
 * AURA Animations Components
 * Advanced User Repository & Archive - Animation System
 * Version: 1.0.1
 */

/* ========== LOADING SCREEN ANIMATIONS ========== */

/* AURA Logo Animation */
@keyframes logoFadeIn {
    0% { 
        opacity: 0; 
        transform: scale(0.8) translateY(20px); 
    }
    100% { 
        opacity: 1; 
        transform: scale(1.05) translateY(0); 
    }
}

@keyframes logoGlow {
    0%, 100% { 
        text-shadow: 0 0 20px rgba(38, 198, 218, 0.3); 
    }
    50% { 
        text-shadow: 0 0 30px rgba(38, 198, 218, 0.6), 0 0 40px rgba(179, 157, 219, 0.3); 
    }
}

/* Subtitle Animation */
@keyframes subtitleFadeIn {
    0% { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Progress Bar Animation */
@keyframes progressLoad {
    0% { width: 0%; }
    20% { width: 15%; }
    40% { width: 35%; }
    60% { width: 60%; }
    80% { width: 85%; }
    100% { width: 100%; }
}

/* Loading Text Animation */
@keyframes textFadeIn {
    0% { 
        opacity: 0; 
        transform: translateY(5px); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Welcome Message Animation */
@keyframes welcomeSlideIn {
    0% { 
        opacity: 0; 
        transform: translateY(-20px) scale(0.95); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

/* ========== INTERFACE TRANSITION ANIMATIONS ========== */

/* Main Interface Fade In */
@keyframes interfaceFadeIn {
    0% { 
        opacity: 0; 
        transform: scale(0.98); 
        filter: blur(2px); 
    }
    100% { 
        opacity: 1; 
        transform: scale(1); 
        filter: blur(0); 
    }
}

/* Card Slide In */
@keyframes cardSlideIn {
    0% { 
        opacity: 0; 
        transform: translateY(30px); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Staggered Card Animation */
@keyframes staggeredSlideIn {
    0% { 
        opacity: 0; 
        transform: translateY(20px) scale(0.95); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

/* ========== HUD SCANNING EFFECTS ========== */

/* Horizontal Scan Line */
@keyframes scanHorizontal {
    0% { 
        transform: translateX(-100%); 
        opacity: 0; 
    }
    10% { 
        opacity: 0.6; 
    }
    90% { 
        opacity: 0.6; 
    }
    100% { 
        transform: translateX(100%); 
        opacity: 0; 
    }
}

/* Vertical Scan Line */
@keyframes scanVertical {
    0% { 
        transform: translateY(-100%); 
        opacity: 0; 
    }
    10% { 
        opacity: 0.6; 
    }
    90% { 
        opacity: 0.6; 
    }
    100% { 
        transform: translateY(100%); 
        opacity: 0; 
    }
}

/* Matrix Data Stream */
@keyframes matrixFlow {
    0% { 
        transform: translateY(-100%); 
        opacity: 0; 
    }
    10% { 
        opacity: 0.8; 
    }
    90% { 
        opacity: 0.8; 
    }
    100% { 
        transform: translateY(100%); 
        opacity: 0; 
    }
}

/* ========== STATUS INDICATOR ANIMATIONS ========== */

/* Status Pulse */
@keyframes statusPulse {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1); 
        box-shadow: 0 0 8px currentColor; 
    }
    50% { 
        opacity: 0.6; 
        transform: scale(1.1); 
        box-shadow: 0 0 15px currentColor; 
    }
}

/* Critical Alert Pulse */
@keyframes criticalPulse {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1); 
        box-shadow: 0 0 8px var(--color-coral); 
    }
    25% { 
        opacity: 0.3; 
        transform: scale(0.9); 
        box-shadow: 0 0 3px var(--color-coral); 
    }
    50% { 
        opacity: 1; 
        transform: scale(1.2); 
        box-shadow: 0 0 20px var(--color-coral); 
    }
    75% { 
        opacity: 0.7; 
        transform: scale(1.05); 
        box-shadow: 0 0 12px var(--color-coral); 
    }
}

/* Breathing Pulse */
@keyframes breathingPulse {
    0%, 100% { 
        opacity: 0.7; 
        transform: scale(1); 
    }
    50% { 
        opacity: 1; 
        transform: scale(1.05); 
    }
}

/* ========== DATA VISUALIZATION ANIMATIONS ========== */

/* Progress Bar Fill */
@keyframes progressFill {
    0% { 
        width: 0%; 
        opacity: 0.5; 
    }
    100% { 
        width: var(--progress-width); 
        opacity: 1; 
    }
}

/* Circular Progress */
@keyframes circularProgress {
    0% { 
        stroke-dashoffset: 251.2; 
    }
    100% { 
        stroke-dashoffset: var(--progress-offset); 
    }
}

/* Chart Draw In */
@keyframes chartDrawIn {
    0% { 
        stroke-dashoffset: 1000; 
        opacity: 0; 
    }
    50% { 
        opacity: 1; 
    }
    100% { 
        stroke-dashoffset: 0; 
        opacity: 1; 
    }
}

/* Bar Chart Rise */
@keyframes barRise {
    0% { 
        transform: scaleY(0); 
        transform-origin: bottom; 
    }
    100% { 
        transform: scaleY(1); 
        transform-origin: bottom; 
    }
}

/* Number Counter */
@keyframes numberCounter {
    0% { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* ========== INTERACTIVE ELEMENT ANIMATIONS ========== */

/* Button Hover Glow */
@keyframes buttonGlow {
    0% { 
        box-shadow: 0 0 5px rgba(38, 198, 218, 0.3); 
    }
    100% { 
        box-shadow: 0 0 20px rgba(38, 198, 218, 0.6), 0 0 30px rgba(38, 198, 218, 0.3); 
    }
}

/* Card Hover Lift */
@keyframes cardLift {
    0% { 
        transform: translateY(0) scale(1); 
        box-shadow: var(--shadow-lg); 
    }
    100% { 
        transform: translateY(-8px) scale(1.02); 
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), var(--shadow-glow-teal); 
    }
}

/* Shimmer Effect */
@keyframes shimmer {
    0% { 
        transform: translateX(-100%); 
    }
    100% { 
        transform: translateX(100%); 
    }
}

/* Typing Cursor */
@keyframes cursorBlink {
    0%, 50% { 
        opacity: 1; 
    }
    51%, 100% { 
        opacity: 0; 
    }
}

/* Fade Animations */
@keyframes fadeIn {
    0% { 
        opacity: 0; 
    }
    100% { 
        opacity: 1; 
    }
}

@keyframes fadeInUp {
    0% { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

@keyframes fadeInDown {
    0% { 
        opacity: 0; 
        transform: translateY(-20px); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

@keyframes fadeInLeft {
    0% { 
        opacity: 0; 
        transform: translateX(-20px); 
    }
    100% { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

@keyframes fadeInRight {
    0% { 
        opacity: 0; 
        transform: translateX(20px); 
    }
    100% { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

/* ========== LOADING SPINNER ANIMATIONS ========== */

/* Standard Spinner */
@keyframes spin {
    0% { 
        transform: rotate(0deg); 
    }
    100% { 
        transform: rotate(360deg); 
    }
}

/* HUD Loading Rings */
@keyframes hudRingSpin {
    0% { 
        transform: rotate(0deg); 
        opacity: 1; 
    }
    50% { 
        opacity: 0.5; 
    }
    100% { 
        transform: rotate(360deg); 
        opacity: 1; 
    }
}

/* Pulsing Dots */
@keyframes pulsingDots {
    0%, 80%, 100% { 
        transform: scale(0); 
        opacity: 0.5; 
    }
    40% { 
        transform: scale(1); 
        opacity: 1; 
    }
}

/* ========== UTILITY ANIMATION CLASSES ========== */

/* Apply animations with classes */
.aura-logo-animate {
    animation: logoFadeIn 2s ease-out 0.5s forwards, logoGlow 4s ease-in-out 2.5s infinite alternate;
}

.aura-subtitle-animate {
    animation: subtitleFadeIn 2s ease-out 1.5s forwards;
}

.aura-progress-animate {
    animation: progressLoad 3s ease-out 2s forwards;
}

.aura-text-animate {
    animation: textFadeIn 1s ease-out 2.5s forwards;
}

.aura-welcome-animate {
    animation: welcomeSlideIn 1s ease-out forwards;
}

.aura-interface-animate {
    animation: interfaceFadeIn 1s ease-out forwards;
}

.aura-card-animate {
    animation: cardSlideIn 0.6s ease-out forwards;
}

.aura-stagger-animate {
    animation: staggeredSlideIn 0.8s ease-out forwards;
}

/* Staggered delays for multiple elements */
.aura-stagger-1 { animation-delay: 0.1s; }
.aura-stagger-2 { animation-delay: 0.2s; }
.aura-stagger-3 { animation-delay: 0.3s; }
.aura-stagger-4 { animation-delay: 0.4s; }
.aura-stagger-5 { animation-delay: 0.5s; }
.aura-stagger-6 { animation-delay: 0.6s; }

/* Scanning effects */
.scanning-horizontal {
    position: relative;
    overflow: hidden;
}

.scanning-horizontal::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--color-teal) 50%, 
        transparent 100%);
    animation: scanHorizontal 2s linear infinite;
    opacity: 0.7;
}

.scanning-vertical {
    position: relative;
    overflow: hidden;
}

.scanning-vertical::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(0deg, 
        transparent 0%, 
        var(--color-teal) 50%, 
        transparent 100%);
    animation: scanVertical 2s linear infinite;
    opacity: 0.7;
}

/* Status indicator classes */
.status-pulse {
    animation: statusPulse 2s ease-in-out infinite;
}

.status-critical {
    animation: criticalPulse 1s ease-in-out infinite;
}

.status-breathing {
    animation: breathingPulse 3s ease-in-out infinite;
}

/* Interactive effects */
.hover-glow:hover {
    animation: buttonGlow 0.3s ease-out forwards;
}

.hover-lift:hover {
    animation: cardLift 0.3s ease-out forwards;
}

/* Shimmer effect for loading states */
.shimmer-effect {
    position: relative;
    overflow: hidden;
}

.shimmer-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 50%, 
        transparent 100%);
    animation: shimmer 2s ease-in-out infinite;
}

/* Fade animations */
.fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

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

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

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

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

/* Loading spinners */
.hud-spinner {
    animation: spin 1s linear infinite;
}

.hud-rings {
    animation: hudRingSpin 2s linear infinite;
}

.pulsing-dots span {
    animation: pulsingDots 1.4s ease-in-out infinite;
}

.pulsing-dots span:nth-child(1) { animation-delay: -0.32s; }
.pulsing-dots span:nth-child(2) { animation-delay: -0.16s; }
.pulsing-dots span:nth-child(3) { animation-delay: 0s; }

/* ========== ADVANCED LOADING SEQUENCES ========== */

/* Three-Phase Loading Animation */
.loading-phase-1 {
    animation: logoFadeIn 2s ease-out 0.5s forwards;
}

.loading-phase-2 {
    animation: subtitleFadeIn 2s ease-out 1.5s forwards, 
               progressLoad 3s ease-out 2s forwards;
}

.loading-phase-3 {
    animation: textFadeIn 1s ease-out 2.5s forwards,
               welcomeSlideIn 1s ease-out 4.5s forwards;
}

/* ========== SCROLL-TRIGGERED ANIMATIONS ========== */

/* Elements that animate when scrolled into view */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-animate.in-view {
    opacity: 1;
    transform: translateY(0);
}

.scroll-animate-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-animate-left.in-view {
    opacity: 1;
    transform: translateX(0);
}

.scroll-animate-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-animate-right.in-view {
    opacity: 1;
    transform: translateX(0);
}

/* ========== PARTICLE SYSTEM ANIMATIONS ========== */

/* Floating particles */
@keyframes floatingParticle {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0.3;
    }
    25% {
        transform: translateY(-10px) translateX(5px) rotate(90deg);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-5px) translateX(-5px) rotate(180deg);
        opacity: 1;
    }
    75% {
        transform: translateY(-15px) translateX(3px) rotate(270deg);
        opacity: 0.5;
    }
}

.floating-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--color-teal);
    border-radius: 50%;
    animation: floatingParticle 8s ease-in-out infinite;
    opacity: 0.3;
}

.floating-particle:nth-child(1) { 
    left: 10%; 
    animation-delay: 0s; 
    animation-duration: 8s; 
}
.floating-particle:nth-child(2) { 
    left: 30%; 
    animation-delay: 1s; 
    animation-duration: 10s; 
}
.floating-particle:nth-child(3) { 
    left: 50%; 
    animation-delay: 2s; 
    animation-duration: 12s; 
}
.floating-particle:nth-child(4) { 
    left: 70%; 
    animation-delay: 3s; 
    animation-duration: 9s; 
}
.floating-particle:nth-child(5) { 
    left: 90%; 
    animation-delay: 4s; 
    animation-duration: 11s; 
}

/* ========== TEXT EFFECTS ========== */

/* Typewriter effect */
@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}

.typewriter {
    overflow: hidden;
    border-right: 2px solid var(--color-teal);
    white-space: nowrap;
    margin: 0 auto;
    animation: typewriter 3s steps(40, end), cursorBlink 0.75s step-end infinite;
}

/* Text reveal effect */
@keyframes textReveal {
    0% {
        clip-path: inset(0 100% 0 0);
    }
    100% {
        clip-path: inset(0 0 0 0);
    }
}

.text-reveal {
    animation: textReveal 1s ease-out forwards;
}

/* Glowing text effect */
@keyframes textGlow {
    0%, 100% {
        text-shadow: 0 0 5px currentColor;
    }
    50% {
        text-shadow: 0 0 20px currentColor, 0 0 30px currentColor;
    }
}

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

/* ========== MICRO-INTERACTIONS ========== */

/* Button press effect */
@keyframes buttonPress {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.button-press:active {
    animation: buttonPress 0.1s ease-out;
}

/* Link hover effect */
@keyframes linkHover {
    0% { transform: translateX(0); }
    100% { transform: translateX(3px); }
}

.link-hover:hover {
    animation: linkHover 0.3s ease-out forwards;
}

/* Icon bounce */
@keyframes iconBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-5px);
    }
    60% {
        transform: translateY(-3px);
    }
}

.icon-bounce:hover {
    animation: iconBounce 0.6s ease-out;
}

/* ========== HOLOGRAPHIC AND GLITCH EFFECTS ========== */

/* Holographic glitch effect */
@keyframes holographicGlitch {
    0%, 100% {
        transform: translateX(0);
        filter: hue-rotate(0deg);
    }
    10% {
        transform: translateX(-2px);
        filter: hue-rotate(90deg);
    }
    20% {
        transform: translateX(2px);
        filter: hue-rotate(180deg);
    }
    30% {
        transform: translateX(-1px);
        filter: hue-rotate(270deg);
    }
    40% {
        transform: translateX(1px);
        filter: hue-rotate(360deg);
    }
    50% {
        transform: translateX(0);
        filter: hue-rotate(0deg);
    }
}

.holographic-glitch {
    animation: holographicGlitch 0.3s ease-in-out;
}

/* Energy pulse for important elements */
@keyframes energyPulse {
    0% {
        box-shadow: 0 0 5px var(--color-teal);
    }
    25% {
        box-shadow: 0 0 10px var(--color-teal), 0 0 15px var(--color-lavender);
    }
    50% {
        box-shadow: 0 0 15px var(--color-lavender), 0 0 20px var(--color-coral);
    }
    75% {
        box-shadow: 0 0 10px var(--color-coral), 0 0 15px var(--color-teal);
    }
    100% {
        box-shadow: 0 0 5px var(--color-teal);
    }
}

.energy-pulse {
    animation: energyPulse 2s ease-in-out infinite;
}

/* ========== CUSTOM EASINGS ========== */

/* Define custom cubic-bezier easings for more natural animations */
:root {
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
    --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Apply custom easings to animation classes */
.ease-expo {
    animation-timing-function: var(--ease-out-expo);
}

.ease-circ {
    animation-timing-function: var(--ease-out-circ);
}

.ease-back {
    animation-timing-function: var(--ease-out-back);
}

.ease-elastic {
    animation-timing-function: var(--ease-elastic);
}

/* ========== MATRIX DATA RAIN ========== */

/* Matrix-style data rain */
@keyframes dataRain {
    0% {
        transform: translateY(-100vh);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

.data-rain {
    position: absolute;
    top: 0;
    color: var(--color-teal);
    font-family: var(--font-code);
    font-size: 0.8rem;
    animation: dataRain 3s linear infinite;
    opacity: 0.6;
}

.data-rain:nth-child(1) { left: 10%; animation-delay: 0s; }
.data-rain:nth-child(2) { left: 20%; animation-delay: 0.5s; }
.data-rain:nth-child(3) { left: 30%; animation-delay: 1s; }
.data-rain:nth-child(4) { left: 40%; animation-delay: 1.5s; }
.data-rain:nth-child(5) { left: 50%; animation-delay: 2s; }
.data-rain:nth-child(6) { left: 60%; animation-delay: 2.5s; }
.data-rain:nth-child(7) { left: 70%; animation-delay: 3s; }
.data-rain:nth-child(8) { left: 80%; animation-delay: 3.5s; }
.data-rain:nth-child(9) { left: 90%; animation-delay: 4s; }

/* ========== RESPONSIVE ANIMATION ADJUSTMENTS ========== */

@media (max-width: 991px) {
    /* Reduce animation complexity on smaller screens */
    .aura-logo-animate {
        animation-duration: 1.5s;
    }
    
    .aura-progress-animate {
        animation-duration: 2s;
    }
    
    .floating-particle {
        animation-duration: 6s;
    }
    
    .data-rain {
        animation-duration: 2s;
    }
}

@media (max-width: 767px) {
    /* Further simplify animations on mobile */
    .energy-pulse,
    .text-glow {
        animation: none;
    }
    
    .floating-particle {
        display: none;
    }
    
    .data-rain {
        display: none;
    }
}

/* ========== REDUCED MOTION SUPPORT ========== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .status-pulse,
    .status-critical,
    .status-breathing,
    .scanning-horizontal::after,
    .scanning-vertical::after,
    .shimmer-effect::after,
    .floating-particle,
    .data-rain,
    .energy-pulse,
    .text-glow,
    .pulse-effect {
        animation: none !important;
    }
}

/* ========== PERFORMANCE OPTIMIZATIONS ========== */

/* Use will-change for elements that will be animated */
.aura-logo-animate,
.aura-interface-animate,
.aura-card-animate,
.hover-lift,
.hover-glow,
.scroll-animate,
.floating-particle {
    will-change: transform, opacity;
}

/* Remove will-change after animation completes */
.animation-complete {
    will-change: auto;
}

/* Hardware acceleration for smooth animations */
.gpu-accelerate {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* ========== ANIMATION UTILITIES ========== */

/* Pause all animations */
.animations-paused * {
    animation-play-state: paused !important;
}

/* Reset animation state */
.animation-reset {
    animation: none !important;
}

/* Infinite loop toggle */
.loop-infinite {
    animation-iteration-count: infinite !important;
}

.loop-once {
    animation-iteration-count: 1 !important;
}

/* ========== ACCESSIBILITY IMPROVEMENTS ========== */

/* Focus indicators with animations */
.focus-animate:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-teal);
    animation: buttonGlow 0.3s ease-out;
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
    .shimmer-effect::after,
    .scanning-horizontal::after,
    .scanning-vertical::after {
        opacity: 1;
    }
}