/* ========================================
   Mosaic Arena — Animations
   ======================================== */

/* Puzzle Entry Animation */
@keyframes puzzleSlideIn {
    from {
        opacity: 0;
        transform: translate(var(--from-x, 0), var(--from-y, 0)) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

.puzzle-enter {
    opacity: 0;
    animation: puzzleSlideIn 1.2s var(--ease-smooth) forwards;
}

.puzzle-enter.delay-1 { animation-delay: 0.1s; --from-x: -100px; --from-y: -50px; }
.puzzle-enter.delay-2 { animation-delay: 0.2s; --from-x: 100px; --from-y: -50px; }
.puzzle-enter.delay-3 { animation-delay: 0.3s; --from-x: -100px; --from-y: 50px; }
.puzzle-enter.delay-4 { animation-delay: 0.4s; --from-x: 100px; --from-y: 50px; }
.puzzle-enter.delay-5 { animation-delay: 0.5s; --from-x: 0; --from-y: -100px; }
.puzzle-enter.delay-6 { animation-delay: 0.6s; --from-x: 0; --from-y: 100px; }

/* Wave Fade Out */
@keyframes waveFadeOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.8);
    }
}

/* Explode Fade In */
@keyframes explodeFadeIn {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    60% {
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.fade-out {
    animation: waveFadeOut 0.4s var(--ease-smooth) forwards;
}

.fade-in {
    animation: explodeFadeIn 0.6s var(--ease-elastic) forwards;
}

/* Card Tilt on Scroll */
.scroll-tilt-right {
    transform: rotateY(5deg);
    transition: transform 0.3s var(--ease-smooth);
}

.scroll-tilt-left {
    transform: rotateY(-5deg);
    transition: transform 0.3s var(--ease-smooth);
}

/* Block Hover Breathing */
.block:hover .article-item {
    transform: translateY(-4px);
}

.block:hover .masonry-card {
    transform: translateY(-4px);
}

/* Card Hover Lift */
.article-item,
.quick-card,
.masonry-card,
.mini-card {
    transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth), border-color 0.3s var(--ease-smooth);
}

/* Gold Pulse for Block Title */
@keyframes goldPulse {
    0%, 100% {
        box-shadow: 0 0 0 rgba(212,160,23,0);
    }
    50% {
        box-shadow: 0 0 20px rgba(212,160,23,0.4);
    }
}

.block-title.pulse {
    animation: goldPulse 0.8s var(--ease-smooth);
}

/* Stagger Entry for Cards */
@keyframes cardAppear {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-appear {
    opacity: 0;
    animation: cardAppear 0.5s var(--ease-smooth) forwards;
}

/* Modal Open/Close */
@keyframes modalOpen {
    from {
        transform: scale(0.8) rotate(5deg);
        opacity: 0;
    }
    to {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

@keyframes modalClose {
    from {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
    to {
        transform: scale(0.8) rotate(5deg);
        opacity: 0;
    }
}

.modal-overlay.active .modal-container {
    animation: modalOpen 0.4s var(--ease-elastic) forwards;
}

.modal-overlay.closing .modal-container {
    animation: modalClose 0.3s var(--ease-smooth) forwards;
}

/* Scroll Indicator Bounce */
@keyframes scrollBounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(8px); }
}

.scroll-hint {
    animation: scrollBounce 1.5s ease-in-out infinite;
}

/* Favicon Breathing */
@keyframes faviconBreathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}