/* ============================================================
   ANIMATIONS — 3D coins, trails, absorb effects, screen shake,
   stamp thud, dust, counter roll, rewardPop/Fade
   ============================================================ */

/* ===== 3D COIN ===== */
.coin {
    position: fixed;
    width: 36px;
    height: 36px;
    z-index: 10001;
    pointer-events: none;
    will-change: transform, opacity;
}

.coin-face {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    animation: spin3d 0.6s linear infinite;
    transform-style: preserve-3d;
}

.coin-front, .coin-back {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    font-family: 'Archivo Black', var(--font-display), sans-serif;
    font-size: 16px;
    color: #7a5a00;
}

.coin-front {
    background: radial-gradient(circle at 35% 35%, #ffe566, #ffd700 40%, #d4a800 80%, #b8860b);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.3);
}

.coin-front::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 1.5px solid rgba(122, 90, 0, 0.25);
}

.coin-back {
    background: radial-gradient(circle at 65% 65%, #ffe566, #ffd700 40%, #d4a800 80%, #b8860b);
    transform: rotateY(180deg);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.3);
}

.coin-back::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 1.5px solid rgba(122, 90, 0, 0.2);
}

/* Coin edge (thin side visible during rotation) */
.coin-face::after {
    content: '';
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: calc(50% - 1.5px);
    width: 3px;
    background: linear-gradient(180deg, #d4a800, #b8860b, #d4a800);
    border-radius: 1px;
    transform: rotateY(90deg);
    backface-visibility: visible;
}

@keyframes spin3d {
    0%   { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

/* ===== COIN FLIGHT ===== */
.coin-fly {
    animation: flyUp var(--dur, 1.2s) cubic-bezier(0.15, 0.6, 0.35, 1) forwards;
}

@keyframes flyUp {
    0% {
        transform: translate(var(--sx, 0), var(--sy, 0)) scale(1);
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    85% {
        transform: translate(var(--tx, 0), var(--ty, 0)) scale(0.6);
        opacity: 0.8;
    }
    100% {
        transform: translate(var(--tx, 0), var(--ty, 0)) scale(0);
        opacity: 0;
    }
}

/* ===== TRAIL PARTICLES ===== */
.trail {
    position: fixed;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ffd700;
    pointer-events: none;
    z-index: 10000;
    opacity: 0;
    animation: trailFade 0.4s ease forwards;
}

@keyframes trailFade {
    0%   { opacity: 0.4; transform: scale(1); }
    100% { opacity: 0; transform: scale(0); }
}

/* ===== ABSORB FLASH ===== */
.absorb-flash {
    position: fixed;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.4), transparent 70%);
    pointer-events: none;
    z-index: 10002;
    animation: flashOut 0.5s ease forwards;
}

@keyframes flashOut {
    0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

/* ===== BURST PARTICLES ON ABSORB ===== */
.burst {
    position: fixed;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ffd700;
    pointer-events: none;
    z-index: 10002;
    animation: burstOut 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

@keyframes burstOut {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.8; }
    100% { transform: translate(var(--bx, 0), var(--by, 0)) scale(0); opacity: 0; }
}

/* ===== EARNED TEXT ===== */
.earned-text {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Archivo Black', var(--font-display), sans-serif;
    font-size: 24px;
    color: #ffd700;
    text-shadow: 0 2px 12px rgba(255, 215, 0, 0.3);
    z-index: 10003;
    opacity: 0;
    pointer-events: none;
    animation: earnedPop 0.8s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
    white-space: nowrap;
}

@keyframes earnedPop {
    0%   { opacity: 0; transform: translateX(-50%) scale(0.7) translateY(10px); }
    30%  { opacity: 1; transform: translateX(-50%) scale(1.05) translateY(0); }
    60%  { transform: translateX(-50%) scale(0.98); }
    100% { opacity: 0; transform: translateX(-50%) scale(1) translateY(-10px); }
}

/* ===== COIN ABSORB GLOW ON COUNTER ===== */
.coin-absorb {
    animation: coinAbsorbPulse 0.5s ease-out;
}

@keyframes coinAbsorbPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 217, 61, 0);
        transform: scale(1);
    }
    40% {
        box-shadow: 0 0 16px 4px rgba(255, 217, 61, 0.5);
        transform: scale(1.15);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 217, 61, 0);
        transform: scale(1);
    }
}

/* Counter glow class (used after absorb) */
.counter-glow {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3), 0 0 40px rgba(255, 215, 0, 0.1);
}

/* Counter pulse class */
.counter-pulse {
    animation: counterPulse 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes counterPulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}

/* ===== SCREEN SHAKE ===== */
.screen-shake {
    animation: screenShake 0.3s ease;
}

@keyframes screenShake {
    0%, 100% { transform: translate(0, 0); }
    15% { transform: translate(-2px, 1px); }
    30% { transform: translate(2px, -1px); }
    45% { transform: translate(-1px, 2px); }
    60% { transform: translate(1px, -1px); }
    75% { transform: translate(-1px, 0); }
}

/* Big reward shake (more intense) */
.screen-shake-big {
    animation: screenShakeBig 0.4s ease;
}

@keyframes screenShakeBig {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-4px, 2px); }
    20% { transform: translate(4px, -3px); }
    30% { transform: translate(-3px, 4px); }
    40% { transform: translate(3px, -2px); }
    50% { transform: translate(-2px, 3px); }
    60% { transform: translate(2px, -1px); }
    70% { transform: translate(-1px, 2px); }
    80% { transform: translate(1px, -1px); }
}

/* ===== COUNTER ROLLING ===== */
.counter-rolling {
    color: var(--accent-gold, #FFD93D) !important;
}

/* ===== STAMP THUD ===== */
.stamp-thud {
    opacity: 0;
    animation: stampThud 0.5s cubic-bezier(0.15, 0.9, 0.3, 1.1) forwards;
}

@keyframes stampThud {
    0%   { opacity: 0; transform: scale(2.5) rotate(-10deg); filter: blur(4px); }
    35%  { opacity: 1; transform: scale(0.9) rotate(2deg); filter: blur(0); }
    55%  { transform: scale(1.06) rotate(-1deg); }
    75%  { transform: scale(0.97) rotate(0.5deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ===== DUST PARTICLES ===== */
.stamp-dust {
    position: absolute;
    width: var(--ds, 4px);
    height: var(--ds, 4px);
    border-radius: 50%;
    background: var(--dc, #ffd700);
    opacity: 0;
    pointer-events: none;
    z-index: 10000;
    animation: dustPuff 0.6s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
    animation-delay: var(--dd, 0s);
}

@keyframes dustPuff {
    0%   { opacity: 0.5; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--dx, 20px), var(--dy, -10px)) scale(0); }
}

/* ===== REWARD POP & FADE ===== */
@keyframes rewardPop {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    60% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

@keyframes rewardFade {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -60%) scale(0.9);
        opacity: 0;
    }
}

/* (Welcome toast keyframes removed — now uses full-screen showStampOverlay) */