/*
 * Animations & Keyframes
 */

/* ── Pulse glow — uses opacity for GPU-friendly animation ── */
@keyframes wishly-pulse-glow {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}

.wishly-animate-pulse-glow {
    box-shadow: 0 0 30px var(--w-accent-glow), 0 0 60px rgba(124, 58, 237, 0.2);
    animation: wishly-pulse-glow 2s ease-in-out infinite;
    will-change: opacity;
}

/* ── Float ─────────────────────────────────────── */
@keyframes wishly-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

.wishly-animate-float {
    animation: wishly-float 3s ease-in-out infinite;
}

/* ── Shimmer (skeleton loading) ────────────────── */
@keyframes wishly-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.wishly-animate-shimmer {
    background: linear-gradient(
        90deg,
        var(--w-bg-card) 25%,
        var(--w-bg-card-hover) 50%,
        var(--w-bg-card) 75%
    );
    background-size: 200% 100%;
    animation: wishly-shimmer 1.5s ease-in-out infinite;
}

/* ── Spin ──────────────────────────────────────── */
@keyframes wishly-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.wishly-animate-spin {
    animation: wishly-spin 1s linear infinite;
}

/* ── Fade in ───────────────────────────────────── */
@keyframes wishly-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.wishly-animate-fade-in {
    animation: wishly-fade-in var(--w-duration-base) var(--w-ease-out) forwards;
}

/* ── Slide up ──────────────────────────────────── */
@keyframes wishly-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wishly-animate-slide-up {
    animation: wishly-slide-up var(--w-duration-slow) var(--w-ease-out) forwards;
}

/* ── Scale in ──────────────────────────────────── */
@keyframes wishly-scale-in {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

.wishly-animate-scale-in {
    animation: wishly-scale-in var(--w-duration-base) var(--w-ease-spring) forwards;
}

/* ── Bounce ────────────────────────────────────── */
@keyframes wishly-bounce {
    0%, 100% { transform: translateY(0); }
    25%      { transform: translateY(-8px); }
    50%      { transform: translateY(0); }
    75%      { transform: translateY(-4px); }
}

.wishly-animate-bounce {
    animation: wishly-bounce 0.6s var(--w-ease-out);
}

/* ── Confetti burst (achievement unlock) ───────── */
@keyframes wishly-confetti-burst {
    0%   { transform: scale(0); opacity: 1; }
    50%  { transform: scale(1.2); opacity: 0.8; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* ── Progress fill ─────────────────────────────── */
@keyframes wishly-progress-fill {
    from { width: 0; }
}

/* ── Gradient shift ────────────────────────────── */
@keyframes wishly-gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.wishly-animate-gradient {
    background-size: 200% 200%;
    animation: wishly-gradient-shift 3s ease infinite;
}

/* ── Orbit (for decorative elements) ───────────── */
@keyframes wishly-orbit {
    from { transform: rotate(0deg) translateX(120px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(120px) rotate(-360deg); }
}

/* ── Stagger children ──────────────────────────── */
.wishly-stagger > * {
    opacity: 0;
    animation: wishly-slide-up var(--w-duration-slow) var(--w-ease-out) forwards;
}

.wishly-stagger > *:nth-child(1) { animation-delay: 0ms; }
.wishly-stagger > *:nth-child(2) { animation-delay: 80ms; }
.wishly-stagger > *:nth-child(3) { animation-delay: 160ms; }
.wishly-stagger > *:nth-child(4) { animation-delay: 240ms; }
.wishly-stagger > *:nth-child(5) { animation-delay: 320ms; }
.wishly-stagger > *:nth-child(6) { animation-delay: 400ms; }
.wishly-stagger > *:nth-child(7) { animation-delay: 480ms; }
.wishly-stagger > *:nth-child(8) { animation-delay: 560ms; }

/* ── Respect prefers-reduced-motion ──────────────── */
@media (prefers-reduced-motion: reduce) {
    .wishly-animate-pulse-glow,
    .wishly-animate-float,
    .wishly-animate-shimmer,
    .wishly-animate-gradient,
    .wishly-animate-spin {
        animation: none !important;
    }

    .wishly-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .wishly-stagger > * {
        opacity: 1 !important;
        animation: none !important;
    }
}

/* ── XP popup animation (moved from JS runtime) ─── */
@keyframes xpPopFloat {
    0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-40px) scale(1.3); }
}

/* ── Cursor Magic canvas overlay ────────────────── */
#wishly-cursor-magic {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99996;
}

/* ── Cursor Magic floating +XP label ────────────── */
@keyframes wishly-cursor-xp-float {
    0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-36px) scale(1.2); }
}

.wishly-cursor-xp {
    position: fixed;
    font-size: 12px;
    font-weight: 800;
    color: #7c3aed;
    pointer-events: none;
    z-index: 99997;
    text-shadow: 0 0 8px rgba(124, 58, 237, 0.5);
    transform: translateX(-50%);
    animation: wishly-cursor-xp-float 900ms ease-out forwards;
    user-select: none;
    white-space: nowrap;
}