/* <div class="loading-screen" id="cyberLoadingScreen">
    <div class="loading-overlay"></div>
    <div class="loading-content">
      <div class="loading-text-glitch" data-text="LOADING">
        LOADING
      </div>
      <div class="loading-bar-container">
        <div class="loading-bar-fill"></div>
      </div>
      <div class="status-message">
        ACCESSING CORE DATASTREAM
      </div>
    </div>
  </div> */
:root {
    --bg-loading: black;
}
body.light-mode {
    --bg-loading: white;
}
/* loading-bar-fill */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    font-family: 'Orbitron', sans-serif;
    color: var(--neon-cyan, #00f7ff);
    overflow: hidden;
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 30px 30px;
}

/* Efek Grid Digital (Latar Belakang) */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(0, 247, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 247, 255, 0.08) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.5;
    animation: scroll-grid 30s linear infinite;
}

/* Container Konten Loading */
.loading-content {
    text-align: center;
    padding: 20px;
    z-index: 10;
    backdrop-filter: blur(2px);
}

/* --- GLITCH TEXT EFFECT --- */
.loading-text-glitch {
    font-size: 3.5rem;
    font-weight: 900;
    letter-spacing: 5px;
    margin-bottom: 30px;
    text-shadow:
        0 0 10px var(--neon-cyan, #00f7ff),
        0 0 20px var(--neon-cyan, #00f7ff),
        0 0 40px rgba(0, 247, 255, 0.5);
    /* Neon Glow */
    position: relative;
    color: transparent;
    /* Teks asli transparan */
}

/* Pseudo-element untuk Glitch */
.loading-text-glitch::before,
.loading-text-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    color: var(--neon-cyan, #00f7ff);
    overflow: hidden;
    clip-path: inset(0 0 0 0);
}

.loading-text-glitch::after {
    left: 2px;
    text-shadow: -1px 0 var(--neon-red, #ff3131);
    /* Glitch Bayangan Merah */
    animation: glitch-anim-1 2s infinite linear alternate-reverse;
}

.loading-text-glitch::before {
    left: -2px;
    text-shadow: 1px 0 var(--neon-purple, #bd00ff);
    /* Glitch Bayangan Ungu */
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

/* --- PROGRESS BAR --- */
.loading-bar-container {
    width: 300px;
    height: 10px;
    background: rgba(0, 247, 255, 0.1);
    border: 1px solid var(--neon-cyan, #00f7ff);
    margin: 20px auto;
    overflow: hidden;
    box-shadow: 0 0 5px var(--neon-cyan, #00f7ff);
}

.loading-bar-fill {
    height: 100%;
    width: 50px;
    background: repeating-linear-gradient(45deg,
            var(--neon-cyan) 0%,
            var(--neon-purple) 50%,
            var(--neon-cyan) 100%);
    background-size: 200% 200%;
    animation:
        moveBar 1.5s linear infinite,
        moveGradient 3s linear infinite;
    transform: translateX(-100%);
}

/* --- STATUS MESSAGE --- */
.status-message {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.9rem;
    color: var(--neon-green, #0aff69);
    letter-spacing: 2px;
    animation: pulse-light 1s infinite alternate;
}

/* Animasi Glitch Teks */
@keyframes glitch-anim-1 {
    0% {
        clip-path: inset(45% 0 35% 0);
    }

    20% {
        clip-path: inset(10% 0 80% 0);
    }

    40% {
        clip-path: inset(30% 0 50% 0);
    }

    60% {
        clip-path: inset(55% 0 25% 0);
    }

    80% {
        clip-path: inset(0 0 90% 0);
    }

    100% {
        clip-path: inset(45% 0 35% 0);
    }
}

@keyframes glitch-anim-2 {
    0% {
        clip-path: inset(30% 0 60% 0);
    }

    25% {
        clip-path: inset(65% 0 15% 0);
    }

    50% {
        clip-path: inset(5% 0 85% 0);
    }

    75% {
        clip-path: inset(80% 0 10% 0);
    }

    100% {
        clip-path: inset(30% 0 60% 0);
    }
}

/* Animasi Pengisian Progress Bar */
@keyframes load-progress {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

/* Animasi Scroll Grid Latar Belakang */
@keyframes scroll-grid {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -100px -100px;
    }
}

/* Animasi Pulsa Teks Status */
@keyframes pulse-light {
    0% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
        text-shadow: 0 0 5px var(--neon-green, #0aff69);
    }
}

/* Animasi Pulsa pada Progress Bar (tetap sama untuk efek plasma) */
@keyframes bar-pulse {
    from {
        background-position: 0% 0%;
    }

    to {
        background-position: 200% 200%;
    }
}
/* animasi jalan terus */
@keyframes moveBar {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(700%);
    }
}
@keyframes moveGradient {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 200% 200%;
    }
}