/* ==========================================================================
   POPPER CURSOR & PARTICLES VFX STYLES
   ========================================================================== */

#popper-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 190px;
    height: 235px;
    pointer-events: none;
    z-index: 99999;
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%);
    will-change: transform, left, top, opacity;
    transition: opacity 0.2s ease-out;
}

#popper-cursor.hide-popper {
    opacity: 0 !important;
}

#popper-cursor.idle {
    animation: idle-wobble 2.5s infinite ease-in-out;
}

@keyframes idle-wobble {
    0%, 100% { transform: translate(-50%, -50%) rotate(var(--idle-angle)) scale(1); }
    25% { transform: translate(-52%, -52%) rotate(calc(var(--idle-angle) - 4deg)) scale(1.02); }
    50% { transform: translate(-48%, -48%) rotate(calc(var(--idle-angle) + 5deg)) scale(0.98); }
    75% { transform: translate(-51%, -51%) rotate(calc(var(--idle-angle) - 2deg)) scale(1.01); }
}

#popper-arrow.shoot {
    animation: arrow-launch 0.32s cubic-bezier(0.1, 0.9, 0.2, 1) forwards !important;
}

@keyframes arrow-launch {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    40% { transform: translateY(-80px) scale(1.25); opacity: 0; }
    41% { transform: translateY(70px) scale(0.6); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

.popper-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 8px rgba(0, 0, 0, 0.8));
}

/* Sleek & Lightweight Confetti Trail Particles */
.trail-particle {
    position: fixed;
    pointer-events: none;
    z-index: 99980;
    border-radius: 2px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    transform-origin: 50% 50%;
    will-change: transform, opacity;
    animation: confetti-float-fade 0.55s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes confetti-float-fade {
    0% { 
        opacity: 0.95; 
        transform: translate(-50%, -50%) rotate(var(--start-rot, 0deg)) scale(1); 
    }
    100% { 
        opacity: 0; 
        transform: translate(calc(-50% + var(--drift-x, 10px)), calc(-50% + var(--drift-y, 25px))) rotate(calc(var(--start-rot, 0deg) + 120deg)) scale(0.25) rotateY(180deg); 
    }
}

/* POW Impact Effect */
.pow-effect {
    position: fixed;
    pointer-events: none;
    z-index: 99995;
    font-family: 'Montserrat', 'Arial Black', sans-serif;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    line-height: 1;
    text-shadow: 0 0 2px #000, 0 0 10px rgba(0,0,0,0.5);
    animation: pow-pop-fade 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes pow-pop-fade {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(var(--pow-rot)); }
    40% { opacity: 1; transform: translate(-50%, -100%) scale(1.1) rotate(var(--pow-rot)); }
    100% { opacity: 0; transform: translate(-50%, -160%) scale(1.3) rotate(var(--pow-rot)); }
}

/* VFX Ring */
.vfx-ring {
    position: absolute;
    border: 1.5px solid var(--ring-color);
    border-radius: 50%;
    pointer-events: none;
    animation: ring-expand-subtle 0.25s ease-out forwards;
    z-index: 8888;
}

@keyframes ring-expand-subtle {
    0% { width: 0px; height: 0px; opacity: 0.6; }
    100% { width: 110px; height: 110px; opacity: 0; }
}

@media (max-width: 600px), (pointer: coarse) {
    #popper-cursor { display: none !important; }
}