#instructions {
    position: absolute;
    color: #666;
    bottom: 0;
    padding-bottom: 6px;
    font-family: sans-serif;
    width: 100%;
    text-align: center;
    pointer-events: none;
}

canvas {
    display: block;
}

.text-banner {
    /* text-shadow: 0 0 10px cyan, 0 0 20px aqua, 0 0 30px deepskyblue; */
    /* width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #0ff;
    transition: all 1s ease;
    animation-delay: 3s;
    animation: electric-flicker 2s infinite; */
    font-size: 110px;
    font-family: "Orbitron", sans-serif;
    font-optical-sizing: auto;
    font-weight: 999;
    font-style: normal;
    z-index: 2;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0s ease;
    color: #0ff;
    text-shadow: 0 0 5px #00d4ff, 0 0 10px #00d4ff, 0 0 20px #00d4ff,
        0 0 40px #00d4ff, 0 0 80px #00d4ff;
    animation: glow 1.5s infinite alternate;
    animation-delay: 3s;
}

/* .text-banner.flicker-active {
    animation: electric-flicker 2s infinite;
} */

@keyframes glow {
    0% {
        text-shadow: 0 0 5px #ddd, 0 0 10px #ddd, 0 0 20px #ddd, 0 0 40px #ddd,
            0 0 80px #ddd;
    }
    100% {
        text-shadow: 0 0 10px #00d4ff, 0 0 20px #00d4ff, 0 0 40px #00d4ff,
            0 0 80px #00d4ff, 0 0 160px #00d4ff;
    }
}

@keyframes electric-flicker {
    0%,
    19%,
    21%,
    23%,
    25%,
    54%,
    56%,
    100% {
        opacity: 1;
        text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff, 0 0 40px #0ff,
            0 0 80px #0ff;
    }

    20%,
    24%,
    55% {
        opacity: 0.6;
        text-shadow: none;
    }
}

#three-container {
    position: relative;
    overflow: hidden;
}

.card-orbit-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.orbit-container {
    position: relative;
    height: 300px;
    width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orbit {
    position: absolute;

    /* margin: -130px 0 0 -60px; */
}

/* rotasi tiap oval supaya silang */
.orbit.second {
    opacity: 0;
    width: 120px;
    height: 260px;
    /* animation-delay: 7s; */
}
.orbit.third {
    opacity: 0;
    width: 120px;
    height: 260px;
    /* animation-delay: 7s; */
}
.animation-line-orbit.anim-second {
    border: 2px solid cyan;
    border-radius: 50%;
    box-shadow: 0 0 12px cyan, 0 0 25px aqua;
    animation: orbitAnimSecond 2s linear forwards;
}

.animation-line-orbit.anim-third {
    border: 2px solid cyan;
    border-radius: 50%;
    box-shadow: 0 0 12px cyan, 0 0 25px aqua;
    animation: orbitAnimThird 2s linear forwards;
}

/* electron bergerak di lintasan */
.electron {
    position: absolute;
    width: 14px;
    height: 14px;
    background: cyan;
    border-radius: 50%;
    box-shadow: 0 0 10px cyan, 0 0 20px aqua;

    offset-path: ellipse(60px 130px); /* bentuk oval sesuai orbit */
    offset-distance: 0%;
    animation: orbitAnim 6s linear infinite;
}
.animation-line-orbit {
    border: 2px solid cyan;
    border-radius: 50%;
    box-shadow: 0 0 12px cyan, 0 0 25px aqua;
    animation: lineOrbitAnim 4s linear forwards;
}

/* supaya tiap orbit beda kecepatan/delay */
.second .electron {
    animation-duration: 8s;
    animation-delay: -2s;
}
.third .electron {
    animation-duration: 10s;
    animation-delay: -4s;
}

@keyframes orbitAnim {
    to {
        offset-distance: 100%;
    }
}

@keyframes orbitAnimSecond {
    from {
        transform: rotate(0);
        opacity: 1;
    }
    to {
        opacity: 1;

        transform: rotate(60deg);
    }
}

@keyframes orbitAnimThird {
    from {
        transform: rotate(0);
        opacity: 1;
    }
    to {
        opacity: 1;

        transform: rotate(-60deg);
    }
}

@keyframes lineOrbitAnim {
    0% {
        width: 0;
        height: 0;
    }
    50% {
        width: 2px;
        height: 2px;
    }
    90% {
        width: 2px;
        height: 260px;
    }
    100% {
        width: 120px;
        height: 260px;
    }
}

.scene {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: black;
    overflow: hidden;
}

.light {
    position: absolute;
    width: 100px;
    height: 100px;
    background: cyan;
    border-radius: 50%;
    box-shadow: 0 0 10px cyan, 0 0 20px deepskyblue, 0 0 40px aqua;
    opacity: 0;
}

/* Cahaya ke kanan atas */
@keyframes upRight {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 1;
    }
    100% {
        transform: translate(400px, -400px) scale(1);
        opacity: 0;
    }
}

/* Cahaya ke kiri atas */
@keyframes upLeft {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 1;
    }
    100% {
        transform: translate(-400px, -400px) scale(1);
        opacity: 0;
    }
}

/* Cahaya ke kanan bawah */
@keyframes downRight {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 1;
    }
    100% {
        transform: translate(400px, 400px) scale(1);
        opacity: 0;
    }
}

/* Cahaya ke kiri bawah */
@keyframes downLeft {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 1;
    }
    100% {
        transform: translate(-400px, 400px) scale(1);
        opacity: 0;
    }
}

/* Assign ke masing-masing */
.move-up-right {
    left: 50%;
    top: 50%;
    animation: upRight 3s linear infinite;
    animation-delay: 0s;
}

.move-up-left {
    left: 50%;
    top: 50%;
    animation: upLeft 3.5s linear infinite;
    animation-delay: 1s;
}

.move-down-right {
    left: 50%;
    top: 50%;
    animation: downRight 4s linear infinite;
    animation-delay: 2s;
}

.move-down-left {
    left: 50%;
    top: 50%;
    animation: downLeft 3.2s linear infinite;
    animation-delay: 1.5s;
}