/* Gerak beranda (bangun.py menempelkan berkas ini sesudah situs-roas.css).
   Dua jenis gerak:
     1. Hero: murni CSS, jalan sejak lukisan pertama. Tidak ada yang
        disembunyikan lewat JS di atas lipatan, jadi tidak ada kedip.
     2. Bagian di bawah lipatan: keadaan awal (transparan, bergeser) hanya
        berlaku kalau situs-gerak.js menaruh kelas "gerak" di <html>. Tanpa
        JS, atau dengan prefers-reduced-motion, semua isi tampil apa adanya.
   Kurva: --gerak-keluar untuk benda yang tiba, --gerak-pegas untuk kartu
   yang mendarat sedikit melewati tujuannya. */

:root {
  --gerak-keluar: cubic-bezier(.22, 1, .36, 1);
  --gerak-pegas: cubic-bezier(.34, 1.45, .64, 1);
}

/* ------------------------------------------------------------ bilah baca */
.gerak-bilah {
  position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #ffb49e, var(--orange) 45%, #c9341b);
  transform: scaleX(0); transform-origin: left; pointer-events: none;
}

/* ------------------------------------------------------------ hero */
/* Garis kuas di bawah "tanpa boncos." ditarik dari kiri setelah judul tiba. */
.hero-copy h1 span { animation: gerak-kuas .9s .55s var(--gerak-keluar) both; }
@keyframes gerak-kuas { from { background-size: 0% .24em; } to { background-size: 100% .24em; } }

/* Isi hero tiba berurutan, bukan satu blok seperti di landing.css. */
.hero-copy { animation: none; }
.hero-copy .eyebrow { animation: landing-fade-up .6s var(--gerak-keluar) both; }
.hero-copy h1 { animation: landing-fade-up .7s .08s var(--gerak-keluar) both; }
.hero-copy .hero-lead { animation: landing-fade-up .7s .16s var(--gerak-keluar) both; }
.hero-copy .hero-actions { animation: landing-fade-up .7s .24s var(--gerak-keluar) both; }
.hero-copy .hero-proof { animation: landing-fade-up .7s .32s var(--gerak-keluar) both; }

/* Kilau lewat di tombol utama saat disorot. */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after {
  position: absolute; inset: 0; z-index: -1; content: "";
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .32) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--gerak-keluar);
}
.btn-primary:hover::after { transform: translateX(120%); }
.btn-primary:active { transform: translateY(1px) scale(.985); }

/* Kartu ROAS jatuh ke tempatnya dengan pegas, lalu mulai melayang. */
.hero-roas { animation: gerak-roas-tiba .85s .45s var(--gerak-pegas) both, apung 6.5s 1.3s ease-in-out infinite; }
@keyframes gerak-roas-tiba {
  from { opacity: 0; transform: translateY(-18px) scale(.92) rotate(2deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
/* Skala Rugi sampai Prospektif terisi dari kiri, seperti hasil hitungan muncul. */
.hero-roas .skala-roas.kecil { animation: gerak-sapu 1s .95s var(--gerak-keluar) both; }
@keyframes gerak-sapu { from { clip-path: inset(0 100% 0 0 round 99px); } to { clip-path: inset(0 0 0 0 round 99px); } }
.hero-roas-angka span { animation: landing-fade-up .5s var(--gerak-keluar) both; }
.hero-roas-angka span:first-child { animation-delay: 1.2s; }
.hero-roas-angka span:last-child { animation-delay: 1.32s; }
/* Titik oranye berdenyut: kalkulatornya "hidup". */
.hero-roas-titik { position: relative; }
.hero-roas-titik::after {
  position: absolute; inset: -4px; border-radius: 50%; content: "";
  border: 2px solid var(--orange); opacity: 0; animation: gerak-denyut-titik 2.2s 1.6s ease-out infinite;
}
@keyframes gerak-denyut-titik { 0% { opacity: .7; transform: scale(.6); } 80%, 100% { opacity: 0; transform: scale(2.1); } }

/* Paralaks penunjuk: situs-gerak.js menyetel --px dan --py (-1 sampai 1) di
   .hero-tangkapan. Memakai properti translate supaya tidak bertabrakan dengan
   transform milik animasi apung dan rotate panel ringkas. */
.hero-tangkapan { --px: 0; --py: 0; }
.hero-tangkapan .dashboard-window { translate: calc(var(--px) * 6px) calc(var(--py) * 5px); transition: translate .5s var(--gerak-keluar); }
.hero-panel-ringkas { translate: calc(var(--px) * -14px) calc(var(--py) * -10px); transition: translate .5s var(--gerak-keluar); }
.hero-roas { translate: calc(var(--px) * -18px) calc(var(--py) * -14px); transition: translate .5s var(--gerak-keluar); }

@media (max-width: 560px) {
  /* Di HP kartu ROAS duduk di alur halaman, jadi cukup tiba tanpa melayang. */
  .hero-roas { animation: gerak-roas-tiba .85s .45s var(--gerak-pegas) both; }
}

/* ------------------------------------------------------------ tiba saat digulir */
html.gerak [data-gerak] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s var(--gerak-keluar), transform .7s var(--gerak-keluar);
  transition-delay: var(--gerak-jeda, 0ms);
}
html.gerak [data-gerak="kanan"] { transform: translateX(28px); }
html.gerak [data-gerak="kiri"] { transform: translateX(-28px); }
html.gerak [data-gerak="besar"] { transform: translateY(26px) scale(.96); }
html.gerak [data-gerak].tiba { opacity: 1; transform: none; }

/* Kata miring di judul bagian mendapat sapuan stabilo setelah judulnya tiba. */
.section-heading h2 em {
  background: linear-gradient(transparent 62%, rgba(255, 140, 105, .22) 62%, rgba(255, 140, 105, .22) 92%, transparent 92%) left / 100% 100% no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
html.gerak .section-heading h2[data-gerak] em { background-size: 0% 100%; transition: background-size 1s .45s var(--gerak-keluar); }
html.gerak .section-heading h2[data-gerak].tiba em { background-size: 100% 100%; }

/* ------------------------------------------------------------ struk */
/* Baris potongan tercetak satu per satu, lalu kotak sisa muncul dengan pegas.
   Jeda tiap baris disetel JS lewat --gerak-jeda. */
html.gerak .struk li[data-gerak] { transform: translateX(-14px); }
html.gerak .struk li[data-gerak].tiba { transform: none; }
html.gerak .struk li[data-gerak] b { display: inline-block; opacity: 0; transform: translateX(10px); transition: opacity .45s var(--gerak-keluar), transform .45s var(--gerak-keluar); transition-delay: calc(var(--gerak-jeda, 0ms) + 140ms); }
html.gerak .struk li[data-gerak].tiba b { opacity: 1; transform: none; }
html.gerak .struk-sisa[data-gerak] { transform: scale(.94); transition-timing-function: var(--gerak-pegas); }
html.gerak .struk-sisa[data-gerak].tiba { transform: none; }
.struk-sisa strong, .banding strong { font-variant-numeric: tabular-nums; }
.struk-rumus b { display: inline-block; }
.struk-rumus.tiba b { animation: gerak-letup .6s .5s var(--gerak-pegas) both; }
@keyframes gerak-letup { 0% { transform: scale(1); } 45% { transform: scale(1.35); color: var(--orange); } 100% { transform: scale(1); } }

/* Angka rugi bergetar sekali setelah selesai dihitung (kelas dari JS). */
.banding.rugi strong { display: block; width: fit-content; }
.banding.rugi strong.getar { animation: gerak-getar .5s ease-in-out; }
@keyframes gerak-getar { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.banding { transition: transform .25s var(--gerak-keluar), box-shadow .25s; }
.banding:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(25, 29, 36, .35); }

/* Skala target di bagian boncos tersapu dari kiri saat masuk layar. */
html.gerak .roas-skala-kartu[data-gerak] .skala-roas { clip-path: inset(0 100% 0 0 round 10px); transition: clip-path 1.1s .25s var(--gerak-keluar); }
html.gerak .roas-skala-kartu[data-gerak].tiba .skala-roas { clip-path: inset(0 0 0 0 round 10px); }
html.gerak .roas-skala-kartu[data-gerak] .skala-ket > div { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--gerak-keluar), transform .5s var(--gerak-keluar); }
html.gerak .roas-skala-kartu[data-gerak].tiba .skala-ket > div { opacity: 1; transform: none; }
.roas-skala-kartu .skala-ket > div:nth-child(1) { transition-delay: .7s; }
.roas-skala-kartu .skala-ket > div:nth-child(2) { transition-delay: .8s; }
.roas-skala-kartu .skala-ket > div:nth-child(3) { transition-delay: .9s; }
.roas-skala-kartu .skala-ket > div:nth-child(4) { transition-delay: 1s; }

/* ------------------------------------------------------------ kalkulator */
/* Setiap kali hasil berubah, angka ROAS impas berdenyut supaya mata tahu
   hitungannya baru. Vonis turun pelan saat muncul. */
.hasil-utama strong { transform-origin: left center; }
.hasil-utama strong.denyut { animation: gerak-denyut-angka .45s var(--gerak-pegas); }
@keyframes gerak-denyut-angka { 0% { transform: scale(1); } 40% { transform: scale(1.07); color: #ffd2c4; } 100% { transform: scale(1); } }
.hasil-rinci b { display: inline-block; }
.hasil-rinci b.denyut { animation: gerak-kedip-angka .45s ease-out; }
@keyframes gerak-kedip-angka { 0% { opacity: .35; transform: translateY(3px); } 100% { opacity: 1; transform: none; } }
.hasil-vonis:not([hidden]) { animation: gerak-vonis .5s var(--gerak-keluar); }
.hasil-vonis.ganti { animation: gerak-vonis-ganti .45s var(--gerak-keluar); }
@keyframes gerak-vonis { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes gerak-vonis-ganti { 0% { transform: scale(.97); } 60% { transform: scale(1.015); } 100% { transform: scale(1); } }
.isian { transition: border-color .15s, box-shadow .25s var(--gerak-keluar), background .15s, transform .25s var(--gerak-keluar); }
.isian:focus-within { transform: translateY(-1px); }

/* ------------------------------------------------------------ alat iklan */
.alur-kartu { transition: transform .35s var(--gerak-keluar), box-shadow .35s, border-color .35s, opacity .7s var(--gerak-keluar); }
.alur-kartu:hover { border-color: #ffc9b6; box-shadow: 0 26px 50px -28px rgba(201, 52, 27, .35); }
html.gerak .alur-kartu[data-gerak] { transition: opacity .7s var(--gerak-keluar), transform .7s var(--gerak-keluar), box-shadow .35s, border-color .35s; transition-delay: var(--gerak-jeda, 0ms), var(--gerak-jeda, 0ms), 0ms, 0ms; }
html:not(.gerak) .alur-kartu:hover, html.gerak .alur-kartu.tiba:hover { transform: translateY(-4px); }
/* Tangkapan layar yang tinggi menggulir isinya sendiri: sekali saat kartu tiba
   (sebagai petunjuk ada isi di bawah), dan penuh selama kartu disorot. */
.alur-gambar.tinggi img { transition: object-position 3.2s cubic-bezier(.45, 0, .2, 1); }
.alur-kartu.tiba .alur-gambar.tinggi img { animation: gerak-intip 3.6s .7s cubic-bezier(.45, 0, .2, 1) both; }
@keyframes gerak-intip { 0%, 100% { object-position: 50% 0%; } 45%, 55% { object-position: 50% 26%; } }
@media (hover: hover) and (pointer: fine) {
  .alur-kartu:hover .alur-gambar.tinggi img { animation: none; object-position: 50% 100%; }
}
.alur-kartu.lebar .alur-gambar img { transition: transform .8s var(--gerak-keluar); }
.alur-kartu.lebar:hover .alur-gambar img { transform: scale(1.035); }
.alur-nomor { display: inline-block; transition: letter-spacing .35s var(--gerak-keluar), color .35s; }
.alur-kartu:hover .alur-nomor { letter-spacing: .06em; }

/* Ikon centang tergambar saat daftarnya tiba. */
html.gerak [data-gerak] .check-icon path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .5s var(--gerak-keluar); }
html.gerak [data-gerak].tiba .check-icon path { stroke-dashoffset: 0; }
html.gerak [data-gerak].tiba li:nth-child(1) .check-icon path { transition-delay: .35s; }
html.gerak [data-gerak].tiba li:nth-child(2) .check-icon path { transition-delay: .47s; }
html.gerak [data-gerak].tiba li:nth-child(3) .check-icon path { transition-delay: .59s; }
html.gerak [data-gerak].tiba li:nth-child(4) .check-icon path { transition-delay: .71s; }

html[data-theme="dark"] .alur-kartu:hover { border-color: #5a3326; }
html[data-theme="dark"] .section-heading h2 em { background-image: linear-gradient(transparent 62%, rgba(238, 77, 45, .28) 62%, rgba(238, 77, 45, .28) 92%, transparent 92%); }

@media (prefers-reduced-motion: reduce) {
  .hero-roas, .hero-roas .skala-roas.kecil, .hero-copy h1 span, .hero-roas-titik::after { animation: none !important; }
  .gerak-bilah { display: none; }
  .hero-tangkapan { --px: 0 !important; --py: 0 !important; }
}