/* ============================================================
   UNDANGAN — Arka & Ditha
   Base, variables, splash, cover
   ============================================================ */

@font-face {
  font-family: 'High Empathy';
  src: url('../assets/font/High-Empathy.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #f5f3ee;
  --void: #0a0a0a;
  --void-soft: #111111;
  --line: rgba(245, 243, 238, 0.35);
  --line-dark: rgba(10, 10, 10, 0.25);

  --font-script: 'High Empathy', cursive;
  --font-sans: 'Montserrat', sans-serif;

  /* fluid type scale, tuned so a 9:16 phone and a 1:2 phone both read well.
     Unit is cqi (container query inline size) instead of vw: cqi is a % of
     #stage's own width (see "container-type: inline-size" on #stage below),
     NOT the raw browser viewport. On desktop #stage is letterboxed to a
     phone-shaped column, so cqi keeps fonts proportional to that column
     instead of ballooning to match a 1920px-wide window. On mobile #stage
     already equals the viewport width, so behaviour there is unchanged.
     The rem floor (first clamp arg) was also nudged up slightly from the
     original vw-only scale so text doesn't bottom out too small on very
     narrow inspector/device-toolbar widths (~320-360px). */
  --fs-xs: clamp(0.72rem, 2.3cqi, 0.78rem);
  --fs-sm: clamp(0.82rem, 2.7cqi, 0.92rem);
  --fs-base: clamp(0.94rem, 3.1cqi, 1.05rem);
  --fs-md: clamp(1rem, 3.4cqi, 1.1rem);
  --fs-lg: clamp(1.65rem, 6cqi, 2.1rem);
  --fs-xl: clamp(2.35rem, 9cqi, 3.1rem);
  --fs-script: clamp(2.85rem, 12cqi, 4.2rem);
  --fs-script-lg: clamp(3.45rem, 15cqi, 5.2rem);

  --vh: 1svh; /* set/patched by JS for older browsers */
  --stage-w: 100vw;
  /* svh (small viewport height), NOT dvh: dvh re-computes continuously as the
     mobile address bar collapses/expands mid-scroll, so anything sized from
     it (like #stage's width below) visibly "breathes"/wobbles every scroll
     frame. svh stays pinned to the smallest (chrome-visible) height, so it
     never changes while scrolling — this is the actual fix for the wobble. */
  --stage-h: 100svh;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overscroll-behavior-y: none;
}

body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html.locked,
html.locked body {
  overflow: hidden;
  /* svh first as a fallback for browsers without dvh support, dvh second
     so it wins when supported. This box does NOT sit inside a
     .pin-spacer-N scroll-story track (it's the pre-open locked screen,
     nothing scrolls yet), so the "svh must stay constant mid-scroll to
     avoid wobble" reasoning below does not apply here — dvh is safe and
     is what makes this box actually fill the real, chrome-collapsed
     screen instead of stopping short at the smallest-possible height. */
  height: 100svh;
  height: 100dvh;
  overscroll-behavior: none;
}

img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Stage: keeps the whole experience phone-shaped and
   centered no matter the viewport ratio (9:16 up to ~1:2) ---------- */
#stage {
  position: relative;
  width: 100%;
  /* max-width (phone-shape cap) SENGAJA ora didekekke ing kene wae —
     saiki mung ana ing njero @media (min-aspect-ratio: 9/16) and
     (pointer: fine) ing ngisor. Alesan: rumus "var(--stage-h) * 0.5625"
     nganggo 100svh, yaiku dhuwur viewport SING WIS DIKURANGI chrome
     Safari (address bar + tab bar). Ing iPhone, dhuwur sing wis
     dikurangi iki asring nggawe rasio width:height "katon" luwih amba
     tinimbang 9:16 tenane, sanajan HP-e jelas dhuwur/portrait — akibate
     max-width iki kejiret CENDHEK TINIMBANG LEBAR LAYAR TENANAN, gawe
     black-bar kiwa-tengen sanajan mode letterbox desktop during aktif.
     Ing HP/tablet ora perlu cap iki babar pisan (wis mesthi "phone
     shaped" amarga pancen layar tenanan), dadi paling aman mung
     ditrapke ing desktop tenanan wae — ing njero media query. */
  margin: 0 auto;
  background: var(--void);
  /* overflow: clip (NOT hidden) — visually identical clipping of the
     off-screen sliding panels (groomPanel/bridePanel xPercent ±100% etc.),
     but unlike "hidden", "clip" does NOT establish a CSS "scroll
     container". This matters because #sectionN below is now
     position:sticky (see .sticky-stage): sticky positioning is computed
     relative to the nearest ancestor scroll container, and #stage's own
     height always exactly equals its content (nothing ever actually
     overflows it — the <body> is what scrolls), so if #stage counted as
     that scroll container, #sectionN would never see any scrolling
     happen and would just sit at its static position forever (sticky
     silently doing nothing). "clip" keeps the visual clip without this
     side effect, so the real page/viewport scroll is what position:
     sticky tracks. Needed in every browser this project targets
     (Safari 16+, Chrome 90+, Firefox 102+ all support overflow: clip). */
  overflow: clip;
  /* Turns #stage into a size query container: any "cqi" unit used by a
     descendant (see the --fs-* scale above, plus .splash-logo/.s3-item/
     .s6-flower widths below) is now a % of #stage's OWN width, not the
     browser viewport. This is what actually fixes font/element sizes
     being wrong on desktop (was reading 100vw of a 1920px window instead
     of #stage's ~500-600px letterboxed column) and keeps mobile identical
     (there #stage's width already equals the viewport width). Does NOT
     affect position:fixed containing blocks (only transform/filter do
     that — see the wide-aspect-ratio block right below), so pinning is
     unaffected. */
  container-type: inline-size;
  /* NB: no transform here on purpose. A transform on #stage would make it
     the containing block for every position:fixed descendant (splash,
     GSAP-pinned sections), which forces GSAP to pin using JS-driven
     transforms instead of native position:fixed — visibly janky/shaky
     while scrolling, especially on mobile momentum-scroll. Mobile (the
     vast majority of guests opening this from a chat link) gets true
     native fixed pinning this way: rock solid, zero jitter. */
}

@media (min-aspect-ratio: 9/16) and (pointer: fine) {
  /* wide/desktop viewport: letterbox the experience like a phone.
     Only HERE do we need a containing block to keep fixed content (e.g.
     #splash, .scroll-cue, .music-toggle — see their own comments in
     index.html) from escaping to full browser width. #sectionN itself is
     position:sticky now (not GSAP pin/fixed), and position:sticky isn't
     affected by an ancestor's transform the way position:fixed is, so
     this block has no effect on the scroll-story sections themselves.
     "(pointer: fine)" wajib dibarengke: tanpa iki, iPhone Safari isa
     "keliru" katon kaya wide-viewport pas kaca lagi mbukak (chrome Safari
     during lengkap during ndelik, dadi innerHeight during cendhek), sing
     nyebabke #stage kejiret letterbox ing HP normal — asile: black-bar
     kiwa-tengen (max-width kejiret) lan scroll-cue "ketutupan" (dadi
     position:fixed marang #stage sak kabehe, dudu marang layar). Nganggo
     "pointer: fine" (mouse tenanan), kondisi iki mung tenanan aktif ing
     desktop/laptop, ora bakal misfire ing HP/tablet layar-sentuh. */
  #stage {
    max-width: calc(var(--stage-h) * 0.5625); /* never wider than a 9:16 phone */
    transform: translateZ(0);
    box-shadow: 0 0 80px rgba(0,0,0,0.6);
  }
  #splash {
    max-width: calc(var(--stage-h) * 0.5625);
  }
}

.screen-fill {
  position: relative;
  width: 100%;
  /* svh first as a fallback for browsers without dvh support, dvh second
     so it wins when supported.

     dvh HERE is safe even though it re-computes continuously while the
     address bar animates — unlike --stage-h/.pin-spacer-N (still svh,
     untouched), THIS box's own height is never what drives the
     scroll-story's scrollable distance or animation progress. Each
     .pin-spacer-N track's length is fixed in svh (see SECTION rules
     below) and js/main.js's updateScrollStory() reads window.innerHeight
     live every frame regardless of this box's CSS height, so the story
     timeline/progress mapping does not move. The only effect of dvh here
     is that #cover / #sectionN's OWN bottom edge tracks the real visible
     viewport instead of stopping short at the address-bar-visible
     minimum, closing the gap that appeared once the bar collapses
     mid-scroll. Residual risk: a subtle few-px "breathing" of this box's
     bottom edge while the bar is mid-animation — cosmetic only, not the
     old pin+normalizeScroll snap/jump wobble (that mechanism is gone). */
  height: 100svh;
  height: 100dvh;
}

/* .sticky-stage — added ALONGSIDE .screen-fill (not instead of it) to
   #section1..#section6 only. #cover also uses .screen-fill but is NOT
   part of the scroll-story (it's not inside a .pin-spacer-N track), so
   it must stay position:relative — hence this is a separate class
   rather than changing .screen-fill's own "position" directly.

   IMPORTANT: the "position: sticky" declared HERE does NOT actually win
   the cascade — #section1..#section6 below are also targeted by their
   own #sectionN ID rule (needed there anyway for overflow/background/
   color), and an ID selector (specificity 1-0-0) always beats a class
   selector (0-1-0) regardless of source order. So the real
   "position: sticky; top: 0;" that takes effect lives in each #sectionN
   rule below (with a comment pointing back here) — THAT is what
   actually pins each section to the top of the viewport while its
   .pin-spacer-N track scrolls past. The declaration in this rule is
   kept only as a harmless documented default/fallback in case a future
   #sectionN edit ever drops its own position rule; don't rely on it.

   Replaces the old GSAP ScrollTrigger pin+scrub mechanism: each
   #sectionN now natively sticks to the top of the viewport for as long
   as its .pin-spacer-N track is being scrolled through (see
   js/main.js updateScrollStory()), instead of being forced to
   position:fixed by GSAP. */
.sticky-stage {
  position: sticky;
  top: 0;
}

/* ============ utility ============ */
.eyebrow-label { font-family: var(--font-sans); letter-spacing: 0.14em; }
.hairline { width: 40px; height: 1px; background: currentColor; opacity: 0.5; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ============================================================
   SPLASH SCREEN
   ============================================================ */
#splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  /* #splash saiki dadi sibling #stage (delok index.html), dudu anak
     njerone — supaya ing desktop dheweke tetep fixed marang viewport
     asli (dudu marang dhuwure #stage sing ewon px, sing gawe logo
     ora katon). Baris width/max-width/margin ing ngisor iki nyalin
     rumus letterbox #stage (baris 86) supaya splash tetep katon
     "sak-kolom" karo panggung ing desktop, lan container-type dhewe
     supaya unit cqi ing .splash-logo tetep ngukur marang lebar iki
     (dudu lebar browser mentah). */
  width: 100%;
  /* max-width (padha karo #stage) mung ditrapke ing desktop tenanan —
     delok @media (min-aspect-ratio: 9/16) and (pointer: fine) ing
     ndhuwur, alesane padha: yen dipeksa aktif ing kene (unconditional),
     rumus 0.5625 nganggo 100svh isa kejiret cendhek tinimbang lebar
     layar tenanan ing iPhone, splash dadi katon black-bar sedhela. */
  margin: 0 auto;
  container-type: inline-size;
  background: var(--void);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.75s ease;
}
#splash.is-hidden { opacity: 1; pointer-events: none; }
#splash .splash-logo {
  width: 10cqi;
  max-width: 60px;
  opacity: 1;
  transition: opacity 1s ease;
}
#splash.logo-in .splash-logo { opacity: 1; }
#splash.stage-bound { position: absolute; }

/* ============================================================
   COVER
   ============================================================ */
#cover {
  position: relative;
  z-index: 10;
  overflow: hidden;
  color: var(--ink);
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease;
}
#cover.is-hidden { opacity: 0; pointer-events: none; }

#cover .cover-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
}
#cover .cover-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  opacity: 0;
  transition: opacity 1.1s ease;
}
#cover .cover-bg.is-active { opacity: 1; }

#cover .cover-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom,
      rgb(0, 0, 0) 0%,
      rgba(0, 0, 0, 0.734) 22%,
      rgba(0, 0, 0, 0.679) 45%,
      rgba(0, 0, 0, 0.516) 70%,
      rgb(0, 0, 0) 100%); 
}

#cover .cover-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8.5% 8% 6%;
  text-align: center;
}

#cover .cover-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
}
#cover .cover-top .kicker {
  font-size: var(--fs-lg);
  font-weight: 300;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}
#cover .cover-top .the-date {
  font-size: clamp(1.95rem, 8cqi, 2.6rem);
  font-weight: 500;
  letter-spacing: 0.02em;
}

#cover .cover-guest {
  margin-top: 5vh;
  margin-bottom: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
}
#cover .cover-guest .to-label { font-size: var(--fs-md); font-weight: 300; }
#cover .cover-guest .guest-name { font-size: var(--fs-md); font-weight: 700; }
#cover .cover-guest .at-place { font-size: var(--fs-md); font-weight: 300; margin-top: 0.3em; }

#cover .open-btn {
  margin-bottom: 7vh;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  padding: 0.6em 1.6em;
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  transition: background 0.35s ease, color 0.35s ease;
}
#cover .open-btn:active { background: var(--ink); color: var(--void); }

/* ============================================================
   FALLBACK — mung aktif yen GSAP gagal dimuat
   (kelas "no-scrollstory" ditambahke dening js/main.js). Tujuane:
   supaya undangan tetep iso diwaca lan discroll normal senajan
   tanpa animasi cinematic-e.
   ============================================================ */
html.no-scrollstory .pin-spacer-1,
html.no-scrollstory .pin-spacer-2,
html.no-scrollstory .pin-spacer-3,
html.no-scrollstory .pin-spacer-4,
html.no-scrollstory .pin-spacer-5,
html.no-scrollstory .pin-spacer-6 {
  height: auto !important;
}
html.no-scrollstory .screen-fill {
  height: auto !important;
  min-height: 100svh;
  padding-top: 8vh;
  padding-bottom: 8vh;
}
html.no-scrollstory .sticky-stage {
  position: static !important;
}
html.no-scrollstory [class*="s1-"],
html.no-scrollstory [class*="s2-"],
html.no-scrollstory [class*="s3-"],
html.no-scrollstory [class*="s4-"],
html.no-scrollstory [class*="s5-"],
html.no-scrollstory [class*="s6-"],
html.no-scrollstory .s6-flower path {
  opacity: 1 !important;
  transform: none !important;
}
html.no-scrollstory .wipe-bar { display: none !important; }
html.no-scrollstory #section1 .s1-panel { position: relative; width: 100%; height: auto; padding: 6% 0; }
html.no-scrollstory #section1 .s1-panel-inner { padding: 0 9%; }
html.no-scrollstory #section1 { min-height: auto; }
html.no-scrollstory #s3-line { transform: translateX(-50%) scaleY(1) !important; }
html.no-scrollstory #section3 .s3-timeline { position: static; height: auto; }
html.no-scrollstory #section3 .s3-item {
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  text-align: left !important;
  margin-bottom: 1.6em;
  padding-left: 20px;
}
html.no-scrollstory #section3 .s3-dot { left: 0; right: auto; }
html.no-scrollstory #section5 .s5-pane { position: relative; inset: auto; margin-bottom: 8%; pointer-events: auto; }
html.no-scrollstory #section5 .s5-content { height: auto; overflow: visible; }

/* ============================================================
   SECTION 1 — ayat + identitas mempelai (pages 2,3,4)
   ============================================================ */
.pin-spacer-1 { position: relative; height: 620svh; }

#section1 {
  position: sticky; /* menang atas .sticky-stage: ID > class specificity, lihat komentar .sticky-stage di atas */
  top: 0;
  overflow: hidden;
  color: var(--ink);
}
#section1 .s1-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* verse */
#section1 .s1-verse {
  position: absolute;
  top: 9%;
  left: 0; right: 0;
  padding: 0 9%;
  text-align: center;
  opacity: 0;
}
#section1 .s1-verse blockquote {
  margin: 0 0 0.9em;
  font-size: var(--fs-base);
  line-height: 1.55;
  font-weight: 400;
  color: #0a0a0a;
}
#section1 .s1-verse cite {
  display: block;
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-base);
  color: #0a0a0a;
}

/* black identity panel — shared by groom & bride passes */
#section1 .s1-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 55%;
  background: var(--void);
  opacity: 0;
}
#section1 .s1-panel.from-left { left: 0; }
#section1 .s1-panel.from-right { right: 0; }

#section1 .s1-panel .s1-panel-inner {
  height: 100%;
  padding: 12% 9%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1em;
}
#section1 .s1-panel .s1-first-name {
  font-family: var(--font-script);
  font-size: var(--fs-script);
  line-height: 1;
  opacity: 0;
  transform: translateY(14px);
}
#section1 .s1-panel .s1-full-name {
  font-size: var(--fs-md);
  line-height: 1.35;
  font-weight: 300;
  opacity: 0;
  transform: translateY(14px);
}
#section1 .s1-panel .s1-rule {
  width: 80px; height: 3px; background: var(--line);
  opacity: 0;
}
#section1 .s1-panel .s1-parents {
  font-size: var(--fs-xs);
  line-height: 1.7;
  font-weight: 300;
  opacity: 0;
  transform: translateY(14px);
}
#section1 .s1-panel .s1-parents b { font-weight: 600; }
#section1 .s1-panel .s1-address {
  font-size: var(--fs-xs);
  line-height: 1.7;
  font-weight: 300;
  opacity: 0;
  transform: translateY(14px);
}
#section1 .s1-panel .s1-ig {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5em 1em;
  font-size: var(--fs-xs);
  width: fit-content;
  opacity: 0;
  transform: translateY(14px);
  color: #ffffff;
  text-decoration: none;
}
#section1 .s1-panel .s1-ig svg { width: 14px; height: 14px; flex: none; }

#section1 .s1-panel.align-right .s1-panel-inner { align-items: flex-end; text-align: right; }
#section1 .s1-panel.align-right .s1-rule { align-self: flex-end; }

/* ============================================================
   SECTION 2 — acara (page 5)
   ============================================================ */
.pin-spacer-2 { position: relative; height: 340svh; }

#section2 {
  position: sticky; /* menang atas .sticky-stage: ID > class specificity, lihat komentar .sticky-stage di atas */
  top: 0;
  overflow: hidden;
  color: var(--ink);
}
#section2 .s2-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center 30%;
}
#section2 .s2-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.79) 0%, rgba(255, 255, 255, 0.103) 55%, rgba(255, 255, 255, 0) 100%);
}
#section2 .s2-content {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 8% 6% 0;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
#section2 .s2-block { opacity: 0; transform: translateY(18px); text-align: center; }
#section2 .s2-block .s2-title {
  font-family: var(--font-script);
  font-size: var(--fs-script);
  line-height: 1;
  margin-top: 0.15rem;
  margin-bottom: 0.15em;
  color: #0a0a0a;
}
#section2 .s2-block .s2-when { 
  font-size: var(--fs-sm); 
  font-weight: 700;
  margin-bottom: 0.15em; 
  color: #0a0a0a;
}
#section2 .s2-block .s2-time { 
  font-size: var(--fs-sm); 
  font-weight: 700; 
  margin-bottom: 0.1em;
  color: #0a0a0a; 
}
#section2 .s2-block .s2-venue { 
  font-size: var(--fs-sm); 
  font-weight: 300; 
  line-height: 1.5;
  margin-bottom: 0.1em;
  color: #0a0a0a;
}
#section2 .s2-block .s2-map-btn {
  margin-top: 0.5em;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--void);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.75em 1.6em;
}

/* ============================================================
   TRANSITION BAR (black bar wipe used before section 3 & section 6)
   ============================================================ */
.wipe-bar {
  position: absolute;
  inset: 0;
  background: var(--void);
  z-index: 5;
  pointer-events: none;
}

/* ============================================================
   SECTION 3 — Kisah Kami (page 6)
   ============================================================ */
.pin-spacer-3 { position: relative; height: 480svh; }

#section3 {
  position: sticky; /* menang atas .sticky-stage: ID > class specificity, lihat komentar .sticky-stage di atas */
  top: 0;
  overflow: hidden;
  background: var(--void);
  color: var(--ink);
}
#section3 .s3-content {
  position: relative;
  height: 100%;
  padding: 9% 8%;
  display: flex;
  flex-direction: column;
}
#section3 .s3-title {
  font-family: var(--font-script);
  font-size: var(--fs-script);
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  margin-bottom: 4%;
  flex: none;
}
#section3 .s3-timeline {
  position: relative;
  flex: 1;
  margin: 0 auto;
  width: 5px;
}
#section3 .s3-timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
}
#section3 .s3-item {
  position: absolute;
  left: 50%;
  width: 42cqi;
  max-width: 220px;
  opacity: 0;
}
#section3 .s3-item .s3-dot {
  position: absolute;
  top: 0.35em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink);
  transform: scale(0);
}
#section3 .s3-item.side-left { transform: translateX(calc(-100% - 14px)); text-align: right; }
#section3 .s3-item.side-left .s3-dot { right: -20px; }
#section3 .s3-item.side-right { transform: translateX(14px); text-align: left; }
#section3 .s3-item.side-right .s3-dot { left: -20px; }
#section3 .s3-item .s3-year { font-weight: 700; font-size: var(--fs-sm); line-height: 1.3; }
#section3 .s3-item .s3-desc { font-weight: 300; font-size: var(--fs-xs); line-height: 1.5; margin-top: 0.3em; opacity: 0.85; }

/* ============================================================
   SECTION 4 — Momen Kami / carousel (page 7)
   ============================================================ */
.pin-spacer-4 { position: relative; height: 260svh; }

#section4 {
  position: sticky; /* menang atas .sticky-stage: ID > class specificity, lihat komentar .sticky-stage di atas */
  top: 0;
  overflow: hidden;
  background: var(--void);
  color: var(--ink);
}
#section4 .s4-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 11% 8% 8%;
}
#section4 .s4-title {
  font-family: var(--font-script);
  font-size: var(--fs-script);
  opacity: 0;
  transform: translateY(14px);
  margin-bottom: 6%;
  flex: none;
  text-align: center;
}
#section4 .s4-carousel-wrap {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  opacity: 0;
  transform: translateY(18px);
}
#section4 .s4-track {
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  touch-action: pan-y;
}
#section4 .s4-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
#section4 .s4-slide.is-active { opacity: 1; pointer-events: auto; }
#section4 .s4-dots {
  display: flex;
  gap: 6px;
  margin-top: 4%;
  flex: none;
}
#section4 .s4-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--line);
  transition: background 0.3s ease, transform 0.3s ease;
}
#section4 .s4-dots span.is-active { background: var(--ink); transform: scale(1.3); }

/* ============================================================
   SECTION 5 — Do'a & Ucapan + Tanda Kasih (pages 8-9)
   ============================================================ */
.pin-spacer-5 { position: relative; height: 460svh; }

#section5 {
  position: sticky; /* menang atas .sticky-stage: ID > class specificity, lihat komentar .sticky-stage di atas */
  top: 0;
  overflow: hidden;
  color: var(--void);
}
#section5 .s5-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center 65%;
}
#section5 .s5-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.94) 0%,
    rgba(255,255,255,0.86) 38%,
    rgba(255,255,255,0.55) 62%,
    rgba(255,255,255,0.35) 100%);
}
#section5 .s5-content {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 9% 8%;
  overflow: hidden;
}
#section5 .s5-pane {
  position: absolute;
  inset: 0;
  padding: 9% 8%;
  opacity: 0;
  pointer-events: none; /* dijaga meneh lewat GSAP nalika pane lagi aktif */
}
#section5 .s5-title {
  font-family: var(--font-script);
  font-size: var(--fs-script);
  text-align: center;
  margin-bottom: 5%;
}

/* doa & ucapan form */
#section5 .s5-field {
  width: 100%;
  border: 1px solid rgba(10,10,10,0.35);
  border-radius: 14px;
  background: rgba(255,255,255,0.5);
  padding: 0.85em 1em;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--void);
  margin-bottom: 3%;
  resize: none;
}
#section5 textarea.s5-field { height: 6.5em; line-height: 1.5; }
#section5 .s5-field::placeholder { color: rgba(10,10,10,0.5); }
#section5 .s5-submit {
  width: 100%;
  border: none;
  border-radius: 999px;
  background: var(--void);
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.95em;
  margin-top: 1%;
}

/* daftar do'a & ucapan sing wis mlebu (Firebase/localStorage) */
#section5 #s5-pane-doa {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#section5 #s5-form { flex: none; }
#section5 .s5-wish-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin-top: 4%;
  padding-right: 2px;
  -webkit-overflow-scrolling: touch;
}
#section5 .s5-wish-empty {
  font-size: var(--fs-xs);
  font-weight: 300;
  text-align: center;
  opacity: 0.55;
  margin: 1em 0 0;
}
#section5 .s5-wish-item {
  border: 1px solid rgba(10,10,10,0.16);
  border-radius: 12px;
  background: rgba(255,255,255,0.4);
  padding: 0.7em 0.9em;
  margin-bottom: 2.5%;
}
#section5 .s5-wish-item__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7em;
}
#section5 .s5-wish-item__name {
  font-size: var(--fs-xs);
  font-weight: 700;
  margin: 0;
}
#section5 .s5-wish-item__delete {
  flex: none;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(10,10,10,0.08);
  color: var(--void);
  font-size: 0.62rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0.7;
}
#section5 .s5-wish-item__msg {
  font-size: var(--fs-xs);
  font-weight: 300;
  line-height: 1.5;
  margin: 0.35em 0 0;
}

/* tanda kasih */
#section5 .s5-note {
  font-size: var(--fs-sm);
  font-weight: 300;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 6%;
}
#section5 .s5-gift-card {
  border: 1px solid rgba(10,10,10,0.3);
  border-radius: 14px;
  padding: 1em 1.1em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8em;
  margin-bottom: 3.5%;
  background: rgba(255,255,255,0.45);
}
#section5 .s5-gift-card .s5-gift-info b { display: block; font-size: var(--fs-sm); }
#section5 .s5-gift-card .s5-gift-info span { display: block; font-size: var(--fs-xs); font-weight: 300; margin-top: 0.3em; }
#section5 .s5-copy-btn {
  flex: none;
  border: none;
  border-radius: 999px;
  background: var(--void);
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 0.55em 1.1em;
}
#section5 .s5-copy-btn.is-copied { background: #3a3a3a; }

/* ============================================================
   SECTION 6 — Penutup (page 10)
   ============================================================ */
.pin-spacer-6 { position: relative; height: 340svh; }

#section6 {
  position: sticky; /* menang atas .sticky-stage: ID > class specificity, lihat komentar .sticky-stage di atas */
  top: 0;
  overflow: hidden;
  background: var(--void);
  color: var(--ink);
}
#section6 .s6-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 12% 3.2em;
  text-align: center;
  gap: 1.4em;
}
#section6 .s6-flower {
  width: 14cqi;
  max-width: 60px;
}
#section6 .s6-flower path { opacity: 0; }
#section6 .s6-title {
  font-family: var(--font-script);
  font-size: var(--fs-script-lg);
  opacity: 0;
  transform: translateY(14px);
}
#section6 .s6-text {
  font-size: var(--fs-sm);
  font-weight: 300;
  line-height: 1.7;
  opacity: 0;
  transform: translateY(14px);
}
#section6 .s6-signature {
  margin-top: 0.6em;
  font-family: var(--font-script);
  font-size: var(--fs-lg);
  opacity: 0;
  transform: translateY(14px);
}

#section6 footer.s6-credit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 8% 4.5%;
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: rgba(245,243,238,0.35);
}
#section6 footer.s6-credit .s6-credit-brand {
  color: rgba(245,243,238,0.55);
  font-weight: 600;
}
/* fallback (GSAP gagal dimuat): footer balik dadi elemen alur biasa,
   nempel sakwise konten, ora ngambang absolute */
html.no-scrollstory #section6 footer.s6-credit {
  position: relative;
  margin-top: 1.5em;
  padding: 0 8%;
}

/* ============================================================
   SCROLL / SWIPE CUE (Petunjuk Swipe Mobile)
   ============================================================ */
.scroll-cue {
  display: none;
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  pointer-events: none;
  opacity: 0.8;
}

.scroll-cue__label {
  writing-mode: vertical-rl;
  text-orientation: sideways;
  font-size: 0.58rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.8;
}

.scroll-cue__label--mobile { display: none; }

.scroll-cue__line {
  position: relative;
  width: 1px;
  height: 50px;
  background: currentColor;
  opacity: 0.3;
}

.scroll-cue__glow {
  position: absolute;
  left: 50%;
  top: -18px;
  width: 3px;
  height: 20px;
  transform: translate(-50%, 0);
  background: linear-gradient(to bottom, transparent, var(--ink) 45%, var(--ink) 55%, transparent);
  filter: blur(1px);
  animation: scrollCueGlowDown 2.4s ease-in-out infinite;
}

@keyframes scrollCueGlowDown {
  0% { transform: translate(-50%, 0); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translate(-50%, 75px); opacity: 0; }
}

@keyframes scrollCueGlowUp {
  0% { transform: translate(-50%, 75px); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translate(-50%, 0); opacity: 0; }
}

/* Khusus Mobile (layar dibawah 820px) */
@media (max-width: 820px) {
  .scroll-cue {
    right: 14px;
    /* + safe-area: jaga-jaga ben ora ketutupan home-indicator/gesture bar
       ing HP sing duwe "notch" ngisor (iPhone tanpa tombol Home). */
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .scroll-cue__label--desktop { display: none; }
  .scroll-cue__label--mobile { display: inline-block; }
  .scroll-cue__glow {
    animation-name: scrollCueGlowUp;
  }
}

/* ============================================================
   MUSIC TOGGLE — piringan vinyl, pojok kiri bawah
   ============================================================ */
.music-toggle {
  display: none; /* baru muncul sawise "Buka Undangan" diklik, lewat .is-visible */
  position: fixed;
  left: 14px;
  bottom: 16px;
  z-index: 90;
  width: 34px;
  height: 34px;
  padding: 3px;
  border: none;
  border-radius: 50%;
  background: rgba(245, 243, 238, 0.85);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.music-toggle.is-visible {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transform: scale(1);
}
.music-toggle__vinyl {
  width: 100%;
  height: 100%;
  display: block;
  animation: musicVinylSpin 3.4s linear infinite;
  animation-play-state: paused;
}
.music-toggle.is-playing .music-toggle__vinyl {
  animation-play-state: running;
}
@keyframes musicVinylSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 820px) {
  .music-toggle { left: 12px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 30px; height: 30px; }
}