/* ========================================
   ADVANCED ANIMATIONS
   ======================================== */

/* Smooth Page Transitions */
@keyframes pageLoad {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Floating Animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Glow Effect */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 255, 136, 0.6);
    }
}

/* Pulse Animation */
@keyframes pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

/* Shimmer Effect */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* Slide In from Left */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide In from Right */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Zoom In */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Bounce Animation */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* Flip Animation */
@keyframes flip {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}

/* Rotation */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Fade In and Out */
@keyframes fadeInOut {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

/* Wave Animation */
@keyframes wave {
    0% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(14deg);
    }
    20% {
        transform: rotate(-8deg);
    }
    30% {
        transform: rotate(14deg);
    }
    40% {
        transform: rotate(-4deg);
    }
    50% {
        transform: rotate(10deg);
    }
    60% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* Blink Animation */
@keyframes blink {
    0%, 49%, 100% {
        opacity: 1;
    }
    50%, 99% {
        opacity: 0;
    }
}

/* Gradient Animation */
@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Swing Animation */
@keyframes swing {
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* Heartbeat Animation */
@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.3);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.3);
    }
    70% {
        transform: scale(1);
    }
}

/* Text Shimmer */
@keyframes textShimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* Typing Animation */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* Cursor Blink */
@keyframes cursorBlink {
    0%, 49% {
        border-right-color: rgba(0, 255, 136, 0.8);
    }
    50%, 100% {
        border-right-color: transparent;
    }
}

/* Rainbow Animation */
@keyframes rainbow {
    0% {
        background-position: 0% 82%;
    }
    50% {
        background-position: 100% 19%;
    }
    100% {
        background-position: 0% 82%;
    }
}

/* Expand Animation */
@keyframes expand {
    from {
        max-height: 0;
        opacity: 0;
    }
    to {
        max-height: 1000px;
        opacity: 1;
    }
}

/* Collapse Animation */
@keyframes collapse {
    from {
        max-height: 1000px;
        opacity: 1;
    }
    to {
        max-height: 0;
        opacity: 0;
    }
}

/* Pop Animation */
@keyframes pop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Attention Seeker */
@keyframes attentionSeeker {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(5px);
    }
    75% {
        transform: translateX(-5px);
    }
}

/* Neon Glow */
@keyframes neonGlow {
    0%, 100% {
        text-shadow: 0 0 10px rgba(0, 255, 136, 0.5), 0 0 20px rgba(0, 255, 136, 0.3);
    }
    50% {
        text-shadow: 0 0 20px rgba(0, 255, 136, 0.8), 0 0 30px rgba(0, 255, 136, 0.6);
    }
}

/* Chrome Glow */
@keyframes chromeGlow {
    0%, 100% {
        box-shadow: 
            0 0 10px rgba(0, 255, 136, 0.2),
            inset 0 0 10px rgba(0, 255, 136, 0.1);
    }
    50% {
        box-shadow: 
            0 0 20px rgba(0, 255, 136, 0.4),
            inset 0 0 20px rgba(0, 255, 136, 0.2);
    }
}

/* Signal Appearance Animation */
.signal-appear {
    animation: slideInLeft 0.5s ease-out;
}

/* Element Hover Float */
.hover-float:hover {
    animation: float 3s ease-in-out infinite;
}

/* Element Hover Glow */
.hover-glow:hover {
    animation: glow 2s ease-in-out infinite;
}

/* Loading Spinner */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0, 255, 136, 0.3);
    border-radius: 50%;
    border-top-color: #00ff88;
    animation: rotate 1s linear infinite;
}

/* Pulse Indicator */
.pulse-indicator {
    width: 12px;
    height: 12px;
    background: #00ff88;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

/* Animated Gradient Background */
.gradient-animated {
    background: linear-gradient(
        -45deg,
        #00ff88,
        #00d9ff,
        #ff006e,
        #ff9500,
        #00ff88
    );
    background-size: 400% 400%;
    animation: gradientFlow 15s ease infinite;
}

/* Neon Text Effect */
.neon-text {
    font-weight: 700;
    color: #00ff88;
    text-shadow: 
        0 0 10px rgba(0, 255, 136, 0.5),
        0 0 20px rgba(0, 255, 136, 0.3);
    animation: neonGlow 2s ease-in-out infinite;
}

/* Chart Bar Animation */
@keyframes chartBarGrow {
    from {
        height: 0;
        opacity: 0;
    }
    to {
        height: 100%;
        opacity: 1;
    }
}

.chart-bar {
    animation: chartBarGrow 0.8s ease-out forwards;
}

/* Responsive Animation Adjustments */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print Styles */
@media print {
    .animation-disabled {
        animation: none !important;
        transition: none !important;
    }
}
