/* Awan latar hero beranda: potongan foto langit asli (CC0), putih dengan
 * alpha — bagian awan yang teduh lebih tembus, jadi gradien biru merek yang
 * mengisi bayangannya dan awannya terbaca lebur, bukan tempelan. Foto
 * sumber, cara memotong, dan susunan tiap pita ada di
 * scripts/generate_hero_clouds.py (`npm run landing:clouds`) — jangan
 * sunting gambarnya langsung.
 *
 * Dua pita melayang ke kanan dengan kecepatan berbeda: yang jauh berawan
 * kecil, lebih pudar, dan lebih lambat, jadi langitnya terbaca berlapis.
 * Tiap pita = satu ubin yang bisa diulang ke samping, dijejer tiga (lebar
 * pita = 3 ubin lewat aspect-ratio), lalu digeser tepat satu ubin per
 * putaran: saat animasinya kembali ke awal isinya identik, tanpa sambungan.
 * Tiga, bukan dua, karena selama bergeser pita harus tetap menutupi hero
 * selebar apa pun — dua ubin sisa sudah lebih lebar daripada layar ultrawide.
 * Geraknya cuma transform, dikerjakan compositor.
 *
 * Hanya di mode terang: di gelap hero sengaja polos (aj-dark-theme.css).
 * Beda dengan benda 3D (aj-hero-props.css), awan ini tetap ada di HP — ia
 * latar, bukan benda yang butuh ruang kosong.
 */

.aj-hero-clouds {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Paling jelas di biru pekat atas; di baris judul & paragraf ditipiskan
     supaya teks putih tetap terbaca, lalu larut sebelum dasar hero yang
     sudah pucat. Awan yang melintas di baris teks jadi tampak teduh di
     bagian bawahnya, seperti awan sungguhan. */
  --aj-cloud-mask: linear-gradient(180deg, #000 0%, #000 26%, rgba(0, 0, 0, 0.5) 42%, rgba(0, 0, 0, 0.5) 64%, #000 74%, transparent 96%);
  -webkit-mask-image: var(--aj-cloud-mask);
  mask-image: var(--aj-cloud-mask);
  animation: aj-clouds-in 2.4s ease-out 0.3s backwards;
}

.aj-cloud-band {
  position: absolute;
  top: 0;
  left: 0;
  background: 0 0 / 33.3333% 100% repeat-x;
  opacity: var(--aj-cloud-opacity);
  /* Tanpa delay: bingkai pertama = susunan yang dirancang di skrip. */
  animation: aj-cloud-drift var(--aj-cloud-drift) linear infinite;
}

/* aspect-ratio = 3 x rasio ubin di scripts/generate_hero_clouds.py (BANDS). */
.aj-cloud-band.is-far {
  height: 60%;
  aspect-ratio: 12 / 1;
  background-image: url(../images/aj/hero/clouds/far.webp);
  --aj-cloud-opacity: 0.35;
  --aj-cloud-drift: 260s;
}

.aj-cloud-band.is-near {
  height: 100%;
  aspect-ratio: 9 / 1;
  background-image: url(../images/aj/hero/clouds/near.webp);
  --aj-cloud-opacity: 0.45;
  --aj-cloud-drift: 160s;
}

@keyframes aj-cloud-drift {
  from {
    transform: translate3d(-33.3333%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes aj-clouds-in {
  from {
    opacity: 0;
  }
}

/* visibility, bukan display: pitanya tetap di tempat (dijeda), jadi saat
   kembali ke terang lewat View Transition awannya tidak melompat ke awal. */
.uc-dark .aj-hero-clouds {
  visibility: hidden;
}

.uc-dark .aj-cloud-band {
  animation-play-state: paused;
}

/* Di bawah lg teksnya di atas dan ponselnya di bawah, jadi awan tidak punya
   ruang kosong — ia lewat di belakang teks. Blok teksnya mulai di tempat
   yang sama di HP & tablet: judul 2 baris s.d. ~120px dari atas hero, lalu
   paragraf & tombol. Di HP sempit (<= 360px) judulnya 3 baris dan semuanya
   turun ~45px, jadi zona yang ditipiskan dibuat lebar (110-305px) supaya
   paragrafnya tetap tercakup. Hero di sini tinggi (1.100-an px, ponselnya
   menggantung), jadi awan diukur dari lebar layar: seukuran tinggi hero,
   satu awan bisa lebih lebar daripada layarnya. */
@media (max-width: 991.98px) {
  .aj-hero-clouds {
    --aj-cloud-mask: linear-gradient(180deg, #000 0, #000 110px, rgba(0, 0, 0, 0.4) 130px, rgba(0, 0, 0, 0.4) 280px, #000 305px, #000 60%, transparent 96%);
  }

  .aj-cloud-band.is-far {
    height: min(50vw, 400px);
  }

  .aj-cloud-band.is-near {
    height: min(80vw, 640px);
  }
}

/* HP: gradiennya sudah putih di tengah hero dan ponselnya mulai ~370-430px
   dari atas — awan cukup sampai puncak ponsel. */
@media (max-width: 767.98px) {
  .aj-hero-clouds {
    --aj-cloud-mask: linear-gradient(180deg, #000 0, #000 110px, rgba(0, 0, 0, 0.4) 130px, rgba(0, 0, 0, 0.4) 280px, #000 305px, transparent 450px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aj-hero-clouds,
  .aj-cloud-band {
    animation: none;
  }
}