/* ── Pulse (unrevealed "?") ───────────────────────────── */

@keyframes pulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.05); }
}

/* ── Gold sparkle for gold-tier cards ─────────────────── */

@keyframes sparkle {
    0%, 100% { box-shadow: 0 0 8px rgba(255, 215, 0, 0.15); }
    50%      { box-shadow: 0 0 24px rgba(255, 215, 0, 0.35); }
}

.day-card.tier-gold .day-card-back {
    animation: sparkle 2.5s ease-in-out infinite;
}

/* ── Card entrance (stagger via --i) ──────────────────── */

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.day-card {
    opacity: 0;
    animation: cardIn 0.4s ease forwards;
    animation-delay: calc(var(--i, 0) * 60ms);
}

/* ── Card hover lift ──────────────────────────────────── */

.day-card:hover .day-card-inner {
    transform: translateY(-4px);
}
.day-card.revealed:hover .day-card-inner {
    transform: rotateY(180deg) translateY(-4px);
}

/* ── Page slide-in ────────────────────────────────────── */

@keyframes pageIn {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.day-container,
.leaderboard {
    animation: pageIn 0.35s ease;
}

/* ── Leaderboard bar grow ─────────────────────────────── */

@keyframes barGrow {
    from { width: 0; }
}

.lb-bar {
    animation: barGrow 1s ease-out forwards;
    animation-delay: calc(var(--i, 0) * 100ms);
}

/* ── Countdown tick ───────────────────────────────────── */

@keyframes countTick {
    0%   { transform: scale(1); }
    15%  { transform: scale(1.1); }
    30%  { transform: scale(1); }
}

.countdown-value.tick {
    animation: countTick 0.3s ease;
}

/* ── Fade in generic ──────────────────────────────────── */

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

.fade-in {
    animation: fadeIn 0.3s ease;
}