/* ==========================================================================
   VEINA SKINCARE — LAPISAN GERAK (motion.css)
   --------------------------------------------------------------------------
   Berkas ini HANYA menambah gerak. Tidak ada warna, ukuran huruf, jarak,
   atau teks yang diubah — seluruh isi halaman tetap sama persis.

   Dimuat SETELAH base.css dan components.css supaya bisa menimpa dengan
   aman tanpa menyunting dua berkas itu.

   Prinsip:
   1. Hanya properti yang murah bagi GPU: transform, opacity, scale, clip-path.
      Tidak ada animasi pada width/height/top/left (itu memicu layout ulang).
   2. Semua efek memakai pemicu yang SUDAH ADA di situs: kelas .is-visible
      yang dipasang core.js saat elemen masuk layar. Jadi tidak ada keadaan
      "tersembunyi" baru yang bisa membuat konten hilang bila JS gagal.
   3. Semua dimatikan bila pengunjung memilih "kurangi gerak" di perangkatnya
      (prefers-reduced-motion: reduce) — lihat blok paling bawah.
   ========================================================================== */

:root {
  --m-dur: 900ms;
  --m-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --m-gold-glow: rgba(214, 186, 132, 0.40);
}

/* ==========================================================================
   1. GARIS KEMAJUAN GULIR
   Satu garis emas tipis di paling atas. Dibuat oleh motion.js.
   ========================================================================== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 1200;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold-600) 0%, var(--gold-300) 55%, var(--gold-500) 100%);
  box-shadow: 0 0 10px rgba(184, 149, 90, 0.55);
  opacity: 0;
  transition: opacity 500ms var(--m-ease);
}
.scroll-progress.is-on { opacity: 1; }

/* ==========================================================================
   2. GARIS EYEBROW — TUMBUH SAAT MASUK LAYAR
   Garis kecil di samping label kecil ("WARISAN ALAMI BORNEO").
   ========================================================================== */
.eyebrow::before,
.section-head--center .eyebrow::after {
  transform-origin: center;
}

[data-reveal] .eyebrow::before,
.eyebrow[data-reveal]::before,
.section-head--center[data-reveal] .eyebrow::before,
.section-head--center[data-reveal] .eyebrow::after {
  transform: scaleX(0);
  transition: transform 850ms var(--m-ease) 120ms;
}
[data-reveal] .eyebrow::before { transform-origin: left center; }
[data-reveal] .eyebrow::after { transform-origin: right center; }

[data-reveal].is-visible .eyebrow::before,
.eyebrow[data-reveal].is-visible::before,
.section-head--center[data-reveal].is-visible .eyebrow::before,
.section-head--center[data-reveal].is-visible .eyebrow::after {
  transform: scaleX(1);
}

/* ==========================================================================
   3. HERO — URUTAN MASUK YANG SINEMATIK
   ========================================================================== */

/* 3a. Judul: tirai terbuka dari kiri, bukan sekadar pudar.
      Nilai negatif pada inset memberi ruang untuk ekor huruf italic. */
.hero__title {
  clip-path: inset(-14% 100% -14% 0);
  transition: clip-path 1150ms var(--m-ease), opacity 900ms var(--m-ease),
              transform 900ms var(--m-ease);
}
.hero__title.is-visible {
  clip-path: inset(-14% -2% -14% 0);
}

/* 3b. Foto hero: mengecil perlahan dari 1.12 ke 1 (efek "bernapas").
      Memakai animation, bukan transition, karena berjalan sekali saat halaman
      dibuka — tidak bergantung pada JS. */
.hero__media img {
  animation: veinaHeroZoom 2000ms var(--m-ease) both;
}
@keyframes veinaHeroZoom {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}

/* 3c. Tiga label di bawah hero masuk bergiliran.
      fill-mode "backwards" (bukan "both") supaya setelah selesai tidak
      mengunci transform — kalau tidak, efek hover tombol akan mati. */
.hero__meta-item {
  animation: veinaFadeUp 780ms var(--m-ease) backwards;
}
.hero__meta-item:nth-child(1) { animation-delay: 420ms; }
.hero__meta-item:nth-child(2) { animation-delay: 520ms; }
.hero__meta-item:nth-child(3) { animation-delay: 620ms; }

/* 3d. Dua tombol CTA masuk bergiliran setelah teksnya. */
.hero__cta.is-visible .btn {
  animation: veinaFadeUp 700ms var(--m-ease) backwards;
}
.hero__cta.is-visible .btn:nth-child(2) { animation-delay: 130ms; }

@keyframes veinaFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   4. BINGKAI FOTO — MEMBESAR SAAT MASUK, BINGKAI EMAS MENETAP
   ========================================================================== */

/* Foto di dalam bingkai mulai sedikit lebih besar, lalu menyusut ke ukuran
   aslinya. Terasa seperti kamera yang menemukan fokus. */
[data-reveal] .frame img {
  transform: scale(1.08);
}
[data-reveal].is-visible .frame img {
  transform: scale(1);
}

/* Garis emas di dalam bingkai (.frame--framed) muncul belakangan, sedikit
   dari luar, supaya terasa "dipasang" setelah fotonya. */
[data-reveal] .frame--framed::before {
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 800ms var(--m-ease) 320ms,
              transform 1100ms var(--m-ease) 220ms;
}
[data-reveal].is-visible .frame--framed::before {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   5. KARTU PRODUK — CAHAYA MENGIKUTI KURSOR
   motion.js mengisi --mx / --my sesuai posisi kursor. Tanpa JS, efek ini
   hanya tidak muncul (tidak ada yang rusak).
   ========================================================================== */
.product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 480ms var(--m-ease);
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    var(--m-gold-glow),
    rgba(201, 169, 110, 0.06) 45%,
    transparent 72%
  );
}
.product-card:hover::after { opacity: 1; }

/* Cincin emas tipis + naik sedikit lebih tegas saat disentuh kursor. */
.product-card:hover {
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(184, 149, 90, 0.34);
}
.product-card:hover .product-card__media img {
  transform: scale(1.075);
}

/* Garis emas tipis tumbuh di bawah foto saat kartu disentuh kursor.
   Ini penanda yang selalu terlihat, termasuk pada foto produk yang terang
   di mana cahaya lembut di atas nyaris tak tampak. */
.product-card__media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  z-index: 3;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-300), var(--gold-500));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 720ms var(--m-ease);
}
.product-card:hover .product-card__media::after {
  transform: scaleX(1);
}
.product-card:hover .product-card__ornament {
  transform: translate(-2px, 2px);
  opacity: 1;
}
.product-card__ornament {
  transition: transform 620ms var(--m-ease), opacity 620ms var(--m-ease);
}

/* ==========================================================================
   6. KARTU NILAI — IKON BERPUTAR HALUS
   ========================================================================== */
.value-card__icon {
  transition: transform 700ms var(--m-ease), background-color 400ms var(--m-ease),
              color 400ms var(--m-ease);
}
.value-card:hover .value-card__icon {
  transform: rotate(-8deg) scale(1.06);
}

/* ==========================================================================
   7. NAVBAR — MERINGKAS SAAT DIGULIR
   Kelas .is-stuck sudah dipasang core.js. Di sini hanya tingginya.
   ========================================================================== */
.nav-inner {
  transition: height 380ms var(--m-ease);
}
.navbar.is-stuck .nav-inner {
  height: 64px;
}
.navbar.is-stuck .nav-logo__mark {
  transform: scale(0.92);
}
.nav-logo__mark {
  transition: transform 380ms var(--m-ease);
}

/* ==========================================================================
   8. GARIS MOTIF PEMISAH — BERPUTAR SAAT DILEWATI
   ========================================================================== */
.motif-divider span {
  transition: transform 900ms var(--m-ease);
}
.motif-divider:hover span {
  transform: rotate(225deg);
}

/* ==========================================================================
   9. TOMBOL PANAH — MENDORONG SEDIKIT SAAT HOVER
   ========================================================================== */
.link-arrow svg,
.link-arrow span {
  transition: transform 380ms var(--m-ease);
}
.link-arrow:hover svg,
.link-arrow:hover span {
  transform: translateX(3px);
}

/* ==========================================================================
   10. HORMATI PILIHAN "KURANGI GERAK"
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }

  .hero__title { clip-path: none !important; }
  .hero__media img,
  .hero__meta-item,
  .hero__cta.is-visible .btn {
    animation: none !important;
  }

  [data-reveal] .frame img,
  [data-reveal].is-visible .frame img { transform: none; }
  [data-reveal] .frame--framed::before,
  [data-reveal].is-visible .frame--framed::before {
    opacity: 1;
    transform: none;
  }

  [data-reveal] .eyebrow::before,
  [data-reveal] .eyebrow::after,
  [data-reveal].is-visible .eyebrow::before,
  [data-reveal].is-visible .eyebrow::after,
  .eyebrow[data-reveal]::before,
  .eyebrow[data-reveal].is-visible::before {
    transform: none !important;
  }

  .product-card::after { display: none; }
  .navbar.is-stuck .nav-inner { height: var(--nav-h); }
  .motif-divider:hover span { transform: rotate(45deg); }
}