html, body { background: #0b0b14; }
[v-cloak] { display: none; }

/* ===== animated mesh background ===== */
.mesh { overflow: hidden; }
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
    will-change: transform;
}
.blob-1 {
    width: 520px; height: 520px;
    left: -120px; top: -140px;
    background: radial-gradient(circle, #7c3aed, transparent 60%);
    animation: drift1 18s ease-in-out infinite alternate;
}
.blob-2 {
    width: 480px; height: 480px;
    right: -120px; top: 20%;
    background: radial-gradient(circle, #ff4d8d, transparent 60%);
    animation: drift2 22s ease-in-out infinite alternate;
}
.blob-3 {
    width: 460px; height: 460px;
    left: 20%; bottom: -160px;
    background: radial-gradient(circle, #ff8c3b, transparent 60%);
    animation: drift3 26s ease-in-out infinite alternate;
}
@keyframes drift1 {
    0% { transform: translate(0,0) scale(1); }
    100% { transform: translate(140px, 80px) scale(1.15); }
}
@keyframes drift2 {
    0% { transform: translate(0,0) scale(1); }
    100% { transform: translate(-160px, 120px) scale(1.2); }
}
@keyframes drift3 {
    0% { transform: translate(0,0) scale(1); }
    100% { transform: translate(80px, -160px) scale(1.1); }
}

/* ===== coin rain ===== */
#coin-rain-static .coin {
    position: absolute;
    width: 22px; height: 22px;
    opacity: .45;
    filter: drop-shadow(0 0 8px rgba(255, 200, 80, .55));
    animation: fallSpin linear infinite;
}
@keyframes fallSpin {
    0%   { transform: translateY(-12vh) rotate(0deg); opacity: 0; }
    8%   { opacity: .5; }
    100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ===== floating coin in cards ===== */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
.animate-float { animation: float 2.6s ease-in-out infinite; }

/* slow ping for live dot */
@keyframes ping-slow {
    0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.6); }
    70%  { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.animate-ping-slow { animation: ping-slow 2s ease-out infinite; }

/* generate button shine */
@keyframes shine {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
.animate-shine { animation: shine 3s linear infinite; }

/* coin flip during generation */
@keyframes coin-flip {
    0%   { transform: rotateY(0deg) scale(1); }
    50%  { transform: rotateY(180deg) scale(1.05); }
    100% { transform: rotateY(360deg) scale(1); }
}
.animate-coin-flip {
    animation: coin-flip 1.2s linear infinite;
    transform-style: preserve-3d;
}

/* pop scale */
@keyframes pop {
    0%   { transform: scale(.6); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.animate-pop { animation: pop .55s cubic-bezier(.22,1.6,.36,1) both; }

/* ===== package card hover ===== */
.pkg-card {
    transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.pkg-card:hover { transform: translateY(-2px); }

/* friend row scrollbar */
.friends-row::-webkit-scrollbar { height: 4px; }
.friends-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

/* ===== sheet ===== */
.sheet-backdrop {
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
.sheet-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}
.sheet-card {
    transform: translateY(40px) scale(.98);
    opacity: 0;
    transition: transform .35s cubic-bezier(.22,1.3,.36,1), opacity .25s ease;
}
.sheet-backdrop.active .sheet-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* step fade */
@keyframes stepFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.step-fade { animation: stepFade .35s ease both; }

/* toast */
.toast {
    bottom: -80px;
    opacity: 0;
    transition: bottom .45s cubic-bezier(.22,1.2,.36,1), opacity .35s ease;
}
.toast.visible {
    bottom: 28px;
    opacity: 1;
}

/* activity transitions */
.activity-enter-active,
.activity-leave-active { transition: all .45s ease; }
.activity-enter-from   { opacity: 0; transform: translateX(-12px); }
.activity-leave-to     { opacity: 0; transform: translateX(12px); }

/* ===== confetti ===== */
.confetti {
    position: absolute;
    inset: 0;
    overflow: visible;
    pointer-events: none;
}
.confetti span {
    position: absolute;
    top: 30%;
    left: 50%;
    width: 8px;
    height: 14px;
    border-radius: 2px;
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: confettiBurst 1.4s cubic-bezier(.22,1.2,.36,1) both;
}
@keyframes confettiBurst {
    0%   { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))) rotate(var(--r, 0deg)); }
}

/* phone shadow on desktop */
@media (min-width: 768px) {
    .phone {
        box-shadow:
            0 0 0 1px rgba(255,255,255,.05),
            0 30px 80px -20px rgba(0,0,0,.7),
            0 60px 140px -40px rgba(124,58,237,.35);
    }
}

/* tabular nums helper (Tailwind already provides, just ensure) */
.tabular-nums { font-variant-numeric: tabular-nums; }