/* =============================================================================
   Zimply — tier Premium (Wedding26).
   Konsep: Hitam pekat + putih + foto gelap; cover hitam dengan siluet wajah line-art putih abstrak; foto hitam-putih full-bleed; SAVE THE DATE sans putih tebal; nama vertikal; gelap artistik modern-edgy.
   Palet: aksen #e8e6df, kertas #0c0c0c, tinta #f2f0ea.
   Tipografi: Instrument Serif + Space Grotesk.
   CSS ini SUMBER KEBENARAN; `scripts/build-theme-css.mjs` menyalinnya ke
   `public/themes/zimply.{hash}.css`. JANGAN di-import dari index.tsx
   (DECISIONS #31) — ia dikirim lewat <ThemeStyles slug="zimply" />.
============================================================================= */

.zim {
  --zim-acc: #e8e6df;
  --zim-acc-text: #ffffff;
  --zim-on-acc: #0c0c0c;
  --zim-paper: #0c0c0c;
  --zim-ink: #f2f0ea;
  --zim-muted: rgba(242, 240, 234, 0.66);
  --zim-line: rgba(242, 240, 234, 0.35);
  --zim-card: #171716;
  --zim-dark: #050505;
  --zim-dark-ink: #f2f0ea;
  --zim-dark-muted: rgba(242, 240, 234, 0.7);
  --zim-dark-line: rgba(242, 240, 234, 0.3);
  --zim-disp-stack: var(--zim-disp), Georgia, serif;
  --zim-body-stack: var(--zim-body), system-ui, sans-serif;

  background: var(--zim-paper);
  color: var(--zim-ink);
  font-family: var(--zim-body-stack);
  overflow-x: clip;
}
.zim *,
.zim *::before,
.zim *::after {
  box-sizing: border-box;
}
.zim ::selection {
  background: var(--zim-acc);
  color: var(--zim-on-acc);
}

.zim-stage {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
}

.zim-section {
  position: relative;
  padding: 56px 24px;
}

.zim-eyebrow {
  font-family: var(--zim-body-stack);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--zim-acc-text);
  text-align: center;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.zim-title {
  font-family: var(--zim-disp-stack);
  font-size: 32px;
  line-height: 1.2;
  text-align: center;
  margin: 8px 0 0;
  color: var(--zim-ink);
}

.zim-foto {
  width: min(72%, 280px);
  aspect-ratio: 4 / 5;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 2px;
  border: 1px solid #f2f0ea;
  background: color-mix(in srgb, var(--zim-acc) 18%, transparent);
  display: grid;
  place-items: center;
}
.zim-foto span {
  font-family: var(--zim-disp-stack);
  font-size: 56px;
  color: var(--zim-acc-text);
}
.zim-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Countdown bersama (kelas generik dari `@/themes/_shared/motion`). */
.zim .countdown {
  display: flex;
  gap: 10px;
  margin-top: 28px;
  justify-content: center;
}
.zim .count-box {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 16px 4px 14px;
  background: var(--zim-card);
  border: 1px solid var(--zim-line);
  border-radius: 14px;
}
.zim .count-num {
  font-family: var(--zim-disp-stack);
  font-size: clamp(26px, 8vw, 36px);
  font-variant-numeric: tabular-nums;
  display: block;
  color: var(--zim-ink);
}
.zim .count-label {
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--zim-muted);
  margin-top: 6px;
  display: block;
}
.zim .countdown-done {
  font-family: var(--zim-disp-stack);
  font-size: 22px;
  text-align: center;
  margin-top: 28px;
}

/* Galeri: gambar langsung anak section → grid 2 kolom. */
.zim-section > img {
  width: calc(50% - 6px);
  margin: 3px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  vertical-align: top;
}

/* Tombol salin (amplop): satu-satunya <button> anak langsung kartu bank. */
.zim-section > div > button {
  margin-top: 12px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--zim-acc);
  background: var(--zim-acc);
  color: var(--zim-on-acc);
  font-family: var(--zim-body-stack);
  font-size: 13px;
  letter-spacing: 0.06em;
  cursor: pointer;
}

/* Siluet WAJAH line-art putih abstrak di cover (satu garis mengalir). */
.zim-cover::before {
  content: "";
  position: absolute;
  top: 6%;
  left: 50%;
  width: 200px;
  height: 190px;
  transform: translateX(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='190' viewBox='0 0 200 190'%3E%3Cpath d='M100 22 C66 22 48 50 52 84 C54 104 44 118 50 134 C56 150 74 160 96 162 M100 22 C134 22 152 50 148 84 C146 104 156 118 150 134 C144 150 126 160 104 162 M52 84 C70 92 84 92 96 84 M104 84 C116 92 130 92 148 84' fill='none' stroke='%23f2f0ea' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 200px 190px;
  opacity: 0.9;
  pointer-events: none;
}
/* Nama VERTIKAL di tepi kanan cover (tulisan menyamping). */
.zim-cover-inner .zim-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  margin: 0 auto;
  font-size: 30px;
  letter-spacing: 0.28em;
  max-height: 300px;
}
/* Foto HITAM-PUTIH full-bleed feel. */
.zim-foto img {
  filter: grayscale(1) contrast(1.1);
}
.zim-section > img {
  filter: grayscale(1) contrast(1.08);
}
.zim-foto {
  width: min(76%, 300px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.8);
}
/* SAVE THE DATE: sans putih tebal, huruf kapital ber-spasi lebar. */
.zim-stage > div[data-section-id="countdown"] .zim-eyebrow {
  font-family: var(--zim-body-stack);
  font-weight: 500;
  letter-spacing: 0.4em;
  font-size: 14px;
  color: #ffffff;
}
/* Countdown: kotak hitam bergaris putih, angka putih besar. */
.zim .count-box {
  background: #050505;
  border-color: var(--zim-line);
}
.zim .count-num {
  color: #ffffff;
  font-family: var(--zim-body-stack);
  font-weight: 500;
}
/* Garis hairline putih antar-section. */
.zim-section {
  border-top: 1px solid rgba(242, 240, 234, 0.18);
}
/* Judul section: serif italic putih. */
.zim-title {
  font-style: italic;
}
/* Tombol buka: outline putih. */
.zim-open {
  background: transparent;
  color: #f2f0ea;
  border: 1px solid #f2f0ea;
}

/* Cover — layar penuh saat JS jalan; wipe ke atas saat dibuka. */
.zim-cover {
  display: none;
}
.zim.is-js .zim-cover {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #0c0c0c;
  color: #f2f0ea;
  transition: transform 1s cubic-bezier(0.7, 0, 0.3, 1);
}
.zim.is-js.is-open .zim-cover {
  transform: translateY(-100%);
}
.zim-cover-inner {
  position: relative;
  text-align: center;
  max-width: 420px;
  width: calc(100% - 48px);
  padding: 40px 24px;
  margin: 0 auto;
}
.zim-open {
  margin-top: 28px;
  padding: 13px 34px;
  border-radius: 999px;
  border: 1px solid var(--zim-acc);
  background: var(--zim-acc);
  color: var(--zim-on-acc);
  font-family: var(--zim-body-stack);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Tombol musik mengambang (muncul setelah cover dibuka). */
.zim-music {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 55;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--zim-acc);
  background: var(--zim-paper);
  color: var(--zim-acc-text);
  display: none;
  place-items: center;
  cursor: pointer;
}
.zim.is-open .zim-music {
  display: grid;
}

/* Hormati prefers-reduced-motion: konten tetap lengkap tanpa animasi. */
@media (prefers-reduced-motion: reduce) {
  .zim * {
    animation: none !important;
    transition: none !important;
  }
  .zim.is-js .zim-cover {
    transition: none;
  }
}

/* Elemen melayang 3D (drift.tsx): container pakai perspective, tiap item
   translateZ berbeda (-70px s.d. +75px) untuk kedalaman/parallax; hanya
   transform/opacity yang dianimasikan. Sampul juga berlapis 3D halus:
   judul/eyebrow/tombol di translateZ berbeda di atas perspective sampul. */
.zim-drift {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  perspective: 700px;
}
.zim-drift--page {
  position: fixed;
  z-index: 40;
}
.zim-drift__item {
  position: absolute;
  top: 0;
  display: block;
  transform-style: preserve-3d;
}
.zim-drift__move {
  display: block;
  animation: zim-drift-twinkle ease-in-out infinite;
  will-change: transform, opacity;
  transform-style: preserve-3d;
}
.zim-drift__item svg {
  display: block;
  animation: zim-drift-sway 2.4s ease-in-out infinite alternate;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.25));
}
.zim-drift__item:nth-child(even) svg {
  animation-duration: 3s;
}
.zim-drift--page .zim-drift__item svg {
  opacity: 0.55;
}
@keyframes zim-drift-twinkle {
  0%,
  100% {
    transform: scale(0.55) rotate(0deg);
    opacity: 0.15;
  }
  50% {
    transform: scale(1.15) rotate(20deg);
    opacity: 0.95;
  }
}
@keyframes zim-drift-sway {
  from {
    transform: translateX(-16px) rotate(-12deg) rotateY(-10deg);
  }
  to {
    transform: translateX(16px) rotate(12deg) rotateY(10deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .zim-drift {
    display: none;
  }
}

/* Lapisan sampul 3D halus: judul paling depan, eyebrow & tombol di belakangnya. */
.zim-cover {
  perspective: 1100px;
}
.zim-cover-inner,
.zim-cover-inner > div {
  transform-style: preserve-3d;
}
.zim-cover-inner .zim-eyebrow {
  transform: translateZ(14px);
}
.zim-cover-inner .zim-title {
  transform: translateZ(30px);
}
.zim-cover-inner .zim-open {
  transform: translateZ(20px);
}

/* === 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. */
.zim.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;
}
.zim.is-js .reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Foto & kartu di dalam section: muncul menyusul (stagger) setelah section. */
.zim.is-js .reveal img,
.zim.is-js .reveal .zim-card,
.zim.is-js .reveal .zim-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;
}
.zim.is-js .reveal.is-visible img,
.zim.is-js .reveal.is-visible .zim-card,
.zim.is-js .reveal.is-visible .zim-foto {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .zim.is-js .reveal,
  .zim.is-js .reveal img,
  .zim.is-js .reveal .zim-card,
  .zim.is-js .reveal .zim-foto {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* Latar berlapis tiap section: semburat aksen di atas + gradien kertas ke aksen. */
.zim-section {
  background:
    radial-gradient(
      120% 55% at 50% 0%,
      color-mix(in srgb, var(--zim-acc) 12%, transparent),
      transparent 62%
    ),
    linear-gradient(
      180deg,
      var(--zim-paper),
      color-mix(in srgb, var(--zim-paper) 84%, var(--zim-acc))
    );
  padding: clamp(84px, 14vw, 128px) 20px;
}
/* Preview lebih panjang: foto mempelai & galeri lebih besar. */
.zim-foto {
  width: min(82%, 320px);
}
.zim-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) .zim-section {
  background:
    radial-gradient(
      110% 50% at 50% 0%,
      color-mix(in srgb, var(--zim-acc) 30%, transparent),
      transparent 65%
    ),
    repeating-linear-gradient(
      45deg,
      color-mix(in srgb, var(--zim-acc) 4%, transparent) 0 2px,
      transparent 2px 26px
    ),
    repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, var(--zim-acc) 4%, transparent) 0 2px,
      transparent 2px 26px
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--zim-acc) 28%, var(--zim-paper)),
      color-mix(in srgb, var(--zim-acc) 20%, var(--zim-paper))
    );
}
/* Bingkai ornamen ganda di tiap section (kartu berbingkai emas/aksen). */
.zim-section {
  border: 2px solid color-mix(in srgb, var(--zim-acc) 60%, transparent);
  outline: 1px solid color-mix(in srgb, var(--zim-acc) 40%, transparent);
  outline-offset: 6px;
  border-radius: 24px;
  margin: 20px 14px;
}
/* Foto mempelai bentuk arch (lengkung atas) + bingkai emas + bayangan. */
.zim-foto {
  border-radius: 999px 999px 18px 18px;
  box-shadow: 0 18px 40px color-mix(in srgb, var(--zim-acc) 45%, transparent);
}
/* Drift lebih kentara: opacity naik (page variant). */
.zim-drift--page .zim-drift__item svg {
  opacity: 0.4;
}

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