/* Cart bounce */
@keyframes cart-bounce {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.2);
    }

    60% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
    }
}

.cart-bounce {
    animation: cart-bounce 0.6s ease;
}

/* Ping circle on the cart – GOLD */
.cart-ping {
    position: fixed;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background: rgba(255, 215, 0, 0.7); /* true gold (#FFD700) with glow */
    transform: translate(-50%, -50%) scale(0.4);
    pointer-events: none;
    z-index: 1000;
    animation: cart-ping 0.6s ease-out forwards;
}

@keyframes cart-ping {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.4);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.2);
    }
}

/* --- Zai Precinct Preloader --- */

.zp-bloom {
    background: radial-gradient( 60% 60% at 50% 30%, rgba(255, 215, 0, 0.6), /* Zai Gold glow */
    rgba(255, 215, 0, 0.25) 40%, /* softer gold ring */
    transparent 70% );
    filter: blur(40px);
}

/* letters fade-up one-by-one */
.zp-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(10px);
    animation-name: zp-letter-in;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

/* Gold tagline text */
.zp-tagline {
    color: #ffd700; /* Zai gold */
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.45);
}

@keyframes zp-letter-in {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }

    60% {
        opacity: 1;
        transform: translateY(-2px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scooter: fade + gentle bob */
#zp-scooter {
    animation: zp-scooter-pop 1.2s ease-out 0.2s forwards, zp-scooter-bob 1.2s ease-in-out 1.4s infinite alternate;
}

@keyframes zp-scooter-pop {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.96);
    }

    60% {
        opacity: 1;
        transform: translateY(-2px) scale(1.02);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes zp-scooter-bob {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-4px);
    }
}

/* underline line + spark slide */
#zp-underline .zp-line {
    stroke-dasharray: 560;
    stroke-dashoffset: 560;
    animation: zp-uline-draw 1s ease-out 0.6s forwards;
}

@keyframes zp-uline-draw {
    to {
        stroke-dashoffset: 0;
    }
}

#zp-underline .zp-spark {
    animation: zp-spark-move 1.4s ease-out 0.7s forwards;
}

@keyframes zp-spark-move {
    from {
        transform: translate(10px, 10px);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translate(540px, 10px);
        opacity: 0;
    }
}