/* nightsky.css — Background langit bintang untuk portfolio section
 * Canvas fixed di belakang semua konten, aktif setelah cinematic intro selesai.
 */

/* ── Canvas night sky ─────────────────────────────────────────── */
#night-sky-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;      /* behind simulator (z:5), loading screen, nav */
    display: block;
    pointer-events: none;
}

/* ── Portfolio sections: semi-transparan agar bintang kelihatan ── */
#portfolio-section {
    position: relative;
    z-index: 1;
}

/* Hero / about section: hampir transparan, bintang dominan */
#portfolio-section .portfolio-hero,
#portfolio-section .section-hero {
    background: rgba(4, 4, 16, 0.55) !important;
}

/* Section biasa: cukup gelap untuk readability, tapi bintang tembus */
#portfolio-section .section {
    background: rgba(5, 5, 20, 0.78) !important;
    backdrop-filter: blur(0px);
}

/* Alternate sections: sedikit beda tone */
#portfolio-section .section:nth-child(even) {
    background: rgba(6, 6, 22, 0.80) !important;
}

/* ── Cards tetap solid — readability diutamakan ─────────────────── */
#portfolio-section .card,
#portfolio-section .project-card,
#portfolio-section .card-grid .card {
    background: rgba(10, 10, 30, 0.92) !important;
    backdrop-filter: blur(8px);
}

/* ── Navbar ──────────────────────────────────────────────────────── */
#portfolio-nav,
.navbar,
#navbar,
nav.main-nav {
    background: rgba(3, 3, 12, 0.92) !important;
    backdrop-filter: blur(12px);
}

/* ── Footer ──────────────────────────────────────────────────────── */
footer,
.footer {
    background: rgba(4, 4, 14, 0.90) !important;
    position: relative;
    z-index: 2;
}

/* ── Mobile: sedikit lebih padat supaya teks tetap terbaca ──── */
@media (max-width: 768px) {
    #night-sky-canvas {
        opacity: 0.65;
    }
    #portfolio-section .section {
        background: rgba(5, 5, 20, 0.88) !important;
    }
}