/* public/css/coming-soon.css */

body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Hilangkan scroll samping */
    background-color: #000; /* Set background hitam biar aman */
}

/* Container Utama untuk Konten yang bisa di-scroll */
.coming-soon-container {
    position: relative;
    z-index: 2; /* Di atas video */
    min-height: 150vh; /* Kita buat tinggi supaya BISA di-scroll */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Mulai dari atas */
    align-items: center;
    padding-top: 30vh; /* Posisi kartu agak ke bawah dikit */
}

/* Video Background (Parallax Base) */
.video-bg-wrapper {
    position: fixed; /* KUNCI PARALLAX: Video nempel di layar */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    overflow: hidden;
}

.video-bg {
    position: absolute;
    /* Teknik Centering Absolut */
    top: 50%;
    left: 50%;
    /* Kita geser titik tengahnya manual di transform nanti */
    
    /* OVERSIZE: Kita buat videonya lebih besar dari layar */
    /* Supaya kalau kegeser parallax, videonya masih ada sisa */
    min-width: 110vw; 
    min-height: 120vh; 
    
    width: auto;
    height: auto;
    
    /* Kunci agar video tidak gepeng (cover area) */
    object-fit: cover;
    
    /* Initial state (sebelum JS jalan) */
    transform: translate(-50%, -50%) scale(1.1);
    
    /* Transisi smooth */
    transition: filter 0.1s linear; 
    will-change: transform; /* Optimasi performa render */
}

/* Overlay Gelap di atas video biar teks terbaca */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Gelapkan video 40% */
    z-index: 1;
}

/* Kartu Transparan (Glassmorphism) */
.glass-card {
    background: rgba(255, 255, 255, 0.15); /* Lebih transparan lagi */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    padding: 3rem;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    z-index: 10;
    max-width: 600px;
    width: 90%;
    text-align: center;
    color: white; /* Teks jadi putih biar kontras sama video */
    margin-bottom: 50px;
}

/* Penyesuaian Teks di dalam Glass Card */
.glass-card h1, .glass-card h2 { color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.glass-card p { color: rgba(255, 255, 255, 0.9) !important; }
.glass-card .text-muted { color: rgba(255, 255, 255, 0.7) !important; }

/* Animasi Mobil & Gear (Tetap sama) */
.gear-animation { font-size: 5rem; color: #ffc107; animation: spin 6s linear infinite; }
.car-animation { font-size: 3rem; color: #fff; margin-top: -20px; animation: drive 3s ease-in-out infinite; }

@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes drive {
    0% { transform: translateX(-50px); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateX(50px); opacity: 0; }
}

.auto-invert {
    /* Set warna dasar Putih */
    color: #fff !important; 
    
    /* KUNCI UTAMA: Difference Mode */
    /* Ini akan membalik warna teks berdasarkan background di belakangnya */
    mix-blend-mode: difference;
    
    /* Hapus shadow agar teks tetap tajam saat di-invert */
    text-shadow: none !important;
    
    /* Pastikan layer ini ada di atas video */
    position: relative; 
    z-index: 20; 
}

/* Penyesuaian untuk kartu agar transparan & ikut berubah warna */
.auto-invert .card-box {
    /* Kita buat background transparan total atau sangat tipis */
    /* Supaya teks di dalamnya bisa bereaksi langsung dengan video */
    background: rgba(255, 255, 255, 0.1); 
    border: 2px solid #fff; /* Border putih agar ikut kena invert */
    color: #fff !important;
}

/* Override warna icon & heading agar ikut jadi putih (biar bisa di-invert) */
.auto-invert h5, 
.auto-invert i, 
.auto-invert h3 {
    color: #fff !important; 
}