/* css/animations.css - Special Effects, Particle Bursts, and Animations */

/* Golden Match Burst Overlay (Matching Reference Image) */
.golden-burst-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.golden-burst-overlay.active {
    display: flex;
}

.golden-burst-content {
    position: relative;
    width: 320px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Glowing golden outer ring */
.burst-halo-ring {
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 235, 120, 0.95) 0%, rgba(255, 200, 50, 0.7) 45%, rgba(255, 170, 0, 0) 75%);
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.9), 0 0 100px rgba(255, 180, 0, 0.6);
    animation: burstHaloExpand 0.85s cubic-bezier(0.15, 0.85, 0.35, 1.2) forwards;
}

/* Sunbeam spokes rotating */
.burst-sunbeam-spokes {
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: conic-gradient(
        transparent 0deg,
        rgba(255, 255, 255, 0.6) 20deg,
        transparent 40deg,
        rgba(255, 220, 80, 0.6) 60deg,
        transparent 80deg,
        rgba(255, 255, 255, 0.6) 100deg,
        transparent 120deg,
        rgba(255, 220, 80, 0.6) 140deg,
        transparent 160deg,
        rgba(255, 255, 255, 0.6) 180deg,
        transparent 200deg,
        rgba(255, 220, 80, 0.6) 220deg,
        transparent 240deg,
        rgba(255, 255, 255, 0.6) 260deg,
        transparent 280deg,
        rgba(255, 220, 80, 0.6) 300deg,
        transparent 320deg,
        rgba(255, 255, 255, 0.6) 340deg,
        transparent 360deg
    );
    animation: burstRotate 1.2s linear forwards;
}

/* The 3 animal tiles featured in the burst center */
.burst-triplet-showcase {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
    animation: burstTilesPop 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.burst-tile {
    width: 72px;
    height: 84px;
    background: linear-gradient(145deg, #ffffff, #f4ecd8);
    border-radius: 12px;
    border: 3px solid #ffd700;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), 0 0 25px rgba(255, 230, 100, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    transform: scale(0.9);
}

.burst-tile.main {
    transform: scale(1.15);
    border-color: #fff275;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45), 0 0 40px rgba(255, 235, 120, 1);
    z-index: 2;
}

.burst-tile img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
}

/* Sparkle particles orbiting */
.burst-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.star-particle {
    position: absolute;
    font-size: 24px;
    opacity: 0;
}

.star-particle.p1 { top: 10%; left: 15%; animation: starFloat 0.75s ease-out 0.1s forwards; }
.star-particle.p2 { top: 5%; right: 20%; animation: starFloat 0.75s ease-out 0.15s forwards; }
.star-particle.p3 { bottom: 15%; left: 10%; animation: starFloat 0.75s ease-out 0.2s forwards; }
.star-particle.p4 { bottom: 10%; right: 15%; animation: starFloat 0.75s ease-out 0.05s forwards; }
.star-particle.p5 { top: 40%; left: 0%; animation: starFloat 0.75s ease-out 0.25s forwards; }
.star-particle.p6 { top: 35%; right: 0%; animation: starFloat 0.75s ease-out 0.18s forwards; }

@keyframes burstHaloExpand {
    0% {
        transform: scale(0.2);
        opacity: 0;
    }
    40% {
        transform: scale(1.15);
        opacity: 1;
    }
    75% {
        transform: scale(1.0);
        opacity: 0.9;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

@keyframes burstRotate {
    0% {
        transform: rotate(0deg) scale(0.3);
        opacity: 0;
    }
    30% {
        opacity: 0.8;
    }
    100% {
        transform: rotate(180deg) scale(1.2);
        opacity: 0;
    }
}

@keyframes burstTilesPop {
    0% {
        transform: scale(0.3) translateY(40px);
        opacity: 0;
    }
    35% {
        transform: scale(1.1) translateY(-10px);
        opacity: 1;
    }
    70% {
        transform: scale(1.0) translateY(0);
        opacity: 1;
    }
    100% {
        transform: scale(0.85) translateY(-30px);
        opacity: 0;
    }
}

@keyframes starFloat {
    0% {
        transform: translate(0, 0) scale(0.4);
        opacity: 0;
    }
    50% {
        opacity: 1;
        transform: translate(calc(var(--tx, 15px)), calc(var(--ty, -25px))) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--tx, 30px)), calc(var(--ty, -50px))) scale(0.6);
    }
}

/* Blocked tile shake when clicked */
@keyframes tileShake {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-4px, 0); }
    40% { transform: translate(4px, 0); }
    60% { transform: translate(-3px, 0); }
    80% { transform: translate(3px, 0); }
}

.tile-shake {
    animation: tileShake 0.35s ease-in-out !important;
}

/* Unlocked tile shine */
@keyframes tileUnlockedShine {
    0% { filter: brightness(1.6) drop-shadow(0 0 10px #79f279); transform: scale(1.08); }
    100% { filter: brightness(1) drop-shadow(0 4px 6px rgba(0,0,0,0.25)); transform: scale(1); }
}

.tile-unlocked {
    animation: tileUnlockedShine 0.4s ease-out;
}

/* Shuffle spin */
@keyframes tileShuffleSpin {
    0% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(0.8) rotate(180deg); }
    100% { transform: scale(1) rotate(360deg); }
}

.tile-shuffle-spin {
    animation: tileShuffleSpin 0.45s ease-in-out;
}

/* Dock Tile Enter */
@keyframes dockEnter {
    0% {
        transform: translateY(-25px) scale(1.15);
        opacity: 0.5;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.dock-tile-enter {
    animation: dockEnter 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Matched tiles vanishing */
@keyframes dockMatchedPop {
    0% {
        transform: scale(1);
        box-shadow: 0 0 10px #ffd700;
    }
    50% {
        transform: scale(1.2);
        box-shadow: 0 0 25px #ffd700, 0 0 40px #ffea00;
        filter: brightness(1.4);
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

.dock-tile-matched {
    animation: dockMatchedPop 0.45s forwards !important;
}

/* Floating score popup */
.floating-score {
    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffd700;
    font-weight: 900;
    font-size: 26px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(255, 215, 0, 0.6);
    animation: floatScoreUp 1.2s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}

.floating-score small {
    font-size: 16px;
    color: #ff9d00;
    letter-spacing: 1px;
}

@keyframes floatScoreUp {
    0% {
        transform: translate(-50%, 0) scale(0.6);
        opacity: 0;
    }
    20% {
        transform: translate(-50%, -15px) scale(1.15);
        opacity: 1;
    }
    70% {
        transform: translate(-50%, -35px) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -55px) scale(0.9);
        opacity: 0;
    }
}

/* Danger pulse when dock is full */
@keyframes dockDangerPulse {
    0%, 100% { border-color: #5a3c1e; }
    50% { border-color: #ff3b30; box-shadow: 0 0 25px rgba(255, 59, 48, 0.8); }
}

.dock-danger {
    animation: dockDangerPulse 0.4s ease 2;
}

/* ==================== FLOATING COMBO BURST ANIMATIONS ==================== */
@keyframes comboFloatingBurst {
    0% {
        transform: translate(-50%, -40%) scale(0.25) rotate(-10deg);
        opacity: 0;
        filter: brightness(2.2);
    }
    18% {
        transform: translate(-50%, -50%) scale(1.28) rotate(3deg);
        opacity: 1;
        filter: brightness(1.3);
    }
    32% {
        transform: translate(-50%, -50%) scale(1.02) rotate(-1deg);
        opacity: 1;
        filter: brightness(1.1);
    }
    70% {
        transform: translate(-50%, -75px) scale(1.05) rotate(1deg);
        opacity: 1;
        filter: brightness(1);
    }
    100% {
        transform: translate(-50%, -115px) scale(0.85) rotate(-2deg);
        opacity: 0;
        filter: blur(5px);
    }
}

@keyframes comboAuraPulse {
    0% {
        transform: scale(0.7);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.35);
        opacity: 0.4;
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

@keyframes comboFloatLevitate {
    0% {
        transform: translateX(-50%) translateY(0) scale(1);
        box-shadow: 0 8px 20px rgba(247, 127, 0, 0.6);
    }
    50% {
        transform: translateX(-50%) translateY(-5px) scale(1.04);
        box-shadow: 0 14px 28px rgba(255, 183, 3, 0.8);
    }
    100% {
        transform: translateX(-50%) translateY(0) scale(1);
        box-shadow: 0 8px 20px rgba(247, 127, 0, 0.6);
    }
}

@keyframes sparkleDrift1 {
    0% { transform: translate(0, 0) scale(0.4) rotate(0deg); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translate(-45px, -40px) scale(1.2) rotate(180deg); opacity: 0; }
}

@keyframes sparkleDrift2 {
    0% { transform: translate(0, 0) scale(0.4) rotate(0deg); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translate(45px, -45px) scale(1.2) rotate(-180deg); opacity: 0; }
}

@keyframes sparkleDrift3 {
    0% { transform: translate(0, 0) scale(0.4) rotate(0deg); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translate(-35px, 25px) scale(1.1) rotate(120deg); opacity: 0; }
}

@keyframes sparkleDrift4 {
    0% { transform: translate(0, 0) scale(0.4) rotate(0deg); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translate(40px, 30px) scale(1.1) rotate(-120deg); opacity: 0; }
}

/* ==================== JUNGLE MODAL ANIMATIONS ==================== */
@keyframes jungleModalPop {
    0% {
        transform: scale(0.72) translateY(35px);
        opacity: 0;
    }
    65% {
        transform: scale(1.03) translateY(-4px);
        opacity: 1;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes modalBadgeFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-4px) rotate(2deg);
    }
}