/* ============================================
   ANIMATIONS.CSS
   NovaTrade Pro - Animation Keyframes
   ============================================ */

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

/* Page enter animation - slides up with fade */
@keyframes pgIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide up from bottom (for modals) */
@keyframes slideUpModal {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Slide in from right (for full pages) */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

/* Fade in with slide up (for trade panels) */
@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* General slide up animation */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ===== GLOW & PULSE EFFECTS ===== */

/* Glow line animation (card accent) */
@keyframes glowLine {
    0%,
    100% {
        opacity: 0.6;
        transform: scaleX(0.7);
    }
    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* Ripple effect for buttons */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 0.6;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}


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

/* Dot bounce for loading indicators */
@keyframes dotBounce {
    0%,
    80%,
    100% {
        transform: scale(0);
        opacity: 0.3;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Pulse animation */
@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Flash animation */
@keyframes flash {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}


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

/* Slide up utility class */
.slide-up {
    animation: slideUp 0.3s ease-out;
}

/* Pulse utility class */
.pulsing {
    animation: pulse 2s infinite;
}

/* Flash utility class */
.flashing {
    animation: flash 1s infinite;
}

/* Page enter utility */
.page-enter {
    animation: pgIn 0.25s ease-out;
}


/* ===== BACKGROUND ANIMATIONS ===== */

/* Subtle shimmer effect for cards */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.shimmer {
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.03) 25%, 
        rgba(255, 255, 255, 0.06) 50%, 
        rgba(255, 255, 255, 0.03) 75%, 
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 3s infinite;
}

/* Breathing glow for live indicators */
@keyframes breathe {
    0%,
    100% {
        box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.6);
    }
}

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

/* Live indicator dot pulse */
@keyframes liveDot {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}

.live-dot {
    animation: liveDot 1.5s ease-in-out infinite;
}


/* ===== COUNTDOWN / TIMER ANIMATIONS ===== */

/* Countdown timer urgency pulse */
@keyframes timerUrgency {
    0%,
    100% {
        color: var(--amber-l);
        text-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
    }
    50% {
        color: var(--red-l);
        text-shadow: 0 0 30px rgba(244, 63, 94, 0.6);
    }
}

.timer-urgent {
    animation: timerUrgency 1s ease-in-out infinite;
}


/* ===== PRICE CHANGE ANIMATIONS ===== */

/* Price up flash */
@keyframes priceUp {
    0% {
        color: var(--green-l);
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        color: var(--t1);
        transform: scale(1);
    }
}

/* Price down flash */
@keyframes priceDown {
    0% {
        color: var(--red-l);
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
    }
    100% {
        color: var(--t1);
        transform: scale(1);
    }
}

.price-flash-up {
    animation: priceUp 0.6s ease-out;
}

.price-flash-down {
    animation: priceDown 0.6s ease-out;
}


/* ===== NOTIFICATION ANIMATIONS ===== */

/* Notification badge pop */
@keyframes badgePop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.3);
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}

.badge-pop {
    animation: badgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Notification slide in */
@keyframes notifSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.notif-slide-in {
    animation: notifSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ===== TOAST ANIMATIONS ===== */

/* Toast enter */
@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Toast exit */
@keyframes toastOut {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
}

.toast-show {
    animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast-hide {
    animation: toastOut 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}


/* ===== PROGRESS BAR ANIMATIONS ===== */

/* Progress fill animation */
@keyframes progressFill {
    from {
        width: 0%;
    }
    to {
        width: var(--progress, 100%);
    }
}

.progress-animate {
    animation: progressFill 0.6s ease-out forwards;
}


/* ===== CONFETTI / SUCCESS ANIMATIONS ===== */

/* Confetti explosion (simple version) */
@keyframes confettiFall {
    0% {
        transform: translateY(-20px) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(100px) rotate(360deg) scale(0);
        opacity: 0;
    }
}

.confetti {
    animation: confettiFall 1.5s ease-in forwards;
}


/* ===== SKELETON LOADING ===== */

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

.skeleton {
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.04) 25%, 
        rgba(255, 255, 255, 0.08) 50%, 
        rgba(255, 255, 255, 0.04) 75%
    );
    background-size: 200% 100%;
    animation: skeletonPulse 1.5s ease-in-out infinite;
    border-radius: 8px;
}


/* ===== SPINNER ===== */

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

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


/* ===== HOVER ANIMATIONS ===== */

/* Card hover lift */
@keyframes cardLift {
    from {
        transform: translateY(0);
        box-shadow: var(--sh-sm);
    }
    to {
        transform: translateY(-4px);
        box-shadow: var(--sh-md);
    }
}

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

/* Button hover pulse */
@keyframes btnPulse {
    0%,
    100% {
        box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
    }
    50% {
        box-shadow: 0 6px 30px rgba(99, 102, 241, 0.6);
    }
}

.btn-pulse:hover {
    animation: btnPulse 1.5s ease-in-out infinite;
}


/* ===== PARTICLE ANIMATIONS (for canvas) ===== */

@keyframes floatParticle {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0.1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        transform: translateY(-100px) translateX(20px);
        opacity: 0;
    }
}


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

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


/* ===== SCROLLBAR ANIMATION ===== */

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

::-webkit-scrollbar-thumb {
    animation: scrollbarAppear 0.3s ease-out;
}