/* ============================================================
   SITE BACKGROUND + HERO FX — masri.cloud
   Dicabut dengan menghapus satu <link> di index.html.

   Tata lapisan (dari paling belakang):
     canvas   : background body, opaque           (var(--bg))
     z -3     : foto, position:fixed  -> DIAM saat scroll
     z -2     : scrim foto
     z -1     : .aurora-mesh yang sudah ada       (jangan diganggu)
      0..2    : lapisan lokal di dalam .hero
      3       : isi hero
   ============================================================ */

/* ── LAPISAN GLOBAL: foto terkunci ke viewport ──────────────
   position:fixed, bukan background-attachment:fixed, karena
   background-attachment patah/berat di Safari iOS.
   Tanpa animasi: lapisan ini hadir sepanjang halaman, jadi
   biaya compositing-nya harus nol saat scroll. */
body::before{
  content:'';
  position:fixed; inset:0; z-index:-3;
  background:url('/assets/img/digitalekosistem-800.webp') center center/cover no-repeat;
  opacity:.13;
  filter:saturate(1.15);
}
@media (min-width:801px){
  body::before{ background-image:url('/assets/img/digitalekosistem.webp'); }
}

/* Scrim global: vignette supaya tepi layar meredup dan teks
   di section mana pun tetap nyaman dibaca. */
body::after{
  content:'';
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1400px 820px at 50% 0%,
      rgba(5,8,16,.18) 0%,
      rgba(5,8,16,.62) 58%,
      rgba(5,8,16,.84) 100%);
}

/* Tema terang: foto jauh lebih tipis, scrim jadi putih. */
[data-theme="light"] body::before{ opacity:.07; }
[data-theme="light"] body::after{
  background:
    radial-gradient(1400px 820px at 50% 0%,
      rgba(248,250,255,.30) 0%,
      rgba(248,250,255,.74) 58%,
      rgba(248,250,255,.90) 100%);
}

/* Ponsel: lapisan global diredam lagi. */
@media (max-width:640px){
  body::before{ opacity:.09; }
}


/* Foto: lapisan paling bawah di dalam hero. */
.hero::before{
  content:'';
  position:absolute; inset:0; z-index:0;
  background:url('/assets/img/digitalekosistem-800.webp') center 42%/cover no-repeat;
  opacity:.20;   /* + lapisan global .13 = kira-kira sepekat sebelumnya */
  filter:saturate(1.18) contrast(1.05);
  transform:scale(1.06);
  animation:heroKenburns 52s ease-in-out infinite alternate;
  will-change:transform;
}
@media (min-width:801px){
  .hero::before{ background-image:url('/assets/img/digitalekosistem.webp'); }
}

/* Scrim: menjaga judul dan tombol tetap terbaca di atas foto. */
.hero::after{
  content:'';
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(10,15,28,.62) 0%,
      rgba(10,15,28,.76) 45%,
      rgba(10,15,28,.93) 82%,
      var(--masri-dark, #0A0F1C) 100%),
    linear-gradient(100deg,
      rgba(10,15,28,.86) 0%,
      rgba(10,15,28,.55) 46%,
      rgba(10,15,28,.20) 100%);
}

/* Aurora + grid halus. Murni dekoratif. */
.hero__fx{
  position:absolute; inset:0; z-index:2;
  pointer-events:none; overflow:hidden;
}
.hero__fx i{
  position:absolute; display:block; border-radius:50%;
  filter:blur(80px); opacity:.34; mix-blend-mode:screen;
  will-change:transform;
}
.hero__fx i:nth-child(1){
  width:460px; height:460px; top:-140px; left:-100px;
  background:radial-gradient(circle,#3b82f6 0%,transparent 70%);
  animation:heroDrift 30s ease-in-out infinite alternate;
}
.hero__fx i:nth-child(2){
  width:400px; height:400px; top:26%; right:-130px;
  background:radial-gradient(circle,#00F0C8 0%,transparent 70%);
  animation:heroDrift 38s ease-in-out 2s infinite alternate-reverse;
}
.hero__fx i:nth-child(3){
  width:540px; height:540px; bottom:-230px; left:34%;
  background:radial-gradient(circle,#6366f1 0%,transparent 72%);
  animation:heroDrift 44s ease-in-out 1s infinite alternate;
}
.hero__fx::after{
  content:''; position:absolute; inset:0; opacity:.45;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 78px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.04) 0 1px, transparent 1px 78px);
  -webkit-mask-image:radial-gradient(1000px 560px at 50% 0%, #000 0%, transparent 74%);
          mask-image:radial-gradient(1000px 560px at 50% 0%, #000 0%, transparent 74%);
}

/* Isi hero tetap di atas semua lapisan dekoratif. */
.hero__inner{ z-index:3; }
.hero__visual{ position:relative; z-index:3; }

@keyframes heroKenburns{
  from{ transform:scale(1.04) translate3d(0,0,0); }
  to  { transform:scale(1.14) translate3d(-1.4%,-2%,0); }
}
@keyframes heroDrift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(64px,-48px,0) scale(1.2); }
}

/* Ponsel: foto sedikit diredam supaya teks tetap kontras. */
@media (max-width:640px){
  .hero::before{ opacity:.17; }
  .hero__fx i{ filter:blur(60px); opacity:.28; }
}

@media (prefers-reduced-motion:reduce){
  .hero::before,
  .hero__fx i{ animation:none !important; }
}