/* ===============================================
   CARROT IN A BOX - Animation Styles
   Retro Game Animations and Transitions
   =============================================== */

/* Box Opening Animation */
@keyframes box-open {
    0% {
        transform: rotateX(0deg);
    }
    50% {
        transform: rotateX(-45deg);
    }
    100% {
        transform: rotateX(-90deg);
    }
}

@keyframes box-close {
    0% {
        transform: rotateX(-90deg);
    }
    50% {
        transform: rotateX(-45deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}

.box-lid.opening {
    animation: box-open 0.8s ease-in-out forwards;
}

.box-lid.closing {
    animation: box-close 0.6s ease-in-out forwards;
}

/* Carrot Reveal Animation */
@keyframes carrot-reveal {
    0% {
        transform: translateY(20px) scale(0);
        opacity: 0;
    }
    50% {
        transform: translateY(-10px) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes carrot-hide {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateY(10px) scale(0.8);
        opacity: 0.5;
    }
    100% {
        transform: translateY(20px) scale(0);
        opacity: 0;
    }
}

.carrot.revealing {
    animation: carrot-reveal 0.6s ease-out forwards;
}

.carrot.hiding {
    animation: carrot-hide 0.4s ease-in forwards;
}

/* Box Swap Animation */
@keyframes swap-left-to-right {
    0% {
        transform: translateX(0) translateY(0) scale(1);
    }
    25% {
        transform: translateX(-50px) translateY(-30px) scale(0.9);
    }
    50% {
        transform: translateX(200px) translateY(-50px) scale(0.8);
    }
    75% {
        transform: translateX(400px) translateY(-30px) scale(0.9);
    }
    100% {
        transform: translateX(450px) translateY(0) scale(1);
    }
}

@keyframes swap-right-to-left {
    0% {
        transform: translateX(0) translateY(0) scale(1);
    }
    25% {
        transform: translateX(50px) translateY(-30px) scale(0.9);
    }
    50% {
        transform: translateX(-200px) translateY(-50px) scale(0.8);
    }
    75% {
        transform: translateX(-400px) translateY(-30px) scale(0.9);
    }
    100% {
        transform: translateX(-450px) translateY(0) scale(1);
    }
}

.box-container.swapping-right {
    animation: swap-left-to-right 1.5s ease-in-out forwards;
}

.box-container.swapping-left {
    animation: swap-right-to-left 1.5s ease-in-out forwards;
}

/* Button Pulse Animation */
@keyframes button-pulse {
    0% {
        transform: scale(1);
        box-shadow:
            inset -3px -3px 0 rgba(0, 0, 0, 0.3),
            inset 3px 3px 0 rgba(255, 255, 255, 0.1),
            3px 3px 0 rgba(0, 0, 0, 0.5);
    }
    50% {
        transform: scale(1.05);
        box-shadow:
            inset -3px -3px 0 rgba(0, 0, 0, 0.3),
            inset 3px 3px 0 rgba(255, 255, 255, 0.1),
            3px 3px 0 rgba(0, 0, 0, 0.5),
            0 0 20px rgba(255, 107, 53, 0.5);
    }
    100% {
        transform: scale(1);
        box-shadow:
            inset -3px -3px 0 rgba(0, 0, 0, 0.3),
            inset 3px 3px 0 rgba(255, 255, 255, 0.1),
            3px 3px 0 rgba(0, 0, 0, 0.5);
    }
}

.retro-btn.pulse {
    animation: button-pulse 1s ease-in-out infinite;
}

/* Peek Button Special Animation */
@keyframes peek-ready {
    0%, 100% {
        background: var(--pixel-warning);
        transform: translateY(0);
    }
    50% {
        background: var(--pixel-accent);
        transform: translateY(-2px);
    }
}

.peek-btn.ready {
    animation: peek-ready 1.5s ease-in-out infinite;
}

/* Winner Celebration Animation */
@keyframes winner-celebration {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.1) rotate(5deg);
    }
    50% {
        transform: scale(1.2) rotate(-5deg);
    }
    75% {
        transform: scale(1.1) rotate(5deg);
    }
}

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

.winner-avatar {
    animation: winner-celebration 1s ease-in-out;
}

.winner-carrot {
    animation: winner-celebration 1.5s ease-in-out infinite;
}

/* Status Text Animations */
@keyframes text-flash {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}

.flashing {
    animation: text-flash 1s ease-in-out infinite;
}

/* Timer Warning Animation */
@keyframes timer-warning {
    0%, 100% {
        color: var(--pixel-warning);
        transform: scale(1);
    }
    50% {
        color: var(--pixel-danger);
        transform: scale(1.1);
    }
}

.timer-display.warning {
    animation: timer-warning 0.5s ease-in-out infinite;
}

/* Modal Slide In Animation */
@keyframes modal-slide-in {
    0% {
        transform: translateY(-100vh) scale(0.5);
        opacity: 0;
    }
    50% {
        transform: translateY(0) scale(1.1);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes modal-bg-fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.modal.showing {
    animation: modal-bg-fade 0.3s ease-out forwards;
}

.modal.showing .modal-content {
    animation: modal-slide-in 0.5s ease-out forwards;
}

/* Box Shake Animation (for emphasis) */
@keyframes box-shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

.box.shaking {
    animation: box-shake 0.5s ease-in-out;
}

/* Player Turn Indicator */
@keyframes turn-indicator {
    0% {
        border-color: var(--pixel-border);
        box-shadow: 0 0 0 rgba(255, 107, 53, 0);
    }
    50% {
        border-color: var(--pixel-accent);
        box-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
    }
    100% {
        border-color: var(--pixel-border);
        box-shadow: 0 0 0 rgba(255, 107, 53, 0);
    }
}

.player-section.active-turn {
    animation: turn-indicator 2s ease-in-out infinite;
}

/* Coin Flip Animation (for random selection) */
@keyframes coin-flip {
    0% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(900deg);
    }
    100% {
        transform: rotateY(1800deg);
    }
}


/* Loading Dots Animation */
@keyframes loading-dots {
    0%, 20% {
        content: '.';
    }
    40% {
        content: '..';
    }
    60%, 100% {
        content: '...';
    }
}

.loading::after {
    content: '.';
    animation: loading-dots 1.5s infinite;
}

/* Box Hover Effect */
@keyframes box-hover-glow {
    0% {
        box-shadow:
            inset -4px -4px 0 rgba(0, 0, 0, 0.4),
            inset 4px 4px 0 rgba(255, 255, 255, 0.1),
            4px 4px 0 rgba(0, 0, 0, 0.6);
    }
    100% {
        box-shadow:
            inset -4px -4px 0 rgba(0, 0, 0, 0.4),
            inset 4px 4px 0 rgba(255, 255, 255, 0.1),
            4px 4px 0 rgba(0, 0, 0, 0.6),
            0 0 15px rgba(255, 140, 66, 0.4);
    }
}

.box:hover {
    animation: box-hover-glow 0.3s ease-out forwards;
}

/* Decision Buttons Appear Animation */
@keyframes button-appear {
    0% {
        transform: scale(0) rotate(180deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.1) rotate(90deg);
        opacity: 0.8;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.decision-buttons.appearing button {
    animation: button-appear 0.5s ease-out backwards;
}

.decision-buttons.appearing button:nth-child(2) {
    animation-delay: 0.1s;
}

/* Pixel Rain Effect (for special occasions) */
@keyframes pixel-rain {
    0% {
        transform: translateY(-100vh);
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

.pixel-rain {
    position: fixed;
    width: 8px;
    height: 8px;
    background: var(--pixel-accent);
    animation: pixel-rain 3s linear infinite;
}

/* Score Increment Animation */
@keyframes score-increment {
    0% {
        transform: scale(1);
        color: var(--pixel-warning);
    }
    50% {
        transform: scale(1.5);
        color: var(--pixel-success);
    }
    100% {
        transform: scale(1);
        color: var(--pixel-warning);
    }
}

.player-score.incrementing {
    animation: score-increment 0.5s ease-out;
}

/* Game Start Animation */
@keyframes game-start {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.game-container.starting {
    animation: game-start 0.8s ease-out;
}

/* Transition Classes */
.fade-in {
    animation: fadeIn 0.3s ease-out;
}

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

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

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