/* =========================================================
   TAHAP 4 — Halo Portal, galeri geser samping, animasi teks
   (dimuat setelah style.css, sehingga menimpa aturan lama)
   ========================================================= */

/* ---------- Animasi teks ---------- */
.tx-words .w {
  display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(.55em);
  transition: opacity 1.3s ease, filter 1.3s ease, transform 1.3s var(--ease-out);
  transition-delay: calc(var(--base, 0s) + var(--i) * var(--step, 55ms));
}
.tx-words.is-in .w { opacity: 1; filter: none; transform: none; }

/* Arab: tiap kata tersapu dari kanan ke kiri, mulai dari kata pertama (paling kanan) */
.tx-rtl .w {
  display: inline-block; opacity: 0;
  -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 30%, transparent 38%);
          mask-image: linear-gradient(270deg, #000 0%, #000 30%, transparent 38%);
  -webkit-mask-size: 320% 100%; mask-size: 320% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0% 0; mask-position: 0% 0;
  transition: -webkit-mask-position 1.7s cubic-bezier(.4, 0, .2, 1), mask-position 1.7s cubic-bezier(.4, 0, .2, 1), opacity .6s ease;
  transition-delay: calc(var(--base, 0s) + var(--i) * var(--step, 90ms));
}
.tx-rtl.is-in .w { opacity: 1; -webkit-mask-position: 100% 0; mask-position: 100% 0; }

/* Tulisan tangan: sapuan kiri ke kanan seolah ditulis */
.tx-write {
  display: inline-block; opacity: 0; padding: .06em .14em; margin: -.06em -.14em;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 32%, transparent 40%);
          mask-image: linear-gradient(90deg, #000 0%, #000 32%, transparent 40%);
  -webkit-mask-size: 320% 100%; mask-size: 320% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  transition: -webkit-mask-position 1.5s cubic-bezier(.45, .05, .25, 1), mask-position 1.5s cubic-bezier(.45, .05, .25, 1), opacity .3s ease;
  transition-delay: var(--base, 0s);
}
.tx-write.is-in { opacity: 1; -webkit-mask-position: 0% 0; mask-position: 0% 0; }
.cover__names .name.tx-write { display: block; }
.cover__names .amp { opacity: 0; animation: reveal 1s var(--ease-out) .85s forwards; }

/* ---------- Cover: bingkai kaca + halo (pengganti arch) ---------- */
.cover__halo { position: absolute; left: 50%; top: 50%; width: min(560px, 128vw); aspect-ratio: 1; transform: translate(-50%, -57%); pointer-events: none; }
.cover__halo i { position: absolute; border-radius: 50%; }
.cover__halo i:nth-child(1) {
  inset: 9%;
  background: radial-gradient(circle at 34% 28%, #fff 0%, rgba(250,219,216,.92) 42%, rgba(234,242,248,.75) 70%, transparent 73%);
  box-shadow: 0 0 120px 24px rgba(250,219,216,.5);
}
.cover__halo i:nth-child(2) { inset: 2%; border: 1px solid rgba(233,183,178,.8); animation: spin 54s linear infinite; }
.cover__halo i:nth-child(2)::after { content: ""; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 4px var(--pink); }
.cover__halo i:nth-child(3) { inset: -5%; border: 1px dashed rgba(188,211,230,.95); animation: spin 90s linear infinite reverse; }
.cover__frame { border-radius: 38px; padding: clamp(34px, 6vh, 54px) clamp(22px, 6vw, 44px) clamp(30px, 5vh, 46px); }
.cover__frame::before { inset: 9px; border-radius: 30px; }
.corner--tl, .corner--tr { display: block; }
.corner--tl { left: 22px; top: 22px; border-width: 1px 0 0 1px; }
.corner--tr { right: 22px; top: 22px; border-width: 1px 1px 0 0; }
@media (max-height: 640px) { .cover__frame { border-radius: 30px; } }

/* ---------- THE SOULS: Halo Portal ---------- */
.soul { width: min(78%, 360px); }
.soul::before { display: none; }
.soul__stage { position: relative; aspect-ratio: 4 / 5.4; }
.soul.is-in .soul__stage { animation: floaty 9s ease-in-out 2s infinite; }
.soul--bride.is-in .soul__stage { animation-delay: 4.5s; }
.halo { position: absolute; left: 3%; top: 9%; width: 94%; aspect-ratio: 1; pointer-events: none; }
.halo i { position: absolute; border-radius: 50%; }
.halo__glow {
  inset: 0;
  background: radial-gradient(circle at 32% 26%, #fff 0%, rgba(255,255,255,.55) 22%, transparent 46%),
              linear-gradient(150deg, var(--pink) 0%, #fff 48%, var(--ice-deep) 100%);
  box-shadow: 0 0 70px 6px rgba(250,219,216,.8), inset 0 0 40px rgba(255,255,255,.7);
}
.soul--bride .halo__glow { background: radial-gradient(circle at 68% 26%, #fff 0%, rgba(255,255,255,.55) 22%, transparent 46%), linear-gradient(210deg, var(--ice-deep) 0%, #fff 48%, var(--pink) 100%); }
.halo__ring { inset: -5%; border: 1px solid rgba(233,183,178,.9); animation: spin 46s linear infinite; }
.halo__ring::after { content: ""; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 4px var(--pink); }
.halo__ring--b { inset: -12%; border: 1px dashed rgba(188,211,230,.9); animation: spin 80s linear infinite reverse; }
.halo__ring--b::after { display: none; }
.soul__cut {
  position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 98%); mask-image: linear-gradient(180deg, #000 76%, transparent 98%);
}
.soul__fig { position: absolute; inset: 0; pointer-events: none; filter: drop-shadow(0 18px 26px rgba(180,120,135,.35)); }
.soul__fog { position: absolute; left: -10%; right: -10%; bottom: -4%; height: 42%; pointer-events: none; background: radial-gradient(ellipse 62% 100% at 50% 100%, #fff 0%, rgba(255,255,255,.94) 38%, rgba(255,255,255,.5) 62%, transparent 100%); }
.soul__ph { position: absolute; left: 3%; top: 9%; width: 94%; aspect-ratio: 1; inset: auto; display: grid; place-items: center; background: none; }
.soul__stage.has-img .soul__ph { display: none; }
.soul__text { margin-top: 1.2rem; }

/* ---------- THE CONVERGENCE: dua lingkaran bertemu ---------- */
.events { gap: 0; max-width: 520px; padding: 0 6px; }
.event {
  flex: 1 1 0; aspect-ratio: 1 / 1; border-radius: 50%; padding: 0; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.92), rgba(250,219,216,.62) 72%);
  border: 1px solid rgba(255,255,255,.95); box-shadow: 0 24px 50px -24px rgba(180,120,135,.5);
}
.event::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(233,183,178,.55); pointer-events: none; }
.event--resepsi { margin-left: -8%; background: radial-gradient(circle at 70% 24%, rgba(255,255,255,.92), rgba(234,242,248,.8) 72%); }
.event--resepsi::after { border-color: rgba(188,211,230,.8); }
.event__time { margin-top: .35rem; }
.events__link { display: none; }

/* ---------- GALERI: geser samping saat scroll ---------- */
.gallery { overflow: visible; }
.gallery .section-head { margin-bottom: clamp(24px, 5vh, 48px); }

.hscroll { position: relative; height: 320vh; }
.hscroll__pin { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; display: flex; align-items: center; }
.hscroll__bg { position: absolute; inset: 0; overflow: hidden; }
.hscroll__track { position: relative; display: flex; align-items: center; gap: clamp(28px, 6vw, 90px); height: 100%; padding: 0 10vw; will-change: transform; }

/* latar babak terang */
.hscroll--light .hscroll__bg { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); background: linear-gradient(180deg, var(--ice), #fdf1ef 40%, var(--white) 72%, var(--ice)); }
.hscroll--light .hscroll__bg::before, .hscroll--light .hscroll__bg::after { content: ""; position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(60px); }
.hscroll--light .hscroll__bg::before { left: -25vmax; top: -22vmax; opacity: .75; background: radial-gradient(circle, var(--pink), transparent 68%); transform: translate3d(calc(var(--p, 0) * 55vw), 0, 0); }
.hscroll--light .hscroll__bg::after { right: -28vmax; bottom: -26vmax; opacity: .6; background: radial-gradient(circle, var(--ice-deep), transparent 68%); transform: translate3d(calc(var(--p, 0) * -50vw), 0, 0); }
/* latar babak gelap */
.hscroll--dark .hscroll__bg { background: linear-gradient(180deg, #14111f, #1a1528 50%, #14111f); }
.hscroll__bg .stars { inset: 0 auto 0 0; width: 130%; transform: translate3d(calc(var(--p, 0) * -14vw), 0, 0); }

/* panel judul babak (bagian pertama trek) */
.h-panel { flex: 0 0 min(78vw, 440px); position: relative; }
.hscroll--light .h-panel { color: var(--ink); }
.hscroll--dark .h-panel { color: #f3e9ec; }
.h-panel .chapter__tag { text-align: left; padding-left: 0; margin-bottom: 1rem; }
.h-panel .chapter__title { margin: 0; font-size: clamp(2.2rem, 9vw, 3.4rem); line-height: 1.1; }
.h-panel .chapter__hint { margin-top: 1.4rem; text-align: left; line-height: 1.8; }
.hscroll--light .chapter__title { color: var(--ink); text-shadow: none; }
.hscroll--light .chapter__hint { color: var(--ink-soft); }
.hscroll--dark .chapter__tag { color: var(--pink); }

/* kartu foto: tanpa frame, hanya foto bersih + fade/fokus */
.h-card {
  position: relative; flex: 0 0 auto; margin: 0; margin-top: var(--y, 0); cursor: zoom-in; outline: none;
  height: calc(var(--h, 64vh) * var(--s, 1)); aspect-ratio: var(--ar, 2 / 3);
  opacity: var(--op, 1); filter: blur(var(--bl, 0px)); will-change: opacity, filter;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 600px) { .h-card { --s: .88; } }
.h-frame { position: absolute; inset: 0; overflow: hidden; border-radius: 22px; transition: box-shadow .8s ease; }
.h-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h-card--light .h-frame { box-shadow: 0 34px 60px -34px rgba(160,110,125,.45); }
.h-card--dark .h-frame { background: #0d0b14; box-shadow: 0 40px 80px -34px rgba(0,0,0,.9); --x: 50%; --y: 50%; --r: 0px; }
.h-card--dark .h-frame img { filter: brightness(.42) contrast(1.12) saturate(.6); transition: transform 2s var(--ease-out); }
.h-card--dark .g-ph { background: radial-gradient(60% 50% at 50% 35%, #2a2238, transparent 75%), #0d0b14; }
.h-card--dark .g-ph span { color: rgba(250,219,216,.18); }
.h-card--dark.has-img .s-lit { opacity: 1; }
.h-card--dark.is-lit .s-lit { --r: 1400px; }
.h-card figcaption {
  position: absolute; left: 0; right: 0; top: 100%; margin-top: 1rem; text-align: center;
  font-family: var(--font-sans); font-weight: 300; font-size: .62rem; letter-spacing: .4em; padding-left: .4em; text-transform: uppercase;
  color: var(--ink-soft); opacity: .75;
}
.h-card--dark figcaption { color: rgba(243,233,236,.75); }
.h-card:focus-visible .h-frame { outline: 2px solid var(--ice-deep); outline-offset: 6px; }
.h-card--dark:focus-visible .h-frame { outline-color: var(--pink-deep); }
.h-panel .chapter__sub { margin-top: 1.3rem; font-style: italic; font-weight: 300; font-size: 1.05rem; line-height: 1.7; color: var(--ink-soft); }
.hscroll--dark .chapter__sub { color: rgba(243,233,236,.7); }

/* penunjuk posisi */
.hscroll__ui { position: absolute; left: 0; right: 0; bottom: max(22px, env(safe-area-inset-bottom)); z-index: 3; display: flex; align-items: center; justify-content: center; gap: 14px; font-family: var(--font-sans); font-size: .62rem; letter-spacing: .3em; color: var(--ink-soft); pointer-events: none; }
.hscroll--dark .hscroll__ui { color: rgba(243,233,236,.7); }
.hs-line { width: 120px; height: 1px; background: rgba(150,130,150,.3); overflow: hidden; }
.hs-line i { display: block; height: 100%; width: 100%; background: currentColor; transform-origin: left; transform: scaleX(0); }

/* gerak dikurangi: geser horizontal manual (tanpa pin) */
.hscroll.is-static { height: auto; }
.hscroll.is-static .hscroll__pin { position: relative; height: auto; overflow-x: auto; padding: 60px 0 80px; scroll-snap-type: x proximity; }
.hscroll.is-static .hscroll__track { height: auto; }
.hscroll.is-static .h-card { scroll-snap-align: center; }
.hscroll.is-static .hscroll__ui { display: none; }

/* ---------- TAHAP 5: sambungan antar-bagian tanpa garis ---------- */
html, body { overflow-x: clip; }
.hscroll--light { background: var(--ice); margin-top: -1px; }
.hscroll--dark { background: #14111f; margin-top: -1px; margin-bottom: -1px; }
.dusk { margin-bottom: -1px; position: relative; z-index: 1; }
.dawn { margin-top: -1px; position: relative; z-index: 1; }
.hscroll--dark .hscroll__bg { -webkit-mask-image: none; mask-image: none; }
.echoes { background: linear-gradient(180deg, #fdf1ef 0%, var(--white) 24%, var(--ice) 100%); }
.envelope { background: linear-gradient(180deg, var(--ice) 0%, #fdf1ef 42%, var(--pink) 100%); }
.footer { background: linear-gradient(180deg, var(--pink) 0%, #f6ecf0 55%, var(--ice) 100%); }
/* kabut tidak boleh terpotong tajam di tepi bagian */
.souls, .converge, .echoes, .envelope { -webkit-mask-image: none; }
.mist--e { bottom: 8%; }

/* ---------- Formulir: placeholder italic abu ---------- */
.field input::placeholder, .field textarea::placeholder { font-style: italic; color: #a8a0ab; opacity: 1; font-weight: 300; }
.venue__actions { margin-top: 2.2rem; }

/* tepi bagian: kabut/orb dipudarkan ke warna sambungan, tanpa potongan tajam */
.souls, .converge, .echoes, .envelope { --edge-t: var(--pink); --edge-b: var(--ice); }
.converge { --edge-t: var(--ice); --edge-b: #fdf1ef; }
.echoes { --edge-t: #fdf1ef; --edge-b: var(--ice); }
.envelope { --edge-t: var(--ice); --edge-b: var(--pink); }
.souls::before, .converge::before, .echoes::before, .envelope::before,
.souls::after, .converge::after, .echoes::after, .envelope::after { content: ""; position: absolute; left: 0; right: 0; height: clamp(120px, 22vh, 220px); z-index: 1; pointer-events: none; }
.souls::before, .converge::before, .echoes::before, .envelope::before { top: 0; background: linear-gradient(180deg, var(--edge-t), transparent); }
.souls::after, .converge::after, .echoes::after, .envelope::after { bottom: 0; background: linear-gradient(0deg, var(--edge-b), transparent); }
.g-shine { display: none; }

.soul__fog { display: none; }

/* ---------- Putaran perbaikan setelah audit ---------- */
:root { --ink-soft: #6f5a60; }
.cd span { font-size: .66rem; }
.hs-count, .h-card figcaption, .footer__tag, .env__hint { font-weight: 400; }
.field input::placeholder, .field textarea::placeholder { color: #8f8794; }
.guest__note { text-wrap: balance; }
.hscroll__pin { overflow: clip; }
.h-card--dark .h-frame img { filter: brightness(.56) contrast(1.1) saturate(.6); }

/* cover: tidak pernah terpotong di layar pendek */
.cover { grid-template-rows: minmax(0, 1fr); }
.cover__frame { overflow-x: hidden; overflow-y: auto; scrollbar-width: none; max-height: calc(100dvh - 24px); }
.cover__frame::-webkit-scrollbar { display: none; }
@media (min-height: 600px) and (max-height: 640px) { .guest__note { display: block; font-size: .8rem; } }
@media (max-height: 520px) {
  .cover__frame { width: min(520px, 92vw); padding: 20px 26px 20px; border-radius: 28px; }
  .cover__frame::before { border-radius: 20px; }
  .cover__eyebrow, .cover__ornament, .guest__label, .guest__note, .corner { display: none; }
  .cover__names { display: flex; align-items: baseline; justify-content: center; gap: .35em; }
  .cover__names .name.tx-write, .cover__names .name { display: inline-block; font-size: clamp(1.9rem, 11vh, 2.6rem); }
  .cover__names .amp { margin: 0; }
  .cover__theme { margin-top: .2rem; }
  .guest__name { margin-top: .3rem; font-size: 1.15rem; }
  .btn-open { margin-top: .7rem; }
  .cover__halo { display: none; }
}

/* amplop: tutup tidak menimpa teks, bayangan kartu tidak terpotong */
.env { margin-top: calc(min(300px, 80vw) * .4 + 24px); }
.env__reveal { margin: 0 -32px -64px; }
.env__inner { padding: 0 32px 64px; }

/* gerak dikurangi: semua elemen reveal langsung terlihat */
@media (prefers-reduced-motion: reduce) {
  .reveal, .btn-open { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
}

.hs-count, .h-card figcaption { font-size: .7rem; opacity: 1; }
.genesis__scroll { color: rgba(250, 219, 216, .9); font-size: .7rem; }
.genesis__scroll i { background: linear-gradient(rgba(250, 219, 216, .9), transparent); }
@media (max-height: 520px) { .music-btn { width: 36px; height: 36px; right: 10px; bottom: 10px; } }

/* ---- Poster cadangan: elemen bersayap selalu tampil (iOS sering menahan video sampai ada interaksi) ---- */
.cover__poster {
  position: absolute; inset: 0;
  background: url('../assets/img/cover-start.jpg') center 30% / cover no-repeat;
}

/* ---- RSVP ---- */
.rsvp { margin-bottom: 1.6rem; }
.rsvp__title { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; text-align: center; margin: 0 0 .9rem; }
.rsvp__opts { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; }
.rsvp__opts label { cursor: pointer; }
.rsvp__opts input { position: absolute; opacity: 0; pointer-events: none; }
.rsvp__opts span { display: inline-block; padding: .55rem 1.05rem; border-radius: 999px; border: 1px solid rgba(160,110,120,.35); background: rgba(255,255,255,.55); font-size: .9rem; transition: all .25s; }
.rsvp__opts input:checked + span { background: #FADBD8; border-color: #e6aeb2; box-shadow: 0 4px 14px rgba(230,174,178,.35); }
.rsvp__opts input:focus-visible + span { outline: 2px solid #c98a92; outline-offset: 2px; }
.rsvp select { width: 100%; padding: .75rem .9rem; border-radius: 12px; border: 1px solid rgba(160,110,120,.3); background: rgba(255,255,255,.7); font: inherit; color: inherit; }