/* GZ Hero Cubes: layer dekorasi kotak/balok semi-transparan di belakang hero.
   Semua selector diawali #banner / main.contentBg:has(#banner) agar tidak
   menyentuh elemen lain di situs. Warna ikut tema (merah + gelap), BUKAN biru. */

#banner {
  position: relative;
  isolation: isolate;
}

main.contentBg:has(#banner) {
  overflow-x: clip;
}

#banner > .gz-hero-cubes {
  position: absolute;
  z-index: -1;
  top: -8px;
  bottom: -8px;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint style;
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 80%, transparent 100%);
}

#banner > .gz-hero-cubes > i {
  position: absolute;
  display: block;
  opacity: .4;
  will-change: transform, opacity;
  animation-name: gz-cube-rise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* (a) rounded square/balok terisi alpha rendah-sedang */
#banner > .gz-hero-cubes > i.gz-cube-fill {
  border-radius: 18px;
}

/* (b) outline square/balok tipis */
#banner > .gz-hero-cubes > i.gz-cube-outline {
  background: transparent;
  border-style: solid;
  border-width: 2px;
}

/* (c) diamond (rotate 45deg) - pakai clip-path agar bentuk diam saat transform dianimasikan */
#banner > .gz-hero-cubes > i.gz-cube-diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

@keyframes gz-cube-rise {
  0% {
    transform: translate3d(0, 40px, 0) rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: .9;
  }
  100% {
    transform: translate3d(0, calc(-1 * var(--gz-rise, 460px)), 0) rotate(var(--gz-rot, 12deg));
    opacity: 0;
  }
}

/* === ZONA KIRI: sisi luar kiri container (max-w-screen-xl = 1280px, setengah = 640px) === */
/* 1: filled rounded merah besar, dekat tepi kiri (slip ke banner) */
#banner > .gz-hero-cubes > i:nth-child(1) {
  left: calc(50% - 640px - 20px); bottom: 15%; width: 140px; height: 140px;
  --gz-rise: 460px; --gz-rot: 8deg;
  animation-duration: 30s; animation-delay: -3s;
  background: rgba(255, 0, 0, .22);
  background: color-mix(in srgb, var(--primary, #ff0000) 22%, transparent);
}
/* 2: outline card-primary, agak ke dalam gutter */
#banner > .gz-hero-cubes > i:nth-child(2) {
  left: calc(50% - 640px - 120px); bottom: 40%; width: 110px; height: 110px;
  --gz-rise: 440px; --gz-rot: -12deg;
  animation-duration: 36s; animation-delay: -14s;
  border-color: rgba(49, 60, 76, .45);
  border-color: color-mix(in srgb, var(--card-primary, #313C4C) 45%, transparent);
}
/* 3: balok persegi panjang merah (slip ke banner) */
#banner > .gz-hero-cubes > i:nth-child(3) {
  left: calc(50% - 640px - 60px); bottom: 5%; width: 90px; height: 160px;
  --gz-rise: 480px; --gz-rot: 0deg;
  animation-duration: 33s; animation-delay: -7s;
  background: rgba(255, 0, 0, .20);
  background: color-mix(in srgb, var(--primary, #ff0000) 20%, transparent);
}
/* 4: filled card-primary sangat besar, jauh di gutter kiri */
#banner > .gz-hero-cubes > i:nth-child(4) {
  left: calc(50% - 640px - 200px); bottom: 25%; width: 180px; height: 180px;
  --gz-rise: 460px; --gz-rot: 15deg;
  animation-duration: 40s; animation-delay: -20s;
  background: rgba(49, 60, 76, .28);
  background: color-mix(in srgb, var(--card-primary, #313C4C) 28%, transparent);
}
/* 5: diamond merah kecil di gutter kiri */
#banner > .gz-hero-cubes > i:nth-child(5) {
  left: calc(50% - 640px - 160px); bottom: 55%; width: 70px; height: 70px;
  --gz-rise: 420px; --gz-rot: 90deg;
  animation-duration: 28s; animation-delay: -10s;
  background: rgba(255, 0, 0, .26);
  background: color-mix(in srgb, var(--primary, #ff0000) 26%, transparent);
}
/* 6: outline merah dekat tepi kiri */
#banner > .gz-hero-cubes > i:nth-child(6) {
  left: calc(50% - 640px - 10px); bottom: 60%; width: 90px; height: 90px;
  --gz-rise: 440px; --gz-rot: -8deg;
  animation-duration: 34s; animation-delay: -5s;
  border-color: rgba(255, 0, 0, .38);
  border-color: color-mix(in srgb, var(--primary, #ff0000) 38%, transparent);
}
/* 7: filled rounded card-primary sedang di gutter kiri */
#banner > .gz-hero-cubes > i:nth-child(7) {
  left: calc(50% - 640px - 260px); bottom: 8%; width: 120px; height: 120px;
  --gz-rise: 460px; --gz-rot: 10deg;
  animation-duration: 38s; animation-delay: -17s;
  background: rgba(49, 60, 76, .30);
  background: color-mix(in srgb, var(--card-primary, #313C4C) 30%, transparent);
}
/* 8: balok outline card-primary di gutter kiri */
#banner > .gz-hero-cubes > i:nth-child(8) {
  left: calc(50% - 640px - 90px); bottom: 48%; width: 100px; height: 150px;
  --gz-rise: 470px; --gz-rot: 0deg;
  animation-duration: 31s; animation-delay: -22s;
  border-color: rgba(49, 60, 76, .42);
  border-color: color-mix(in srgb, var(--card-primary, #313C4C) 42%, transparent);
}

/* === ZONA KANAN: sisi luar kanan container (samping kartu "Masuk untuk mulai top up!") === */
/* 9: filled rounded merah besar, dekat tepi kanan (slip ke kartu) */
#banner > .gz-hero-cubes > i:nth-child(9) {
  left: calc(50% + 640px - 30px); bottom: 12%; width: 150px; height: 150px;
  --gz-rise: 460px; --gz-rot: 10deg;
  animation-duration: 32s; animation-delay: -4s;
  background: rgba(255, 0, 0, .24);
  background: color-mix(in srgb, var(--primary, #ff0000) 24%, transparent);
}
/* 10: outline card-primary, agak ke dalam gutter */
#banner > .gz-hero-cubes > i:nth-child(10) {
  left: calc(50% + 640px - 140px); bottom: 38%; width: 120px; height: 120px;
  --gz-rise: 450px; --gz-rot: -14deg;
  animation-duration: 37s; animation-delay: -12s;
  border-color: rgba(49, 60, 76, .46);
  border-color: color-mix(in srgb, var(--card-primary, #313C4C) 46%, transparent);
}
/* 11: balok persegi panjang card-primary (slip ke kartu) */
#banner > .gz-hero-cubes > i:nth-child(11) {
  left: calc(50% + 640px - 70px); bottom: 6%; width: 95px; height: 165px;
  --gz-rise: 480px; --gz-rot: 0deg;
  animation-duration: 35s; animation-delay: -8s;
  background: rgba(49, 60, 76, .26);
  background: color-mix(in srgb, var(--card-primary, #313C4C) 26%, transparent);
}
/* 12: filled merah sangat besar, jauh di gutter kanan */
#banner > .gz-hero-cubes > i:nth-child(12) {
  left: calc(50% + 640px - 220px); bottom: 22%; width: 200px; height: 200px;
  --gz-rise: 460px; --gz-rot: 12deg;
  animation-duration: 41s; animation-delay: -19s;
  background: rgba(255, 0, 0, .20);
  background: color-mix(in srgb, var(--primary, #ff0000) 20%, transparent);
}
/* 13: diamond card-primary kecil di gutter kanan */
#banner > .gz-hero-cubes > i:nth-child(13) {
  left: calc(50% + 640px - 180px); bottom: 58%; width: 60px; height: 60px;
  --gz-rise: 420px; --gz-rot: 90deg;
  animation-duration: 29s; animation-delay: -9s;
  background: rgba(49, 60, 76, .40);
  background: color-mix(in srgb, var(--card-primary, #313C4C) 40%, transparent);
}
/* 14: outline merah dekat tepi kanan */
#banner > .gz-hero-cubes > i:nth-child(14) {
  left: calc(50% + 640px - 15px); bottom: 62%; width: 100px; height: 100px;
  --gz-rise: 440px; --gz-rot: -10deg;
  animation-duration: 33s; animation-delay: -6s;
  border-color: rgba(255, 0, 0, .36);
  border-color: color-mix(in srgb, var(--primary, #ff0000) 36%, transparent);
}
/* 15: filled rounded card-primary sedang di gutter kanan */
#banner > .gz-hero-cubes > i:nth-child(15) {
  left: calc(50% + 640px - 270px); bottom: 10%; width: 130px; height: 130px;
  --gz-rise: 460px; --gz-rot: 14deg;
  animation-duration: 39s; animation-delay: -16s;
  background: rgba(49, 60, 76, .30);
  background: color-mix(in srgb, var(--card-primary, #313C4C) 30%, transparent);
}
/* 16: balok outline merah di gutter kanan */
#banner > .gz-hero-cubes > i:nth-child(16) {
  left: calc(50% + 640px - 100px); bottom: 46%; width: 110px; height: 155px;
  --gz-rise: 470px; --gz-rot: 0deg;
  animation-duration: 30s; animation-delay: -21s;
  border-color: rgba(255, 0, 0, .44);
  border-color: color-mix(in srgb, var(--primary, #ff0000) 44%, transparent);
}

/* Sembunyikan separuh kubus (elemen genap) di layar sedang */
@media (max-width: 1023px) {
  #banner > .gz-hero-cubes > i:nth-child(even) {
    display: none;
  }
}

/* Sembunyikan seluruh layer di HP */
@media (max-width: 767px) {
  #banner > .gz-hero-cubes {
    display: none;
  }
}

/* Reduced motion: kubus statis, opacity rendah, tanpa animasi */
@media (prefers-reduced-motion: reduce) {
  #banner > .gz-hero-cubes > i {
    animation: none;
    opacity: .18;
  }
}