/* ==== LEVEL 5 – WORD ICON PREMIUM FINAL VERSION ==== */

/* MAIN WRAPPER WITH PARALLAX */
.word-wrapper-l5 {
    perspective: 1100px;
    position: relative;
    transform-style: preserve-3d;
}

/* SHOCKWAVE RIPPLE */
.shockwave-l5 {
    position: absolute;
    width: 4px;
    height: 4px;
    top: 14px;
    left: 14px;
    background: rgba(0, 123, 255, 0.4);
    border-radius: 50%;
    opacity: 0;
    z-index: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* PULSE RING */
.pulse-ring-l5 {
    position: absolute;
    width: 26px;
    height: 26px;
    border: 3px solid rgba(0, 110, 255, 0.3);
    border-radius: 50%;
    animation: l5PulseRing 2.4s infinite;
    animation-delay: 0.5s;
    z-index: 1;
}

@keyframes l5PulseRing {
    0% {
        transform: scale(0.5);
        opacity: 0.45;
    }

    60% {
        transform: scale(1.9);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* MOVING GLOW */
.word-glow-l5 {
    position: absolute;
    width: 28px;
    height: 28px;
    top: 2px;
    left: 2px;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(0, 110, 255, 0.6) 0%,
            rgba(0, 110, 255, 0.25) 40%,
            rgba(0, 110, 255, 0) 80%);
    animation: l5GlowMove 3s infinite ease-in-out;
    z-index: 2;
}

@keyframes l5GlowMove {
    0% {
        transform: translate(-3px, -3px);
    }

    50% {
        transform: translate(3px, 3px);
    }

    100% {
        transform: translate(-3px, -3px);
    }
}

/* WORD ICON */
.word-premium-l5 {
    position: relative;
    z-index: 4;
    font-size: 20px;

    animation:
        l5Pulse 1.8s infinite ease-in-out,
        l5BounceIn 0.45s ease-out,
        l5LightSweep 2.8s infinite;

    cursor: pointer;
    transition:
        transform 0.18s cubic-bezier(.175, .885, .32, 1.275),
        filter 0.25s ease;
}

/* heartbeat */
@keyframes l5Pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

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

/* bounce entry */
@keyframes l5BounceIn {
    0% {
        transform: scale(0.3) rotate(-12deg);
        opacity: 0;
    }

    60% {
        transform: scale(1.3) rotate(4deg);
        opacity: 1;
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* LIGHT SWEEP */
@keyframes l5LightSweep {
    0% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.4);
    }

    100% {
        filter: brightness(1);
    }
}

/* HOVER */
.word-premium-l5:hover {
    transform:
        rotateX(12deg) rotateY(-12deg) scale(1.32) translateY(-2px);
    filter: drop-shadow(0 0 7px rgba(0, 123, 255, 0.95));
}

/* GREEN BADGE */
.badge-tik-l5 {
    position: absolute;
    bottom: -2px;
    right: -1px;
    font-size: 12px;
    z-index: 5;
    animation: l5TikPop 0.5s ease-out 0.6s;
}

@keyframes l5TikPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    60% {
        transform: scale(1.7);
        opacity: 1;
    }

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

/* CONFETTI */
.confetti-container-l5 {
    position: absolute;
    width: 1px;
    height: 1px;
    top: -6px;
    left: 12px;
    z-index: 6;
}

.confetti-container-l5 .c {
    position: absolute;
    width: 3px;
    height: 3px;
    opacity: 0;
    animation: l5ConfFall 0.9s ease-out forwards;
}

@keyframes l5ConfFall {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateY(14px) scale(1.5) rotate(55deg);
        opacity: 0;
    }
}

/* SPIN */
.word-premium-l5.l5-spin {
    animation: l5Spin 0.9s linear;
}

@keyframes l5Spin {
    0% {
        transform: rotate(0deg) scale(1.1);
    }

    100% {
        transform: rotate(360deg) scale(1.1);
    }
}