/* Animasi logo ketika halaman selesai load */
body.wm-loaded .wm-logo-wrap {
    transform: translateX(0);
    opacity: 1;
    transition:
        transform .5s cubic-bezier(.19, 1, .22, 1),
        opacity .5s ease;
}

/* Shimmer pada tombol utama & tombol 3D */
.btn-hero-main span.shine,
.btn-3d-main span.shine {
    position: absolute;
    top: -120%;
    left: -50%;
    width: 40%;
    height: 300%;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, .9),
            rgba(255, 255, 255, 0));
    transform: skewX(-25deg);
    animation: shine-move 2.8s ease-in-out infinite;
}

/* Teks dengan efek glow putih */
.text-glow-white {
    color: #ffffff !important;
    opacity: 0;
    animation: fadeWhite 1.6s ease-out forwards, whiteShimmer 5s ease-in-out infinite;
}

/* Efek glass-flow di panel */
.glass-flow {
    position: relative;
    overflow: hidden;
}

.glass-flow::before,
.glass-flow::after {
    content: "";
    position: absolute;
    inset: -40%;
    mix-blend-mode: screen;
    opacity: 0.0;
    pointer-events: none;
}

.glass-flow::before {
    background:
        radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.2), transparent 60%),
        conic-gradient(from 160deg,
            rgba(31, 224, 192, 0.0),
            rgba(31, 224, 192, 0.55),
            rgba(17, 178, 255, 0.45),
            rgba(245, 198, 107, 0.35),
            rgba(31, 224, 192, 0.0));
    animation: glass-flow-main 10s ease-in-out infinite;
}

.glass-flow::after {
    background:
        radial-gradient(circle at 100% 0, rgba(255, 255, 255, 0.18), transparent 60%),
        conic-gradient(from 300deg,
            rgba(245, 198, 107, 0.0),
            rgba(245, 198, 107, 0.45),
            rgba(31, 224, 192, 0.35),
            rgba(17, 178, 255, 0.25),
            rgba(245, 198, 107, 0.0));
    animation: glass-flow-secondary 13s ease-in-out infinite;
}

/* ================= KEYFRAMES ================= */

@keyframes shine-move {
    0% {
        transform: translateX(-130%) skewX(-25deg);
    }

    100% {
        transform: translateX(260%) skewX(-25deg);
    }
}

@keyframes fadeWhite {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

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

@keyframes whiteShimmer {
    0% {
        text-shadow: 0 0 6px rgba(255, 255, 255, 0.15);
    }

    50% {
        text-shadow: 0 0 14px rgba(255, 255, 255, 0.35);
    }

    100% {
        text-shadow: 0 0 6px rgba(255, 255, 255, 0.15);
    }
}

@keyframes glass-flow-main {
    0% {
        transform: translate(-130%, -25%) rotate(-8deg);
        opacity: 0;
    }

    15% {
        opacity: .9;
    }

    40% {
        transform: translate(-20%, 8%) rotate(4deg);
        opacity: 1;
    }

    70% {
        transform: translate(40%, -12%) rotate(-2deg);
        opacity: .9;
    }

    100% {
        transform: translate(130%, 10%) rotate(6deg);
        opacity: 0;
    }
}

@keyframes glass-flow-secondary {
    0% {
        transform: translate(-110%, 15%) rotate(10deg);
        opacity: 0;
    }

    20% {
        opacity: .7;
    }

    45% {
        transform: translate(-10%, -18%) rotate(-6deg);
        opacity: .9;
    }

    75% {
        transform: translate(55%, 6%) rotate(3deg);
        opacity: .7;
    }

    100% {
        transform: translate(140%, -16%) rotate(-4deg);
        opacity: 0;
    }
}