/* ============================================================
   Layer WebGL (three.js) — latar hidup + transisi warna antar
   halaman saat scroll.
   ADITIF: kelas .webgl-on baru dipasang kalau three.js sukses.
   Kalau gagal, background asli tiap halaman tetap dipakai.
   ============================================================ */

#bg-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    display: block;
    pointer-events: none;
}

/* Konten selalu di atas canvas */
#app { position: relative; z-index: 1; }

/* ---- Saat WebGL aktif: transparankan background halaman ----
   Layer rgba / pola tetap dipertahankan; warna dasar dari canvas. */
body.webgl-on .page-1 { background: none; }

body.webgl-on .page-2 { background-color: transparent; } /* pola titik + tint tetap */

body.webgl-on .page-3 {
    /* veil gelap tipis supaya teks putih tetap kebaca,
       tapi warna & bokeh canvas masih nembus */
    background:
        linear-gradient(rgba(28,18,32,.58), rgba(28,18,32,.58)),
        radial-gradient(56% 52% at 50% 54%, rgba(255,196,96,.42) 0%, rgba(255,196,96,0) 62%),
        radial-gradient(120% 100% at 50% 124%, rgba(245,51,63,.28), transparent 62%);
}

body.webgl-on .page-4 { background: none; }

body.webgl-on .page-5 { background: none; }

/* Snap antar halaman biar transisinya terasa "berhalaman" */
@media (min-height: 480px) {
    html.webgl-on { scroll-snap-type: y proximity; }
    html.webgl-on .page { scroll-snap-align: start; }
}