/* ===== CUTE SPARKLE & DOODLE EFFECTS ===== */
.sparkle {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    will-change: transform, opacity;
}

/* Cursor trail sparkle */
.sparkle-trail {
    width: 14px; height: 14px;
    animation: sparkleTrailFade 0.8s ease-out forwards;
}

/* Click burst sparkles */
.sparkle-burst {
    width: 12px; height: 12px;
    animation: sparkleBurst 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Floating ambient sparkles */
.float-sparkle {
    position: fixed;
    width: 8px; height: 8px;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    animation: floatUp 5s ease-in forwards;
}

/* Doodle pops (random hearts/stars) */
.doodle-pop {
    position: fixed;
    width: 24px; height: 24px;
    pointer-events: none;
    z-index: 9998;
    opacity: 0;
    animation: doodlePop 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Card hover glow */
.res-card {
    position: relative;
    overflow: hidden;
}

.res-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
        rgba(236, 72, 153, 0.15) 0%,
        transparent 40%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.res-card:hover::after { opacity: 1; }

/* Hero button special glow */
.hero-btn, .g-cta { position: relative; overflow: hidden; }

/* Keyframes */
@keyframes sparkleTrailFade {
    0%   { opacity: 1; transform: scale(1) rotate(0deg); }
    100% { opacity: 0; transform: scale(0.2) rotate(180deg) translateY(-20px); }
}

@keyframes sparkleBurst {
    0%   { opacity: 1; transform: translate(0, 0) scale(0.5) rotate(0deg); }
    100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0) rotate(360deg); }
}

@keyframes floatUp {
    0%   { opacity: 0; transform: translateY(0) scale(0); }
    20%  { opacity: 0.5; transform: translateY(-30px) scale(1); }
    80%  { opacity: 0.4; }
    100% { opacity: 0; transform: translateY(-120px) scale(0.3); }
}

@keyframes doodlePop {
    0%   { opacity: 0; transform: scale(0) rotate(-45deg); }
    40%  { opacity: 1; transform: scale(1.2) rotate(10deg); }
    100% { opacity: 0; transform: scale(0.6) rotate(20deg) translateY(-40px); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sparkle, .float-sparkle, .doodle-pop,
    .sparkle-trail, .sparkle-burst { display: none !important; }
}