/* Emerald Ivory (emerald-ivory) — Cover. Native HTML/CSS built straight from
   cover.psd (1080x1920). The whole scene is authored at PSD pixel coordinates and
   scaled as one unit to cover the viewport (same mechanic as Jawa/Betawi: one
   cover-fit transform, no per-property unit conversion). Cover section only. */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:#000;height:100%;}
body{font-family:'Cormorant Garamond',serif;-webkit-font-smoothing:antialiased;}
img{max-width:none;}

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

.ei-cover{
  position:relative;
  width:100%;
  height:100dvh;
  overflow:hidden;
  background:#f1ebdd;
}

.ei-cover-scene{
  position:absolute;
  top:50%;
  left:50%;
  width:1080px;
  height:1920px;
  transform-origin:center center;
}

.ei-l{position:absolute;}

/* ---- Dynamic text ---- */
.ei-title,.ei-name,.ei-date,.ei-guest{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  white-space:nowrap;
  pointer-events:none;
}
.ei-title span,.ei-name span,.ei-date span,.ei-guest span{display:block;transform-origin:50% 50%;}

.ei-title{
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  font-size:26px;
  letter-spacing:10.1px;
  padding-left:10.1px;           /* balances the trailing letter-spacing */
  text-transform:uppercase;
  line-height:1;
  color:#5e5136;
}

.ei-name{
  font-family:'Imperial Script',cursive;
  font-weight:400;
  font-size:165px;
  line-height:1;
  color:#876a40;
}

.ei-date{
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  font-size:32px;
  letter-spacing:11.4px;
  padding-left:11.4px;            /* balances the trailing letter-spacing */
  font-variant-numeric:lining-nums;
  line-height:1;
  color:#3a433d;
  text-shadow:0 0 6px rgba(255,255,255,.9);
}

.ei-guest{
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:48px;
  letter-spacing:0;
  line-height:1;
  color:#283a33;
  text-shadow:0 0 5px rgba(255,255,255,.85);
}

/* ---- Photo: Layer 5 white + soft alpha shape, Layer 6 photo inside it ---- */
.ei-photo{
  background:#fff;
  overflow:hidden;
  -webkit-mask-image:url(/templates/emerald-ivory/assets/cover-photo-mask.png);
  mask-image:url(/templates/emerald-ivory/assets/cover-photo-mask.png);
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  pointer-events:none;
}
.ei-photo-img{
  display:none;
  position:absolute;
  left:25px;                    /* Layer 6 left (0) relative to this box (-25) */
  top:-164px;                   /* Layer 6 top (566) relative to this box (730) */
  width:1140px;
  height:var(--ei-photo-h,1713px);
  object-fit:cover;
  object-position:50% 20%;
}

/* ---- Open Invitation (Layer 4 raster is the button face) ---- */
.ei-open-btn{
  position:absolute;
  display:block;
  padding:0;
  margin:0;
  border:0;
  background:none;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.ei-open-btn img{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none;}
.ei-open-btn:active{transform:scale(.98);}
.ei-open-btn:focus-visible{outline:3px solid #b79a5c;outline-offset:6px;border-radius:70px;}

/* ================= Motion (Jawa/Betawi cover entrance, same keyframes) =================
   Entrance only, `from` keyframes without fill-mode: the element's own resting style
   is the final state, so a missed/blocked animation can never leave a blank layer.
   ?motion=0 and prefers-reduced-motion switch all of it off. */
[data-mo]{
  animation-duration:var(--mo-dur,800ms);
  animation-delay:var(--mo-d,0ms);
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
  animation-fill-mode:backwards;
}
[data-mo="fade"],[data-mo="bg"]{animation-name:eiMoFade;}
[data-mo="up"]{animation-name:eiMoUp;}
[data-mo="drop"]{animation-name:eiMoDrop;}
[data-mo="slideRight"]{animation-name:eiMoSlideRight;}
[data-mo="zoomIn"]{animation-name:eiMoZoomIn;}
[data-mo="growXY"]{animation-name:eiMoGrowXY;}
@keyframes eiMoFade{from{opacity:0;}}
@keyframes eiMoUp{from{opacity:0;translate:0 var(--mo-ty,30px);}}
@keyframes eiMoDrop{from{opacity:0;translate:0 var(--mo-ty,-70px);}}
@keyframes eiMoSlideRight{from{opacity:0;translate:var(--mo-tx,-70px) 0;}}
@keyframes eiMoZoomIn{from{opacity:0;scale:var(--mo-s,.97);}}
@keyframes eiMoGrowXY{from{opacity:0;scale:var(--mo-s,.3);}}
@keyframes eiMoSettle{from{scale:1.018;}}

/* Idle sway (Jawa Cover mechanism, same keyframes): the two flower sprays rotate only,
   pivot = their own root (the entrance's transform-origin), < 1 deg, different
   duration/offset each so they never move in lockstep. It starts only after the
   element's own entrance has finished and always returns to 0deg. Compositor-only
   (the independent `rotate` property), CSS-only, no layout, no will-change. */
[data-mo="growXY"][data-mo-idle]{animation-name:eiMoGrowXY,eiMoSway;}
[data-mo="fade"][data-mo-idle="float"]{animation-name:eiMoFade,eiMoFloat;}
[data-mo="fade"][data-mo-idle="breathe"]{animation-name:eiMoFade,eiMoBreathe;}
[data-mo="drop"][data-mo-idle="float"]{animation-name:eiMoDrop,eiMoFloat;}
[data-mo="slideRight"][data-mo-idle="float"]{animation-name:eiMoSlideRight,eiMoFloat;}
[data-mo="zoomIn"][data-mo-idle="zoom"]{animation-name:eiMoZoomIn,eiMoZoom;}
[data-mo-idle]{
  animation-duration:var(--mo-dur),var(--mo-i-dur,10000ms);
  animation-delay:var(--mo-d),calc(var(--mo-d) + var(--mo-dur) + 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:backwards,none;
}
[data-mo="bg"][data-mo-idle="drift"]{
  animation-name:eiMoFade,eiMoSettle,eiMoDrift;
  animation-duration:var(--mo-dur,800ms),var(--mo-settle,6000ms),var(--mo-i-dur,22000ms);
  animation-delay:var(--mo-d,0ms),var(--mo-d,0ms),calc(var(--mo-d,0ms) + var(--mo-settle,6000ms) + var(--mo-i-off,0ms));
  animation-timing-function:ease,cubic-bezier(.22,.61,.36,1),ease-in-out;
  animation-iteration-count:1,1,infinite;
  animation-fill-mode:backwards,backwards,none;
}
@keyframes eiMoSway{
  0%,100%{rotate:0deg;}
  25%{rotate:var(--mo-i-deg,.8deg);}
  75%{rotate:calc(var(--mo-i-deg,.8deg) * -1);}
}
@keyframes eiMoFloat{
  0%,100%{translate:0 0;}
  50%{translate:var(--mo-f-x,0px) var(--mo-f-y,0px);}
}
@keyframes eiMoBreathe{
  0%,100%{scale:1;}
  50%{scale:var(--mo-b,1.006);}
}
@keyframes eiMoZoom{
  0%,100%{scale:1;}
  50%{scale:var(--mo-b,1.035);}
}
@keyframes eiMoDrift{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(var(--mo-f-x,0px),var(--mo-f-y,0px),0) scale(var(--mo-b,1.012));}
}
/* Cover flowers stop after opening; Hero flowers keep their own approved idle sway. */
.ei-app.is-open .ei-cover [data-mo-idle],.ei-hidden [data-mo-idle]{animation-play-state:running,paused;}
.ei-hidden [data-mo-idle]{animation-play-state:paused !important;}

/* Cover exit (Betawi/Jawa: 0.8s opacity + -3% translate on the Cover box, never on its scene). */
.ei-cover{
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),translate .8s cubic-bezier(.22,.61,.36,1);
}
.ei-app.is-open .ei-cover{
  opacity:0;
  translate:0 -3%;
  pointer-events:none;
}
.ei-app.is-hero-active .ei-cover{display:none;}

/* ================= Hero (Hero.psd, 1080x1920) =================
   Authored in PSD pixel coordinates, activated only after the Cover exit
   completes. The final visible state is always the element's own resting
   style; entrance keyframes never own final geometry. */
.ei-hero{
  position:relative;
  display:none;
  width:100%;
  height:100dvh;
  overflow:hidden;
  background:#f1ebdd;
}
.ei-app.is-hero-active .ei-hero{display:block;}
.ei-hero-scene{
  position:absolute;
  top:50%;
  left:50%;
  width:1080px;
  height:1920px;
  transform-origin:center center;
}
.ei-hero-layer{pointer-events:none;-webkit-user-drag:none;}
.ei-hero-base{z-index:0;}
.ei-hero-mountains{z-index:1;}
.ei-hero-emerald-left{z-index:2;}
.ei-hero-emerald-top{z-index:3;}
.ei-hero-flower{z-index:8;pointer-events:none;}
.ei-hero-flower-top{z-index:9;}
.ei-hero-flower-bottom{z-index:10;}
.ei-hero-initial,.ei-hero-date{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  pointer-events:none;
  white-space:nowrap;
  z-index:5;
}
.ei-hero-initial span,.ei-hero-date span{display:block;transform-origin:50% 50%;}
.ei-hero-initial{
  font-family:'Cormorant Garamond',serif;
  font-size:352px;
  font-weight:500;
  line-height:.78;
  color:#6f522a;
  text-shadow:0 2px 2px rgba(255,255,255,.24), 0 10px 16px rgba(75,54,24,.08);
}
.ei-hero-initial-a{
  color:#7c6143;
}
.ei-hero-initial-b{
  color:#6a4b29;
}
.ei-hero-date{
  font-family:'Cormorant Garamond',serif;
  font-size:50px;
  font-weight:500;
  line-height:1;
  letter-spacing:23px;
  padding-left:23px;
  color:#2d302b;
  font-variant-numeric:lining-nums;
  text-shadow:0 0 7px rgba(255,255,255,.82);
  z-index:6;
}
@media (prefers-reduced-motion:reduce){
  [data-mo]{animation:none !important;}
  .ei-cover{transition:none !important;}
}
.ei-nomo [data-mo]{animation:none !important;}
.ei-nomo .ei-cover{transition:none !important;}

/* ================= Ayat (ayat.psd, 1080x1797) =================
   Additive only: nothing above (Cover, Hero) is changed. Follows Hero in normal
   flow, so the scene is scaled to the section's WIDTH only (script.js sets the
   transform + section height); it is never cropped. */
.ei-ayat{
  display:none;
  position:relative;
  width:100%;
  overflow:hidden;
  background:#f2eae2;
  --bwk:3;
}
.ei-app.is-hero-active .ei-ayat{display:block;}
.ei-ay-scene{
  position:absolute;
  top:0;
  left:0;
  width:1080px;
  height:1797px;
  transform-origin:0 0;
}
.ei-ay-paper,.ei-ay-emerald{pointer-events:none;-webkit-user-drag:none;}
/* Layer 1 = cream (#f2eae2) shape whose own alpha is the mask; Layer 2 (photo) is
   clipped to it. Layer 2's rectangle (1,359 -> 1084x1627) relative to this box (0,119). */
.ei-ay-photo{
  background:#f2eae2;
  overflow:hidden;
  -webkit-mask-image:url(/templates/emerald-ivory/assets/ayat-photo-mask.png);
  mask-image:url(/templates/emerald-ivory/assets/ayat-photo-mask.png);
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  pointer-events:none;
}
.ei-ay-photo-img{
  display:none;
  position:absolute;
  left:1px;
  top:240px;
  width:1084px;
  height:1627px;
  object-fit:cover;
  object-position:50% 30%;
  transform-origin:50% 40%;
}
/* Type layers (fitted by measured ink widths): verse = Avenir Next Condensed UltraLight
   34.4px / 41.3 pitch in the PSD -> Barlow Condensed 300 + tracking; source = Baskerville
   34.4px faux-bold #686666 -> Baskervville 600 (ink 225px = PSD 225px). */
.ei-ay-verse{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  font-family:'Barlow Condensed','Avenir Next Condensed',sans-serif;
  font-weight:300;
  font-size:34.4px;
  letter-spacing:.57px;
  line-height:41.3px;
  color:#000;
  text-align:center;
  white-space:pre-line;
  pointer-events:none;
}
.ei-ay-verse-text{width:704px;}
.ei-ay-source{
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Baskervville','Baskerville','Libre Baskerville',serif;
  font-weight:600;
  font-size:34.4px;
  line-height:1;
  letter-spacing:0;
  font-variant-numeric:lining-nums;
  color:#686666;
  text-align:center;
  white-space:nowrap;
  pointer-events:none;
}
.ei-ay-source span{display:block;transform-origin:50% 50%;}

/* Motion = the UndanganAdat Ayat SOP, ported (not reinvented):
   - lifecycle  : Betawi GOLD setupReplay -- persistent CSS animations, fill-mode both,
                  paused at the first keyframe until script.js plays them (and rewinds them
                  when the section has fully left the viewport), so every re-entry replays.
   - keyframes  : Batak/Lampung/Jawa "RpIn" (opacity + translate x/y in CSS px x --bwk + scale
                  from --rp-*, resting state = identity) and "RpLive" (organic push-and-settle idle:
                  peak 30%, partial return 60%, translate + rotate about the asset's own anchor).
   - roles      : in   = photo / text (Batak+Lampung ayat-in: 1300ms cubic-bezier(.22,.61,.36,1);
                          photo --rp-y:-60px --rp-s:1.04, text --rp-y:24px)
                  deco = independent PSD art (Batak/Jawa rp-deco: 1400ms cubic-bezier(.25,.85,.3,1.15)
                          overshoot, --rp-x/-y/-s entrance, endless RpLive idle 11-13s, own offset)
                  zoom = photo idle breathe (the Hero's own approved eiMoZoom keyframe)
   - cadence    : authored stagger (Betawi-style) -- ornament 0, photo 150, verse 700, source 1100 ms.
   Distances are CSS px x --bwk (scene px per CSS px). The final state is always the PSD position. */
@keyframes eiAyIn{
  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 eiAyLive{
  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);}
}
.ei-ayat [data-ay]{
  animation-play-state:paused;
  animation-fill-mode:both;
}
.ei-ayat [data-ay="in"]{
  animation-name:eiAyIn;
  animation-duration:var(--ay-dur,1300ms);
  animation-delay:var(--ay-d,0ms);
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
}
.ei-ayat [data-ay="deco"]{
  animation-name:eiAyIn,eiAyLive;
  animation-duration:var(--ay-dur,1400ms),var(--ay-i-dur,12000ms);
  animation-delay:var(--ay-d,0ms),calc(var(--ay-d,0ms) + var(--ay-dur,1400ms) + var(--ay-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;
}
.ei-ayat [data-ay="zoom"]{
  animation-name:eiMoZoom;
  animation-duration:var(--ay-i-dur,18000ms);
  animation-delay:calc(var(--ay-d,0ms) + var(--ay-dur,1300ms) + var(--ay-i-off,0ms));
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-fill-mode:none;
}
/* if the replay step cannot run, still play once the section is reached */
.ei-ayat.is-ayat-active [data-ay]{animation-play-state:running;}
.ei-ayat.ei-js-replay.is-ayat-active [data-ay]{animation-play-state:paused;}
.ei-hidden .ei-ayat [data-ay]{animation-play-state:paused !important;}
@media (prefers-reduced-motion:reduce){.ei-ayat [data-ay]{animation:none !important;}}
.ei-nomo .ei-ayat [data-ay]{animation:none !important;}
/* geometry-only probes for the replay observers (script.js); never visible, never interactive */
.ei-ay-sentinel{position:absolute;visibility:hidden;pointer-events:none;}

/* ================= Pasangan (pasangan.psd, 1882x3344) =================
   Additive only: nothing above (Cover, Hero, Ayat) is changed. Follows Ayat in normal flow;
   the scene is scaled to the section's WIDTH only (script.js). The PSD's baked names, parents
   line, divider and Instagram badges are removed from the paper plate and rebuilt live. */
.ei-pas{
  display:none;
  position:relative;
  width:100%;
  overflow:hidden;
  background:#eee4d3;
  --bwk:4.8;
}
.ei-app.is-hero-active .ei-pas{display:block;}
.ei-pas-scene{
  position:absolute;
  top:0;
  left:0;
  width:1882px;
  height:3344px;
  transform-origin:0 0;
}
.ei-pas-art{pointer-events:none;-webkit-user-drag:none;}
/* frame group: photo (clipped to the aperture shape, PSD Layer 6) under the cream frame ring */
.ei-pas-photo{
  position:absolute;
  width:651px;
  height:923px;
  overflow:hidden;
  -webkit-mask-image:url(/templates/emerald-ivory/assets/pasangan-photo-mask.png);
  mask-image:url(/templates/emerald-ivory/assets/pasangan-photo-mask.png);
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  pointer-events:none;
}
.ei-pas-photo-img{
  display:none;
  position:absolute;
  object-fit:cover;
  transform-origin:50% 40%;
}
.ei-pas-ring{
  position:absolute;
  left:0;
  top:0;
  width:692px;
  height:963px;
  pointer-events:none;
  -webkit-user-drag:none;
}
/* text (PSD raster rebuilt live): Newsreader fitted to the PSD's measured ink widths
   (names 110.4px, capped to 760px of ink; parents 55.6px / 78px line pitch) */
.ei-pas-name,.ei-pas-parents{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:'Newsreader','Libre Caslon Text',Georgia,serif;
  font-weight:400;
  font-optical-sizing:auto;
  pointer-events:none;
}
.ei-pas-name{font-size:112px;letter-spacing:-1.2px;line-height:1;white-space:nowrap;}
.ei-pas-name span{display:block;transform-origin:50% 50%;}
.ei-pas-parents{font-size:55.6px;letter-spacing:.9px;line-height:78px;white-space:pre-line;}
.ei-pas-parents-text{width:100%;}
.ei-pas-name-p{color:#624e32;}
.ei-pas-parents-p{color:#5b4c33;}
.ei-pas-name-w{color:#5c4b31;}
.ei-pas-parents-w{color:#43392c;}
.ei-pas-ig{display:block;-webkit-tap-highlight-color:transparent;}
.ei-pas-ig img{display:block;width:100%;height:100%;-webkit-user-drag:none;}

/* Motion: same SOP port as Ayat (eiAyIn / eiAyLive / eiMoZoom, paused until script.js plays them) */
.ei-pas [data-ay]{
  animation-play-state:paused;
  animation-fill-mode:both;
}
.ei-pas [data-ay="in"]{
  animation-name:eiAyIn;
  animation-duration:var(--ay-dur,1300ms);
  animation-delay:var(--ay-d,0ms);
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
}
.ei-pas [data-ay="deco"]{
  animation-name:eiAyIn,eiPasSway;
  animation-duration:var(--ay-dur,1400ms),var(--ay-i-dur,8000ms);
  animation-delay:var(--ay-d,0ms),calc(var(--ay-d,0ms) + var(--ay-dur,1400ms) + var(--ay-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;
}
/* Pasangan idle: a visible, soft two-sided sway (small rotation about the asset's own anchor +
   left/right drift) -- peak at 25%, back to rest at 50%, mirrored peak at 75%. Each asset has its own
   amplitude, tempo and start offset so nothing moves in lockstep. Only the independent
   translate/rotate properties; the resting pose is always the PSD position. */
@keyframes eiPasSway{
  0%,100%{translate:0 0;rotate:0deg;}
  25%{translate:var(--i-x,0px) var(--i-y,0px);rotate:var(--i-r,0deg);}
  50%{translate:0 0;rotate:0deg;}
  75%{translate:calc(var(--i-x,0px) * -1) calc(var(--i-y,0px) * -.6);rotate:calc(var(--i-r,0deg) * -1);}
}
.ei-pas [data-ay="zoom"]{
  animation-name:eiMoZoom;
  animation-duration:var(--ay-i-dur,18000ms);
  animation-delay:calc(var(--ay-d,0ms) + var(--ay-dur,1300ms) + var(--ay-i-off,0ms));
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-fill-mode:none;
}
.ei-pas.is-pas-active [data-ay]{animation-play-state:running;}
.ei-pas.ei-js-replay.is-pas-active [data-ay]{animation-play-state:paused;}
.ei-hidden .ei-pas [data-ay]{animation-play-state:paused !important;}
@media (prefers-reduced-motion:reduce){.ei-pas [data-ay]{animation:none !important;}}
.ei-nomo .ei-pas [data-ay]{animation:none !important;}

/* ================= Acara (acara.psd, 1882x3344) =================
   Additive only: nothing above (Cover, Hero, Ayat, Pasangan) is changed. Follows Pasangan in normal
   flow; the scene is scaled to the section's WIDTH only (script.js). The PSD's card art keeps its icons,
   rules and buttons; the dynamic lines are live text fitted to the PSD's measured ink. */
.ei-acr{
  display:none;
  position:relative;
  width:100%;
  overflow:hidden;
  background:#efe6d6;
  --bwk:4.8;
}
.ei-app.is-hero-active .ei-acr{display:block;}
.ei-acr-scene{
  position:absolute;
  top:0;
  left:0;
  width:1882px;
  height:3344px;
  transform-origin:0 0;
}
.ei-acr-art{pointer-events:none;-webkit-user-drag:none;}
.ei-acr-title,.ei-acr-dt,.ei-acr-venue,.ei-acr-addr,.ei-acr-cdlabel,.ei-acr-cdnum{
  font-family:'Crimson Pro','Cormorant Garamond',Georgia,serif;
  color:#3f3427;
  pointer-events:none;
  white-space:nowrap;
}
.ei-acr-title{font-size:76px;line-height:1;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#3a3023;}
.ei-acr-dt{font-size:50px;line-height:1;font-weight:400;color:#4a3d2c;}
.ei-acr-jam span::before{content:attr(data-prefix);}
.ei-acr-venue{font-size:44px;line-height:1;font-weight:700;color:#3a3023;}
.ei-acr-addr{font-size:47px;line-height:1.12;font-weight:400;color:#4a3d2c;white-space:normal;}
.ei-acr-addr-text{width:100%;}
.ei-acr-cdlabel{display:flex;align-items:center;justify-content:center;font-size:67.8px;line-height:1;font-weight:400;color:#3a3023;text-align:center;}
.ei-acr-cdnum{display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond','Crimson Pro',Georgia,serif;font-weight:600;font-size:76px;line-height:1;color:#2a2018;text-align:center;font-variant-numeric:oldstyle-nums;}
.ei-acr-hit{display:block;-webkit-tap-highlight-color:transparent;}

/* Motion: same SOP port as Ayat/Pasangan (eiAyIn / eiPasSway / eiMoZoom, paused until script.js plays them) */
.ei-acr [data-ay]{
  animation-play-state:paused;
  animation-fill-mode:both;
}
.ei-acr [data-ay="in"]{
  animation-name:eiAyIn;
  animation-duration:var(--ay-dur,1300ms);
  animation-delay:var(--ay-d,0ms);
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
}
.ei-acr [data-ay="deco"]{
  animation-name:eiAyIn,eiPasSway;
  animation-duration:var(--ay-dur,1400ms),var(--ay-i-dur,8000ms);
  animation-delay:var(--ay-d,0ms),calc(var(--ay-d,0ms) + var(--ay-dur,1400ms) + var(--ay-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;
}
.ei-acr.is-acr-active [data-ay]{animation-play-state:running;}
.ei-acr.ei-js-replay.is-acr-active [data-ay]{animation-play-state:paused;}
.ei-hidden .ei-acr [data-ay]{animation-play-state:paused !important;}
@media (prefers-reduced-motion:reduce){.ei-acr [data-ay]{animation:none !important;}}
.ei-nomo .ei-acr [data-ay]{animation:none !important;}

/* ================= Live Streaming (Live Streaming.psd, 2142x2938) =================
   Additive only: nothing above (Cover, Hero, Ayat, Pasangan, Acara) is changed. Follows Acara in normal
   flow; the scene scales to the section's WIDTH only (script.js). */
.ei-liv{
  display:none;
  position:relative;
  width:100%;
  overflow:hidden;
  background:#f2e8d3;
  --bwk:5.5;
}
.ei-app.is-hero-active .ei-liv{display:block;}
.ei-liv-scene{
  position:absolute;
  top:0;
  left:0;
  width:2142px;
  height:2938px;
  transform-origin:0 0;
}
.ei-liv-art{pointer-events:none;-webkit-user-drag:none;}
.ei-liv-btn{display:block;-webkit-tap-highlight-color:transparent;}
.ei-liv-btn img{display:block;width:100%;height:100%;-webkit-user-drag:none;}

/* Motion: same SOP port as Ayat/Pasangan/Acara (eiAyIn / eiPasSway, paused until script.js plays them) */
.ei-liv [data-ay]{
  animation-play-state:paused;
  animation-fill-mode:both;
}
.ei-liv [data-ay="in"]{
  animation-name:eiAyIn;
  animation-duration:var(--ay-dur,1300ms);
  animation-delay:var(--ay-d,0ms);
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
}
.ei-liv [data-ay="deco"]{
  animation-name:eiAyIn,eiPasSway;
  animation-duration:var(--ay-dur,1400ms),var(--ay-i-dur,10000ms);
  animation-delay:var(--ay-d,0ms),calc(var(--ay-d,0ms) + var(--ay-dur,1400ms) + var(--ay-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;
}
.ei-liv.is-liv-active [data-ay]{animation-play-state:running;}
.ei-liv.ei-js-replay.is-liv-active [data-ay]{animation-play-state:paused;}
.ei-hidden .ei-liv [data-ay]{animation-play-state:paused !important;}
@media (prefers-reduced-motion:reduce){.ei-liv [data-ay]{animation:none !important;}}
.ei-nomo .ei-liv [data-ay]{animation:none !important;}

/* ================= Galeri (Galeri.psd, 1080x1481) =================
   Additive only: nothing above (Cover..Live Streaming) is changed. Follows Live Streaming in normal flow; the scene
   scales to the section's WIDTH only (script.js). Strip + lightbox behaviour = the other templates' gallery. */
.ei-gal{
  display:none;
  position:relative;
  width:100%;
  overflow:hidden;
  background:#0c3a2e;
  --bwk:3;
}
.ei-app.is-hero-active .ei-gal{display:block;}
.ei-gal-scene{
  position:absolute;
  top:0;
  left:0;
  width:1080px;
  height:1481px;
  transform-origin:0 0;
}
.ei-gal-art{pointer-events:none;-webkit-user-drag:none;}
.ei-gal-sub{
  font-family:'Crimson Pro','Cormorant Garamond',Georgia,serif;
  font-weight:400;
  font-size:33px;
  line-height:35px;
  color:#ece4cf;
  text-align:center;
  white-space:nowrap;
  pointer-events:none;
}
.ei-gal-row{overflow:hidden;border-radius:22px;}
.ei-gal-track{
  display:flex;
  gap:23px;
  width:100%;
  height:100%;
  /* hidden, not auto: the strip is scrolled by script.js only (a native scroller nested in the
     transform-scaled scene breaks touch drag in iOS Safari); scrollLeft/snap/dots are unchanged */
  overflow-x:hidden;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  touch-action:pan-y;
}
.ei-gal-track::-webkit-scrollbar{display:none;}
.ei-gal-slide{
  flex:0 0 395px;
  height:100%;
  scroll-snap-align:start;
  border-radius:22px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
  cursor:zoom-in;
  -webkit-tap-highlight-color:transparent;
}
.ei-gal-slide[hidden]{display:none;}
.ei-gal-slide:focus-visible{outline:3px solid #ece4cf;outline-offset:-3px;}
.ei-gal-slide img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 35%;
  -webkit-user-drag:none;
  user-select:none;
}
.ei-gal-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.ei-gal-dots span{
  display:block;
  flex:0 0 auto;
  width:11px;
  height:11px;
  border-radius:50%;
  background:#648879;
}
.ei-gal-dots span.is-active{width:18px;height:18px;background:#eae4d3;}
/* lightbox: body-level overlay, untouched by the scaled scene, invisible until opened */
.ei-lb{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  z-index:2147483000;
  background:rgba(8,6,4,.96);
  overflow:hidden;
  touch-action:none;
  overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.ei-lb[hidden]{display:none;}
.ei-lb-img{
  position:absolute;
  left:50%;top:50%;
  max-width:none;
  transform-origin:50% 50%;
  will-change:transform;
  -webkit-user-drag:none;
  pointer-events:none;
}
.ei-lb-btn{
  position:absolute;
  width:48px;height:48px;
  border:0;border-radius:24px;
  background:rgba(0,0,0,.55);
  color:#fff;
  font:400 30px/48px Arial,sans-serif;
  text-align:center;
  padding:0;
  cursor:pointer;
  touch-action:manipulation;
}
.ei-lb-x{top:calc(env(safe-area-inset-top,0px) + 12px);right:calc(env(safe-area-inset-right,0px) + 12px);}
.ei-lb-prev,.ei-lb-next{top:50%;margin-top:-24px;}
.ei-lb-prev{left:calc(env(safe-area-inset-left,0px) + 8px);}
.ei-lb-next{right:calc(env(safe-area-inset-right,0px) + 8px);}
.ei-lb-btn[hidden]{display:none;}
@media (hover:none) and (pointer:coarse){.ei-lb-prev,.ei-lb-next{display:none;}}
.ei-lb-count{
  position:absolute;
  left:0;right:0;
  bottom:calc(env(safe-area-inset-bottom,0px) + 14px);
  text-align:center;
  color:#fff;
  font:500 15px/1 Arial,sans-serif;
  letter-spacing:.06em;
  text-shadow:0 1px 3px rgba(0,0,0,.7);
  pointer-events:none;
}
.ei-lb-count[hidden]{display:none;}

/* Motion: same SOP port as Ayat/Pasangan/Acara (eiAyIn, paused until script.js plays them); no florals in this PSD */
.ei-gal [data-ay]{
  animation-play-state:paused;
  animation-fill-mode:both;
}
.ei-gal [data-ay="in"]{
  animation-name:eiAyIn;
  animation-duration:var(--ay-dur,1300ms);
  animation-delay:var(--ay-d,0ms);
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
}
.ei-gal.is-gal-active [data-ay]{animation-play-state:running;}
.ei-gal.ei-js-replay.is-gal-active [data-ay]{animation-play-state:paused;}
.ei-hidden .ei-gal [data-ay]{animation-play-state:paused !important;}
@media (prefers-reduced-motion:reduce){.ei-gal [data-ay]{animation:none !important;}}
.ei-nomo .ei-gal [data-ay]{animation:none !important;}

/* ================= Video (Video.psd, 1882x2658) =================
   Additive only: nothing above is changed. Placed after Pasangan; the scene scales to the section's WIDTH only. */
.ei-vid{
  display:none;
  position:relative;
  width:100%;
  overflow:hidden;
  background:#f1ece0;
  --bwk:4.8;
  --s:.2;
}
.ei-app.is-hero-active .ei-vid{display:block;}
.ei-vid-scene{
  position:absolute;
  top:0;
  left:0;
  width:1882px;
  height:2658px;
  transform-origin:0 0;
}
.ei-vid-art{pointer-events:none;-webkit-user-drag:none;}
/* aperture = the PSD screenshot's rectangle (1878x1413 at 0,898) */
.ei-vid-frame{background:#000;overflow:hidden;}
.ei-vid-poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  background:#000;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-appearance:none;
  appearance:none;
  -webkit-tap-highlight-color:transparent;
}
.ei-vid-poster:focus-visible{outline:6px solid #fff;outline-offset:-10px;}
.ei-vid-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.ei-vid-thumb[hidden]{display:none;}
.ei-vid-btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:210px;
  height:210px;
  border-radius:50%;
  background:rgba(80,72,62,.5);
}
.ei-vid-btn svg{width:96px;height:100px;margin-left:9px;}
.ei-vid-poster:active .ei-vid-btn{background:rgba(60,54,46,.62);}
.ei-vid-poster.is-empty{cursor:default;}
.ei-vid-poster.is-empty .ei-vid-btn{opacity:.45;}
.ei-vid-note{
  position:absolute;
  left:0;right:0;
  bottom:150px;
  text-align:center;
  font-family:'Newsreader',Georgia,serif;
  font-size:max(54px,calc(11px / var(--s)));
  letter-spacing:.06em;
  color:#e9dfc8;
}
.ei-vid-note[hidden]{display:none;}
.ei-vid-player{position:absolute;border:0;background:#000;display:block;}
iframe.ei-vid-player{left:0;top:178px;width:100%;height:1056px;}
video.ei-vid-player{left:0;top:0;width:100%;height:100%;object-fit:contain;}
/* texts (rev. 2026-10-13): Cochin -> Newsreader 400; Our Video 127px + .08em, description 54px + .2em on a 66px pitch (two lines).
   Colour #6e502f. The trailing tracking is offset by an equal left padding so each line centres on the PSD axis. */
.ei-vid-title,.ei-vid-desc{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-sizing:border-box;
  line-height:1;
  white-space:pre;
  color:#6e502f;
  pointer-events:none;
}
.ei-vid-title{font-family:'Newsreader','Libre Caslon Text',Georgia,serif;font-weight:400;font-size:127px;letter-spacing:10.2px;padding-left:10.2px;}
.ei-vid-desc{font-family:'Newsreader','Libre Caslon Text',Georgia,serif;font-weight:400;font-size:max(54px,calc(11px / var(--s)));letter-spacing:11.1px;padding-left:11.1px;line-height:66px;}

/* Motion: same SOP port as Ayat/Pasangan (eiAyIn / eiPasSway, paused until script.js plays them) */
.ei-vid [data-ay]{
  animation-play-state:paused;
  animation-fill-mode:both;
}
.ei-vid [data-ay="in"]{
  animation-name:eiAyIn;
  animation-duration:var(--ay-dur,1300ms);
  animation-delay:var(--ay-d,0ms);
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
}
.ei-vid [data-ay="deco"]{
  animation-name:eiAyIn,eiPasSway;
  animation-duration:var(--ay-dur,1400ms),var(--ay-i-dur,10000ms);
  animation-delay:var(--ay-d,0ms),calc(var(--ay-d,0ms) + var(--ay-dur,1400ms) + var(--ay-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;
}
.ei-vid.is-vid-active [data-ay]{animation-play-state:running;}
.ei-vid.ei-js-replay.is-vid-active [data-ay]{animation-play-state:paused;}
.ei-hidden .ei-vid [data-ay]{animation-play-state:paused !important;}
@media (prefers-reduced-motion:reduce){.ei-vid [data-ay]{animation:none !important;}}
.ei-nomo .ei-vid [data-ay]{animation:none !important;}

/* ================= Love Story (love story.psd, 1080x2364) =================
   Additive only: nothing above is changed. Follows Video; the scene scales to the section's WIDTH only. */
.ei-ls{
  display:none;
  position:relative;
  width:100%;
  overflow:hidden;
  background:#f1e6cf;
  --bwk:3.4;
}
.ei-app.is-hero-active .ei-ls{display:block;}
.ei-ls-scene{
  position:absolute;
  top:0;
  left:0;
  width:1080px;
  height:2364px;
  transform-origin:0 0;
}
.ei-ls-art{pointer-events:none;-webkit-user-drag:none;}
/* timeline: the PSD's line (4px #d3b77c) + ring/dot markers (gold ring 50px, #f7f1e8 fill, #315e49 disc 28px) */
.ei-ls-line{display:block;background:linear-gradient(90deg,#d6bb80,#cfae6c);border-radius:2px;pointer-events:none;}
.ei-ls-dot{
  display:block;
  box-sizing:border-box;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#315e49 0,#315e49 14px,#f7f1e8 14.6px,#f7f1e8 100%);
  border:3px solid #cba96a;
  box-shadow:inset 0 0 0 2px #fbf8f4;
  pointer-events:none;
}
.ei-ls-card{
  box-sizing:border-box;
  border-radius:30px;
  background:linear-gradient(180deg,#fff 0%,#fefefd 10%,#fdfcf9 25%,#fbf8f3 50%,#f9f5ee 75%,#f8f3ea 90%,#f7f1e8 100%);
  box-shadow:0 0 0 1px rgba(236,225,194,.55);
  overflow:hidden;
}
/* live text: year = Arial Bold Italic -> Arimo 700 italic; story = Cochin -> Cormorant Garamond 600 (67px pitch) */
.ei-ls-text{
  position:absolute;
  left:0;right:0;top:0;bottom:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:6.4px 32px 0;
  text-align:center;
}
.ei-ls-year{
  font-family:'Arimo','Helvetica Neue',Arial,sans-serif;
  font-style:italic;
  font-weight:700;
  font-size:38px;
  line-height:1;
  color:#1d140b;
  white-space:nowrap;
  margin-bottom:22.3px;
  position:relative;
  left:1.5px;
}
.ei-ls-body{
  width:700px;
  max-width:100%;
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  font-size:47.4px;
  line-height:67px;
  color:#2d241b;
  overflow-wrap:anywhere;
}
.ei-ls-kicker,.ei-ls-title{
  text-align:center;
  white-space:nowrap;
  line-height:1;
  pointer-events:none;
}
.ei-ls-kicker{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:36.8px;letter-spacing:18.43px;padding-left:18.43px;color:#6e502f;}
.ei-ls-title{font-family:'Inter','Helvetica Neue',Arial,sans-serif;font-weight:500;font-size:107px;letter-spacing:6.9px;padding-left:6.9px;color:#771613;}

/* Motion: same SOP port as Ayat/Pasangan/Video (eiAyIn / eiPasSway, paused until script.js plays them) */
.ei-ls [data-ay]{
  animation-play-state:paused;
  animation-fill-mode:both;
}
.ei-ls [data-ay="in"]{
  animation-name:eiAyIn;
  animation-duration:var(--ay-dur,1300ms);
  animation-delay:var(--ay-d,0ms);
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
}
.ei-ls [data-ay="deco"]{
  animation-name:eiAyIn,eiPasSway;
  animation-duration:var(--ay-dur,1400ms),var(--ay-i-dur,10000ms);
  animation-delay:var(--ay-d,0ms),calc(var(--ay-d,0ms) + var(--ay-dur,1400ms) + var(--ay-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;
}
.ei-ls.is-ls-active [data-ay]{animation-play-state:running;}
.ei-ls.ei-js-replay.is-ls-active [data-ay]{animation-play-state:paused;}
.ei-hidden .ei-ls [data-ay]{animation-play-state:paused !important;}
@media (prefers-reduced-motion:reduce){.ei-ls [data-ay]{animation:none !important;}}
.ei-nomo .ei-ls [data-ay]{animation:none !important;}

/* ================= RSVP (RSCV.psd, 1882x4542) =================
   Additive only: nothing above is changed. Follows Love Story; the scene scales to the section's WIDTH only
   (script.js publishes --s for the phone-readable minimums and --dy = how far the lower art, button and cards move
   up when the Wishes field is off). Every rule is scoped to .ei-rs -- no global form style. */
.ei-rs{
  display:none;
  position:relative;
  width:100%;
  overflow:hidden;
  background:#eadfcf;
  --bwk:4.8;
}
.ei-app.is-hero-active .ei-rs{display:block;}
.ei-rs-scene{
  position:absolute;
  top:0;
  left:0;
  width:1882px;
  height:4542px;
  transform-origin:0 0;
  --s:.2;
  --dy:0px;
}
.ei-rs-art{pointer-events:none;-webkit-user-drag:none;}
.ei-rs-box{left:0;top:1400px;width:1882px;height:1900px;pointer-events:none;visibility:hidden;}

/* description (canonical deskripsi_rsvp): Arial -> Arimo 400 64px on 98px lines, black, centred on the PSD axis */
.ei-rs-desc{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  text-align:center;
  font-family:'Arimo','Helvetica Neue',Arial,sans-serif;
  font-weight:400;
  font-size:64px;
  line-height:98px;
  color:#000;
  overflow:hidden;
  overflow-wrap:anywhere;
}
/* labels: EB Garamond 700 54px, #2b2b2b */
.ei-rs-label{
  left:80px;
  width:900px;
  height:54px;
  font-family:'EB Garamond','Cochin',Georgia,serif;
  font-weight:700;
  font-size:max(54px,calc(11px / var(--s)));
  line-height:1;
  color:#2b2b2b;
  white-space:nowrap;
}
/* controls: 1734-wide white rounded boxes with the PSD's soft grey edge; text EB Garamond 400 66px, never below
   16 effective px (iOS Safari does not zoom on focus) */
.ei-rs-ctl{
  left:82px;
  width:1734px;
  height:192px;
  box-sizing:border-box;
  margin:0;
  padding:0 57px;
  border:0;
  border-radius:38px;
  background:#fff;
  box-shadow:0 0 0 4px rgba(198,198,198,.75),0 6px 12px rgba(90,80,60,.10);
  font-family:'EB Garamond','Cochin',Georgia,serif;
  font-weight:400;
  font-size:max(66px,calc(16px / var(--s)));
  line-height:1.2;
  color:#000;
  outline:0;
  -webkit-appearance:none;
  appearance:none;
}
.ei-rs-ctl::placeholder{color:#5c5c5c;opacity:1;}
.ei-rs-ctl:focus-visible{box-shadow:0 0 0 6px rgba(49,94,73,.7);}
.ei-rs-select{
  height:200px;
  padding-left:73px;
  padding-right:120px;
  text-overflow:ellipsis;
  cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='20' viewBox='0 0 34 20'%3E%3Cpath d='M3 3l14 13L31 3' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 34px 20px;
}
.ei-rs-ctl[hidden],.ei-rs-label[hidden]{display:none;}
.ei-rs-select:disabled{opacity:.55;cursor:not-allowed;}
.ei-rs-area{
  height:336px;
  padding:53px 57px 0;
  resize:none;
  display:block;
  line-height:1.3;
}
/* submit: 1743x196 #315e49 pill, Cormorant Garamond 600 + tracking, white */
.ei-rs-submit{
  left:77px;
  top:calc(3075px + var(--dy));
  width:1743px;
  height:196px;
  box-sizing:border-box;
  margin:0;
  padding:0 0 0 1px;
  border:0;
  border-radius:44px;
  background:#315e49;
  box-shadow:0 8px 12px rgba(40,60,50,.16);
  color:#fff;
  font-family:'Cormorant Garamond','Cochin',Georgia,serif;
  font-weight:600;
  font-size:max(54px,calc(12px / var(--s)));
  letter-spacing:7.6px;
  text-transform:uppercase;
  line-height:1;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  -webkit-tap-highlight-color:transparent;
}
.ei-rs-submit:disabled{opacity:.7;cursor:default;}
.ei-rs-submit::after{content:"";position:absolute;left:0;right:0;top:-34px;bottom:-34px;}
.ei-rs-submit:focus-visible{outline:6px solid #fff;outline-offset:-14px;}
.ei-rs-status{
  left:82px;
  top:calc(3286px + var(--dy));
  width:1734px;
  height:100px;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:'EB Garamond','Cochin',Georgia,serif;
  font-weight:500;
  font-size:max(50px,calc(12px / var(--s)));
  line-height:1.15;
  color:#8a2a1c;
}
.ei-rs-status.is-ok{color:#315e49;}
.ei-rs-status:empty{visibility:hidden;}
/* wish cards: two fixed PSD slots (white, thin grey rim, r~44); name Cormorant italic 600, message EB Garamond 400 */
.ei-rs-card{
  box-sizing:border-box;
  padding:0 72px;
  border:3px solid #cfcfcf;
  border-radius:46px;
  background:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
}
.ei-rs-card[hidden]{display:none;}
.ei-rs-card-name{
  font-family:'Cormorant Garamond','Cochin',Georgia,serif;
  font-style:italic;
  font-weight:600;
  font-size:max(69px,calc(12px / var(--s)));
  line-height:1.15;
  color:#262626;
  position:relative;
  top:-5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ei-rs-card-msg{
  margin:24px 0 0;
  font-family:'EB Garamond','Cochin',Georgia,serif;
  font-weight:400;
  font-size:max(59.5px,calc(12px / var(--s)));
  line-height:1.25;
  color:#262626;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  overflow-wrap:anywhere;
}

/* Motion: same SOP port as Ayat/Pasangan/Love Story (eiAyIn / eiPasSway, paused until script.js plays them). The form
   controls are deliberately NOT data-ay: see script.js (one-shot entrance that never runs while typing). */
.ei-rs [data-ay]{
  animation-play-state:paused;
  animation-fill-mode:both;
}
.ei-rs [data-ay="in"]{
  animation-name:eiAyIn;
  animation-duration:var(--ay-dur,1300ms);
  animation-delay:var(--ay-d,0ms);
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
}
.ei-rs [data-ay="deco"]{
  animation-name:eiAyIn,eiPasSway;
  animation-duration:var(--ay-dur,1400ms),var(--ay-i-dur,10000ms);
  animation-delay:var(--ay-d,0ms),calc(var(--ay-d,0ms) + var(--ay-dur,1400ms) + var(--ay-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;
}
.ei-rs.is-rs-active [data-ay]{animation-play-state:running;}
.ei-rs.ei-js-replay.is-rs-active [data-ay]{animation-play-state:paused;}
.ei-hidden .ei-rs [data-ay]{animation-play-state:paused !important;}
@media (prefers-reduced-motion:reduce){.ei-rs [data-ay]{animation:none !important;}}
.ei-nomo .ei-rs [data-ay]{animation:none !important;}

/* ================= Hadiah (Hadiah.psd, 1882x3693) =================
   Additive only: nothing above is changed. Follows RSVP; the scene scales to the section's WIDTH only (script.js
   publishes --s for the phone-readable text floors). */
.ei-hd{
  display:none;
  position:relative;
  width:100%;
  overflow:hidden;
  background:#e9dcc3;
  --bwk:4.8;
}
.ei-app.is-hero-active .ei-hd{display:block;}
.ei-hd-scene{
  position:absolute;
  top:0;
  left:0;
  width:1882px;
  height:3693px;
  transform-origin:0 0;
  --s:.2;
}
.ei-hd-art{pointer-events:none;-webkit-user-drag:none;}

/* description: PSD Poppins Regular 60.2px + 2.17px tracking, 90px lines, near-black, centred on the PSD axis 940 */
.ei-hd-desc{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  font-family:'Poppins','Helvetica Neue',Arial,sans-serif;
  font-weight:400;
  font-size:60.2px;
  letter-spacing:2.17px;
  line-height:90px;
  color:#050505;
  text-align:center;
}
.ei-hd-desc-text{width:100%;padding-left:2.17px;}

/* card: the PSD card layer is a 1200x818 rounded rect (r=40) inset 2px in its 1205x822 bbox with a 160deg gradient
   (flat #f8f8f3, then darkening to #dfe0e0) */
.ei-hd-card{
  color:#050803;
  font-family:'Poppins','Helvetica Neue',Arial,sans-serif;
}
.ei-hd-card::before{
  content:"";
  position:absolute;
  left:2px;top:2px;
  width:1200px;height:818px;
  border-radius:40px;
  background:linear-gradient(160deg,#f7f8f3 0%,#f8f8f3 10%,#f8f8f3 40%,#f8f8f2 50%,#f3f3ef 60%,#eeeeeb 70%,#e9e9e7 80%,#e4e4e4 90%,#dfe0e0 100%);
}
.ei-hd-card > *{position:absolute;}
.ei-hd-card[hidden]{display:none;}
/* PSD sizes with a phone floor (via --s): title 51.4 / holder 46.6 / date 47.7 / labels 41.4 / digits 55.1 + 12.4px */
.ei-hd-title{
  left:81px;top:117px;width:700px;
  font-weight:600;
  font-size:max(51.4px,calc(11px / var(--s)));
  line-height:1.2;
  color:#050803;
  overflow-wrap:anywhere;
}
.ei-hd-logo{left:826px;top:92px;width:294px;height:86px;display:flex;align-items:center;justify-content:flex-end;}
.ei-hd-logo img{display:block;max-width:100%;max-height:100%;object-fit:contain;object-position:right center;}
.ei-hd-logo-t{
  font-weight:600;
  font-size:max(46px,calc(11px / var(--s)));
  line-height:1.1;
  color:#050803;
  text-align:right;
  overflow-wrap:break-word;
}
.ei-hd-lab{
  font-weight:400;
  font-size:max(41.4px,calc(10px / var(--s)));
  line-height:1;
  color:#0d0d07;
  white-space:nowrap;
}
.ei-hd-numlab{left:83px;top:349px;}
.ei-hd-num{
  left:80px;top:416px;width:700px;
  font-weight:600;
  font-size:55.1px;
  letter-spacing:12.4px;
  line-height:1.15;
  color:#050803;
}
.ei-hd-atl{left:83px;top:611px;}
.ei-hd-holder{
  left:85px;top:668px;width:715px;
  font-weight:600;
  font-size:max(46.6px,calc(10.5px / var(--s)));
  line-height:1.2;
  color:#050803;
  overflow-wrap:anywhere;
}
.ei-hd-pl{right:85px;top:611px;text-align:right;}
.ei-hd-date{
  right:83px;top:666px;width:260px;
  font-weight:600;
  font-size:max(47.7px,calc(10.5px / var(--s)));
  line-height:1.2;
  color:#050803;
  text-align:right;
  white-space:nowrap;
}
.ei-hd-pl[hidden],.ei-hd-date[hidden],.ei-hd-atl[hidden],.ei-hd-holder[hidden]{display:none;}
/* SALIN pill (PSD: 312x106 at card 810,386, #65120f, white glyph + label); icon and label sit at fixed offsets so the
   "TERSALIN" feedback swap never shifts the layout */
.ei-hd-copy{
  left:810px;top:386px;width:312px;height:106px;
  border:0;padding:0;margin:0;
  border-radius:53px;
  background:#65120f;
  color:#fff;
  font-family:'Poppins','Helvetica Neue',Arial,sans-serif;
  font-weight:500;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.ei-hd-copy::after{content:"";position:absolute;left:-14px;right:-14px;top:-30px;bottom:-30px;}
.ei-hd-copy svg{position:absolute;left:62px;top:32px;width:32px;height:36px;}
.ei-hd-copy-t{
  position:absolute;
  left:157px;top:31px;
  font-size:35.8px;
  line-height:1;
  white-space:nowrap;
}
.ei-hd-copy.is-done{background:#2f5a43;}
.ei-hd-copy:focus-visible{outline:6px solid #fff;outline-offset:-12px;}

/* Motion: same SOP port as Ayat/Pasangan/Love Story (eiAyIn / eiPasSway, paused until script.js plays them) */
.ei-hd [data-ay]{
  animation-play-state:paused;
  animation-fill-mode:both;
}
.ei-hd [data-ay="in"]{
  animation-name:eiAyIn;
  animation-duration:var(--ay-dur,1300ms);
  animation-delay:var(--ay-d,0ms);
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
}
.ei-hd [data-ay="deco"]{
  animation-name:eiAyIn,eiPasSway;
  animation-duration:var(--ay-dur,1400ms),var(--ay-i-dur,10000ms);
  animation-delay:var(--ay-d,0ms),calc(var(--ay-d,0ms) + var(--ay-dur,1400ms) + var(--ay-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;
}
.ei-hd.is-hd-active [data-ay]{animation-play-state:running;}
.ei-hd.ei-js-replay.is-hd-active [data-ay]{animation-play-state:paused;}
.ei-hidden .ei-hd [data-ay]{animation-play-state:paused !important;}
@media (prefers-reduced-motion:reduce){.ei-hd [data-ay]{animation:none !important;}}
.ei-nomo .ei-hd [data-ay]{animation:none !important;}

/* ================= Closing (Clousing.psd, 1882x3971) =================
   Additive only: nothing above is changed. The LAST section (after Hadiah); the scene scales to the section's WIDTH
   only (script.js publishes --s for the phone-readable minimums and sets the section height, shorter when there is no
   photo). The document ends with this panel. */
.ei-cl{
  display:none;
  position:relative;
  width:100%;
  overflow:hidden;
  background:#214338;
  --bwk:4.8;
}
.ei-app.is-hero-active .ei-cl{display:block;}
.ei-cl-scene{
  position:absolute;
  top:0;
  left:0;
  width:1882px;
  height:3971px;
  transform-origin:0 0;
  --s:.2;
}
/* photo aperture = the PSD's 1882x3300 block; the veil is the PSD gradient fill (#214338, 0% -> 100% at y3250) that
   then becomes the solid panel down to 3971 */
.ei-cl-photo{overflow:hidden;background:#214338;}
.ei-cl-photo[hidden],.ei-cl-veil[hidden]{display:none;}
.ei-cl-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 28%;
}
.ei-cl-veil{
  background:linear-gradient(to bottom,
    rgba(33,67,56,0) 0,rgba(33,67,56,0) 750px,rgba(33,67,56,.008) 1000px,rgba(33,67,56,.059) 1250px,
    rgba(33,67,56,.129) 1500px,rgba(33,67,56,.224) 1750px,rgba(33,67,56,.333) 2000px,rgba(33,67,56,.467) 2250px,
    rgba(33,67,56,.616) 2500px,rgba(33,67,56,.784) 2750px,rgba(33,67,56,.941) 3000px,#214338 3250px,#214338 3971px);
}
/* texts (centre axis 934 like the PSD): kata = Arial -> Arimo 61.4px on 112px lines; "We are blessed," Arimo 55px;
   names = Times italic -> Tinos Italic 133px #995817, one line (script.js shrinks a long pair) */
.ei-cl-kata,.ei-cl-blessed,.ei-cl-names{
  margin:0;
  text-align:center;
  overflow-wrap:anywhere;
}
.ei-cl-kata{
  overflow:hidden;
  font-family:'Arimo','Helvetica Neue',Arial,sans-serif;
  font-weight:400;
  font-size:61.4px;
  line-height:112px;
  color:#fff;
}
.ei-cl-blessed{
  font-family:'Arimo','Helvetica Neue',Arial,sans-serif;
  font-weight:400;
  font-size:max(55px,calc(11px / var(--s)));
  line-height:60px;
  color:#fff;
  white-space:nowrap;
}
.ei-cl-names{
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Tinos','Times New Roman',Times,serif;
  font-style:italic;
  font-weight:400;
  font-size:133px;
  line-height:1;
  color:#995817;
  white-space:nowrap;
  text-align:center;
}
.ei-cl-names:empty{display:none;}
/* footer art: badge 178x178, two 136px social circles (the raster is decoration, the anchors are the hit areas),
   music disc 184x183 */
.ei-cl-logo{display:block;}
.ei-cl-logo img{display:block;width:100%;height:100%;}
.ei-cl-soc{display:block;pointer-events:none;}
.ei-cl-soc-a{display:block;}
.ei-cl-logo::after,.ei-cl-soc-a::after{content:"";position:absolute;left:-20px;right:-20px;top:-20px;bottom:-20px;}
.ei-cl-music{
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  -webkit-tap-highlight-color:transparent;
}
.ei-cl-music[hidden]{display:none;}
.ei-cl-music img{display:block;width:100%;height:100%;pointer-events:none;}
.ei-cl-music.is-on{background:rgba(249,236,186,.22);}
.ei-cl-music:focus-visible,.ei-cl-logo:focus-visible,.ei-cl-soc-a:focus-visible{outline:6px solid #f9ecba;outline-offset:6px;}

/* Motion: same SOP port as Ayat/Pasangan/Love Story (eiAyIn, paused until script.js plays them). The PSD has no
   ornament, so there is no idle. */
.ei-cl [data-ay]{
  animation-play-state:paused;
  animation-fill-mode:both;
}
.ei-cl [data-ay="in"]{
  animation-name:eiAyIn;
  animation-duration:var(--ay-dur,1300ms);
  animation-delay:var(--ay-d,0ms);
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
}
.ei-cl.is-cl-active [data-ay]{animation-play-state:running;}
.ei-cl.ei-js-replay.is-cl-active [data-ay]{animation-play-state:paused;}
.ei-hidden .ei-cl [data-ay]{animation-play-state:paused !important;}
@media (prefers-reduced-motion:reduce){.ei-cl [data-ay]{animation:none !important;}}
.ei-nomo .ei-cl [data-ay]{animation:none !important;}