/* ==========================================================================
   Undangan Adang & Helena
   Ukuran desain: 390 × 844. --s = 1px desain, diskalakan ke layar.
   ========================================================================== */

:root {
  --ink: #12100E;
  --paper: #EFE7D8;
  --gold: #C2A06B;
  --sand: #D9CFBD;
  --stone: #BDB2A0;
  --linen: #E6DDCC;
  --backdrop: #1E1A16;

  --serif: 'Gloock', Georgia, serif;
  --sans: 'Schibsted Grotesk', system-ui, sans-serif;
  --jv: 'Noto Sans Javanese', sans-serif;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.5, 0, .75, 0);
  --gutter: 22px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  height: 100%;
  background: var(--backdrop);
}

body {
  overflow: hidden;
  color: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

img { display: block; }

/* --- Scroller (scroll bebas, tanpa snap) ---------------------------------- */

.snap {
  position: relative; /* offsetTop tiap .page dihitung dari sini */
  height: 100vh;
  height: 100dvh;
  max-width: 440px;
  margin: 0 auto;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
  scrollbar-width: none;
  background: var(--ink);
}

.snap::-webkit-scrollbar { display: none; }

/* Stage: section ter-pin setinggi --len layar. .page menempel di layar selama
   user scroll melewatinya; posisi scroll di dalamnya menggerakkan animasi. */
.stage {
  position: relative;
  height: calc(var(--len, 1) * 100vh);
  height: calc(var(--len, 1) * 100dvh);
}

.page {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  container-type: size;
  background: var(--ink);
  /* Resolve di dalam .page: skala terkecil antara lebar dan tinggi */
  --s: min(calc(100cqw / 390), calc(100cqh / 844));
}

/* Transisi kedalaman: section yang ditinggal tertinggal sedikit, mengecil,
   dan menggelap, sementara section berikutnya menumpuk di atasnya.
   --out (0 → 1) diatur js/main.js mengikuti scroll. */
.page {
  transform: translate3d(0, calc(var(--out, 0) * 55%), 0) scale(calc(1 - var(--out, 0) * .08));
}

.page::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #000;
  opacity: calc(var(--out, 0) * .6);
  pointer-events: none;
}

/* Area 390×844 yang diskalakan dan dipusatkan vertikal */
.frame {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: calc(844 * var(--s));
  transform: translateY(-50%);
}

/* --- Shared type ----------------------------------------------------------- */

.label {
  font-size: max(10px, calc(10 * var(--s)));
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--stone);
}

.label--gold,
.gold { color: var(--gold); }

.rule {
  height: 1px;
  background: rgba(239, 231, 216, .3);
}

/* --- 01 · Cover ------------------------------------------------------------ */

/* Cover di lapisan teratas; Hero (stage--under) ditarik naik satu layar sehingga
   sudah menempel di bawah Cover. Scroll mengangkat Cover seperti sampul surat. */
.stage--cover { z-index: 2; }

.stage--under {
  margin-top: -100vh;
  margin-top: -100dvh;
}

.cover { box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }

.cover__amp {
  position: absolute;
  top: calc(150 * var(--s));
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--serif);
  font-size: calc(480 * var(--s));
  line-height: 1;
  color: var(--paper);
  opacity: .045;
  pointer-events: none;
}

.cover__frame {
  position: absolute;
  inset: 14px;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  overflow: visible;
  opacity: .45;
  pointer-events: none;
}

.cover__frame rect {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.cover__couple {
  position: absolute;
  top: calc(50 * var(--s));
  left: 30px;
  right: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 * var(--s));
  text-align: center;
}

.cover__jv {
  font-family: var(--jv);
  font-size: max(13px, calc(14 * var(--s)));
  line-height: 1.6;
  color: var(--gold);
}

.cover__eyebrow {
  letter-spacing: .26em;
  color: var(--sand);
}

.cover__names {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--serif);
  font-size: calc(36 * var(--s));
  line-height: 1;
  letter-spacing: -.02em;
}

.cover__amp-inline {
  font-family: var(--sans);
  font-style: italic;
  font-size: calc(22 * var(--s));
  color: var(--gold);
}

.cover__stem {
  position: absolute;
  top: calc(204 * var(--s));
  left: 50%;
  width: 1px;
  height: calc(64 * var(--s));
  background: var(--gold);
}

.cover__guest {
  position: absolute;
  top: calc(292 * var(--s));
  left: 36px;
  right: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 * var(--s));
  text-align: center;
}

.cover__salute {
  font-size: max(12px, calc(12 * var(--s)));
  color: var(--stone);
}

.cover__guest-name {
  font-family: var(--serif);
  font-size: calc(46 * var(--s));
  line-height: 1.05;
  letter-spacing: -.02em;
  overflow-wrap: break-word;
}

/* Nama tamu panjang atau sapaan umum (diatur js/main.js) */
.cover__guest-name.is-long { font-size: calc(34 * var(--s)); }

.cover__when {
  position: absolute;
  top: calc(560 * var(--s));
  left: 36px;
  right: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12 * var(--s));
  text-align: center;
}

.cover__ornament {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cover__ornament-line {
  width: 32px;
  height: 1px;
  background: var(--gold);
}

.cover__ornament-gem {
  width: 5px;
  height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}

.cover__date {
  font-size: max(11px, calc(11 * var(--s)));
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sand);
}

.cover__city {
  font-family: var(--serif);
  font-size: calc(22 * var(--s));
  line-height: 1.1;
}

.cover__note {
  position: absolute;
  top: calc(656 * var(--s));
  left: 40px;
  right: 40px;
  margin: 0;
  text-align: center;
  font-size: max(11px, calc(11 * var(--s)));
  font-style: italic;
  line-height: 1.5;
  color: #A99E8C;
}

.cover__open {
  position: absolute;
  left: 60px;
  right: 60px;
  bottom: calc(34 * var(--s));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 * var(--s));
  padding: calc(8 * var(--s)) 0;
  border: none;
  background: transparent;
  color: var(--paper);
  font-family: var(--sans);
  cursor: pointer;
}

.cover__open:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 6px;
}

.cover__chevrons {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--gold);
}

.cover__chev {
  display: block;
  width: calc(22 * var(--s));
  height: calc(12 * var(--s));
  margin-bottom: -2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .35;
}

.cover__open-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.cover__open-hint {
  font-size: 11px;
  color: #A99E8C;
}

.cover__handle {
  margin-top: 6px;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--paper);
  opacity: .35;
}

/* HP pendek: teks tombol punya ukuran minimum, jadi baris pendukungnya
   disembunyikan agar tidak menimpa catatan di atasnya (tetap ada di aria-label) */
@container (max-height: 700px) {
  .cover__open-hint,
  .cover__handle { display: none; }
}

/* Intro Cover (berbasis waktu, sekali saat dibuka) */
.js [data-intro] {
  opacity: 0;
  transition:
    opacity .9s var(--ease-out) var(--d, 0s),
    transform 1.1s var(--ease-out) var(--d, 0s),
    clip-path 1.1s var(--ease-out) var(--d, 0s);
}

.js .is-ready [data-intro] {
  opacity: 1;
  transform: none;
}

.js [data-intro="up"] { transform: translate3d(0, calc(14 * var(--s)), 0); }

.js [data-intro="rise"] {
  transform: translate3d(0, .4em, 0);
  clip-path: inset(0 -10% 100% -10%);
}

.js .is-ready [data-intro="rise"] { clip-path: inset(-20% -10% -20% -10%); }

.js [data-intro="grow-y"] {
  transform: scaleY(0);
  transform-origin: top center;
}

.js [data-intro="grow-x"],
.js [data-intro="grow-x-r"] {
  transform: scaleX(0);
  transform-origin: left center;
}

/* Garis kiri ornamen tumbuh dari tengah ke kiri */
.js [data-intro="grow-x-r"] { transform-origin: right center; }

.js [data-intro="pop"] { transform: rotate(45deg) scale(0); }
.js .is-ready [data-intro="pop"] { transform: rotate(45deg); }

.js [data-intro="amp"] {
  transform: scale(1.08);
  transition-duration: 2s, 2.4s;
}

.js .is-ready [data-intro="amp"] { opacity: .045; }

/* Bingkai tergambar mengelilingi layar */
.js [data-intro="draw"] {
  opacity: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.2s cubic-bezier(.65, 0, .35, 1) .15s;
}

.js .is-ready [data-intro="draw"] { stroke-dashoffset: 0; }

/* Ajakan geser: chevron berdenyut berurutan setelah intro selesai */
@keyframes swipe-hint {
  0%, 100% { transform: translateY(4px); opacity: .35; }
  50% { transform: translateY(-4px); opacity: 1; }
}

.is-ready .cover__chev { animation: swipe-hint 1.8s ease-in-out calc(3s + var(--cd)) infinite; }

/* Saat Cover terangkat, isinya naik lebih cepat dan memudar */
[data-anim="drift"] {
  position: absolute;
  inset: 0;
  opacity: var(--p, 1);
  transform: translate3d(0, calc((1 - var(--p, 1)) * -90 * var(--s)), 0);
}

/* --- 02 · Hero ------------------------------------------------------------- */

.hero__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Crop foto hero-img.webp: 602×903 di posisi (-39, 0), sehingga pasangan berada
   di sisi kanan (nama vertikal di kiri) dan payung jatuh di area gelap bawah */
.hero__photo img {
  position: absolute;
  left: calc(-39 / 390 * 100%);
  top: 0;
  width: calc(602 / 390 * 100%);
  height: calc(903 / 844 * 100%);
  object-fit: cover;
  object-position: 25% top;
}

.hero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, var(--ink) 0%, rgba(18, 16, 14, .88) 17%, rgba(18, 16, 14, 0) 40%, rgba(18, 16, 14, 0) 84%, rgba(18, 16, 14, .75) 100%),
    linear-gradient(90deg, rgba(18, 16, 14, .88) 0%, rgba(18, 16, 14, .35) 26%, rgba(18, 16, 14, 0) 42%);
}

.hero__top {
  position: absolute;
  top: calc(24 * var(--s));
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(10px, calc(10 * var(--s)));
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--linen);
}

.hero__jv {
  position: absolute;
  top: calc(52 * var(--s));
  left: var(--gutter);
  font-family: var(--jv);
  font-size: max(13px, calc(15 * var(--s)));
  line-height: 1.6;
  color: var(--gold);
}

.hero__names {
  position: absolute;
  left: calc(10 * var(--s));
  bottom: calc(156 * var(--s));
  margin: 0;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--s));
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(62 * var(--s));
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.hero__amp {
  font-family: var(--sans);
  font-style: italic;
  font-size: calc(34 * var(--s));
  color: var(--gold);
}

/* Efek ketik. Huruf sudah menempati posisinya sejak awal (tanpa geser layout),
   hanya opacity-nya yang dinyalakan satu per satu oleh js/main.js mengikuti scroll. */
.js .hero__names .char {
  position: relative;
  opacity: 0;
  transition: opacity .06s linear;
}

.js .hero__names .char.is-typed { opacity: 1; }

/* Kursor: garis emas melintang di ujung huruf. Teks vertikal diputar 180°,
   jadi "bawah" lokal = atas di layar = posisi huruf berikutnya.
   Saat scroll berhenti kursor berkedip; saat scroll jalan kelasnya terus
   berpindah huruf sehingga animasinya mulai ulang dan terlihat solid. */
.hero__names .char::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -.06em;
  height: max(2px, calc(2 * var(--s)));
  background: var(--gold);
  opacity: 0;
}

.hero__names .char.is-before::after {
  top: -.06em;
  bottom: auto;
}

.hero__names .char.has-caret::after { animation: caret-blink .8s infinite; }

@keyframes caret-blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

.hero__foot {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(26 * var(--s));
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--s));
}

.hero__when {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}

.hero__date,
.hero__place {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--s));
}

.hero__place {
  align-items: flex-end;
  gap: calc(6 * var(--s));
  text-align: right;
}

.hero__day {
  font-family: var(--serif);
  font-size: calc(38 * var(--s));
  line-height: .95;
  letter-spacing: -.02em;
}

.hero__city {
  font-family: var(--serif);
  font-size: calc(24 * var(--s));
  line-height: 1;
}

.hero__region {
  font-size: max(12px, calc(12 * var(--s)));
  font-weight: 500;
  letter-spacing: .08em;
}

.hero__tag {
  font-size: max(13px, calc(14 * var(--s)));
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--gold);
}

/* --- 03 · Quotes ----------------------------------------------------------- */

.quotes__head {
  position: absolute;
  top: calc(28 * var(--s));
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(10px, calc(10 * var(--s)));
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sand);
}

.quotes__word {
  position: absolute;
  font-family: var(--serif);
  font-size: calc(100 * var(--s));
  line-height: 1;
  letter-spacing: -.045em;
  white-space: nowrap;
  will-change: transform;
}

.quotes__word--sakinah {
  top: calc(52 * var(--s));
  left: calc(-6 * var(--s));
  color: var(--paper);
}

.quotes__word--mawaddah {
  top: calc(160 * var(--s));
  right: calc(-34 * var(--s));
  color: transparent;
  -webkit-text-stroke: 1.2px var(--gold);
}

.quotes__word--rahmah {
  top: calc(268 * var(--s));
  left: calc(34 * var(--s));
  color: var(--gold);
}

/* Kata raksasa yang digerakkan --slide (data-giant): 1 di luar layar sebelum
   masuk, 0 di posisi, -1 keluar ke sisi seberang. slide-l masuk dari kiri. */
.slide-l { transform: translate3d(calc(var(--slide, 0) * -110%), 0, 0); }
.slide-r { transform: translate3d(calc(var(--slide, 0) * 110%), 0, 0); }

.quotes__gloss {
  position: absolute;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.quotes__gloss--sakinah { top: calc(150 * var(--s)); right: var(--gutter); }
.quotes__gloss--mawaddah { top: calc(258 * var(--s)); left: var(--gutter); }
.quotes__gloss--rahmah { top: calc(366 * var(--s)); right: var(--gutter); }

.quotes__ar {
  font-family: 'Amiri', serif;
  font-size: max(13px, calc(17 * var(--s)));
  line-height: 1.4;
  color: var(--gold);
}

.quotes__meaning {
  font-size: max(10px, calc(10 * var(--s)));
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sand);
}

/* Garis, ayat, dan terjemahan ditumpuk (bukan absolut) supaya tidak saling
   menimpa di HP pendek, di mana huruf Arab memakai ukuran minimum. */
.quotes__body {
  position: absolute;
  top: calc(408 * var(--s));
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--s));
}

.quotes__body .rule { background: rgba(239, 231, 216, .28); }

.quotes__ayah {
  margin: 0;
  font-family: 'Amiri Quran', 'Amiri', serif;
  font-size: max(16px, calc(20 * var(--s)));
  line-height: 2;
  text-align: right;
  color: var(--paper);
}

.quotes__translation {
  margin: calc(8 * var(--s)) 0 0;
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--s));
}

.quotes__translation p {
  margin: 0;
  font-size: max(12px, calc(13 * var(--s)));
  line-height: 1.55;
  color: var(--sand);
}

.quotes__key {
  font-weight: 600;
  color: var(--paper);
  transition: color .5s;
}

/* Kata kunci menyala emas sesaat ketika baru terbaca */
.quotes__key.is-flash { color: var(--gold); }

.quotes__cite { font-style: normal; }

/* Teks yang dibaca bersama: tiap kata redup lalu terang mengikuti scroll (--w) */
.js [data-read] .word { opacity: calc(.2 + var(--w, 0) * .8); }

/* --- 04–05 · Calon Mempelai ----------------------------------------------- */

.bride { border-top: 1px solid rgba(239, 231, 216, .12); }

.couple__head {
  position: absolute;
  top: calc(28 * var(--s));
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(10px, calc(10 * var(--s)));
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sand);
}

.couple__jv {
  font-family: var(--jv);
  font-size: max(13px, calc(14 * var(--s)));
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold);
}

.couple__giant {
  position: absolute;
  top: calc(58 * var(--s));
  left: calc(-12 * var(--s));
  font-family: var(--serif);
  font-size: calc(160 * var(--s));
  line-height: 1;
  letter-spacing: -.05em;
  white-space: nowrap;
  color: rgba(239, 231, 216, .14);
  /* --slide: 1 = di luar layar sebelum masuk, 0 = di posisi, -1 = keluar.
     Pria terus bergerak ke kanan selama scroll turun: masuk dari kiri, keluar ke kanan. */
  transform: translate3d(calc(var(--slide, 0) * -110%), 0, 0);
  will-change: transform;
}

.couple__giant--outline {
  top: calc(64 * var(--s));
  left: auto;
  right: calc(-16 * var(--s));
  font-size: calc(128 * var(--s));
  color: transparent;
  -webkit-text-stroke: 1.2px var(--gold);
  /* Wanita terus bergerak ke kiri: masuk dari kanan, keluar ke kiri */
  transform: translate3d(calc(var(--slide, 0) * 110%), 0, 0);
}

.couple__side {
  position: absolute;
  top: calc(210 * var(--s));
  writing-mode: vertical-rl;
  font-size: max(10px, calc(10 * var(--s)));
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
}

.groom .couple__side {
  left: var(--gutter);
  transform: rotate(180deg);
}

.bride .couple__side { right: var(--gutter); }

.couple__photo {
  position: absolute;
  top: calc(160 * var(--s));
  width: calc(230 * var(--s));
  height: calc(320 * var(--s));
  overflow: hidden;
  background: #2A2420;
}

.groom .couple__photo { right: var(--gutter); }
.bride .couple__photo { left: var(--gutter); }

/* Crop potret dari foto berdua: 933×1400 */
.couple__photo img {
  position: absolute;
  width: calc(933 / 230 * 100%);
  height: calc(1400 / 320 * 100%);
  max-width: none;
  object-fit: cover;
}

.groom .couple__photo img {
  left: calc(-184 / 230 * 100%);
  top: calc(-568 / 320 * 100%);
}

.bride .couple__photo img {
  left: calc(-351 / 230 * 100%);
  top: calc(-701 / 320 * 100%);
}

/* Tirai foto: panel emas menyapu masuk, lalu tersingkap memperlihatkan potret.
   Paruh pertama --p menutup, paruh kedua membuka. Potret ([data-anim="zoom"])
   mulai terlihat tepat saat tirai menutup penuh. */
.curtain {
  position: absolute;
  inset: 0;
  background: var(--gold);
  --close: min(1, var(--p, 1) * 2);
  --open: max(0, var(--p, 1) * 2 - 1);
}

/* Pria: menyapu dari kiri, tersingkap ke kanan */
.groom .curtain { clip-path: inset(0 calc((1 - var(--close)) * 100%) 0 calc(var(--open) * 100%)); }

/* Wanita: menyapu dari kanan, tersingkap ke kiri */
.bride .curtain { clip-path: inset(0 calc(var(--open) * 100%) 0 calc((1 - var(--close)) * 100%)); }

.js .couple__photo { background: transparent; }

.couple__name {
  position: absolute;
  top: calc(506 * var(--s));
  left: var(--gutter);
  right: var(--gutter);
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(44 * var(--s));
  line-height: 1;
  letter-spacing: -.02em;
}

.couple__parents {
  position: absolute;
  top: calc(568 * var(--s));
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.couple__ortu {
  font-family: var(--serif);
  font-size: calc(19 * var(--s));
  line-height: 1.3;
}

.couple__rule {
  position: absolute;
  top: calc(664 * var(--s));
  left: var(--gutter);
  right: var(--gutter);
  background: rgba(239, 231, 216, .28);
}

.couple__bio {
  position: absolute;
  top: calc(682 * var(--s));
  left: var(--gutter);
  right: var(--gutter);
  margin: 0;
  font-size: max(13px, calc(14 * var(--s)));
  line-height: 1.6;
  color: var(--sand);
}

.bride .couple__name {
  font-size: calc(40 * var(--s));
  text-align: right;
}

.bride .couple__parents {
  align-items: flex-end;
  text-align: right;
}

.bride .couple__bio { text-align: right; }

/* --- 06 · Event ------------------------------------------------------------ */

.event__head {
  position: absolute;
  top: calc(28 * var(--s));
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(10px, calc(10 * var(--s)));
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sand);
}

.event__tabs {
  position: absolute;
  top: calc(60 * var(--s));
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  align-items: flex-end;
  gap: calc(18 * var(--s));
}

.event__tab {
  position: relative;
  padding: 0 0 calc(6 * var(--s));
  border: none;
  background: transparent;
  font-family: var(--serif);
  font-size: calc(46 * var(--s));
  line-height: 1;
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 1px #A99E8C;
  cursor: pointer;
  transition: color .45s var(--ease-out), -webkit-text-stroke-color .45s var(--ease-out);
}

.event__tab[aria-selected="true"] {
  color: var(--paper);
  -webkit-text-stroke-color: transparent;
}

.event__tab:focus-visible,
.event__map:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.event__slash {
  padding-bottom: calc(14 * var(--s));
  font-size: calc(22 * var(--s));
  color: #6E655A;
}

.event__defs { position: absolute; }

/* Goresan kuas kering di bawah tab aktif. Tersembunyi = sudah tersapu ke kanan.
   Setelah user mengetuk tab (.is-touched): goresan lama tersapu ke kanan,
   lalu goresan baru dilukis dari kiri ke kanan. */
.event__brush {
  position: absolute;
  left: -4%;
  bottom: calc(-10 * var(--s));
  width: 108%;
  height: calc(18 * var(--s));
  overflow: visible;
  fill: var(--gold);
  filter: url(#brush-dry);
  clip-path: inset(-50% -5% -50% 105%);
}

.event__tab[aria-selected="true"] .event__brush { clip-path: inset(-50% -5% -50% -5%); }

.event__tabs.is-touched .event__tab[aria-selected="true"] .event__brush {
  animation: brush-draw .65s cubic-bezier(.6, 0, .25, 1) .2s both;
}

.event__tabs.is-touched .event__tab[aria-selected="false"] .event__brush {
  animation: brush-wipe .3s var(--ease-in) both;
}

@keyframes brush-draw {
  from { clip-path: inset(-50% 105% -50% -5%); }
  to { clip-path: inset(-50% -5% -50% -5%); }
}

@keyframes brush-wipe {
  from { clip-path: inset(-50% -5% -50% -5%); }
  to { clip-path: inset(-50% -5% -50% 105%); }
}

.event__time {
  position: absolute;
  top: calc(150 * var(--s));
  left: calc(14 * var(--s));
  font-family: var(--serif);
  font-size: calc(136 * var(--s));
  line-height: 1;
  letter-spacing: -.055em;
  white-space: nowrap;
  color: var(--gold);
}

/* Digit jam bergulir saat tab berganti */
.event__time .digit {
  display: inline-block;
}

.event__until {
  position: absolute;
  top: calc(296 * var(--s));
  left: var(--gutter);
  font-size: max(11px, calc(12 * var(--s)));
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sand);
}

.event__grid {
  position: absolute;
  top: calc(346 * var(--s));
  left: var(--gutter);
  right: var(--gutter);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(239, 231, 216, .28);
  border-bottom: 1px solid rgba(239, 231, 216, .28);
}

.event__cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: calc(14 * var(--s)) 12px calc(14 * var(--s)) 0;
}

.event__cell + .event__cell {
  padding: calc(14 * var(--s)) 0 calc(14 * var(--s)) 14px;
  border-left: 1px solid rgba(239, 231, 216, .28);
}

.event__label {
  font-size: max(9px, calc(9 * var(--s)));
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--stone);
}

.event__label.gold { color: var(--gold); }

.event__value {
  font-family: var(--serif);
  font-size: calc(22 * var(--s));
  line-height: 1.1;
}

.event__place {
  position: absolute;
  top: calc(448 * var(--s));
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--s));
}

.event__venue {
  font-family: var(--serif);
  font-size: calc(32 * var(--s));
  line-height: 1.08;
  letter-spacing: -.02em;
}

.event__address {
  font-size: max(13px, calc(14 * var(--s)));
  line-height: 1.55;
  color: var(--stone);
}

.event__map {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(36 * var(--s));
  height: max(48px, calc(54 * var(--s)));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: var(--gold);
  color: var(--ink);
  text-decoration: none;
  font-size: max(11px, calc(12 * var(--s)));
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.event__map svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.event__map-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Pergantian tab (berbasis waktu, menjawab ketukan user).
   Animasi menimpa sementara nilai --p dari scroll, lalu kembali ke sana. */
@keyframes tab-out {
  to { opacity: 0; transform: translate3d(0, calc(-10 * var(--s)), 0); }
}

@keyframes tab-in {
  from { opacity: 0; transform: translate3d(0, calc(16 * var(--s)), 0); }
}

@keyframes digit-in {
  from { opacity: 0; transform: translate3d(0, .5em, 0); }
}

.event__panel.is-leaving [data-anim] {
  animation: tab-out .22s var(--ease-in) both;
}

.event__panel.is-entering [data-anim] {
  animation: tab-in .7s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

/* Jam: wadahnya diam, digitnya yang bergulir satu per satu */
.event__panel.is-entering .event__time { animation: none; }

.event__panel.is-entering .event__time .digit {
  animation: digit-in .6s var(--ease-out) both;
  animation-delay: calc(var(--k, 0) * 55ms);
}

/* ==========================================================================
   Micro-animation berbasis scroll
   js/main.js mengisi --p (0 → 1) di tiap [data-anim] sesuai posisi scroll:
   0 = belum muncul / sudah keluar, 1 = di posisi akhir. Tanpa JS, --p tidak
   terisi dan fallback 1 membuat semua elemen tampil di posisi akhirnya.
   ========================================================================== */

[data-anim] { will-change: opacity, transform; }

[data-anim="fade"] { opacity: var(--p, 1); }

[data-anim="fade-up"] {
  opacity: var(--p, 1);
  transform: translate3d(0, calc((1 - var(--p, 1)) * 18 * var(--s)), 0);
}

[data-anim="fade-down"] {
  opacity: var(--p, 1);
  transform: translate3d(0, calc((1 - var(--p, 1)) * -14 * var(--s)), 0);
}

/* Naik dari balik garis bawahnya sendiri */
[data-anim="rise"] {
  opacity: var(--p, 1);
  transform: translate3d(0, calc((1 - var(--p, 1)) * .45em), 0);
  clip-path: inset(calc(var(--p, 1) * -20%) -10% calc(100% - var(--p, 1) * 120%) -10%);
}

[data-anim="reveal-d"] { clip-path: inset(0 0 calc((1 - var(--p, 1)) * 100%) 0); }

/* Foto hero: zoom out pelan sepanjang hero ter-pin */
[data-anim="photo"] { transform: scale(calc(1.12 - var(--p, 1) * .12)); }

/* Potret mempelai: muncul di balik tirai lalu zoom out */
[data-anim="zoom"] {
  opacity: calc(var(--p, 1) * 1000);
  transform: scale(calc(1.25 - var(--p, 1) * .25));
}

[data-anim="line"],
[data-anim="line-r"] {
  transform: scaleX(var(--p, 1));
  transform-origin: left center;
}

[data-anim="line-r"] { transform-origin: right center; }

/* Teks vertikal yang diputar 180°: rotasi di induk, animasi di span dalam */
.couple__side [data-anim] { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .snap { scroll-behavior: auto; }

  .js [data-intro],
  .js [data-intro="draw"] {
    transition: opacity .4s linear;
    stroke-dashoffset: 0;
  }

  .js [data-intro]:not([data-intro="pop"]) { transform: none; }
  .js [data-intro="pop"] { transform: rotate(45deg); }
  .js [data-intro="rise"] { clip-path: none; }
  .is-ready .cover__chev { animation: none; opacity: 1; }

  .event__panel.is-leaving [data-anim],
  .event__panel.is-entering [data-anim],
  .event__panel.is-entering .event__time .digit { animation: none; }

  .event__tabs.is-touched .event__brush { animation: none; }
}