/* Adat Sunda -- direct template, native HTML/CSS built straight from the
   owner's PSDs. Cover: "cover sunda.psd" (1080x1920), whole scene authored at
   native PSD pixel coordinates and scaled as one unit to cover the viewport
   (the proven GOLD cover-fit mechanic). Motion = UA Motion Standard V1
   (docs/UA-MOTION-STANDARD-V1.md, 83dc826). */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:#000;height:100%;}
body{-webkit-font-smoothing:antialiased;}
img{max-width:none;}

.sd-app{
  position:relative;
  max-width:480px;
  min-height:100dvh;
  margin:0 auto;
  overflow:hidden;
  background:#f3efe8;
}

/* ================= Cover ================= */
.sd-cover{
  position:relative;
  width:100%;
  height:100dvh;
  overflow:hidden;
  background:#f3efe8;
  --bwk:2.3;               /* scene px per CSS px; script.js sets the real value */
}
.sd-cover-scene{
  position:absolute;
  top:50%;
  left:50%;
  width:1080px;
  height:1920px;
  transform-origin:center center;
}
.sd-l{position:absolute;}
.sd-deco{pointer-events:none;}

/* Photo = canonical foto_cover inside the PSD frame's own scalloped shape
   (Layer 14 alpha). Empty/broken photo -> the soft fill, never a broken icon. */
.sd-photo{
  left:324px;top:177px;width:450px;height:660px;
  background:#e7e1d6;
  -webkit-mask-image:url(/templates/sunda/assets/cover-photo-mask.png);
  mask-image:url(/templates/sunda/assets/cover-photo-mask.png);
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
.sd-photo img{display:none;width:100%;height:100%;object-fit:cover;object-position:50% 30%;}

/* Live names (PSD ink: couple 264,854-816,916 #004d88; guest 365,1071-711,1119 #000) */
.sd-names,.sd-guest{
  left:0;
  width:1080px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  font-family:'Marcellus','Cormorant Garamond',Georgia,serif;
  font-weight:400;
  line-height:1;
  white-space:nowrap;
}
/* offsets calibrated against the PSD ink at native size: names 265,854-814,915; guest 365,1072-707,1116 (+-2px) */
.sd-names{left:4px;top:846px;height:90px;font-size:64px;letter-spacing:3.3px;color:#004d88;}
.sd-guest{left:-4px;top:1062px;height:70px;font-size:65px;color:#000;}

/* Buka Undangan: the PSD button raster; hit area grown invisibly (~27px tall on phones) */
.sd-open{
  padding:0;
  margin:0;
  border:0;
  background:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.sd-open img{display:block;width:100%;height:100%;pointer-events:none;}
.sd-open::after{content:"";position:absolute;left:-20px;right:-20px;top:-40px;bottom:-40px;}
.sd-open:focus-visible{outline:6px solid #004d88;outline-offset:6px;border-radius:40px;}

/* ================= Motion: UA Motion Standard V1 =================
   Copied from the GOLD "Living motion" block (Jawa style.css, jwRpIn /
   jwRpLive) -- values per docs/UA-MOTION-STANDARD-V1.md. The Cover is not a
   replay section: its entrances play once at load (play-state running,
   fill-mode both); decorative idles continue. Only opacity + the independent
   translate/scale/rotate properties are animated; the scene's own transform
   is never touched; every entrance ends at the identity (the PSD layout). */
@keyframes sdRpIn{
  from{
    opacity:var(--rp-o,0);
    translate:calc(var(--rp-x,0px) * var(--bwk,3)) calc(var(--rp-y,0px) * var(--bwk,3));
    scale:var(--rp-sx,var(--rp-s,1)) var(--rp-sy,var(--rp-s,1));
  }
  to{opacity:1;translate:0 0;scale:1 1;}
}
@keyframes sdRpLive{
  0%,100%{translate:0 0;rotate:0deg;}
  30%{translate:var(--i-x,0px) var(--i-y,0px);rotate:var(--i-r,0deg);}
  60%{translate:calc(var(--i-x,0px) * .6) calc(var(--i-y,0px) * .6);rotate:calc(var(--i-r,0deg) * .4);}
}
.sd-cover [data-mo="rp-in"],.sd-cover [data-mo="rp-deco"],
.sd-hero [data-mo="rp-in"],.sd-hero [data-mo="rp-deco"]{
  animation-name:sdRpIn;
  animation-duration:var(--mo-dur,1200ms);
  animation-delay:var(--mo-d,0ms);
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
  animation-fill-mode:both;
}
.sd-cover [data-mo="rp-deco"],.sd-hero [data-mo="rp-deco"]{animation-timing-function:cubic-bezier(.25,.85,.3,1.15);}
.sd-cover [data-mo="rp-deco"][data-mo-idle],.sd-hero [data-mo="rp-deco"][data-mo-idle]{
  animation-name:sdRpIn,sdRpLive;
  animation-duration:var(--mo-dur,1200ms),var(--mo-i-dur,12000ms);
  animation-delay:var(--mo-d,0ms),calc(var(--mo-d,0ms) + var(--mo-dur,1200ms) + var(--mo-i-off,0ms));
  animation-timing-function:cubic-bezier(.25,.85,.3,1.15),ease-in-out;
  animation-iteration-count:1,infinite;
  animation-fill-mode:both,none;
}

/* Cover exit (Betawi GOLD hand-off: .8s opacity + -3% lift on the Cover box,
   never on its scene); script.js activates the Hero when it ends. */
.sd-cover{
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),translate .8s cubic-bezier(.22,.61,.36,1);
}
.sd-app.is-open .sd-cover{opacity:0;translate:0 -3%;pointer-events:none;}
.sd-app.is-hero-active .sd-cover{display:none;}

/* ================= Hero ================= (additive only -- nothing above
   this line, including every Cover rule, was changed). Built from
   "hero sunda.psd" (1080x1920), same cover-fit scene mechanic as the Cover.
   Hidden until Buka Undangan (Betawi GOLD hand-off); script.js lays out its
   own scene the same way layoutCoverScene() does. */
.sd-hero{
  display:none;
  position:relative;
  width:100%;
  height:100dvh;
  overflow:hidden;
  background:#eeebe5;
  --bwk:2.3;
}
.sd-app.is-hero-active .sd-hero{display:block;}
.sd-hero-scene{
  position:absolute;
  top:50%;
  left:50%;
  width:1080px;
  height:1920px;
  transform-origin:center center;
}

/* Monogram -- OWNER CORRECTION 2026-09-25: positioned from the PSD's own
   literal numbers (psd-tools bbox + Free-Transform scale), not an
   approximated/screenshot-matched composition. Each initial's box is
   centred (flex) on its own PSD ink centre -- centring, not the box size,
   is what carries the position, so a differently-shaped live initial still
   lands on the same PSD centre. Font-size = 44 x the PSD's own per-letter
   Free-Transform scale (Font 0 in the PSD is literally Cinzel-Regular, no
   substitution): L 44x6.542644=287.88px, B 44x6.882859=302.85px,
   & 44x1.710909=75.28px. PSD ink centres: L (527.5,415), & (636.5,518.5),
   B (588.5,651) -- L/& and &/B overlap/touch in the PSD itself (L bottom
   516 > & top 493; & bottom 544, B top 545, 1px gap), which is why the
   monogram reads as one tight block without any manual negative-margin
   tuning. Ink colour #085d7d sampled from the PSD composite. */
.sd-hero-init-top,.sd-hero-init-bottom,.sd-hero-amp{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#085d7d;
  font-family:'Cinzel',Georgia,serif;
  font-weight:400;
  line-height:1;
  white-space:nowrap;
}
.sd-hero-init-top{left:377.5px;top:265px;width:300px;height:300px;font-size:287.88px;}
/* OWNER FIX: inisial_pria/inisial_wanita are dynamic -- some live letter
   pairs (e.g. a round-shouldered "S") sit closer to their own PSD ink centre
   than the PSD's own "L"/"B" did, and collided with "&" at the literal PSD
   centres. Nudged "&" and the bottom initial down (+38px / +52px) for real
   letter-shape clearance; still one clearly tight group, just no longer
   letter-shape-dependent. */
.sd-hero-amp{left:566.5px;top:486.5px;width:140px;height:140px;font-size:75.28px;}
.sd-hero-init-bottom{left:428.5px;top:543px;width:320px;height:320px;font-size:302.85px;}
/* Date -- OWNER CORRECTION: positioned from the PSD's own numbers, x-centred
   on the PSD's own ink centre (548). Moved down to clear the bottom
   initial's new position (above) and, per owner feedback, sized down --
   36px (was 46px), tracking scaled with it (8px, was 10px). Numeric
   DD / MM / YYYY (script.js derives it from the canonical countdown_target
   ISO date, string-sliced so no timezone conversion happens -- same
   "never convert, only format" rule as [[event-timezone-wib-wita-wit]]);
   tanggal_singkat is the markup's fallback text until JS resolves. Font
   family unchanged (Courier Prime, the AmericanTypewriter-CondensedLight
   stand-in). */
.sd-hero-date{
  position:absolute;
  left:348px;top:838px;width:400px;height:50px;
  display:flex;align-items:center;justify-content:center;
  white-space:nowrap;
  color:#085d7d;
  font-family:'Courier Prime',ui-monospace,'Courier New',monospace;
  font-size:36px;letter-spacing:8px;
}

/* ================= Ayat ================= (additive only -- nothing above
   this line, including every Cover and Hero rule, was changed). Built from
   ayat.psd (1080x1797). Unlike Cover/Hero it is not a full-screen gate: it
   scrolls in after Hero in normal document flow, so its scene is scaled to
   the section's WIDTH only (script.js: transform:scale(), section height =
   1797 x scale) -- never cropped, never viewport-height dependent.

   PSD layers "Layer 2" (mask, clipping=false) + "Layer 17" (reference photo,
   clipping=true, clipped into Layer 2's shape) are the SaaS photo module:
   Layer 2 is a rounded-top-corner aperture (measured r~60, matching the
   canonical UA Ayat aperture used by every template); Layer 17 is the
   owner's own reference photo and is never shipped -- foto_ayat fills the
   aperture instead. "Layer 16" (panel) + "Layer 20" (clipped watermark,
   fill-opacity 46/255) are BOTH static -> flattened into one PNG
   (ayat-panel.webp), verified against the PSD's own full composite.
   "Background copy" is the section's own solid colour (#5c8198), visible as
   the margin framing the panel/photo. Dynamic text (Layer 18 initials,
   Layer 19 verse + source) is rebuilt as live HTML, fonts calibrated by
   render+measure against the PSD ink (initials Gelasio 700 66px matching
   PSD ink 48px tall/174px wide; verse Gelasio italic 400 36px/line-height
   1.6/560px column reproduces the PSD's own 4-line break to within 3px per
   line; source Inter 700 28px). */
.sd-ayat{
  position:relative;
  width:100%;
  overflow:hidden;
  background:#5c8198;
  --bwk:3;
}
.sd-ayat-scene{
  position:absolute;
  top:0;
  left:0;
  width:1080px;
  height:1797px;
  transform-origin:0 0;
}
.sd-ayat-photo{
  border-radius:60px 60px 0 0;
  overflow:hidden;
  background:#fff;
}
.sd-ayat-photo img{
  display:none;
  position:absolute;
  left:0;top:0;width:100%;height:100%;
  object-fit:cover;
  object-position:50% 20%;
}
.sd-ayat-initials{
  display:flex;align-items:center;justify-content:center;
  font-family:'Gelasio',Georgia,serif;
  font-weight:700;
  font-size:66px;
  line-height:1;
  color:#4f7fae;
  text-align:center;
  white-space:nowrap;
}
.sd-ayat-verse{
  display:flex;align-items:center;justify-content:center;
  font-family:'Gelasio',Georgia,serif;
  font-style:italic;
  font-weight:400;
  font-size:36px;
  line-height:1.6;
  color:#000;
  text-align:center;
}
.sd-ayat-verse-text{width:100%;}
.sd-ayat-source{
  display:flex;align-items:center;justify-content:center;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-weight:700;
  font-size:28px;
  line-height:1;
  color:#000;
  text-align:center;
  white-space:nowrap;
}

/* Ayat replay (Betawi GOLD setupReplay lifecycle, ported as-is -- see
   script.js): every [data-mo="ayat-in"] asset keeps a persistent CSS
   animation (fill-mode both) paused at its first keyframe; the JS drives it
   through getAnimations() -- an enter observer (threshold 0) plays it, a
   leave observer (rootMargin 12% 0px 12% 0px, threshold 0) resets it -- so
   every genuine re-entry, scrolling either way, replays. Reuses sdRpIn
   verbatim (one entrance keyframe for everything, Standard V1): opacity
   only for text (role=text, no --rp-x/--rp-y/--rp-s anywhere below), the
   approved photo/structural entrance vectors for the photo and panel. */
.sd-ayat [data-mo="ayat-in"]{
  animation-name:sdRpIn;
  animation-duration:var(--mo-dur,1200ms);
  animation-delay:var(--mo-d,0ms);
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
  animation-fill-mode:both;
  animation-play-state:paused;
}
/* Betawi: still plays normally (once) if the replay step cannot run */
.sd-ayat.is-ayat-active [data-mo="ayat-in"]{animation-play-state:running;}
.sd-ayat.sd-js-replay.is-ayat-active [data-mo="ayat-in"]{animation-play-state:paused;}

/* ================= Pasangan ================= (additive only -- nothing
   above this line, including every Cover/Hero/Ayat rule, was changed).
   Built from pasangan.psd (1080x3370). Same width-only scene scaling as
   Ayat. Portrait aperture = the PSD's own oval (Layer 28's true shape,
   recovered from the PSD's full-document composite with only that layer
   visible -- its own isolated composite() is unreliable for this
   knockout-style carrier, same gotcha as Ayat's Layer 2), applied as a CSS
   mask so the shape is pixel-exact regardless of curve complexity (same
   technique as Cover's photo aperture). Fonts calibrated by render+measure
   against the PSD's own ink: names Cinzel 400 (bride) / Playfair Display
   700 (groom) ~43.5px matching PSD ink height 32px; "&" Playfair Display
   700 ~108px; judul_mempelai Playfair Display 700 italic ~54px; the static
   greeting Alex Brush ~46px (PSD font is the system-only SnellRoundhand);
   kata_pengantar Courier Prime 400 29px/1.35/600px reproduces the PSD's
   own 4-line block height within 1px (same font family as Hero's date --
   PSD font is AmericanTypewriter-CondensedLight in both places); parent
   lines Inter 700 20px/1.1 (explicit 2-line break, not organic wrap --
   matches the PSD's own "Putri/Putra dari ... <br> & Ibu ..." layout). */
.sd-pasangan{
  position:relative;
  width:100%;
  overflow:hidden;
  background:#dbe3ec;
  --bwk:3;
}
.sd-pasangan-scene{
  position:absolute;
  top:0;
  left:0;
  width:1080px;
  height:3370px;
  transform-origin:0 0;
}
.sd-pas-photo{
  -webkit-mask-image:url(/templates/sunda/assets/pasangan-photo-mask.png);
  mask-image:url(/templates/sunda/assets/pasangan-photo-mask.png);
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  background:#d9d2c8;
}
.sd-pas-photo img{
  display:none;
  position:absolute;
  left:0;top:0;width:100%;height:100%;
  object-fit:cover;
  object-position:50% 25%;
}
.sd-pas-title,.sd-pas-name{
  display:flex;align-items:center;justify-content:center;
  line-height:1;
  text-align:center;
  white-space:nowrap;
}
.sd-pas-title{
  font-family:'Playfair Display',Georgia,serif;
  font-style:italic;
  font-weight:700;
  font-size:53.7px;
  color:#282b2f;
}
/* Couple names: ONE typography for both (PSD pasangan.psd Layer 36 / Layer 38 are rasterised;
   ink-fitted to Cormorant Garamond 600 -- same shapes, 47.4px / -0.3px reproduces both PSD
   ink widths (467 / 672). Only the PSD fill colour differs (charcoal bride, navy groom).
   Long names shrink via fitPasanganText (script.js), never a different weight or font. */
.sd-pas-name{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:47.4px;letter-spacing:-0.3px;text-transform:uppercase;}
.sd-pas-name-w{color:#383a39;}
.sd-pas-name-m{color:#010130;}

.sd-pas-intro{
  display:flex;align-items:center;justify-content:center;
  font-family:'Courier Prime',ui-monospace,'Courier New',monospace;
  font-weight:400;
  font-size:29px;
  line-height:1.35;
  color:#000;
  text-align:center;
}
.sd-pas-intro-text{width:100%;}
.sd-pas-greeting{
  display:flex;align-items:center;justify-content:center;
  font-family:'Alex Brush',cursive;
  font-weight:400;
  font-size:45.7px;
  line-height:1;
  color:#000;
  text-align:center;
  white-space:nowrap;
}
.sd-pas-parents{
  display:flex;align-items:center;justify-content:center;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-weight:700;
  font-size:20px;
  line-height:1.1;
  color:#000;
  text-align:center;
}
.sd-pas-parents-text{width:100%;}
.sd-pas-ig img{display:block;width:100%;height:100%;pointer-events:none;}
.sd-pas-amp{
  display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',Georgia,serif;
  font-weight:700;
  font-size:107.7px;
  line-height:1;
  color:#000;
}

/* Pasangan replay -- identical mechanism to Ayat's (see script.js
   setupReplay, replayIds now includes 'sd-pasangan'); idle decorative art
   chains sdRpLive exactly like Cover/Hero's rp-deco, just paused/JS-driven
   instead of auto-running. */
.sd-pasangan [data-mo="pas-in"]{
  animation-name:sdRpIn;
  animation-duration:var(--mo-dur,1200ms);
  animation-delay:var(--mo-d,0ms);
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
  animation-fill-mode:both;
  animation-play-state:paused;
}
.sd-pasangan [data-mo="pas-in"][data-mo-idle]{
  animation-name:sdRpIn,sdRpLive;
  animation-duration:var(--mo-dur,1200ms),var(--mo-i-dur,12000ms);
  animation-delay:var(--mo-d,0ms),calc(var(--mo-d,0ms) + var(--mo-dur,1200ms) + var(--mo-i-off,0ms));
  animation-timing-function:cubic-bezier(.22,.61,.36,1),ease-in-out;
  animation-iteration-count:1,infinite;
  animation-fill-mode:both,none;
  animation-play-state:paused,paused;
}
.sd-pasangan.is-pasangan-active [data-mo="pas-in"]{animation-play-state:running;}
.sd-pasangan.is-pasangan-active [data-mo="pas-in"][data-mo-idle]{animation-play-state:running,running;}
.sd-pasangan.sd-js-replay.is-pasangan-active [data-mo="pas-in"]{animation-play-state:paused;}
.sd-pasangan.sd-js-replay.is-pasangan-active [data-mo="pas-in"][data-mo-idle]{animation-play-state:paused,paused;}

/* ================= Acara ================= (additive only -- nothing above
   this line, including every Cover/Hero/Ayat/Pasangan rule, was changed).
   Built from acara.psd (1080x2859); follows Pasangan in normal flow and is
   scaled to the section's WIDTH only (script.js layoutAcaraScene).
   Type layers (PSD Big Caslon Medium / Cochin / Didot, none web-safe), each
   ink-fitted to the PSD layer's own bounds (render + measure): titles EB
   Garamond 600 81/82px (title 2 carries the PSD's +60 tracking = .06em, colours
   #214956 / #203054), date + address Crimson Text 400 44.3px with lining
   numerals, venue + countdown label Playfair Display 600 42.1/43.3px, Maps
   label Crimson Text 35.3px white. Countdown digits Cormorant Garamond 600
   53.5px (its own old-style figures = the PSD's), captions the same face 22px
   caps (the Pasangan names' already-loaded 600 face, so its link is untouched). Boxes are line-height-explicit and top-aligned so the ink lands
   on the PSD's; every box is a wide column centred on the PSD's own text axis. */
.sd-acara{
  position:relative;
  width:100%;
  overflow:hidden;
  background:#d6d2cb;
  --bwk:3;
}
.sd-acara-scene{
  position:absolute;
  top:0;
  left:0;
  width:1080px;
  height:2859px;
  transform-origin:0 0;
}
.sd-ac-title,.sd-ac-dt,.sd-ac-venue,.sd-ac-cdlabel{text-align:center;white-space:nowrap;}
.sd-ac-title{font-family:'EB Garamond',Georgia,serif;font-weight:600;font-size:81px;line-height:1;color:#214956;}
.sd-ac-title[data-card="2"]{font-size:82px;letter-spacing:.06em;color:#203054;}
.sd-ac-dt{
  font-family:'Crimson Text',Georgia,serif;font-weight:400;font-size:44.3px;line-height:47px;
  font-variant-numeric:lining-nums;color:#000;
}
.sd-ac-l1,.sd-ac-l2{display:inline-block;}
.sd-ac-venue,.sd-ac-cdlabel{font-family:'Playfair Display','Didot',Georgia,serif;font-weight:600;line-height:1;color:#000;}
.sd-ac-venue{font-size:42.1px;}
.sd-ac-cdlabel{font-size:43.3px;}
.sd-ac-addr{
  font-family:'Crimson Text',Georgia,serif;font-weight:400;font-size:44.3px;line-height:1.08;
  font-variant-numeric:lining-nums;color:#000;text-align:center;
}
.sd-ac-addr-text{width:100%;}
.sd-ac-maps img,#sdAcSave img{display:block;width:100%;height:100%;pointer-events:none;}
/* keep the PSD pill, grow the touch target invisibly (~47px tall on a 390px phone) */
.sd-ac-maps::after,#sdAcSave::after{content:"";position:absolute;left:-12px;right:-12px;top:-22px;bottom:-22px;}
.sd-ac-btn-l{
  position:absolute;left:-3px;width:100%;
  font-family:'Crimson Text',Georgia,serif;font-weight:400;font-size:35.3px;line-height:1;
  color:#fff;text-align:center;white-space:nowrap;pointer-events:none;
}
/* Countdown: the PSD's four boxes are the static image; digits + captions are live text on top. */
.sd-ac-cd{color:#fff;text-align:center;}
.sd-ac-num{
  position:absolute;left:-3px;width:100%;top:14px;
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:53.5px;line-height:1;
}
.sd-ac-cap{
  position:absolute;left:-3px;width:100%;top:82px;
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:22px;line-height:1;text-transform:uppercase;
}

/* Acara replay -- identical mechanism to Ayat/Pasangan (see script.js
   setupReplay, replayIds includes 'sd-acara'); idle decorative art chains
   sdRpLive exactly like Pasangan's. Text only fades (no --rp-* travel). */
.sd-acara [data-mo="ac-in"]{
  animation-name:sdRpIn;
  animation-duration:var(--mo-dur,1200ms);
  animation-delay:var(--mo-d,0ms);
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
  animation-fill-mode:both;
  animation-play-state:paused;
}
.sd-acara [data-mo="ac-in"][data-mo-idle]{
  animation-name:sdRpIn,sdRpLive;
  animation-duration:var(--mo-dur,1200ms),var(--mo-i-dur,12000ms);
  animation-delay:var(--mo-d,0ms),calc(var(--mo-d,0ms) + var(--mo-dur,1200ms) + var(--mo-i-off,0ms));
  animation-timing-function:cubic-bezier(.22,.61,.36,1),ease-in-out;
  animation-iteration-count:1,infinite;
  animation-fill-mode:both,none;
  animation-play-state:paused,paused;
}
.sd-acara.is-acara-active [data-mo="ac-in"]{animation-play-state:running;}
.sd-acara.is-acara-active [data-mo="ac-in"][data-mo-idle]{animation-play-state:running,running;}
.sd-acara.sd-js-replay.is-acara-active [data-mo="ac-in"]{animation-play-state:paused;}
.sd-acara.sd-js-replay.is-acara-active [data-mo="ac-in"][data-mo-idle]{animation-play-state:paused,paused;}

/* ================= Live Streaming ================= (additive only -- nothing above
   this line, including every Cover/Hero/Ayat/Pasangan/Acara rule, was changed).
   Built from "Live Streaming.psd" (1080x1480); follows Acara in normal flow,
   scaled to the section's WIDTH only (script.js layoutLiveScene). Type layers
   (PSD Didot / AdobeCleanUX / Cochin, none web-safe): heading Playfair Display
   600 62.9px #16323b (ink 430x61 = the PSD's), description Inter 500 31.9px on
   42px lines, white, centred on the PSD's own axis (a 600px column reproduces
   its three line breaks), CTA label Crimson Text 400 fitted to the PSD's
   "Instagram Live" ink. The CTA is the PSD's white pill + black Instagram mark
   with a live label; the label/icon follow the platform (script.js). */
.sd-live{
  position:relative;
  width:100%;
  overflow:hidden;
  background:#dfddd8;
  --bwk:3;
}
.sd-live-scene{
  position:absolute;
  top:0;
  left:0;
  width:1080px;
  height:1480px;
  transform-origin:0 0;
}
.sd-lv-title{
  font-family:'Playfair Display','Didot',Georgia,serif;font-weight:600;font-size:62.9px;line-height:1;
  color:#16323b;text-align:center;white-space:nowrap;
}
.sd-lv-desc{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;font-weight:500;font-size:31.9px;line-height:42px;
  color:#fff;text-align:center;
}
.sd-lv-btn{
  display:flex;align-items:center;justify-content:center;gap:18px;
  box-sizing:border-box;padding-left:6px;
  text-decoration:none;-webkit-tap-highlight-color:transparent;
}
/* keep the PSD pill, grow the touch target invisibly (~52px tall on a 390px phone) */
.sd-lv-btn::after{content:"";position:absolute;left:-12px;right:-12px;top:-14px;bottom:-14px;}
.sd-lv-pill{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none;}
.sd-lv-ico{position:relative;flex:none;width:45px;height:46px;display:block;pointer-events:none;color:#000;}
.sd-lv-btn-t{
  position:relative;font-family:'Crimson Text',Georgia,serif;font-weight:400;font-size:41.9px;line-height:1;
  color:#000;white-space:nowrap;pointer-events:none;
}

/* Live Streaming replay -- identical mechanism to Ayat/Pasangan/Acara (script.js
   setupReplay, replayIds includes 'sd-live'); idle decorative art chains sdRpLive
   exactly like theirs. Text fades + rises 24px (Standard V1), the CTA only fades. */
.sd-live [data-mo="lv-in"]{
  animation-name:sdRpIn;
  animation-duration:var(--mo-dur,1200ms);
  animation-delay:var(--mo-d,0ms);
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
  animation-fill-mode:both;
  animation-play-state:paused;
}
.sd-live [data-mo="lv-in"][data-mo-idle]{
  animation-name:sdRpIn,sdRpLive;
  animation-duration:var(--mo-dur,1200ms),var(--mo-i-dur,12000ms);
  animation-delay:var(--mo-d,0ms),calc(var(--mo-d,0ms) + var(--mo-dur,1200ms) + var(--mo-i-off,0ms));
  animation-timing-function:cubic-bezier(.22,.61,.36,1),ease-in-out;
  animation-iteration-count:1,infinite;
  animation-fill-mode:both,none;
  animation-play-state:paused,paused;
}
.sd-live.is-live-active [data-mo="lv-in"]{animation-play-state:running;}
.sd-live.is-live-active [data-mo="lv-in"][data-mo-idle]{animation-play-state:running,running;}
.sd-live.sd-js-replay.is-live-active [data-mo="lv-in"]{animation-play-state:paused;}
.sd-live.sd-js-replay.is-live-active [data-mo="lv-in"][data-mo-idle]{animation-play-state:paused,paused;}

/* ---------- Galeri ("Galeri.psd", 1080x1920). Flat #8ba6c0 ground (the PSD's Background
   layer is a single colour: sampled, no image). Headings: PSD Didot -> Playfair
   Display 600 #214956 fitted to the PSD's ink; subtitle PSD Avenir Light ->
   Nunito Sans 300, black. Rows/track/slides/dots = the Betawi GOLD Galeri
   mechanism: .sd-gal-row is the clipped, ANIMATED wrapper (the only element
   with a motion); .sd-gal-track inside it is the scroll-snap swipe strip and is
   never animated, so a swipe/popup can never fight an animation transform. ---------- */
.sd-galeri{
  position:relative;
  width:100%;
  overflow:hidden;
  background:#8ba6c0;
  --bwk:3;
}
.sd-galeri-scene{
  position:absolute;
  top:0;
  left:0;
  width:1080px;
  height:1920px;
  transform-origin:0 0;
}
.sd-gal-bg{background:#8ba6c0;}
.sd-gal-h1,.sd-gal-h2{
  font-family:'Playfair Display','Didot',Georgia,serif;font-weight:600;
  color:#214956;text-align:center;white-space:nowrap;
  display:flex;align-items:center;justify-content:center;
}
.sd-gal-h1{font-size:52.6px;letter-spacing:4.7px;line-height:1;}
.sd-gal-h2{font-size:103.3px;letter-spacing:0px;line-height:1;}
.sd-gal-sub{
  font-family:'Nunito Sans','Avenir','Helvetica Neue',Arial,sans-serif;font-weight:300;font-size:37.1px;line-height:44px;
  color:#000;text-align:center;white-space:nowrap;
}
.sd-gal-row{overflow:hidden;}
.sd-gal-track{
  display:flex;
  gap:17px;
  width:100%;
  height:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.sd-gal-track::-webkit-scrollbar{display:none;}
.sd-gal-slide{
  flex:0 0 460px;
  height:100%;
  scroll-snap-align:start;
  border-radius:28px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
  cursor:zoom-in;
  -webkit-tap-highlight-color:transparent;
}
.sd-gal-slide[hidden]{display:none;}
.sd-gal-slide:focus-visible{outline:3px solid #f7f1e8;outline-offset:-3px;}
.sd-gal-slide img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none;}
.sd-gal-dots{display:flex;align-items:center;justify-content:center;gap:9px;pointer-events:none;}
.sd-gal-dots span{display:block;width:10px;height:10px;border-radius:5px;background:#868b98;flex:0 0 auto;transition:width .3s ease,background-color .3s ease;}
.sd-gal-dots span.is-active{width:29px;background:#f7f1e8;}

/* Photo popup (lightbox) -- the Betawi GOLD popup, on <body> above every section. */
.sd-lb{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(14,30,38,.92);
  animation:sdLbIn .25s ease both;
  touch-action:none;
  overscroll-behavior:contain;
}
.sd-lb[hidden]{display:none;}
.sd-lb-img{
  max-width:92vw;
  max-height:82vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.45);
  user-select:none;
  -webkit-user-drag:none;
}
.sd-lb button{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border:0;
  border-radius:50%;
  background:rgba(247,241,232,.16);
  color:#f7f1e8;
  font:400 30px/1 'Nunito Sans',sans-serif;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.sd-lb button[hidden]{display:none;}
.sd-lb button:focus-visible{outline:2px solid #f7f1e8;outline-offset:2px;}
.sd-lb-x{top:max(14px,env(safe-area-inset-top));right:14px;font-size:34px;}
.sd-lb-nav{top:50%;margin-top:-23px;}
.sd-lb-prev{left:8px;}
.sd-lb-next{right:8px;}
.sd-lb-count{
  position:absolute;
  bottom:max(20px,env(safe-area-inset-bottom));
  left:0;right:0;
  text-align:center;
  color:#f7f1e8;
  font:500 15px/1 'Nunito Sans',sans-serif;
  letter-spacing:.08em;
}
@keyframes sdLbIn{from{opacity:0;}to{opacity:1;}}

/* Galeri replay -- identical mechanism to Ayat/Pasangan/Acara/Live (script.js
   setupReplay, replayIds includes 'sd-galeri'). Headings fade + rise 24px
   (Standard V1); rows fade + slide in from the side and the dots fade (Betawi
   GOLD Galeri, entrance curve E1). The PSD has no ornaments, so no idle. */
.sd-galeri [data-mo="gl-in"]{
  animation-name:sdRpIn;
  animation-duration:var(--mo-dur,1200ms);
  animation-delay:var(--mo-d,0ms);
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
  animation-fill-mode:both;
  animation-play-state:paused;
}
.sd-galeri.is-galeri-active [data-mo="gl-in"]{animation-play-state:running;}
.sd-galeri.sd-js-replay.is-galeri-active [data-mo="gl-in"]{animation-play-state:paused;}

/* ---------- Video ("Video.psd", 1882x2658). Flat #8ba6c0 ground (the PSD's Background is one
   colour: sampled, no image). Headings: PSD Andale Mono -> Roboto Mono 400,
   Cochin -> EB Garamond, each fitted to the PSD's ink. The PSD's Layer 1 is a
   screenshot of a YouTube player (placeholder only); the real player replaces
   it in .sd-vd-stage at the same 1878x1413 rectangle. .sd-vd-frame (poster +
   PLAY, black, fade-only motion) is a SEPARATE element from the stage: PLAY
   removes it and puts the iframe/video into the stage, so no animation,
   replay or reset ever touches the player. While the player is showing it is
   lifted above the PSD's bottom artwork (z-index, not a transform) so the
   provider's own controls are never hidden behind a peacock or flowers. ---------- */
.sd-video{
  position:relative;
  width:100%;
  overflow:hidden;
  background:#8ba6c0;
  --bwk:3;
}
.sd-video-scene{
  position:absolute;
  top:0;
  left:0;
  width:1882px;
  height:2658px;
  transform-origin:0 0;
}
.sd-vd-bg{background:#8ba6c0;}
.sd-vd-h1,.sd-vd-h2,.sd-vd-sub{
  display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;
}
.sd-vd-h1{font-family:'Roboto Mono','Andale Mono',ui-monospace,Menlo,monospace;font-weight:500;font-size:73px;letter-spacing:16.9px;line-height:1;color:#214956;}
.sd-vd-h2{font-family:'EB Garamond','Cochin',Georgia,serif;font-weight:500;font-size:175.5px;letter-spacing:19.9px;line-height:1;color:#214956;}
.sd-vd-sub{font-family:'EB Garamond','Cochin',Georgia,serif;font-weight:700;font-size:53px;letter-spacing:12.9px;line-height:1;color:#000;}
.sd-vd-frame{background:#000;overflow:hidden;}
.sd-vd-stage{background:transparent;}
.sd-vd-stage.is-playing{background:#000;}
.sd-vd-poster{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;padding:0;border:0;background:transparent;cursor:pointer;
  -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;
}
.sd-vd-poster:focus-visible{outline:6px solid #f7f1e8;outline-offset:-10px;}
.sd-vd-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.sd-vd-thumb[hidden]{display:none;}
.sd-vd-btn{
  position:absolute;left:832px;top:600px;width:210px;height:210px;border-radius:50%;
  background:rgba(155,148,134,.9);
}
.sd-vd-btn svg{position:absolute;left:61px;top:55px;width:88px;height:100px;display:block;}
.sd-vd-poster:active .sd-vd-btn{background:rgba(120,113,101,.94);}
.sd-vd-player{position:absolute;z-index:5;border:0;background:#000;display:block;}
iframe.sd-vd-player{left:0;top:178px;width:100%;height:1056px;}
video.sd-vd-player{left:0;top:0;width:100%;height:100%;object-fit:contain;}

/* Video replay -- identical mechanism to Ayat..Galeri (script.js setupReplay,
   replayIds includes 'sd-video'); idle art chains sdRpLive like Live's. Text
   fades + rises 24px, the poster only fades, the player is never animated. */
.sd-video [data-mo="vd-in"]{
  animation-name:sdRpIn;
  animation-duration:var(--mo-dur,1200ms);
  animation-delay:var(--mo-d,0ms);
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
  animation-fill-mode:both;
  animation-play-state:paused;
}
.sd-video [data-mo="vd-in"][data-mo-idle]{
  animation-name:sdRpIn,sdRpLive;
  animation-duration:var(--mo-dur,1200ms),var(--mo-i-dur,12000ms);
  animation-delay:var(--mo-d,0ms),calc(var(--mo-d,0ms) + var(--mo-dur,1200ms) + var(--mo-i-off,0ms));
  animation-timing-function:cubic-bezier(.22,.61,.36,1),ease-in-out;
  animation-iteration-count:1,infinite;
  animation-fill-mode:both,none;
  animation-play-state:paused,paused;
}
.sd-video.is-video-active [data-mo="vd-in"]{animation-play-state:running;}
.sd-video.is-video-active [data-mo="vd-in"][data-mo-idle]{animation-play-state:running,running;}
.sd-video.sd-js-replay.is-video-active [data-mo="vd-in"]{animation-play-state:paused;}
.sd-video.sd-js-replay.is-video-active [data-mo="vd-in"][data-mo-idle]{animation-play-state:paused,paused;}

/* ---------- Love Story ("love story.psd", 1080x2364). The PSD's Layer 2 (cards + timeline +
   baked text) is rebuilt: .sd-ls-card cream rounded panel, .sd-ls-line gold rail,
   .sd-ls-dot ring dot, .sd-ls-txt the live text (its own motion element, same
   rectangle as the card, centred). Type keeps the PSD size (Gelasio 400 body,
   Arimo 700 italic label); a long text grows its card (script.js) instead of
   shrinking. ---------- */
.sd-love{
  position:relative;
  width:100%;
  overflow:hidden;
  background:#c0ccd7;
  --bwk:3;
}
.sd-love-scene{
  position:absolute;
  top:0;
  left:0;
  width:1080px;
  height:2364px;
  transform-origin:0 0;
}
.sd-ls-kick,.sd-ls-title{display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;}
.sd-ls-kick{font-family:'EB Garamond','Cochin',Georgia,serif;font-weight:700;font-size:35px;letter-spacing:17.9px;line-height:1;color:#000;}
.sd-ls-title{font-family:'Inter','Helvetica Neue',Arial,sans-serif;font-weight:500;font-size:105.8px;letter-spacing:7.3px;line-height:1;color:#214956;}
.sd-ls-card{
  box-sizing:border-box;
  border-radius:26px;
  background:linear-gradient(to bottom,#fefefd 10%,#fefcfb 20%,#fdfbf8 30%,#fcfaf6 40%,#fbf8f4 50%,#faf7f1 60%,#f9f5ef 70%,#f9f4ed 80%,#f8f3eb 90%,#f6f0e6 100%);
  box-shadow:0 0 3px rgba(240,232,220,.55);
}
.sd-ls-line{background:#d3b980;border-radius:2px;}
.sd-ls-dot{
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#701b22 0,#701b22 14px,#f7f1e8 15px,#f7f1e8 21.6px,#d0b477 21.6px,#d0b477 23.2px,rgba(208,180,119,0) 24.2px);
}
.sd-ls-txt{
  display:flex;flex-direction:column;justify-content:flex-start;align-items:center;text-align:center;
  box-sizing:border-box;padding:0 36px;color:#2d251d;
}
.sd-ls-in{width:100%;margin-top:0px;}
.sd-ls-year{
  font-family:'Arimo','Arial',sans-serif;font-style:italic;font-weight:700;font-size:38.5px;line-height:1;
  color:#231f20;margin-bottom:25.5px;overflow-wrap:anywhere;
}
.sd-ls-year:empty{display:none;}
.sd-ls-body{
  font-family:'Gelasio','Georgia',serif;font-weight:400;font-size:41.6px;line-height:67px;letter-spacing:0px;
  color:#231f20;overflow-wrap:anywhere;
}

/* Love Story replay -- identical mechanism to Ayat..Video (script.js setupReplay,
   replayIds includes 'sd-love-story'); idle art chains sdRpLive like the others.
   Text fades + rises 24px, cards/dots/line are structural (no idle). */
.sd-love [data-mo="ls-in"]{
  animation-name:sdRpIn;
  animation-duration:var(--mo-dur,1200ms);
  animation-delay:var(--mo-d,0ms);
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
  animation-fill-mode:both;
  animation-play-state:paused;
}
.sd-love [data-mo="ls-in"][data-mo-idle]{
  animation-name:sdRpIn,sdRpLive;
  animation-duration:var(--mo-dur,1200ms),var(--mo-i-dur,12000ms);
  animation-delay:var(--mo-d,0ms),calc(var(--mo-d,0ms) + var(--mo-dur,1200ms) + var(--mo-i-off,0ms));
  animation-timing-function:cubic-bezier(.22,.61,.36,1),ease-in-out;
  animation-iteration-count:1,infinite;
  animation-fill-mode:both,none;
  animation-play-state:paused,paused;
}
.sd-love.is-love-active [data-mo="ls-in"]{animation-play-state:running;}
.sd-love.is-love-active [data-mo="ls-in"][data-mo-idle]{animation-play-state:running,running;}
.sd-love.sd-js-replay.is-love-active [data-mo="ls-in"]{animation-play-state:paused;}
.sd-love.sd-js-replay.is-love-active [data-mo="ls-in"][data-mo-idle]{animation-play-state:paused,paused;}

/* ---------- RSVP ("RSCV.psd", 1882x4542). The PSD's Layer 2 is a raster MOCK-UP of the
   form (not shipped): the same rectangles are REAL controls. .sd-rs-w is a stable
   wrapper that only ever fades (script.js setupReplay, opt-in data-mo-focus);
   the control inside it (input / select / textarea / button) never carries a
   transform, opacity animation or idle. Type = the PSD's own faces: labels /
   placeholders / messages EB Garamond, SUBMIT Cormorant Garamond, wish-card
   name Cormorant italic, title Georgia-like Gelasio bold italic, header/description
   Arial-like Arimo. Font sizes are scene px (>= 16 computed px), so iOS never
   zooms on focus. ---------- */
.sd-rsvp{
  position:relative;
  width:100%;
  overflow:hidden;
  background:#a9adaa;
  --bwk:3;
}
.sd-rsvp-scene{
  position:absolute;
  top:0;
  left:0;
  width:1882px;
  height:4542px;
  transform-origin:0 0;
}
#sdRsBgB.is-blend{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 90px);mask-image:linear-gradient(to bottom,transparent 0,#000 90px);}
#sdRsBgM{object-fit:fill;}
.sd-rs-rsvp,.sd-rs-title{display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;}
.sd-rs-rsvp{font-family:'Arimo','Arial',sans-serif;font-weight:400;font-size:138px;letter-spacing:14px;line-height:1;color:#000;}
.sd-rs-title{font-family:'Gelasio','Georgia',serif;font-style:italic;font-weight:700;font-size:112px;letter-spacing:0.4px;line-height:1;color:#185288;}
.sd-rs-desc{
  display:flex;align-items:center;justify-content:center;text-align:center;box-sizing:border-box;
  font-family:'Arimo','Arial',sans-serif;font-weight:400;font-size:64px;line-height:98px;color:#000;
  height:auto !important;min-height:196px;overflow-wrap:anywhere;
}
.sd-rs-label{
  display:block;box-sizing:border-box;white-space:nowrap;
  font-family:'EB Garamond','Cormorant Garamond',Georgia,serif;font-weight:600;font-size:53px;letter-spacing:1px;line-height:54px;color:#023f5f;
}
.sd-rs-w{box-sizing:border-box;}
.sd-rs-label[hidden],.sd-rs-w[hidden]{display:none;}
.sd-rs-ctl{
  display:block;width:100%;height:100%;box-sizing:border-box;margin:0;
  border:0;box-shadow:0 0 0 2px rgba(217,185,175,.6);border-radius:28px;background:#fff;
  font-family:'EB Garamond',Georgia,serif;font-weight:500;font-size:63.5px;line-height:1.2;color:#000305;
  padding:0 56px;-webkit-appearance:none;appearance:none;outline:none;
}
.sd-rs-ctl::placeholder{color:#5f5f5f;opacity:1;}
.sd-rs-select{
  padding-left:73px;padding-right:150px;cursor:pointer;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='40' height='40'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;background-size:56.6px 56.6px;
}
.sd-rs-select:disabled{opacity:1;}
.sd-rs-area{padding-top:54px;padding-bottom:40px;resize:none;line-height:1.3;overflow-y:auto;}
.sd-rs-ctl:focus-visible{outline:6px solid #185288;outline-offset:3px;}
.sd-rs-ctl[aria-invalid="true"]{box-shadow:0 0 0 5px #b3261e;}
.sd-rs-subw{overflow:visible;}
.sd-rs-submit{
  display:block;width:100%;height:100%;box-sizing:border-box;margin:0;padding:0;border:0;border-radius:36px;
  background:#214956;color:#fff;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;
  font-family:'Cormorant Garamond','EB Garamond',Georgia,serif;font-weight:600;font-size:51px;letter-spacing:9.6px;text-transform:uppercase;text-align:center;
}
.sd-rs-submit:active{background:#183742;}
.sd-rs-submit:disabled{cursor:default;opacity:.86;}
.sd-rs-submit:focus-visible{outline:6px solid #f7f1e8;outline-offset:-14px;}
.sd-rs-status{
  margin:0;padding:6px 24px;text-align:center;box-sizing:border-box;border-radius:26px;background:rgba(255,255,255,.92);
  font-family:'EB Garamond',Georgia,serif;font-weight:500;font-size:62px;line-height:74px;color:#7a1010;
}
.sd-rs-status:empty{display:none;}
.sd-rs-status.is-ok{color:#14532d;}
.sd-rs-card{
  box-sizing:border-box;background:#fff;border:0;box-shadow:0 0 0 3px rgba(214,199,160,.95);border-radius:32px;
}
.sd-rs-ctxt{display:flex;flex-direction:column;justify-content:flex-start;box-sizing:border-box;padding:0 69px;}
.sd-rs-ctxt[hidden],.sd-rs-card[hidden]{display:none;}
.sd-rs-cin{width:100%;margin-top:67px;}
.sd-rs-cname{
  font-family:'Cormorant Garamond','EB Garamond',Georgia,serif;font-style:italic;font-weight:600;font-size:69px;line-height:1.1;color:#00365a;overflow-wrap:anywhere;margin-bottom:28px;
}
.sd-rs-cmsg{
  font-family:'EB Garamond',Georgia,serif;font-weight:500;font-size:57.6px;line-height:76px;color:#3b2427;overflow-wrap:anywhere;
}

/* RSVP replay -- identical mechanism to Ayat..Love Story (script.js setupReplay,
   replayIds includes 'sd-rsvp'); idle art chains sdRpLive like the others. Text
   fades + rises 24px; wish cards are structural; every control wrapper only
   fades and is skipped while it holds the focus. */
.sd-rsvp [data-mo="rs-in"]{
  animation-name:sdRpIn;
  animation-duration:var(--mo-dur,1200ms);
  animation-delay:var(--mo-d,0ms);
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
  animation-fill-mode:both;
  animation-play-state:paused;
}
.sd-rsvp [data-mo="rs-in"][data-mo-idle]{
  animation-name:sdRpIn,sdRpLive;
  animation-duration:var(--mo-dur,1200ms),var(--mo-i-dur,12000ms);
  animation-delay:var(--mo-d,0ms),calc(var(--mo-d,0ms) + var(--mo-dur,1200ms) + var(--mo-i-off,0ms));
  animation-timing-function:cubic-bezier(.22,.61,.36,1),ease-in-out;
  animation-iteration-count:1,infinite;
  animation-fill-mode:both,none;
  animation-play-state:paused,paused;
}
.sd-rsvp.is-rsvp-active [data-mo="rs-in"]{animation-play-state:running;}
.sd-rsvp.is-rsvp-active [data-mo="rs-in"][data-mo-idle]{animation-play-state:running,running;}
.sd-rsvp.sd-js-replay.is-rsvp-active [data-mo="rs-in"]{animation-play-state:paused;}
.sd-rsvp.sd-js-replay.is-rsvp-active [data-mo="rs-in"][data-mo-idle]{animation-play-state:paused,paused;}

/* ---------- Hadiah ("Hadiah.psd", 1882x3693). The PSD's Layer 1 / Layer 1 copy are raster
   mock-ups of two gift cards (bank name, number, SALIN pill, holder, date, all baked with demo
   data): rebuilt here as .sd-hd-bg (cream panel) + .sd-hd-body (LIVE text, Poppins like the PSD,
   in normal flow so a long value grows the card). .sd-hd-slot is the stable, unanimated card box;
   the panel (structural) and the text body (text, fade + 24px rise) are separate motion
   elements, so the SALIN button never carries an idle or a transform of its own. ---------- */
.sd-hadiah{
  position:relative;
  width:100%;
  overflow:hidden;
  background:#4a7286;
  --bwk:3;
}
.sd-hadiah-scene{
  position:absolute;
  top:0;
  left:0;
  width:1882px;
  height:3693px;
  transform-origin:0 0;
}
#sdHdBgA{object-fit:fill;}
.sd-hd-desc{
  box-sizing:border-box;text-align:center;min-height:270px;
  font-family:'Poppins','Helvetica Neue',Arial,sans-serif;font-weight:300;font-size:61px;line-height:90px;letter-spacing:2px;color:#f4f0ee;
  overflow-wrap:anywhere;
}
.sd-hd-slot{min-height:822px;box-sizing:border-box;}
.sd-hd-bg{
  position:absolute;left:2px;top:2px;right:2px;bottom:2px;border-radius:40px;
  background:linear-gradient(165deg,#f7f7f2 0%,#f9f9f4 40%,#f0f0ec 70%,#dedede 100%);
}
.sd-hd-body{
  position:relative;box-sizing:border-box;min-height:822px;display:flex;flex-direction:column;
  padding:115px 83px 97px 82px;
  font-family:'Poppins','Helvetica Neue',Arial,sans-serif;color:#300400;
}
.sd-hd-top{display:flex;justify-content:space-between;align-items:flex-start;min-height:231px;box-sizing:border-box;padding-bottom:44px;}
.sd-hd-title{
  flex:1 1 auto;min-width:0;font-weight:600;font-size:52px;line-height:62px;overflow-wrap:anywhere;
}
.sd-hd-logo{flex:0 0 294px;height:86px;margin:-21px -34px 0 24px;display:flex;justify-content:flex-end;align-items:center;}
.sd-hd-logo:empty{display:none;}
.sd-hd-logo.is-text{height:auto;min-height:0;align-items:flex-start;overflow:hidden;}
.sd-hd-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;}
.sd-hd-logo-t{font-weight:600;font-size:40px;line-height:1.2;text-align:right;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;max-width:100%;}
.sd-hd-lab{font-weight:300;font-size:40.5px;line-height:46px;letter-spacing:1px;color:#111;}
.sd-hd-numlab{margin-top:0px;}
.sd-hd-mid{display:flex;justify-content:space-between;align-items:center;margin-top:6px;margin-bottom:64px;}
.sd-hd-num{flex:1 1 auto;min-width:0;font-weight:600;font-size:56px;line-height:70px;letter-spacing:12px;overflow-wrap:anywhere;}
.sd-hd-copy{
  position:relative;flex:0 0 308px;width:308px;height:103px;margin:0 3px 0 24px;top:-10px;padding:0;border:0;border-radius:103px;
  background:#987e40;color:#fff;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;
  display:flex;align-items:center;justify-content:center;gap:26px;
  font-family:'Poppins','Helvetica Neue',Arial,sans-serif;font-weight:500;font-size:38px;line-height:1;letter-spacing:.02em;
}
/* the pill keeps the PSD size; its invisible hit area reaches ~44 CSS px on a phone */
.sd-hd-copy::after{content:"";position:absolute;left:-28px;right:-28px;top:-66px;bottom:-66px;}
.sd-hd-copy:active{background:#85703a;}
.sd-hd-copy.is-done{background:#6f7d3f;}
.sd-hd-copy:focus-visible{outline:6px solid #fff;outline-offset:6px;}
.sd-hd-ico{flex:none;width:31px;height:auto;pointer-events:none;}
.sd-hd-copy-t{pointer-events:none;white-space:nowrap;}
.sd-hd-bot{display:flex;justify-content:space-between;align-items:flex-start;margin-top:auto;padding-top:0px;}
.sd-hd-col{flex:1 1 50%;min-width:0;}
.sd-hd-colr{text-align:right;flex:0 1 auto;max-width:48%;}
.sd-hd-holder,.sd-hd-date{font-weight:600;font-size:47px;line-height:58px;overflow-wrap:anywhere;}
.sd-hd-holder{margin-top:13px;}
.sd-hd-date{margin-top:13px;}
.sd-hd-slot[hidden],.sd-hd-lab[hidden],.sd-hd-holder[hidden],.sd-hd-date[hidden]{display:none;}

/* Hadiah replay -- identical mechanism to Ayat..RSVP (script.js setupReplay, replayIds includes
   'sd-hadiah'); idle art chains sdRpLive like the others. Text fades + rises 24px, card panels are
   structural, no control ever idles. */
.sd-hadiah [data-mo="hd-in"]{
  animation-name:sdRpIn;
  animation-duration:var(--mo-dur,1200ms);
  animation-delay:var(--mo-d,0ms);
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
  animation-fill-mode:both;
  animation-play-state:paused;
}
.sd-hadiah [data-mo="hd-in"][data-mo-idle]{
  animation-name:sdRpIn,sdRpLive;
  animation-duration:var(--mo-dur,1200ms),var(--mo-i-dur,12000ms);
  animation-delay:var(--mo-d,0ms),calc(var(--mo-d,0ms) + var(--mo-dur,1200ms) + var(--mo-i-off,0ms));
  animation-timing-function:cubic-bezier(.22,.61,.36,1),ease-in-out;
  animation-iteration-count:1,infinite;
  animation-fill-mode:both,none;
  animation-play-state:paused,paused;
}
.sd-hadiah.is-hadiah-active [data-mo="hd-in"]{animation-play-state:running;}
.sd-hadiah.is-hadiah-active [data-mo="hd-in"][data-mo-idle]{animation-play-state:running,running;}
.sd-hadiah.sd-js-replay.is-hadiah-active [data-mo="hd-in"]{animation-play-state:paused;}
.sd-hadiah.sd-js-replay.is-hadiah-active [data-mo="hd-in"][data-mo-idle]{animation-play-state:paused,paused;}

/* ---------- Closing ("Clousing.psd", 1882x3971). The last section. Ground #214956 = the PSD's
   Layer 5 panel; the photo (canonical bg_penutup, cover-cropped) sits in the top 3300px under a
   one-piece veil measured from the PSD's Gradient Fill (colour #214956, alpha .306 -> 1 by 3150px).
   No ornaments in this PSD. Text = live (Arimo like the PSD's Arial, Tinos italic like its Times);
   the footer (badge, two social links, music disc) is plain stable controls whose wrappers only fade. */
.sd-closing{
  position:relative;
  width:100%;
  overflow:hidden;
  background:#214956;
  --bwk:3;
}
.sd-closing-scene{
  position:absolute;
  top:0;
  left:0;
  width:1882px;
  height:3971px;
  transform-origin:0 0;
}
.sd-cl-photo{overflow:hidden;background-color:#214956;}
.sd-cl-photo[hidden],.sd-cl-veil[hidden]{display:none;}
.sd-cl-img{position:absolute;inset:0;background-size:cover;background-position:50% 12%;background-repeat:no-repeat;}
.sd-cl-veil{height:3304px !important;background:linear-gradient(to bottom,rgba(33,73,86,0.306) 0px,rgba(33,73,86,0.36) 300px,rgba(33,73,86,0.419) 600px,rgba(33,73,86,0.485) 900px,rgba(33,73,86,0.554) 1200px,rgba(33,73,86,0.626) 1500px,rgba(33,73,86,0.701) 1800px,rgba(33,73,86,0.777) 2100px,rgba(33,73,86,0.852) 2400px,rgba(33,73,86,0.922) 2700px,rgba(33,73,86,0.985) 3000px,rgb(33,73,86) 3150px,rgb(33,73,86) 3304px);}
.sd-cl-body{position:absolute;left:0;top:0;width:1882px;height:3971px;pointer-events:none;}
.sd-cl-body .sd-cl-w,.sd-cl-body a,.sd-cl-body button{pointer-events:auto;}
.sd-cl-kata,.sd-cl-blessed,.sd-cl-names{margin:0;text-align:center;overflow-wrap:anywhere;}
.sd-cl-kata{
  box-sizing:border-box;min-height:224px;
  font-family:'Arimo','Helvetica Neue',Arial,sans-serif;font-weight:400;font-size:62.5px;line-height:112px;color:#f0efde;
}
.sd-cl-blessed{
  font-family:'Arimo','Helvetica Neue',Arial,sans-serif;font-weight:400;font-size:55px;line-height:60px;color:#fff;white-space:nowrap;
}
.sd-cl-names{
  display:block;box-sizing:border-box;min-height:133px;
  font-family:'Tinos','Times New Roman',Times,serif;font-style:italic;font-weight:400;font-size:133px;line-height:1;color:#95d1f5;white-space:nowrap;
}
.sd-cl-names:empty{display:none;}
.sd-cl-w{box-sizing:border-box;}
.sd-cl-a{display:block;position:relative;width:100%;height:100%;-webkit-tap-highlight-color:transparent;}
.sd-cl-a img{display:block;width:100%;height:100%;pointer-events:none;}
/* invisible hit areas: the badge/icons are 28-37 CSS px on a phone; they reach ~40 without overlapping each other */
.sd-cl-a::after{content:"";position:absolute;left:-24px;right:-24px;top:-24px;bottom:-24px;border-radius:50%;}
.sd-cl-a:focus-visible{outline:4px solid #fff;outline-offset:6px;border-radius:50%;}
.sd-cl-music{
  position:relative;display:block;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;
  -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;
}
.sd-cl-music img{display:block;width:100%;height:100%;opacity:.72;transition:opacity .3s ease;pointer-events:none;}
.sd-cl-music.is-on img{opacity:1;}
.sd-cl-music::after{content:"";position:absolute;left:-40px;right:-40px;top:-40px;bottom:-40px;border-radius:50%;}
.sd-cl-music:focus-visible{outline:5px solid #fff;outline-offset:8px;}

/* Closing replay -- identical mechanism to Ayat..Hadiah (script.js setupReplay, replayIds includes
   'sd-closing'). Text fades + rises 24px; the photo and the footer wrappers only fade. There is no
   idle here (the PSD has no ornament) and the music disc never moves. */
.sd-closing [data-mo="cl-in"]{
  animation-name:sdRpIn;
  animation-duration:var(--mo-dur,1200ms);
  animation-delay:var(--mo-d,0ms);
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
  animation-fill-mode:both;
  animation-play-state:paused;
}
.sd-closing.is-closing-active [data-mo="cl-in"]{animation-play-state:running;}
.sd-closing.sd-js-replay.is-closing-active [data-mo="cl-in"]{animation-play-state:paused;}

@media (prefers-reduced-motion:reduce){
  [data-mo]{animation:none !important;}
  .sd-cover{transition:none !important;}
}
.sd-nomo [data-mo]{animation:none !important;}
.sd-nomo .sd-cover{transition:none !important;}

/* Cover title from judul_hero (replaces the PSD raster only when the client set one) */
.sd-title{
  display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;
  font-family:'Tinos','Times New Roman',serif;font-weight:400;font-size:32.1px;
  letter-spacing:4.8px;padding-left:4.8px;line-height:1;color:#383838;pointer-events:none;
}
.sd-title[hidden]{display:none;}