/* splash.css */

/* Reset dasar agar tidak ada margin/padding bawaan browser */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* Gunakan font sans-serif yang bersih, mirip Helvetica/Arial di gambar */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #0b0b0b;
    /* Warna background body disamakan */
}

.splash {
    position: fixed;
    inset: 0;
    background: #0b0b0b;
    color: white;
    z-index: 9999;
    /* Gunakan Flexbox untuk centering sempurna */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Center secara vertikal */
    align-items: center;
    /* Center secara horizontal */
}

.splash-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 40%);
    pointer-events: none;
}

.splash-content {
    position: relative;
    text-align: center;
    /* Hapus top: 50% dan transform: translateY dari kode lama Anda */
    animation: fadeUp 0.9s ease forwards;
}

.splash-title {
    font-size: 14px;
    /* Diperbesar dari sebelumnya */
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 30px;
    font-weight: 300;
}

.splash-image {
    position: relative;
    width: 120px;
    /* Ukuran bisa disesuaikan */
    height: 120px;
    margin: 0 auto 24px auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Efek Zoom In saat pertama kali muncul */
    animation: imageZoomIn 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

/* Aturan untuk gambar yang dibuat via JS */
.splash-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    opacity: 0;
    /* Mulai dari transparan */
    transition: opacity 1.2s ease-in-out;
    /* Transisi fade yang sangat halus */
}

.splash-name {
    font-size: 16px;
    /* Diperbesar agar lebih menonjol */
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-top: 30px;
    font-weight: 400;
}

/* Bagian Loading di Pojok Kiri Bawah */
.splash-loading {
    position: absolute;
    bottom: 40px;
    left: 40px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    /* Jarak antara teks LOADING dan persentase */
    font-size: 11px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.6);
}

.smooth-text {
    display: inline-block;
    min-width: 3.5ch;
    /* Jaga lebar tetap agar teks tidak geser */
    text-align: right;
    font-variant-numeric: tabular-nums;
    /* Angka punya lebar yang sama */
    transition: all 0.2s ease;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* Animasi angka berkedip halus saat berubah */
.text-pulse {
    animation: textPulse 0.1s ease-out;
}

.loading-label {
    text-transform: uppercase;
}

#progressText {
    font-variant-numeric: tabular-nums;
    /* Mencegah teks bergeser saat angka berubah */
    min-width: 40px;
}

/* Keyframes Animasi */

/* Animasi untuk konten tengah */
@keyframes fadeUpSplash {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Animasi untuk teks loading */
@keyframes fadeInLoading {
    to {
        opacity: 1;
    }
}

@keyframes textPulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }

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

/* Keyframes untuk Zoom In kontainer */
@keyframes imageZoomIn {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

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

/* Kelas utilitas untuk transisi hilang (digunakan oleh JS) */
.splash.fade-out {
    opacity: 0 !important;
    transition: opacity 0.7s ease, visibility 0.8s;
    visibility: hidden;
    pointer-events: none;
}