/* Benda 3D yang melayang di hero beranda: alat kerja para pengguna
 * AturJadwal — hair dryer, gitar, mic, kamera.
 *
 * Gambarnya dirender sendiri, putih total seperti tanah liat (clay/whiteout):
 * detailnya muncul dari bentuk dan bayangan, bukan warna, jadi keempatnya
 * terbaca satu set dan tidak bersaing dengan ponsel. Bentuk, arah, dan
 * cahayanya diatur di scripts/hero-props/render.html, lalu
 * `npm run landing:props` menulis ulang WebP-nya — jangan sunting gambarnya
 * langsung. Ada dua set: siang (untuk gradien biru) dan malam (-dark, cahaya
 * bulan). Set malam dipasang lewat .uc-dark, jadi tiap pengunjung hanya
 * mengunduh set temanya. Di ponsel (< md) sengaja tanpa benda.
 *
 * Tiga lapis gerak, masing-masing di properti sendiri supaya tidak saling timpa:
 *   .aj-prop       transform  gulir parallax (anime.js, data-anime onscroll)
 *                  translate  ikut kursor (ditulis aj-hero-device.js, sejauh --depth)
 *   .aj-prop-body  translate  intro: masuk dari samping sambil memudar
 *                  transform  melayang naik-turun sambil sedikit bergoyang
 * Semuanya transform/opacity, jadi dikerjakan compositor.
 *
 * Jangan pernah membuat benda ini `display: none` lewat sesuatu yang bisa
 * berkedip sesaat (container query, kelas yang dipasang-copot): display none
 * membatalkan animasinya, dan begitu tampil lagi intronya diputar ulang dari
 * transparan — bendanya terlihat hilang lalu muncul lagi beberapa detik
 * kemudian.
 */

.aj-prop {
  position: absolute;
  pointer-events: none;
  /* --depth: seberapa "dekat" bendanya. Makin dekat, makin jauh ia bergeser
     berlawanan arah kursor — ponselnya sendiri condong ke arah kursor. */
  --depth: 0.5;
}

.aj-prop-body {
  width: 100%;
  height: 100%;
  background: center / contain no-repeat;
  animation:
    aj-prop-in 1.8s cubic-bezier(0.22, 1, 0.36, 1) var(--in-delay, 0.6s) backwards,
    aj-prop-bob var(--bob, 8s) ease-in-out var(--bob-delay, 0s) infinite alternate;
}

@keyframes aj-prop-in {
  from {
    opacity: 0;
    translate: var(--in-x, -56px) 0;
  }
}

@keyframes aj-prop-bob {
  from {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  to {
    transform: translate3d(0, var(--bob-y, -10px), 0) rotate(var(--bob-r, 2deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .aj-prop-body {
    animation: none;
  }

  /* Gulir parallax-nya ditulis anime.js sebagai inline style; !important di
     sini tetap mengalahkannya. */
  .aj-prop {
    transform: none !important;
  }
}

/* Benda. aspect-ratio = ukuran gambarnya, jadi cukup satu sisi yang diatur. */
.aj-prop.is-dryer {
  aspect-ratio: 480 / 645;
}

.aj-prop.is-guitar {
  aspect-ratio: 800 / 436;
}

.aj-prop.is-mic {
  aspect-ratio: 420 / 625;
}

.aj-prop.is-camera {
  aspect-ratio: 600 / 528;
}

.aj-prop.is-dryer .aj-prop-body {
  background-image: url(../images/aj/hero/props/prop-dryer.webp);
}

.aj-prop.is-guitar .aj-prop-body {
  background-image: url(../images/aj/hero/props/prop-guitar.webp);
}

.aj-prop.is-mic .aj-prop-body {
  background-image: url(../images/aj/hero/props/prop-mic.webp);
}

.aj-prop.is-camera .aj-prop-body {
  background-image: url(../images/aj/hero/props/prop-camera.webp);
}

.uc-dark .aj-prop.is-dryer .aj-prop-body {
  background-image: url(../images/aj/hero/props/prop-dryer-dark.webp);
}

.uc-dark .aj-prop.is-guitar .aj-prop-body {
  background-image: url(../images/aj/hero/props/prop-guitar-dark.webp);
}

.uc-dark .aj-prop.is-mic .aj-prop-body {
  background-image: url(../images/aj/hero/props/prop-mic-dark.webp);
}

.uc-dark .aj-prop.is-camera .aj-prop-body {
  background-image: url(../images/aj/hero/props/prop-camera-dark.webp);
}

/* ── Hair dryer & gitar: di atas & bawah teks (lg ke atas) ─────────────────
   Teksnya putih, jadi benda putih tidak boleh sedikit pun lewat di
   belakangnya. Kolom teks direntang setinggi hero, lalu ruang kosong di atas
   dan di bawah blok teks diisi dua slot sama besar — blok teksnya tetap di
   tengah seperti sebelumnya. Bendanya menyesuaikan tinggi slotnya (tinggi
   slot = ruang yang memang kosong), dan kalau ruangnya terlalu sempit (layar
   pendek: 1280x720, 1366x650) ia disembunyikan, bukan dipaksa menimpa judul. */
.aj-prop-slot {
  display: none;
}

@media (min-width: 992px) {
  .aj-hero-copycol {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  /* .vstack (Bootstrap) membawa flex: 1 1 auto — di kolom flex ini ia akan
     ikut memakan ruang kosong dan hurufnya naik ke atas. */
  .aj-hero-copycol > .aj-hero-copy {
    flex: none;
  }

  .aj-prop-slot {
    display: block;
    flex: 1 1 0;
    min-height: 0;
    position: relative;
    container: aj-prop-slot / size;
  }

  /* Bendanya sebesar ruang kosongnya (maks 240px), di tengah rentang
     top..bottom (margin-block: auto) — di layar yang sangat tinggi ia
     mengambang di tengah, bukan menempel ke judul. Rentangnya masuk 20px ke
     padding blok teks (py-4, 24px): tersisa 4px + margin gambar + ruang huruf,
     ~15px ke huruf judul / tombol terdekat. Di sisi tepi hero ia berhenti 14px
     sebelum garis navbar / dasar hero, dan ayunannya (6-7px) menjauhi teks,
     begitu juga gulirnya di data-anime: yang atas naik, yang bawah turun. */
  .aj-prop.is-dryer {
    left: -8%;
    top: 14px;
    bottom: -20px;
    margin-block: auto;
    height: min(calc(100% + 6px), 240px);
    --depth: 0.7;
    --in-delay: 0.7s;
    --bob: 9s;
    --bob-delay: -3s;
    --bob-y: -6px;
    --bob-r: 3deg;
  }

  .aj-prop.is-guitar {
    left: 30%;
    top: -20px;
    bottom: 14px;
    margin-block: auto;
    height: min(calc(100% + 6px), 240px);
    --depth: 0.35;
    --in-delay: 0.9s;
    --bob: 7s;
    --bob-y: 7px;
    --bob-r: -2deg;
  }
}

/* Gitar ([data-aj-prop-teleport]) dipindah ke <body> oleh teleportProp() di
   aj-hero-device.js, ke host .ajd-teleport yang sama dengan ponsel (z-index
   1000, di atas navbar dan semua seksi): di dasar hero ia turun saat digulir,
   dan di tempat asalnya ia terpotong dasar #hero_header lalu tertimpa seksi
   berikutnya. Kotaknya disalin dari "bayangan"-nya di slot sebagai inline
   left/top/width/height; sisa aturan letak slot (bottom, margin auto) harus
   dinetralkan di sini supaya tidak ikut menarik kotaknya. */
.ajd-teleport > .aj-prop.is-teleported {
  right: auto;
  bottom: auto;
  margin: 0;
}

/* Kurang dari ~66px tinggi benda: terlalu kecil untuk dikenali dan terlalu
   mepet ke teks — lebih baik tidak ada. `visibility`, bukan `display: none`:
   saat tata letak dihitung ulang (resize, dsb.) Chrome sempat mengukur
   slotnya 0px, jadi kueri ini cocok sesaat; display none di momen itu akan
   memutar ulang intro bendanya (lihat catatan di atas). */
@container aj-prop-slot (max-height: 60px) {
  .aj-prop {
    visibility: hidden;
  }
}

/* ── Mic & kamera: di sisi ponsel ─────────────────────────────────────────
   Diletakkan di kolom ponsel desktop (.aj-hero-visual-desk), yang tetap di
   hero walaupun ponselnya dipindah ke <body>. Ponselnya di atas segalanya
   (z-index 1000), jadi benda yang menyelip di tepinya tampil di belakangnya. */
.aj-prop.is-mic {
  --depth: 0.25;
  --in-x: 56px;
  --in-delay: 1s;
  --bob: 10s;
  --bob-delay: -6s;
  --bob-y: -8px;
  --bob-r: 3deg;
}

.aj-prop.is-camera {
  --depth: 0.6;
  --in-x: 56px;
  --in-delay: 1.15s;
  --bob: 8s;
  --bob-delay: -1.5s;
  --bob-r: -3deg;
}

/* Tablet (md): ponselnya bertumpuk di bawah teks, di tengah kolom. Kamera di
   kirinya (lensanya menghadap ke kiri) dan mic di kanannya (kepalanya
   condong ke kanan), keduanya menyelip 24px ke belakang ponsel. Lebar
   ponselnya rumus yang sama dengan .ajd-device.is-hero-desk di aj-polish.css. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .aj-hero-visual-desk {
    --aj-phone-w: clamp(200px, calc((100vh - 240px) * 466 / 982), 290px);
  }

  .aj-prop.is-camera {
    right: calc(50% + var(--aj-phone-w) / 2 - 24px);
    top: 16%;
    width: min(30vw, 270px);
    --in-x: -56px;
  }

  .aj-prop.is-mic {
    left: calc(50% + var(--aj-phone-w) / 2 - 24px);
    top: 42%;
    width: min(22vw, 180px);
  }
}

/* lg ke atas: ponselnya merapat ke kanan kolom, berhenti 144px sebelum tepi
   kolom (padding di aj-polish.css). Ukuran bendanya persen tinggi kolom, dan
   tinggi kolom = tinggi hero, yang ikut tinggi ponsel. Mic menyelip di
   belakang tepi kanan ponsel; kamera sedikit di luarnya. */
@media (min-width: 992px) {
  .aj-prop.is-mic {
    left: calc(100% - 144px - 22px);
    top: 6%;
    height: 32%;
  }

  .aj-prop.is-camera {
    left: calc(100% - 144px + 18px);
    top: 46%;
    height: 27%;
  }
}