/* =============================================================================
   VERDANT — tier Story (acuan: prototypes/flora-atelier-story.html)
   Arah "Ilustratif Artistik": buku sketsa botani — wreath & ranting SVG line-art
   yang menggambar diri, border putus-putus, kartu "pressed flower", timeline
   bertitik. TANPA WebGL. Semua kelas ter-scope `.vd`. State mask reveal DIMILIKI
   JS (WAAPI di cover, gsap di konten); CSS hanya menyembunyikan di bawah
   `.is-js.is-motion` → tanpa JS/motion konten terbaca.
============================================================================= */

.vd {
  --vd-ivory: #faf6ed;
  --vd-ivory-2: #f1eada;
  --vd-sage: #75855f;
  --vd-sage-d: #3f4a34;
  --vd-terra: #c2704e;
  /* Versi TEKS/latar-tombol aman-kontras. --vd-terra-ink ≥ 4,5:1 juga di
     --vd-ivory-2 SETELAH .vd-grain (datar 4,87 → tampil 4,64; #9b593e lama
     tepat 4,50 datar, 4,30 tampil); --vd-sage-ink = accentText varian bawaan
     (≥ 4,5:1 di --vd-ivory), ditimpa penjaga kontras per varian. */
  --vd-terra-ink: #93553b;
  --vd-sage-ink: #637050;
  --vd-ink: #3a3126;
  --vd-muted: rgba(58, 49, 38, 0.71);
  --vd-hairline: rgba(58, 49, 38, 0.18);
  --vd-serif: var(--vd-disp-a);
  --vd-sans: var(--vd-body-a);
  --vd-serif-stack: var(--vd-serif), "EB Garamond", Georgia, serif;
  --vd-sans-stack: var(--vd-sans), "Karla", system-ui, sans-serif;

  position: relative;
  background: var(--vd-ivory);
  color: var(--vd-ink);
  font-family: var(--vd-sans-stack);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
.vd *,
.vd *::before,
.vd *::after {
  box-sizing: border-box;
}
.vd ::selection {
  background: var(--vd-sage);
  color: #fff;
}

/* Grain + progress --------------------------------------------------------- */
.vd-grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 60;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vd-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  z-index: 70;
  transform-origin: 0 50%;
  background: var(--vd-sage);
  transform: scaleX(0);
}

/* Tipografi ---------------------------------------------------------------- */
.vd-eyebrow {
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--vd-sage-ink);
  margin: 0;
}
.vd-eyebrow--sage {
  color: var(--vd-sage-ink);
}
.vd-lead {
  color: var(--vd-muted);
  font-size: 14px;
  line-height: 1.9;
  max-width: 320px;
  margin: 14px auto 0;
}
.vd-h2 {
  font-family: var(--vd-serif-stack);
  font-weight: 400;
  font-size: clamp(28px, 8vw, 38px);
  line-height: 1.15;
  margin-top: 10px;
}
.vd-h2 em {
  font-style: italic;
  color: var(--vd-sage);
}

/* Baris bermask ------------------------------------------------------------ */
/* Ruang .2em di bawah untuk ekor huruf: ekor g/j/y italic EB Garamond turun
   lebih dalam dari kotak baris, dan masker memotongnya rata. Margin negatif
   menetralkan tingginya, jadi tata letak tak bergeser. State tersembunyi 150%
   (fx.tsx/cover.tsx) menaruh puncak aksen kapital (É/Á) tetap di bawah ruang
   ini — pada 115% aksennya mengintip dari masker yang kosong. */
.vd-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}
.vd-line > span {
  display: block;
}
/* Ruang tinta italic di kedua tepi masker NAMA (kait "f", titik "i" miring):
   tanpa ini nama yang muat pas terpotong rata di tepinya. Pengepas nama sampul
   (_shared/fit-names.ts) mengukur lebar konten, jadi ruang ini tak ikut
   memperkecil nama. Atas .2em: aksen kapital (É/Á) menjulang di atas kotak
   baris yang rapat. */
.vd-cover__name .vd-line,
.vd-hero__title .vd-line {
  padding-inline: 0.2em;
  margin-inline: -0.2em;
  padding-top: 0.2em;
  margin-top: -0.2em;
}
/* Nama kartu mempelai (italic, rata tengah): hanya tepinya yang disentuh tinta
   — kotak barisnya lapang, aksen tak terpotong. */
.vd-pressed__name .vd-line {
  padding-inline: 0.2em;
  margin-inline: -0.2em;
}
.vd.is-js.is-motion .vd-line > span {
  visibility: hidden;
}
.vd.is-js.is-motion .vd-reveal {
  opacity: 0;
}

/* --------------------------------------------------------------- Cover ----- */
/* Tanpa JS: cover disembunyikan → konten langsung terbaca (degradasi anggun). */
.vd-cover {
  display: none;
}
.vd.is-js .vd-cover {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  overflow: hidden;
  /* Foto latar (keranjang bunga taman) — scrim RADIAL "foto di tengah":
     foto paling jelas di balik karangan tengah, menebal ke tepi; focal
     tengah-atas. Kebalikan lumina (yang pusatnya bersih). */
  background-color: var(--vd-ivory);
  background-image:
    radial-gradient(
      ellipse 75% 60% at 50% 45%,
      rgba(250, 246, 237, 0.5) 0%,
      rgba(250, 246, 237, 0.78) 65%,
      rgba(250, 246, 237, 0.93) 100%
    ),
    url("/demo/verdant/0.jpg");
  background-size: cover;
  background-position: center 35%;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s cubic-bezier(0.76, 0, 0.24, 1) 0.15s;
}
.vd.is-js.is-open .vd-cover {
  clip-path: inset(0 0 100% 0);
}
.vd.is-js .vd-cover::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px dashed var(--vd-hairline);
  border-radius: 18px;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .vd.is-js .vd-cover,
  .vd-cover__inner {
    transition: none;
  }
}
.vd-cover__inner {
  position: relative;
  text-align: center;
  padding: 24px;
  max-width: 430px;
  width: 100%;
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}
.vd.is-js.is-open .vd-cover__inner {
  opacity: 0;
  transform: translateY(-14px);
}

/* Daun jatuh bergoyang — lapisan tipis fixed di atas sampul (z-65) dan tetap
   ada di seluruh undangan. Hanya transform/opacity; pointer-events none;
   reduced-motion → disembunyikan (juga digate motionOn di fx.tsx). Item luar
   menempuh jatuh, svg dalam bergoyang + berputar pelan. */
.vd-drift {
  position: fixed;
  inset: 0;
  z-index: 65;
  pointer-events: none;
  overflow: hidden;
}
.vd-drift__item {
  position: absolute;
  top: 0;
  left: var(--x);
  opacity: var(--o);
  animation: vd-drift-fall var(--d) linear var(--dl) infinite;
  will-change: transform;
}
.vd-drift__item > svg {
  display: block;
  width: var(--s);
  height: auto;
  /* Bayangan lembut supaya daun terbaca di atas foto bunga yang ramai. */
  filter: drop-shadow(0 1px 2px rgba(40, 60, 30, 0.4));
  animation: vd-drift-sway var(--sw) ease-in-out infinite alternate;
}
@keyframes vd-drift-fall {
  from {
    transform: translate3d(0, -12vh, 0) rotate(0deg);
  }
  to {
    transform: translate3d(0, 112vh, 0) rotate(300deg);
  }
}
@keyframes vd-drift-sway {
  from {
    transform: translateX(-12px) rotate(-16deg);
  }
  to {
    transform: translateX(12px) rotate(16deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vd-drift {
    display: none;
  }
}
.vd-cover__wreathwrap {
  position: relative;
  margin-top: 10px;
}
.vd-wreath {
  width: min(74vw, 300px);
  height: auto;
  margin: 0 auto 6px;
  display: block;
}
.vd-wreath path {
  fill: none;
  stroke: var(--vd-sage);
  stroke-width: 1.3;
  stroke-linecap: round;
}
.vd-wreath .vd-terra {
  stroke: var(--vd-terra);
}
.vd-cover__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  width: min(56vw, 220px);
  text-align: center;
  /* Halo ivory lembut HANYA di zona nama: scrim radial sampul paling
     tipis tepat di tengah (0.5) tempat foto bunga paling ramai — zona
     nama diberi penguat lokal supaya kontras "Bayu & Anjani" kembali.
     Tepi memudar ke transparan supaya tidak jadi blok kotak. */
  padding: 22px 14px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(250, 246, 237, 0.92) 0%,
    rgba(250, 246, 237, 0.72) 55%,
    rgba(250, 246, 237, 0) 78%
  );
}
.vd-cover__name {
  font-family: var(--vd-serif-stack);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 10vw, 46px);
  line-height: 1.05;
  color: var(--vd-ink);
  display: block;
}
/* flow-root: margin negatif masker "&" (ruang ekor −.2em) tertahan di dalam
   kotaknya. Tanpa itu ia ber-collapse dengan margin-top −.2em masker nama
   kedua — margin negatif yang bersebelahan tak dijumlah, hanya yang paling
   negatif yang dipakai — dan nama kedua turun 4 px (DECISIONS #111). */
.vd-cover__amp {
  display: flow-root;
  font-family: var(--vd-serif-stack);
  font-style: italic;
  color: var(--vd-terra-ink);
  font-size: 20px;
  margin: 2px 0;
}
.vd-cover__date {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--vd-muted);
}
.vd-guest {
  margin: 18px auto 22px;
  max-width: 280px;
  padding: 13px 18px;
  border: 1px dashed var(--vd-sage);
  border-radius: 14px;
  background: rgba(117, 133, 95, 0.06);
}
.vd-guest small {
  display: block;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vd-muted);
  margin-bottom: 5px;
}
.vd-guest strong {
  font-family: var(--vd-serif-stack);
  font-weight: 500;
  font-size: 19px;
}
.vd-open {
  appearance: none;
  border: 0;
  background: var(--vd-sage-ink);
  color: #fff;
  font-family: var(--vd-sans-stack);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 16px 34px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 12px 26px -14px rgba(63, 74, 52, 0.7);
  transition:
    background 0.3s,
    transform 0.3s;
}
.vd-open:hover {
  background: var(--vd-sage-d);
  transform: translateY(-2px);
}
.vd-cover__hint {
  margin-top: 14px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--vd-muted);
}

/* ------------------------------------------------------------- Section ----- */
.vd-section {
  position: relative;
  padding: 86px 26px;
}
.vd-center {
  text-align: center;
}
.vd-inner {
  max-width: 480px;
  margin: 0 auto;
}

/* Hero + ranting ----------------------------------------------------------- */
.vd-hero {
  padding-top: 74px;
}
.vd-hero__title {
  font-family: var(--vd-serif-stack);
  font-weight: 400;
  font-size: clamp(34px, 10vw, 48px);
  line-height: 1.12;
  margin: 16px 0 0;
}
.vd-hero__title em {
  font-style: italic;
  color: var(--vd-sage);
}
.vd-branch {
  display: block;
  width: min(70vw, 260px);
  height: auto;
  margin: 30px auto 0;
}
.vd-branch path {
  fill: none;
  stroke: var(--vd-sage);
  stroke-width: 1.2;
  stroke-linecap: round;
}
.vd-branch .vd-terra {
  stroke: var(--vd-terra);
}

/* Quote -------------------------------------------------------------------- */
.vd-quote {
  background: var(--vd-sage-d);
  color: var(--vd-ivory);
}
.vd-quote::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(250, 246, 237, 0.3);
  border-radius: 14px;
  pointer-events: none;
}
.vd-quote__text {
  font-family: var(--vd-serif-stack);
  font-style: italic;
  font-size: clamp(17px, 4.8vw, 20px);
  line-height: 1.9;
  max-width: 340px;
  margin: 0 auto;
}
.vd-quote__src {
  display: block;
  margin-top: 18px;
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #c9d2b8;
}

/* Pressed flower cards (couple) -------------------------------------------- */
.vd-couple {
  max-width: 460px;
  margin: 34px auto 0;
}
.vd-pressed {
  background: var(--vd-ivory-2);
  border: 1px solid var(--vd-hairline);
  border-radius: 6px;
  padding: 26px 22px 30px;
  position: relative;
  box-shadow: 0 20px 40px -30px rgba(63, 74, 52, 0.45);
  margin-bottom: 56px;
}
.vd-pressed:last-child {
  margin-bottom: 0;
}
.vd-pressed::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px dashed var(--vd-hairline);
  border-radius: 3px;
  pointer-events: none;
}
.vd-pressed__corner {
  position: absolute;
  width: 74px;
  height: 74px;
  pointer-events: none;
}
.vd-pressed__corner .vd-corner {
  width: 100%;
  height: 100%;
}
.vd-pressed__corner .vd-corner path {
  fill: none;
  stroke: var(--vd-sage);
  stroke-width: 1.1;
  stroke-linecap: round;
}
.vd-pressed--a .vd-pressed__corner {
  top: -8px;
  right: -6px;
  transform: rotate(8deg);
}
.vd-pressed--b .vd-pressed__corner {
  bottom: -8px;
  left: -6px;
  transform: rotate(190deg);
}
.vd-oval {
  width: 150px;
  height: 190px;
  border-radius: 50% / 46%;
  overflow: hidden;
  margin: 6px auto 18px;
  position: relative;
  border: 1px solid var(--vd-hairline);
}
.vd-oval__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #b9c4a4, #5d6b4a);
}
.vd-oval__ph span {
  font-family: var(--vd-serif-stack);
  font-style: italic;
  font-size: 64px;
  color: rgba(250, 246, 237, 0.9);
}
.vd-pressed__role {
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--vd-terra-ink);
  font-weight: 600;
}
.vd-pressed__name {
  text-align: center;
  font-family: var(--vd-serif-stack);
  font-weight: 500;
  font-size: 30px;
  margin-top: 6px;
}
.vd-pressed__name em {
  font-style: italic;
  color: var(--vd-sage);
}
.vd-pressed__meta {
  text-align: center;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--vd-muted);
  margin: 8px 0 0;
}

/* Countdown — bingkai dashed ----------------------------------------------- */
.vd-cd-frame {
  border: 1px dashed var(--vd-sage);
  border-radius: 18px;
  padding: 26px 12px;
  max-width: 390px;
  margin: 26px auto 0;
  background: rgba(117, 133, 95, 0.05);
}
.vd .countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.vd .count-box {
  text-align: center;
}
.vd .count-num {
  font-family: var(--vd-serif-stack);
  font-weight: 500;
  font-size: clamp(32px, 8.6vw, 42px);
  font-variant-numeric: tabular-nums;
  color: var(--vd-sage-d);
  line-height: 1;
  display: block;
}
.vd .count-label {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--vd-muted);
  margin-top: 6px;
  display: block;
}
.vd .countdown-done {
  font-family: var(--vd-serif-stack);
  font-style: italic;
  font-size: 20px;
  color: var(--vd-sage-d);
}

/* Schedule — jalur bertitik ------------------------------------------------ */
.vd-timeline-sched {
  position: relative;
  margin: 40px auto 0;
  padding-left: 26px;
  max-width: 440px;
}
.vd-timeline-sched::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  border-left: 2px dotted var(--vd-sage);
}
.vd-stop {
  position: relative;
  padding-bottom: 44px;
}
.vd-stop:last-child {
  padding-bottom: 0;
}
.vd-stop::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--vd-terra);
  border: 2px solid var(--vd-ivory);
  box-shadow: 0 0 0 1px var(--vd-terra);
}
.vd-stop__title {
  font-family: var(--vd-serif-stack);
  font-weight: 500;
  font-size: 27px;
}
.vd-stop__meta {
  font-size: 13px;
  line-height: 1.8;
  color: var(--vd-muted);
  margin-top: 8px;
}
.vd-stop__meta b {
  color: var(--vd-ink);
  font-weight: 600;
}
.vd-pills {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.vd-pill {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--vd-sage-d);
  color: var(--vd-sage-d);
  background: transparent;
  cursor: pointer;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.vd-pill:hover {
  background: var(--vd-sage-d);
  color: var(--vd-ivory);
}
.vd-pill--solid {
  background: var(--vd-terra-ink);
  border-color: var(--vd-terra-ink);
  color: #fff;
}
.vd-pill--solid:hover {
  background: #864d36;
  border-color: #864d36;
}
.vd-cal {
  position: relative;
}
.vd-cal > summary {
  list-style: none;
}
.vd-cal > summary::-webkit-details-marker {
  display: none;
}
.vd-cal__menu {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vd-cal__opt {
  font-size: 12px;
  text-decoration: none;
  color: var(--vd-ink);
  border: 1px solid var(--vd-hairline);
  border-radius: 10px;
  padding: 9px 12px;
}
.vd-cal__opt:hover {
  background: var(--vd-ivory-2);
}

/* Herbarium (galeri) ------------------------------------------------------- */
.vd-herbarium {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 30px;
  max-width: 460px;
  margin-inline: auto;
}
.vd-herb__item {
  border: 1px solid var(--vd-hairline);
  background: var(--vd-ivory-2);
  padding: 8px 8px 26px;
  border-radius: 4px;
  position: relative;
  box-shadow: 0 16px 30px -24px rgba(63, 74, 52, 0.5);
}
.vd-herb__item:nth-child(odd) {
  transform: rotate(-1.6deg);
}
.vd-herb__item:nth-child(even) {
  transform: rotate(1.4deg) translateY(10px);
}
.vd-herb__item img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 2px;
}

/* Story timeline ----------------------------------------------------------- */
.vd-timeline {
  max-width: 460px;
  margin: 28px auto 0;
  text-align: left;
}
.vd-story {
  position: relative;
  padding: 0 0 2rem 1.8rem;
  border-left: 2px solid var(--vd-hairline);
}
.vd-story::before {
  content: "❧";
  position: absolute;
  left: -0.75rem;
  top: -0.2rem;
  font-family: var(--vd-serif-stack);
  font-size: 1rem;
  color: var(--vd-sage);
  background: var(--vd-ivory);
  line-height: 1;
}
.vd-story:last-child {
  border-left-color: transparent;
}
.vd-story__date {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vd-sage-ink);
  margin: 0 0 0.3rem;
}
.vd-story__title {
  font-family: var(--vd-serif-stack);
  font-weight: 500;
  font-size: 22px;
  color: var(--vd-sage-d);
  margin: 0 0 0.4rem;
}
.vd-story__body {
  font-size: 13px;
  line-height: 1.8;
  color: var(--vd-muted);
  margin: 0;
}

/* Envelope ----------------------------------------------------------------- */
.vd-account {
  display: block;
  background: #fff;
  border: 1px solid var(--vd-hairline);
  border-radius: 14px;
  padding: 16px;
  margin-top: 14px;
  text-align: left;
}
.vd-account__label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vd-sage-d);
  margin: 0;
}
.vd-account__num {
  font-family: var(--vd-serif-stack);
  font-size: 24px;
  letter-spacing: 0.04em;
  color: var(--vd-sage-d);
  margin: 4px 0 2px;
  font-variant-numeric: tabular-nums;
}
.vd-account .vd-pressed__meta {
  text-align: left;
  margin-top: 4px;
}
.vd-copy {
  margin-top: 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--vd-sage-d);
  color: var(--vd-sage-d);
  background: transparent;
  border-radius: 999px;
  padding: 9px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: 0.25s;
}
.vd-copy:hover {
  background: var(--vd-sage-ink);
  border-color: var(--vd-sage-ink);
  color: #fff;
}

/* Footer ------------------------------------------------------------------- */
.vd-footer {
  padding: 70px 26px 90px;
  background: var(--vd-sage-d);
  color: var(--vd-ivory);
}
.vd-footer__mono {
  font-family: var(--vd-serif-stack);
  font-style: italic;
  font-size: 32px;
  color: #c9d2b8;
}
.vd-footer .vd-lead {
  color: rgba(250, 246, 237, 0.7);
}
.vd-footer .vd-eyebrow {
  color: rgba(250, 246, 237, 0.85);
}
.vd-watermark {
  display: inline-block;
  margin-top: 26px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(250, 246, 237, 0.64);
  border: 1px dashed rgba(250, 246, 237, 0.35);
  padding: 8px 14px;
  border-radius: 999px;
}
.vd-watermark a {
  color: inherit;
}

/* Tombol musik — tampil setelah dibuka ------------------------------------- */
.vd-music {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 55;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--vd-hairline);
  background: rgba(250, 246, 237, 0.9);
  color: var(--vd-sage-d);
  display: none;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(63, 74, 52, 0.5);
}
.vd.is-open .vd-music {
  display: grid;
}

/* ================================================================ Video ===
   Section video (FASE J) — kelas generik `_shared/video` ditata dengan token
   tema. Tanpa aturan reduced-motion: komponennya sendiri yang tak autoplay. */
.vd-video {
  margin-top: 22px;
}
.vd .video-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: var(--vd-sage-d);
  border: 1px solid var(--vd-hairline);
  box-shadow: 0 18px 38px -24px rgba(63, 74, 52, 0.5);
}
/* Bingkai YouTube tak membawa rasio inline (bingkai berkas membawanya). */
.vd .video-frame--yt {
  aspect-ratio: 16 / 9;
}
.vd .video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}
.vd .video-mute,
.vd .video-play {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--vd-ivory);
  color: var(--vd-sage-d);
}
.vd .video-mute {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--vd-hairline);
  cursor: pointer;
}
.vd .video-lite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  background-color: var(--vd-sage-d);
  background-size: cover;
  background-position: center;
}
/* Peredup agar tombol putar terbaca di atas poster terang. */
.vd .video-lite::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(63, 74, 52, 0.26);
}
.vd .video-play {
  position: relative;
  width: 64px;
  height: 64px;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6);
}
.vd .video-play svg {
  margin-left: 3px;
}
.vd .video-mute:focus-visible {
  outline: 2px solid var(--vd-terra-ink);
  outline-offset: 2px;
}
/* Di dalam bingkai `overflow: hidden` → cincin fokus ke dalam. */
.vd .video-lite:focus-visible {
  outline: 2px solid var(--vd-terra-ink);
  outline-offset: -5px;
}

/* Tombol live streaming di section acara (Premium, DECISIONS #116) — gaya
   tombolnya `vd-pill vd-pill--solid` yang sama dengan "Petunjuk Arah". */
.vd-live {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

/* Latar per-slide (aesthetic, botanical hijau-terakota) */
.vd-hero {
  background:
    radial-gradient(
      120% 80% at 50% 0%,
      color-mix(in srgb, var(--vd-sage, #75855f) 16%, transparent),
      transparent 55%
    ),
    linear-gradient(180deg, #f6f4ec 0%, #ece8dc 100%);
}
.vd-quote.vd-section {
  background:
    radial-gradient(
      90% 70% at 50% 30%,
      color-mix(in srgb, var(--vd-terra, #c2704e) 10%, transparent),
      transparent 60%
    ),
    linear-gradient(180deg, #f1ede3, #e9e4d8);
}
.vd-section:has(.vd-couple) {
  background:
    radial-gradient(
      80% 60% at 10% 80%,
      color-mix(in srgb, var(--vd-sage, #75855f) 12%, transparent),
      transparent 55%
    ),
    #f7f5ed;
}
.vd-section:has(.vd-countdown),
.vd-section:has(.vd-cd) {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--vd-sage, #75855f) 10%, #f3f0e6),
    #ebe6da
  );
}
.vd-section:has(.vd-event),
.vd-section:has(.vd-schedule) {
  background:
    radial-gradient(
      70% 50% at 85% 30%,
      color-mix(in srgb, var(--vd-terra, #c2704e) 10%, transparent),
      transparent 55%
    ),
    #f6f4ec;
}
.vd-section:has(.vd-gallery) {
  background: linear-gradient(180deg, #ece8dc, #f6f4ec);
}
.vd-section:has(.vd-story) {
  background:
    radial-gradient(
      80% 60% at 20% 30%,
      color-mix(in srgb, var(--vd-sage, #75855f) 10%, transparent),
      transparent 55%
    ),
    #f4f1e7;
}
.vd-section:has(.vd-envelope),
.vd-section:has(.vd-gift) {
  background: linear-gradient(
    180deg,
    #f1ede3,
    color-mix(in srgb, var(--vd-terra, #c2704e) 8%, #ebe6da)
  );
}
.vd-footer {
  background: linear-gradient(
    180deg,
    #ece8dc,
    color-mix(in srgb, var(--vd-sage, #75855f) 12%, #e4dfd1)
  );
}

/* === Motion Bali (dedup+motion 12 Nov 2026): reveal-on-scroll, latar, panjang === */
/* Reveal: konten section muncul saat di-scroll (zoom-in halus ala referensi).
   `.is-js` hanya ada setelah JS jalan -> tanpa JS konten tetap terlihat. */
.vd.is-js .reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.965);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.vd.is-js .reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Foto & kartu di dalam section: muncul menyusul (stagger) setelah section. */
.vd.is-js .reveal img,
.vd.is-js .reveal .vd-card,
.vd.is-js .reveal .vd-foto {
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  transition:
    opacity 0.9s ease 0.18s,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
}
.vd.is-js .reveal.is-visible img,
.vd.is-js .reveal.is-visible .vd-card,
.vd.is-js .reveal.is-visible .vd-foto {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .vd.is-js .reveal,
  .vd.is-js .reveal img,
  .vd.is-js .reveal .vd-card,
  .vd.is-js .reveal .vd-foto {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* Latar berlapis tiap section: semburat aksen di atas + gradien kertas ke aksen. */
.vd-section {
  background:
    radial-gradient(
      120% 55% at 50% 0%,
      color-mix(in srgb, var(--vd-sage) 12%, transparent),
      transparent 62%
    ),
    linear-gradient(
      180deg,
      var(--vd-ivory),
      color-mix(in srgb, var(--vd-ivory) 84%, var(--vd-sage))
    );
  padding: clamp(84px, 14vw, 128px) 20px;
}
/* Preview lebih panjang: foto mempelai & galeri lebih besar. */
.vd-foto {
  width: min(82%, 320px);
}
.vd-section > img {
  border-radius: 16px;
  margin-bottom: 18px;
}

/* === Motion Bali v2 (12 Nov 2026): ritme latar selang-seling + bingkai === */
/* Section genap: latar aksen pekat + pola wajik samar (ritme terang-gelap). */
div[data-section-id]:nth-child(even) .vd-section {
  background:
    radial-gradient(
      110% 50% at 50% 0%,
      color-mix(in srgb, var(--vd-acc) 30%, transparent),
      transparent 65%
    ),
    repeating-linear-gradient(
      45deg,
      color-mix(in srgb, var(--vd-acc) 4%, transparent) 0 2px,
      transparent 2px 26px
    ),
    repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, var(--vd-acc) 4%, transparent) 0 2px,
      transparent 2px 26px
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--vd-acc) 28%, var(--vd-paper)),
      color-mix(in srgb, var(--vd-acc) 20%, var(--vd-paper))
    );
}
/* Bingkai ornamen ganda di tiap section (kartu berbingkai emas/aksen). */
.vd-section {
  border: 2px solid color-mix(in srgb, var(--vd-acc) 60%, transparent);
  outline: 1px solid color-mix(in srgb, var(--vd-acc) 40%, transparent);
  outline-offset: 6px;
  border-radius: 24px;
  margin: 20px 14px;
}
/* Foto mempelai bentuk arch (lengkung atas) + bingkai emas + bayangan. */
.vd-foto {
  border-radius: 999px 999px 18px 18px;
  box-shadow: 0 18px 40px color-mix(in srgb, var(--vd-acc) 45%, transparent);
}
/* Drift lebih kentara: opacity naik (page variant). */
.vd-drift--page .vd-drift__item svg {
  opacity: 0.4;
}

/* === Tombol Lihat Lokasi (12 Nov 2026): lengkapi data preview === */
.vd-maps {
  display: inline-block;
  margin-top: 10px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--vd-acc);
  color: var(--vd-on-acc, #fff);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}