/* ══════════════════════════════════════════════════════════════════
   MOTION.CSS — SISTEM GERAK (Fase 14+)
   ══════════════════════════════════════════════════════════════════
   FILOSOFI — kenapa gerakan di sini terasa mewah, bukan norak:

   1. LAMBAT. Durasi 0,8–20 detik. Animasi cepat (0,2–0,3s) terasa
      "murah" & mengagetkan; animasi lambat terasa disengaja & tenang.
   2. JARAK KECIL. Elemen bergerak 12–20px, bukan melompat 100px.
      Gerakan besar menarik perhatian ke DIRINYA SENDIRI, bukan ke
      isi kontennya — itu ciri desain amatir.
   3. TANPA PANTULAN. Kurva ease-out murni, tidak ada bounce/elastic.
      Efek pantul terasa main-main, tidak cocok utk merek premium.
   4. TIDAK ADA yang berkedip, berputar, atau berpendar warna-warni.
      Itu ciri paling kentara "template gratisan".
   5. SEKALI JALAN. Elemen muncul sekali saat discroll, lalu diam.
      Yang terus bergerak HANYA 2: kilau emas pada logo & pergeseran
      halus latar hero — keduanya sangat lambat & nyaris tak disadari.
   6. HORMATI PENGGUNA. Semua mati total kalau perangkat menyalakan
      "kurangi gerakan" (penting utk yg sensitif gerakan/vertigo).
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. MUNCUL SAAT DISCROLL ──────────────────────────────
   Dipasang otomatis oleh motion.js. Elemen naik pelan sambil
   memudar masuk — bahasa visual majalah editorial. */
.rise {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1),
              transform .9s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.rise.in { opacity: 1; transform: translateY(0); }

/* Jeda bertingkat — kartu muncul berurutan, bukan serentak.
   Selisihnya kecil (90ms) supaya terasa mengalir, bukan patah-patah. */
.rise-d1 { transition-delay: .09s }
.rise-d2 { transition-delay: .18s }
.rise-d3 { transition-delay: .27s }
.rise-d4 { transition-delay: .36s }

/* ── 2. KILAU EMAS PADA LOGO ──────────────────────────────
   Cahaya yang bergerak perlahan melintasi huruf, seperti cahaya
   memantul di logam asli. 6 detik sekali putaran — cukup lambat
   supaya terasa halus, bukan berkedip. */
.shimmer {
  background: linear-gradient(
    100deg,
    var(--gold) 20%,
    #F0DCA8 38%,
    var(--gold) 56%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer-pass 6s ease-in-out infinite;
}
@keyframes shimmer-pass {
  0%, 100% { background-position: 140% 0; }
  50%      { background-position: -40% 0; }
}

/* Lingkaran logo: napas halus pada bayangannya. 7 detik — sangat
   lambat, memberi kesan "hidup" tanpa menarik perhatian. */
.mark-breathe {
  animation: mark-breathe 7s ease-in-out infinite;
}
@keyframes mark-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,169,110,0); }
  50%      { box-shadow: 0 0 22px 0 rgba(201,169,110,.22); }
}

/* ── 3. LATAR HERO YANG BERGESER ──────────────────────────
   Gradasi bergerak sangat perlahan (20 detik) — kesan udara gurun
   atau air Nil yang bergerak. Nyaris tak disadari secara sadar,
   tapi membuat halaman terasa tidak mati. */
.hero-drift::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(
    ellipse 55% 45% at 30% 35%,
    rgba(201,169,110,.14),
    transparent 70%
  );
  animation: hero-drift 20s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes hero-drift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
  100% { transform: translate3d(4%, 3%, 0) scale(1.08); }
}

/* ── 4. JUDUL EDITORIAL: baris terungkap dari bawah ───────
   Tiap baris judul besar naik dari balik "tirai". Efek khas
   pembuka film / majalah kelas atas. Dipasang motion.js. */
.line-mask { overflow: hidden; display: block; }
.line-mask > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.1s cubic-bezier(.16,1,.3,1);
}
.line-mask.in > span { transform: translateY(0); }
.line-mask:nth-child(2) > span { transition-delay: .12s }
.line-mask:nth-child(3) > span { transition-delay: .24s }

/* ── 5. GARIS EMAS YANG MELEBAR ───────────────────────────
   Aksen pemisah yang "menggambar dirinya" saat terlihat. */
.rule-draw {
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.3s cubic-bezier(.16,1,.3,1);
}
.rule-draw.in { transform: scaleX(1); }

/* ── 6. KARTU: sentuhan saat disentuh kursor ──────────────
   Naik 3px saja. Cukup utk terasa responsif, tidak berlebihan. */
.lift { transition: transform .45s cubic-bezier(.16,1,.3,1),
                    box-shadow .45s cubic-bezier(.16,1,.3,1); }
.lift:hover { transform: translateY(-3px); }

/* ── 7. TOMBOL: kilau melintas sekali saat disentuh ───────*/
.btn-sheen { position: relative; overflow: hidden; }
.btn-sheen::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg);
  transition: left .7s cubic-bezier(.16,1,.3,1);
}
.btn-sheen:hover::after { left: 120%; }

/* ── 8. ANGKA STATISTIK MENGHITUNG NAIK ───────────────────
   Ditangani motion.js — di sini hanya memastikan angkanya tidak
   "melompat" lebar saat berubah (tabular-nums bikin rata). */
.count-up { font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════
   HORMATI PENGATURAN PENGGUNA — WAJIB, BUKAN OPSIONAL.
   Sebagian orang mengalami pusing/mual karena animasi. Browser
   & sistem operasi punya pengaturan "kurangi gerakan"; kalau itu
   menyala, SEMUA animasi di atas dimatikan total dan konten
   langsung tampil utuh (bukan tersembunyi selamanya).
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .rise, .rise.in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .line-mask > span { transform: none !important; transition: none !important; }
  .rule-draw { transform: scaleX(1) !important; transition: none !important; }
  .shimmer {
    animation: none !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: var(--gold) !important;
  }
  .mark-breathe, .hero-drift::before { animation: none !important; }
  .lift:hover { transform: none !important; }
  .btn-sheen::after { display: none !important; }
}