.touch-dot {
    position: fixed;
    width: 80px;  /* default small kiss */
    height: 80px;

    background-image: url("/wp-content/themes/astra-child/assets/kiss.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    pointer-events: none;
    opacity: 0.9;
    filter: blur(1px);

    transform: translate(-50%, -50%) rotate(var(--rotation));
    z-index: 99999;

    animation: leafFade 0.9s ease-out forwards;
}

@keyframes leafFade {
    to {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--rotation)) scale(0.4);
    }
}

/* Snap animation only on click */
@keyframes kissSnap {
    0%   { transform: translate(-50%, -50%) rotate(var(--rotation)) scale(0); }
    30%  { transform: translate(-50%, -50%) rotate(var(--rotation)) scale(1.5); }
    60%  { transform: translate(-50%, -50%) rotate(var(--rotation)) scale(0.8); }
    100% { transform: translate(-50%, -50%) rotate(var(--rotation)) scale(1); }
}