/* ============================================
   MARKET TITAN - ANIMATIONS
   Sophisticated CSS animations for UI elements
   ============================================ */

/* ============================================
   PAGE TRANSITIONS
   ============================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

.fade-out {
    animation: fadeOut 0.5s ease-in-out;
}

.slide-up {
    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.slide-down {
    animation: slideDown 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   NEWS TICKER SCROLLING
   ============================================ */

@keyframes tickerScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes tickerScrollReverse {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

.ticker-scroll {
    animation: tickerScroll 30s linear infinite;
}

.ticker-scroll:hover {
    animation-play-state: paused;
}

.ticker-scroll-fast {
    animation: tickerScroll 20s linear infinite;
}

.ticker-scroll-slow {
    animation: tickerScroll 45s linear infinite;
}

/* ============================================
   PRICE CHANGE FLASH
   ============================================ */

@keyframes priceFlashGreen {
    0% {
        background-color: transparent;
        color: inherit;
    }
    50% {
        background-color: rgba(34, 197, 94, 0.3);
        color: #22c55e;
        box-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
    }
    100% {
        background-color: transparent;
        color: #22c55e;
    }
}

@keyframes priceFlashRed {
    0% {
        background-color: transparent;
        color: inherit;
    }
    50% {
        background-color: rgba(239, 68, 68, 0.3);
        color: #ef4444;
        box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
    }
    100% {
        background-color: transparent;
        color: #ef4444;
    }
}

.price-flash-up {
    animation: priceFlashGreen 0.8s ease-in-out;
}

.price-flash-down {
    animation: priceFlashRed 0.8s ease-in-out;
}

/* ============================================
   CHART LINE DRAWING ANIMATION
   ============================================ */

@keyframes drawLine {
    from {
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes chartFadeIn {
    from {
        opacity: 0;
        transform: scaleY(0);
        transform-origin: bottom;
    }
    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

.chart-line-draw {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawLine 2s ease-in-out forwards;
}

.chart-fade-in {
    animation: chartFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   PULSE EFFECTS
   ============================================ */

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes pulseScale {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

@keyframes pulseRing {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

@keyframes livePulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    50% {
        opacity: 0.7;
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
}

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

.pulse-scale {
    animation: pulseScale 2s ease-in-out infinite;
}

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

.live-pulse {
    animation: livePulse 2s ease-in-out infinite;
}

/* ============================================
   GLOW PULSING ON BUTTONS/CTAs
   ============================================ */

@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 5px rgba(59, 130, 246, 0.5),
                    0 0 10px rgba(59, 130, 246, 0.3),
                    0 0 15px rgba(59, 130, 246, 0.1);
    }
    50% {
        box-shadow: 0 0 10px rgba(59, 130, 246, 0.8),
                    0 0 20px rgba(59, 130, 246, 0.5),
                    0 0 30px rgba(59, 130, 246, 0.3);
    }
}

@keyframes glowPulseGreen {
    0%, 100% {
        box-shadow: 0 0 5px rgba(34, 197, 94, 0.5),
                    0 0 10px rgba(34, 197, 94, 0.3),
                    0 0 15px rgba(34, 197, 94, 0.1);
    }
    50% {
        box-shadow: 0 0 10px rgba(34, 197, 94, 0.8),
                    0 0 20px rgba(34, 197, 94, 0.5),
                    0 0 30px rgba(34, 197, 94, 0.3);
    }
}

@keyframes glowPulseGold {
    0%, 100% {
        box-shadow: 0 0 5px rgba(251, 191, 36, 0.5),
                    0 0 10px rgba(251, 191, 36, 0.3),
                    0 0 15px rgba(251, 191, 36, 0.1);
    }
    50% {
        box-shadow: 0 0 10px rgba(251, 191, 36, 0.8),
                    0 0 20px rgba(251, 191, 36, 0.5),
                    0 0 30px rgba(251, 191, 36, 0.3);
    }
}

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

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

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

/* ============================================
   ACHIEVEMENT UNLOCK CELEBRATION
   ============================================ */

@keyframes achievementSlideIn {
    0% {
        transform: translateY(-100%) scale(0.8);
        opacity: 0;
    }
    50% {
        transform: translateY(10px) scale(1.05);
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes achievementShake {
    0%, 100% {
        transform: rotate(0deg);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: rotate(-5deg);
    }
    20%, 40%, 60%, 80% {
        transform: rotate(5deg);
    }
}

@keyframes confetti {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

@keyframes starBurst {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.5) rotate(180deg);
        opacity: 0.8;
    }
    100% {
        transform: scale(2) rotate(360deg);
        opacity: 0;
    }
}

@keyframes badgeBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

.achievement-unlock {
    animation: achievementSlideIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.achievement-shake {
    animation: achievementShake 0.8s ease-in-out;
}

.confetti {
    animation: confetti 3s ease-out forwards;
}

.star-burst {
    animation: starBurst 1s ease-out forwards;
}

.badge-bounce {
    animation: badgeBounce 1s ease-in-out;
}

/* ============================================
   LEADERBOARD RANK CHANGE
   ============================================ */

@keyframes rankSlideUp {
    0% {
        transform: translateY(0);
        background-color: transparent;
    }
    50% {
        background-color: rgba(34, 197, 94, 0.2);
    }
    100% {
        transform: translateY(-100%);
        background-color: transparent;
    }
}

@keyframes rankSlideDown {
    0% {
        transform: translateY(0);
        background-color: transparent;
    }
    50% {
        background-color: rgba(239, 68, 68, 0.2);
    }
    100% {
        transform: translateY(100%);
        background-color: transparent;
    }
}

@keyframes rankHighlight {
    0%, 100% {
        background-color: transparent;
    }
    50% {
        background-color: rgba(59, 130, 246, 0.2);
    }
}

@keyframes crownBounce {
    0%, 100% {
        transform: translateY(0) rotate(-10deg);
    }
    50% {
        transform: translateY(-5px) rotate(10deg);
    }
}

.rank-up {
    animation: rankSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.rank-down {
    animation: rankSlideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.rank-highlight {
    animation: rankHighlight 1.5s ease-in-out;
}

.crown-bounce {
    animation: crownBounce 2s ease-in-out infinite;
}

/* ============================================
   CARD HOVER LIFT EFFECT
   ============================================ */

.card-hover {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-hover:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2),
                0 0 20px rgba(59, 130, 246, 0.1);
}

.card-hover:active {
    transform: translateY(-4px) scale(1.01);
}

@keyframes cardFlip {
    0% {
        transform: rotateY(0);
    }
    100% {
        transform: rotateY(180deg);
    }
}

.card-flip {
    animation: cardFlip 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   LOADING SKELETONS
   ============================================ */

@keyframes skeleton {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes skeletonPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

.skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.05) 100%
    );
    background-size: 200% 100%;
    animation: skeleton 1.5s ease-in-out infinite;
}

.skeleton-pulse {
    animation: skeletonPulse 1.5s ease-in-out infinite;
}

/* ============================================
   TYPING INDICATOR FOR CHAT
   ============================================ */

@keyframes typingDot {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.7;
    }
    30% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

.typing-dot {
    animation: typingDot 1.4s ease-in-out infinite;
}

.typing-dot:nth-child(1) {
    animation-delay: 0s;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

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

.typing-cursor {
    animation: typingBlink 1s step-end infinite;
}

/* ============================================
   COUNTER NUMBER ANIMATIONS
   ============================================ */

@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes numberFlip {
    0% {
        transform: rotateX(0deg);
    }
    50% {
        transform: rotateX(90deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}

@keyframes digitRoll {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}

.count-up {
    animation: countUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.number-flip {
    animation: numberFlip 0.4s ease-in-out;
}

.digit-roll {
    animation: digitRoll 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   SPARKLINE CHART ANIMATION
   ============================================ */

@keyframes sparklineDraw {
    from {
        stroke-dashoffset: 500;
        opacity: 0;
    }
    to {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

@keyframes sparklineDot {
    0%, 100% {
        r: 2;
        opacity: 0.8;
    }
    50% {
        r: 4;
        opacity: 1;
    }
}

@keyframes sparklineGlow {
    0%, 100% {
        filter: drop-shadow(0 0 2px rgba(59, 130, 246, 0.5));
    }
    50% {
        filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.8));
    }
}

.sparkline-draw {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: sparklineDraw 1.5s ease-out forwards;
}

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

/* ============================================
   MODAL OPEN/CLOSE
   ============================================ */

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes modalSlideOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
}

@keyframes modalZoomIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-backdrop-enter {
    animation: modalFadeIn 0.3s ease-out;
}

.modal-backdrop-exit {
    animation: fadeOut 0.3s ease-out;
}

.modal-enter {
    animation: modalSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-exit {
    animation: modalSlideOut 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-zoom-enter {
    animation: modalZoomIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */

@keyframes toastSlideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toastSlideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

@keyframes toastSlideInTop {
    from {
        transform: translateY(-100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes toastBounceIn {
    0% {
        transform: scale(0.8) translateX(400px);
        opacity: 0;
    }
    50% {
        transform: scale(1.05) translateX(-10px);
    }
    100% {
        transform: scale(1) translateX(0);
        opacity: 1;
    }
}

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

.toast-enter {
    animation: toastSlideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast-exit {
    animation: toastSlideOutRight 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast-bounce-enter {
    animation: toastBounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.toast-top-enter {
    animation: toastSlideInTop 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast-progress {
    animation: toastProgress 3s linear forwards;
}

/* ============================================
   FEAR/GREED METER ANIMATION
   ============================================ */

@keyframes meterNeedle {
    from {
        transform: rotate(-90deg);
    }
    to {
        transform: rotate(var(--needle-rotation, 0deg));
    }
}

@keyframes meterGlow {
    0%, 100% {
        filter: drop-shadow(0 0 5px currentColor);
    }
    50% {
        filter: drop-shadow(0 0 15px currentColor);
    }
}

@keyframes meterPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

.meter-needle {
    animation: meterNeedle 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

.meter-pulse {
    animation: meterPulse 2s ease-in-out infinite;
}

/* ============================================
   PROGRESS BAR FILL ANIMATION
   ============================================ */

@keyframes progressFill {
    from {
        width: 0%;
    }
    to {
        width: var(--progress-width, 100%);
    }
}

@keyframes progressStripe {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 40px 0;
    }
}

@keyframes progressGlow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
    }
    50% {
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.8);
    }
}

@keyframes progressShimmer {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.progress-fill {
    animation: progressFill 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.progress-striped {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 40px 40px;
    animation: progressStripe 1s linear infinite;
}

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

.progress-shimmer {
    background-image: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    background-size: 200% 100%;
    animation: progressShimmer 2s ease-in-out infinite;
}

/* ============================================
   ADDITIONAL UTILITY ANIMATIONS
   ============================================ */

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}

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

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

@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
    }
    10%, 30% {
        transform: scale(1.1);
    }
    20%, 40% {
        transform: scale(0.9);
    }
}

@keyframes wiggle {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-10deg);
    }
    75% {
        transform: rotate(10deg);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

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

.bounce {
    animation: bounce 1s ease-in-out infinite;
}

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

.heartbeat {
    animation: heartbeat 1.5s ease-in-out infinite;
}

.wiggle {
    animation: wiggle 0.8s ease-in-out;
}

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

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

/* Use will-change for frequently animated elements */
.will-animate {
    will-change: transform, opacity;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

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

/* ============================================
   ANIMATION DELAYS (for staggered effects)
   ============================================ */

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-700 { animation-delay: 0.7s; }
.delay-1000 { animation-delay: 1s; }

/* ============================================
   ANIMATION DURATIONS
   ============================================ */

.duration-fast { animation-duration: 0.2s; }
.duration-normal { animation-duration: 0.5s; }
.duration-slow { animation-duration: 1s; }
.duration-slower { animation-duration: 2s; }

/* Transition utilities */
.transition-all { transition: all 0.3s ease-in-out; }
.transition-transform { transition: transform 0.3s ease-in-out; }
.transition-opacity { transition: opacity 0.3s ease-in-out; }
.transition-colors { transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; }