/* ====================================
   BitForge - Animations
   ==================================== */

/* Bit Dance Animations */
@keyframes bit-rise {
    0% {
        transform: translateY(0) scale(1);
    }

    30% {
        transform: translateY(-12px) scale(1.2);
    }

    50% {
        box-shadow: 0 0 20px var(--accent-success);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes bit-fall {
    0% {
        transform: translateY(0) scale(1);
    }

    30% {
        transform: translateY(8px) scale(0.9);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes bit-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

@keyframes bit-wave {
    0% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-6px);
    }

    50% {
        transform: translateY(0);
    }

    75% {
        transform: translateY(3px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes sparkle {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 1;
    }

    50% {
        transform: scale(1) rotate(180deg);
        opacity: 0.8;
    }

    100% {
        transform: scale(0) rotate(360deg);
        opacity: 0;
    }
}

@keyframes glow-pulse {

    0%,
    100% {
        box-shadow: 0 0 10px var(--accent-primary);
    }

    50% {
        box-shadow: 0 0 25px var(--accent-primary), 0 0 40px var(--accent-glow);
    }
}

/* Animation Classes */
.bit-rise {
    animation: bit-rise 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.bit-fall {
    animation: bit-fall 0.3s ease-out;
}

.bit-pulse {
    animation: bit-pulse 2s infinite;
}

.bit-wave {
    animation: bit-wave 0.5s ease-in-out;
}

.glow-pulse {
    animation: glow-pulse 2s infinite;
}

/* Staggered Animations */
.stagger-1 {
    animation-delay: 0.05s;
}

.stagger-2 {
    animation-delay: 0.1s;
}

.stagger-3 {
    animation-delay: 0.15s;
}

.stagger-4 {
    animation-delay: 0.2s;
}

.stagger-5 {
    animation-delay: 0.25s;
}

.stagger-6 {
    animation-delay: 0.3s;
}

.stagger-7 {
    animation-delay: 0.35s;
}

.stagger-8 {
    animation-delay: 0.4s;
}

/* Operation Animations */
@keyframes op-highlight {
    0% {
        background: var(--bg-tertiary);
    }

    50% {
        background: var(--accent-primary);
        color: white;
    }

    100% {
        background: var(--bg-tertiary);
    }
}

@keyframes op-result-appear {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.op-animate {
    animation: op-highlight 0.25s ease-out;
    transform: scale(1.15);
    background: var(--accent-primary) !important;
    color: white !important;
    box-shadow: 0 0 15px var(--accent-glow);
}

.op-result-animate {
    animation: op-result-appear 0.3s ease-out;
}

/* Note Animations (Binary Music) */
@keyframes note-play {
    0% {
        transform: scale(1);
        background: var(--bg-tertiary);
    }

    50% {
        transform: scale(1.1);
        background: var(--accent-primary);
        box-shadow: 0 0 20px var(--accent-glow);
    }

    100% {
        transform: scale(1);
        background: var(--bg-tertiary);
    }
}

.note-playing {
    animation: note-play 0.2s ease-out;
}

/* Comparison Diff Animation */
@keyframes diff-flash {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.diff-flash {
    animation: diff-flash 1s infinite;
}

/* Loading Animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

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

/* Fade Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

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

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

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

/* Scale Animations */
@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes scaleOut {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(0.9);
        opacity: 0;
    }
}

.scale-in {
    animation: scaleIn 0.2s ease-out;
}

.scale-out {
    animation: scaleOut 0.2s ease-in;
}

/* Bounce */
@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

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

/* Shake */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

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

/* Copy Success Animation */
@keyframes copy-success {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
        color: var(--accent-success);
    }

    100% {
        transform: scale(1);
    }
}

.copy-success {
    animation: copy-success 0.3s ease-out;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}