/* Flow Wave — background layer. Everything is scoped to html.flow-on, so if WebGL is
   unavailable or the effect bails out, the site keeps its original look untouched. */
#flow-scene{position:fixed;inset:0;width:100%;height:100vh;height:100lvh;display:block;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.2s ease;background:#02160c}
html.flow-on #flow-scene{opacity:1}
html.flow-on[data-flow="inner"] #flow-scene{opacity:.62}

/* Let the canvas show through: neutralise the old fixed gradient layers (also saves GPU compositing). */
html.flow-on{background:#02160c!important}
html.flow-on body{background:transparent!important}
html.flow-on body::before,html.flow-on body::after,html.flow-on body>.bg-field{display:none!important}

/* Hero: keep the staff photo as a quiet texture under the moving particles. */
html.flow-on .hero{background:transparent!important}
html.flow-on #beranda .hero-media{opacity:.42;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%)}
html.flow-on .hero-media::after{background:linear-gradient(180deg,rgba(2,22,12,.55) 0%,rgba(2,22,12,.35) 60%,rgba(2,22,12,0) 100%)!important}
html.flow-on .hero::before,html.flow-on .hero::after{opacity:.5}

/* Dark home sections become translucent glass over the wave; the light paper section stays opaque. */
html.flow-on #beranda .home-stats-visual{background:linear-gradient(180deg,rgba(6,18,14,.6),rgba(7,23,17,.6))!important}
html.flow-on #beranda .values-ribbon{background:rgba(17,39,30,.86)}

@media(max-width:920px){html.flow-on #beranda .hero-media{opacity:.5}}
@media print{#flow-scene{display:none!important}}