/* Romantic Blush (romantic-blush-01) — Cover. Native HTML/CSS built from 1.psd
   (1882x3344). The scene is authored at PSD pixel coordinates and scaled as one unit to
   cover the viewport (same mechanic as the other templates). Cover section only. */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:#fff8ef;height:100%;}
body{font-family:'Cormorant Garamond',serif;-webkit-font-smoothing:antialiased;}
img{max-width:none;}

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

.rb-cover{
  position:relative;width:100%;height:100dvh;overflow:hidden;
  background:#fff8ef;                       /* PSD Layer 0 = flat #fff8ef */
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),translate .8s cubic-bezier(.22,.61,.36,1);
}
.rb-scene{position:absolute;top:50%;left:50%;width:1882px;height:3344px;transform-origin:center center;}
.rb-l{position:absolute;}

/* Cover exit (same hand-off as Jawa/Betawi: opacity + -3% on the section box, never on the scene) */
.rb-app.is-open .rb-cover{opacity:0;translate:0 -3%;pointer-events:none;}
.rb-app.is-gone .rb-cover{display:none;}

/* ---- Live text (PSD type layers were rasters; fonts are the closest Google match) ---- */
.rb-t{display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;pointer-events:none;}
.rb-t span{display:block;transform-origin:50% 50%;}

.rb-title{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:90px;line-height:1;letter-spacing:5.6px;padding-left:5.6px;text-transform:uppercase;color:#050302;}
.rb-name{font-family:'Pinyon Script',cursive;font-weight:400;font-size:410px;line-height:1;color:#bd4350;}
.rb-day,.rb-mon{font-family:'Cormorant Garamond',serif;font-weight:500;font-variant-numeric:lining-nums;line-height:1;color:#49484e;text-transform:uppercase;}
.rb-day{font-size:87px;letter-spacing:5px;padding-left:5px;}
.rb-mon{font-size:79px;letter-spacing:7.4px;padding-left:7.4px;}
.rb-dnum{font-family:'Cormorant Garamond',serif;font-weight:500;font-variant-numeric:lining-nums;font-size:212px;letter-spacing:8px;padding-left:8px;line-height:1;color:#bd4350;}
.rb-yth,.rb-guest{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:71px;line-height:1;color:#49484e;}
.rb-yth{letter-spacing:5px;padding-left:5px;}
.rb-guest{letter-spacing:3.5px;padding-left:3.5px;}

/* ---- Open Invitation (Layer 9 raster is the button face) ---- */
.rb-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;}
.rb-open-btn img{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none;}
.rb-open-btn:focus-visible{outline:6px solid #b8505a;outline-offset:10px;border-radius:100px;}

/* ================= Motion =================
   Per-element: every [data-rb] keeps persistent animations (fill-mode both) paused at the
   first keyframe; script.js plays them when the Cover is on screen and rewinds them when it
   leaves, so every re-entry replays. Distances are CSS px x --bwk (scene px per CSS px).
   The resting style is always the PSD position/size.
     in    = entrance only
     deco  = entrance (overshoot) + endless soft sway about the asset's own root
     float = entrance + slow vertical drift (ribbons)
     pulse = entrance + very small breathe (button) */
@keyframes rbIn{
  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 rbLive{
  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);}
}
@keyframes rbFloat{0%,100%{translate:0 0;}50%{translate:0 var(--f-y,6px);}}
@keyframes rbPulse{0%,100%{scale:1 1;}50%{scale:1.018 1.018;}}

.rb-cover [data-rb]{animation-play-state:paused;animation-fill-mode:both;}
.rb-cover [data-rb]{
  animation-name:rbIn;
  animation-duration:var(--rb-dur,1200ms);
  animation-delay:var(--rb-d,0ms);
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
}
.rb-cover [data-rb="deco"],.rb-cover [data-rb="float"],.rb-cover [data-rb="pulse"]{
  animation-duration:var(--rb-dur,1400ms),var(--rb-i-dur,12000ms);
  animation-delay:var(--rb-d,0ms),calc(var(--rb-d,0ms) + var(--rb-dur,1400ms) + var(--rb-i-off,0ms));
  animation-iteration-count:1,infinite;
  animation-fill-mode:both,none;
}
.rb-cover [data-rb="deco"]{animation-name:rbIn,rbLive;animation-timing-function:cubic-bezier(.25,.85,.3,1.15),ease-in-out;}
.rb-cover [data-rb="float"]{animation-name:rbIn,rbFloat;animation-timing-function:cubic-bezier(.22,.61,.36,1),ease-in-out;}
.rb-cover [data-rb="pulse"]{animation-name:rbIn,rbPulse;animation-timing-function:cubic-bezier(.22,.61,.36,1),ease-in-out;}
/* if the replay step cannot run, still play once the page is up */
.rb-cover.is-cv-active [data-rb]{animation-play-state:running;}
.rb-cover.rb-js-replay.is-cv-active [data-rb]{animation-play-state:paused;}
.rb-hidden .rb-cover [data-rb]{animation-play-state:paused !important;}
@media (prefers-reduced-motion:reduce){.rb-cover [data-rb]{animation:none !important;}}
.rb-nomo .rb-cover [data-rb]{animation:none !important;}
.rb-nomo .rb-cover{transition:none !important;}

/* ---- PSD ink texture: the type layers carry a fine brush grain. The live text keeps its flat
   PSD colour and, where background-clip:text is supported, is filled with a grain tile sampled
   from the PSD strokes (tile = 1:1 scene px). Padding/negative margin only enlarge the paint
   box so swash ink that overhangs the advance width is still filled; layout is unchanged. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .rb-tx span{padding:160px 200px;margin:-160px -200px;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-repeat:repeat;background-size:400px 400px;}
  .rb-tx-red span{background-image:url(/templates/romantic-blush/assets/tex-red.jpg?v=cv5);}
  .rb-tx-gray span{background-image:url(/templates/romantic-blush/assets/tex-gray.jpg?v=cv5);}
}


/* ================= Hero (hero.psd, 1882x3344) =================
   Additive: nothing above (Cover) is changed. The Hero is display:none until the Cover hand-off
   (script.js adds .is-hero-active), then it is one screen tall and its scene is scaled to cover the
   viewport exactly like the Cover. Resting style = PSD position; entrance keyframes never own it. */
.rb-hero{position:relative;display:none;width:100%;height:100dvh;overflow:hidden;background:#fff8ef;}
.rb-app.is-hero-active .rb-hero{display:block;}
.rb-hero-scene{position:absolute;top:50%;left:50%;width:1882px;height:3344px;transform-origin:center center;}

/* Layer 2 backdrop (#e0d7d0) + Layer 8 couple photo, both under Layer 2's own soft alpha fade */
.rbh-photo{
  background:#e0d7d0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:url(/templates/romantic-blush/assets/hero-fade-mask.png);mask-image:url(/templates/romantic-blush/assets/hero-fade-mask.png);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.rbh-photo-img{display:none;position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;}

.rbh-bar{background:#c5666d;}
.rbh-ini{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:462px;line-height:1;color:#c5666d;}
.rbh-date{font-family:'Cormorant Garamond',serif;font-weight:600;font-variant-numeric:lining-nums;font-size:95px;line-height:1;letter-spacing:14px;padding-left:14px;color:#434248;}
.rbh-invite{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:77px;line-height:93px;letter-spacing:12.6px;padding-left:12.6px;color:#2f2f30;text-align:center;}

/* Motion (Emerald-pattern engine: persistent paused animations, driven by script.js through
   getAnimations(); every re-entry replays; distances are CSS px x --bwk).
     fade/in = entrance only . zoomIn = photo settle . deco = entrance + endless soft sway . float = entrance + slow drift */
@keyframes rhIn{
  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 rhFade{from{opacity:0;}to{opacity:1;}}
@keyframes rhZoomIn{from{scale:var(--rp-s,1.06);}to{scale:1;}}
@keyframes rhLive{
  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);}
}
@keyframes rhFloat{0%,100%{translate:0 0;}50%{translate:0 var(--f-y,6px);}}
.rb-hero [data-rh]{animation-play-state:paused;animation-fill-mode:both;animation-duration:var(--rh-dur,1200ms);animation-delay:var(--rh-d,0ms);animation-timing-function:cubic-bezier(.22,.61,.36,1);}
.rb-hero [data-rh="in"]{animation-name:rhIn;}
.rb-hero [data-rh="fade"]{animation-name:rhFade;animation-timing-function:ease;}
.rb-hero [data-rh="zoomIn"]{animation-name:rhZoomIn;}
.rb-hero [data-rh="deco"],.rb-hero [data-rh="float"]{
  animation-duration:var(--rh-dur,1400ms),var(--rh-i-dur,12000ms);
  animation-delay:var(--rh-d,0ms),calc(var(--rh-d,0ms) + var(--rh-dur,1400ms) + var(--rh-i-off,0ms));
  animation-iteration-count:1,infinite;animation-fill-mode:both,none;
}
.rb-hero [data-rh="deco"]{animation-name:rhIn,rhLive;animation-timing-function:cubic-bezier(.25,.85,.3,1.15),ease-in-out;}
.rb-hero [data-rh="float"]{animation-name:rhIn,rhFloat;animation-timing-function:cubic-bezier(.22,.61,.36,1),ease-in-out;}
/* if the replay step cannot run, still play once the Hero is mounted */
.rb-hero.is-hero-play [data-rh]{animation-play-state:running;}
.rb-hero.rbh-js-replay.is-hero-play [data-rh]{animation-play-state:paused;}
.rb-hidden .rb-hero [data-rh]{animation-play-state:paused !important;}
@media (prefers-reduced-motion:reduce){.rb-hero [data-rh]{animation:none !important;}}
.rb-nomo .rb-hero [data-rh]{animation:none !important;}
/* geometry-only probes for the replay observers; never visible, never interactive */
.rbh-sentinel{position:absolute;visibility:hidden;pointer-events:none;}

/* ================= Ayat (Ayat.psd, 1080x1502) =================
   Additive: nothing above (Cover, Hero) is changed. Follows the Hero in normal flow and is shown with it
   (.is-hero-active); the scene scales to the section WIDTH only (a mobile address-bar resize never moves
   it) and the section height follows the PSD aspect. Resting style = PSD position. */
.rb-ayat{position:relative;display:none;width:100%;overflow:hidden;background:#fff8ef;}
.rb-app.is-hero-active .rb-ayat{display:block;}
.rb-ayat-scene{position:absolute;top:0;left:0;width:1080px;height:1502px;transform-origin:0 0;}

.rba-verse{display:flex;align-items:flex-start;justify-content:center;text-align:center;color:#0a131d;pointer-events:none;
  font-family:'Newsreader',serif;font-weight:425;font-optical-sizing:auto;font-size:46.5px;line-height:63.75px;}
.rba-verse-text{white-space:pre-line;}
.rba-src{font-family:'Newsreader',serif;font-weight:425;font-optical-sizing:auto;font-size:40.5px;line-height:1;color:#1c262f;}

@keyframes raIn{
  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 raLive{
  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);}
}
@keyframes raFloat{0%,100%{translate:0 0;}50%{translate:0 var(--f-y,6px);}}
.rb-ayat [data-ra]{animation-play-state:paused;animation-fill-mode:both;animation-name:raIn;animation-duration:var(--ra-dur,1200ms);animation-delay:var(--ra-d,0ms);animation-timing-function:cubic-bezier(.22,.61,.36,1);}
.rb-ayat [data-ra="deco"],.rb-ayat [data-ra="float"]{
  animation-duration:var(--ra-dur,1400ms),var(--ra-i-dur,12000ms);
  animation-delay:var(--ra-d,0ms),calc(var(--ra-d,0ms) + var(--ra-dur,1400ms) + var(--ra-i-off,0ms));
  animation-iteration-count:1,infinite;animation-fill-mode:both,none;
}
.rb-ayat [data-ra="deco"]{animation-name:raIn,raLive;animation-timing-function:cubic-bezier(.25,.85,.3,1.15),ease-in-out;}
.rb-ayat [data-ra="float"]{animation-name:raIn,raFloat;animation-timing-function:cubic-bezier(.22,.61,.36,1),ease-in-out;}
/* if the replay step cannot run, still play once the section is shown */
.rb-ayat.is-ayat-play [data-ra]{animation-play-state:running;}
.rb-ayat.rba-js-replay.is-ayat-play [data-ra]{animation-play-state:paused;}
.rb-hidden .rb-ayat [data-ra]{animation-play-state:paused !important;}
@media (prefers-reduced-motion:reduce){.rb-ayat [data-ra]{animation:none !important;}}
.rb-nomo .rb-ayat [data-ra]{animation:none !important;}
.rba-sentinel{position:absolute;visibility:hidden;pointer-events:none;}

/* ================= Pasangan (Pasangan.psd, 941x2339) =================
   Additive: nothing above (Cover, Hero, Ayat) is changed. Follows the Ayat in normal flow, shown with the Hero
   (.is-hero-active); the scene scales to the section WIDTH only and the section height follows the PSD aspect. */
.rb-pas{position:relative;display:none;width:100%;overflow:hidden;background:#fff8ef;}
.rb-app.is-hero-active .rb-pas{display:block;}
.rb-pas-scene{position:absolute;top:0;left:0;width:941px;height:2339px;transform-origin:0 0;}

/* the arch (PSD Layer 1) is the mask of the photo frame; #b9686a is its own colour, so with no photo the bare arch shows */
.rbp-photo{background:#b9686a;overflow:hidden;pointer-events:none;
  -webkit-mask-image:url(/templates/romantic-blush/assets/pasangan-arch-mask.png);mask-image:url(/templates/romantic-blush/assets/pasangan-arch-mask.png);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
.rbp-photo-img{display:none;position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;}

.rbp-name{font-family:'Newsreader',serif;font-weight:380;font-optical-sizing:auto;font-size:48px;line-height:1;color:#1f110c;text-transform:uppercase;}
.rbp-par{font-family:'Newsreader',serif;font-weight:380;font-optical-sizing:auto;line-height:32.5px;color:#1e110c;text-align:center;}
.rbp-par-w{font-size:27.5px;}
.rbp-par-p{font-size:36px;line-height:39px;color:#2e1c16;}
.rbp-par span,.rbp-name span{white-space:pre;}
.rbp-ig{display:block;}
.rbp-ig img{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none;}
.rbp-ig:focus-visible{outline:3px solid #b8505a;outline-offset:4px;border-radius:20px;}

@keyframes rpIn{
  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 rpZoomIn{from{scale:var(--rp-zs,1.06);}to{scale:1;}}
@keyframes rpLive{
  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);}
}
.rb-pas [data-rp]{animation-play-state:paused;animation-fill-mode:both;animation-name:rpIn;animation-duration:var(--rp-dur,1200ms);animation-delay:var(--rp-d,0ms);animation-timing-function:cubic-bezier(.22,.61,.36,1);}
.rb-pas [data-rp="zoomIn"]{animation-name:rpZoomIn;}
.rb-pas [data-rp="deco"]{
  animation-name:rpIn,rpLive;
  animation-duration:var(--rp-dur,1400ms),var(--rp-i-dur,12000ms);
  animation-delay:var(--rp-d,0ms),calc(var(--rp-d,0ms) + var(--rp-dur,1400ms) + var(--rp-i-off,0ms));
  animation-iteration-count:1,infinite;animation-fill-mode:both,none;
  animation-timing-function:cubic-bezier(.25,.85,.3,1.15),ease-in-out;
}
/* if the replay step cannot run, still play once the section is shown */
.rb-pas.is-pas-play [data-rp]{animation-play-state:running;}
.rb-pas.rbp-js-replay.is-pas-play [data-rp]{animation-play-state:paused;}
.rb-hidden .rb-pas [data-rp]{animation-play-state:paused !important;}
@media (prefers-reduced-motion:reduce){.rb-pas [data-rp]{animation:none !important;}}
.rb-nomo .rb-pas [data-rp]{animation:none !important;}
.rbp-sentinel{position:absolute;visibility:hidden;pointer-events:none;}

/* ================= Acara (acara.psd, 1080x2285) =================
   Additive: nothing above (Cover, Hero, Ayat, Pasangan) is changed. Follows the Pasangan in normal flow, shown with the
   Hero (.is-hero-active); the scene scales to the section WIDTH only and the section height follows the PSD aspect
   (shortened by script.js when an event card is removed). Resting style = PSD position. */
.rb-ac{position:relative;display:none;width:100%;overflow:hidden;background:#fff8ef;}
.rb-app.is-hero-active .rb-ac{display:block;}
.rb-ac-scene{position:absolute;top:0;left:0;width:1080px;height:2285px;transform-origin:0 0;}

.rbc-title,.rbc-day,.rbc-num,.rbc-mon,.rbc-row,.rbc-intro{font-family:'Newsreader',serif;font-optical-sizing:auto;pointer-events:none;}
.rbc-title{font-weight:400;font-size:47.7px;line-height:1;text-transform:uppercase;}
.rbc-title-1{color:#27282a;}
.rbc-title-2{color:#ba4246;font-size:51px;}
.rbc-day,.rbc-mon{font-weight:400;font-size:40.6px;line-height:1;color:#040a0f;text-transform:uppercase;}
#rbcDay2,#rbcMon2{font-size:43.4px;}
.rbc-num{font-family:'Libre Caslon Text','Newsreader',serif;font-weight:400;font-size:125px;line-height:1;color:#b02726;}
#rbcNum2{font-size:119px;}
.rbc-row{display:flex;align-items:center;justify-content:flex-start;text-align:left;white-space:nowrap;font-weight:400;font-size:41.5px;line-height:1.1;color:#050b11;}
#rbcRow20,#rbcRow21,#rbcRow22{font-size:41px;}
#rbcRow10 span{letter-spacing:-2.4px;}
#rbcRow20 span{letter-spacing:-1.7px;}
.rbc-row span{display:block;transform-origin:0 50%;white-space:pre;}
.rbc-row-alamat{align-items:flex-start;}
.rbc-intro{font-weight:400;font-size:45px;line-height:63px;color:#0c1219;text-align:center;}
.rbc-intro span{white-space:pre;}
.rbc-btn{display:block;}
.rbc-btn img{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none;}
.rbc-btn:focus-visible{outline:3px solid #b8505a;outline-offset:4px;border-radius:46px;}

@keyframes rcIn{
  from{
    opacity:var(--rp-o,0);
    translate:calc(var(--rp-x,var(--rc-x,0px)) * var(--bwk,3)) calc(var(--rp-y,var(--rc-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 rcLive{
  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);}
}
@keyframes rcFloat{0%,100%{translate:0 0;}50%{translate:0 var(--f-y,6px);}}
.rb-ac [data-rc]{animation-play-state:paused;animation-fill-mode:both;animation-name:rcIn;animation-duration:var(--rc-dur,1200ms);animation-delay:var(--rc-d,0ms);animation-timing-function:cubic-bezier(.22,.61,.36,1);}
.rb-ac [data-rc="deco"],.rb-ac [data-rc="float"]{
  animation-duration:var(--rc-dur,1400ms),var(--rc-i-dur,12000ms);
  animation-delay:var(--rc-d,0ms),calc(var(--rc-d,0ms) + var(--rc-dur,1400ms) + var(--rc-i-off,0ms));
  animation-iteration-count:1,infinite;animation-fill-mode:both,none;
}
.rb-ac [data-rc="deco"]{animation-name:rcIn,rcLive;animation-timing-function:cubic-bezier(.25,.85,.3,1.15),ease-in-out;}
.rb-ac [data-rc="float"]{animation-name:rcIn,rcFloat;animation-timing-function:cubic-bezier(.22,.61,.36,1),ease-in-out;}
/* if the replay step cannot run, still play once the section is shown */
.rb-ac.is-ac-play [data-rc]{animation-play-state:running;}
.rb-ac.rbc-js-replay.is-ac-play [data-rc]{animation-play-state:paused;}
.rb-hidden .rb-ac [data-rc]{animation-play-state:paused !important;}
@media (prefers-reduced-motion:reduce){.rb-ac [data-rc]{animation:none !important;}}
.rb-nomo .rb-ac [data-rc]{animation:none !important;}
.rbc-sentinel{position:absolute;visibility:hidden;pointer-events:none;}

/* Countdown to Resepsi (card style measured from the PSD's event cards: fill #fcf4e9, ~2px #c3a195 edge, ~42px radius) */
.rbc-cdcard{background:#fcf4e9;border:2px solid #c3a195;border-radius:42px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.9);}
.rbc-cdtitle{font-family:'Newsreader',serif;font-optical-sizing:auto;font-weight:400;font-size:40px;line-height:1;letter-spacing:3px;padding-left:3px;color:#ba4246;text-transform:uppercase;pointer-events:none;}
.rbc-cdnum{font-family:'Libre Caslon Text','Newsreader',serif;font-weight:400;font-size:100px;line-height:1;color:#b02726;font-variant-numeric:lining-nums tabular-nums;pointer-events:none;}
.rbc-cdlab{font-family:'Newsreader',serif;font-optical-sizing:auto;font-weight:400;font-size:33px;line-height:1;letter-spacing:4px;padding-left:4px;color:#040a0f;pointer-events:none;}
.rbc-cdsep{background:linear-gradient(to bottom,rgba(221,130,115,0),#dd8273 18%,#dd8273 82%,rgba(221,130,115,0));}


/* ================= Live Streaming (Live Streaming.psd, 1080x1919) =================
   Additive: nothing above (Cover, Hero, Ayat, Pasangan, Acara) is changed. Follows the Acara in normal flow, shown with the
   Hero (.is-hero-active); the scene scales to the section WIDTH only. Removed entirely by script.js when there is no valid link. */
.rb-lv{position:relative;display:none;width:100%;overflow:hidden;background:#fff9f0;}
.rb-app.is-hero-active .rb-lv{display:block;}
.rb-lv-scene{position:absolute;top:0;left:0;width:1080px;height:1919px;transform-origin:0 0;}
.rbv-intro{font-family:'Newsreader',serif;font-optical-sizing:auto;font-weight:400;font-size:46px;line-height:62px;letter-spacing:1.6px;color:#4d4b4a;text-align:center;pointer-events:none;align-items:flex-start;}
.rbv-intro span{white-space:pre;}
.rbv-btn,.rbv-thumb{display:block;}
.rbv-btn img,.rbv-thumb img{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none;}
.rbv-btn:focus-visible,.rbv-thumb:focus-visible{outline:4px solid #b8505a;outline-offset:6px;border-radius:44px;}

@keyframes rvIn{
  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 rvLive{
  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);}
}
@keyframes rvFloat{0%,100%{translate:0 0;}50%{translate:0 var(--f-y,6px);}}
.rb-lv [data-rv]{animation-play-state:paused;animation-fill-mode:both;animation-name:rvIn;animation-duration:var(--rv-dur,1200ms);animation-delay:var(--rv-d,0ms);animation-timing-function:cubic-bezier(.22,.61,.36,1);}
.rb-lv [data-rv="deco"],.rb-lv [data-rv="float"]{
  animation-duration:var(--rv-dur,1400ms),var(--rv-i-dur,12000ms);
  animation-delay:var(--rv-d,0ms),calc(var(--rv-d,0ms) + var(--rv-dur,1400ms) + var(--rv-i-off,0ms));
  animation-iteration-count:1,infinite;animation-fill-mode:both,none;
}
.rb-lv [data-rv="deco"]{animation-name:rvIn,rvLive;animation-timing-function:cubic-bezier(.25,.85,.3,1.15),ease-in-out;}
.rb-lv [data-rv="float"]{animation-name:rvIn,rvFloat;animation-timing-function:cubic-bezier(.22,.61,.36,1),ease-in-out;}
.rb-lv.is-lv-play [data-rv]{animation-play-state:running;}
.rb-lv.rbv-js-replay.is-lv-play [data-rv]{animation-play-state:paused;}
.rb-hidden .rb-lv [data-rv]{animation-play-state:paused !important;}
@media (prefers-reduced-motion:reduce){.rb-lv [data-rv]{animation:none !important;}}
.rb-nomo .rb-lv [data-rv]{animation:none !important;}
.rbv-sentinel{position:absolute;visibility:hidden;pointer-events:none;}

/* ================= Galeri (Galeri.psd, 1080x1481) =================
   Additive: nothing above (Cover .. Live Streaming) is changed. Follows the previous section in normal flow, shown with the Hero
   (.is-hero-active); the scene scales to the section WIDTH only; the section height follows the number of photo rows
   (script.js). Hidden until the photos have settled, so nothing blank ever shows. */
.rb-gl{position:relative;display:none;width:100%;overflow:hidden;background:#fff8ef;}
.rb-app.is-hero-active .rb-gl.is-gl-ready{display:block;}
.rb-gl-scene{position:absolute;top:0;left:0;width:1080px;height:1481px;transform-origin:0 0;}
.rbg-ph{display:block;padding:0;margin:0;border:0;background:#e9dccf;border-radius:24px;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;appearance:none;-webkit-appearance:none;}
.rbg-ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;pointer-events:none;-webkit-user-drag:none;}
.rbg-ph:focus-visible{outline:5px solid #b8505a;outline-offset:6px;}

@keyframes rgIn{
  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 rgFloat{0%,100%{translate:0 0;}50%{translate:0 var(--f-y,6px);}}
.rb-gl [data-rg]{animation-play-state:paused;animation-fill-mode:both;animation-name:rgIn;animation-duration:var(--rg-dur,1200ms);animation-delay:var(--rg-d,0ms);animation-timing-function:cubic-bezier(.22,.61,.36,1);}
.rb-gl [data-rg="float"]{
  animation-name:rgIn,rgFloat;
  animation-duration:var(--rg-dur,1400ms),var(--rg-i-dur,12000ms);
  animation-delay:var(--rg-d,0ms),calc(var(--rg-d,0ms) + var(--rg-dur,1400ms) + var(--rg-i-off,0ms));
  animation-iteration-count:1,infinite;animation-fill-mode:both,none;
  animation-timing-function:cubic-bezier(.22,.61,.36,1),ease-in-out;
}
.rb-gl.is-gl-play [data-rg]{animation-play-state:running;}
.rb-gl.rbg-js-replay.is-gl-play [data-rg]{animation-play-state:paused;}
.rb-hidden .rb-gl [data-rg]{animation-play-state:paused !important;}
@media (prefers-reduced-motion:reduce){.rb-gl [data-rg]{animation:none !important;}}
.rb-nomo .rb-gl [data-rg]{animation:none !important;}
.rbg-sentinel{position:absolute;visibility:hidden;pointer-events:none;}

/* fullscreen photo viewer (opened by tapping a photo) */
.rbg-lb{position:fixed;inset:0;z-index:9999;background:rgba(18,12,10,.94);display:flex;align-items:center;justify-content:center;touch-action:none;}
.rbg-lb[hidden]{display:none;}
.rbg-lb-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;transition:transform .22s ease,opacity .22s ease;}
.rbg-lb-btn{position:absolute;width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,248,239,.16);color:#fff8ef;font:400 30px/46px 'Newsreader',serif;text-align:center;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.rbg-lb-btn:focus-visible{outline:3px solid #fff8ef;outline-offset:2px;}
.rbg-lb-x{top:calc(env(safe-area-inset-top,0px) + 12px);right:calc(env(safe-area-inset-right,0px) + 12px);}
.rbg-lb-prev,.rbg-lb-next{top:50%;margin-top:-23px;}
.rbg-lb-prev{left:calc(env(safe-area-inset-left,0px) + 8px);}
.rbg-lb-next{right:calc(env(safe-area-inset-right,0px) + 8px);}
@media (hover:none) and (pointer:coarse){.rbg-lb-prev,.rbg-lb-next{display:none;}}
.rbg-lb-count{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);text-align:center;color:rgba(255,248,239,.85);font:400 16px/1 'Newsreader',serif;letter-spacing:2px;pointer-events:none;}
.rbg-lb-count[hidden]{display:none;}

/* ================= Video (video.psd, 1080x1784) =================
   Additive: nothing above (Cover .. Galeri) is changed. Follows the previous section in normal flow, shown with the Hero
   (.is-hero-active); the scene scales to the section WIDTH only. */
.rb-vd{position:relative;display:none;width:100%;overflow:hidden;background:#fff9f0;}
.rb-app.is-hero-active .rb-vd{display:block;}
.rb-vd-scene{position:absolute;top:0;left:0;width:1080px;height:1784px;transform-origin:0 0;}
.rbw-desc{font-family:'Newsreader',serif;font-optical-sizing:auto;font-weight:400;font-size:46px;line-height:59px;letter-spacing:1.9px;color:#413a39;text-align:center;pointer-events:none;align-items:flex-start;}
.rbw-desc span{white-space:pre;}

/* the frame: [player window] under [frame overlay with a cut-out window] under [play button]; the whole block is the entrance unit */
.rbw-frame{overflow:visible;}
.rbw-window{position:absolute;overflow:hidden;border-radius:70px;background:linear-gradient(160deg,#e6d9cf,#cdbdb2);}
.rbw-window>*{position:absolute;left:0;top:0;width:100%;height:100%;}
.rbw-thumb{object-fit:cover;object-position:50% 40%;display:block;}
.rbw-thumb[hidden]{display:none;}
.rbw-player{border:0;background:#000;object-fit:contain;z-index:2;}
.rbw-note{display:flex;align-items:flex-end;justify-content:center;padding-bottom:64px;font-family:'Newsreader',serif;font-weight:400;font-size:44px;letter-spacing:1.5px;color:#6b5853;text-shadow:0 0 12px rgba(255,249,240,.9);pointer-events:none;}
.rbw-note[hidden]{display:none;}
.rbw-ring{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none;z-index:3;}
.rbw-play{position:absolute;z-index:4;width:186px;height:186px;margin:-93px 0 0 -93px;padding:0;border:0;background:none;cursor:pointer;border-radius:50%;filter:drop-shadow(0 0 14px rgba(0,0,0,.28));-webkit-tap-highlight-color:transparent;transition:transform .2s ease;}
.rbw-play:active{transform:scale(.96);}
.rbw-play:focus-visible{outline:4px solid #fff;outline-offset:4px;}
.rbw-play svg{display:block;pointer-events:none;}
.rbw-play.is-empty{opacity:.45;cursor:default;pointer-events:none;filter:none;}

@keyframes rwIn{
  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 rwLive{
  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);}
}
@keyframes rwFloat{0%,100%{translate:0 0;}50%{translate:0 var(--f-y,6px);}}
.rb-vd [data-rw]{animation-play-state:paused;animation-fill-mode:both;animation-name:rwIn;animation-duration:var(--rw-dur,1200ms);animation-delay:var(--rw-d,0ms);animation-timing-function:cubic-bezier(.22,.61,.36,1);}
.rb-vd [data-rw="deco"],.rb-vd [data-rw="float"]{
  animation-duration:var(--rw-dur,1400ms),var(--rw-i-dur,12000ms);
  animation-delay:var(--rw-d,0ms),calc(var(--rw-d,0ms) + var(--rw-dur,1400ms) + var(--rw-i-off,0ms));
  animation-iteration-count:1,infinite;animation-fill-mode:both,none;
}
.rb-vd [data-rw="deco"]{animation-name:rwIn,rwLive;animation-timing-function:cubic-bezier(.25,.85,.3,1.15),ease-in-out;}
.rb-vd [data-rw="float"]{animation-name:rwIn,rwFloat;animation-timing-function:cubic-bezier(.22,.61,.36,1),ease-in-out;}
/* once a player exists the frame has no animation at all: nothing can reset, hide or restart it */
.rb-vd [data-rw].is-rw-done{animation:none !important;opacity:1 !important;translate:none !important;scale:none !important;}
.rb-vd.is-vd-play [data-rw]{animation-play-state:running;}
.rb-vd.rbw-js-replay.is-vd-play [data-rw]{animation-play-state:paused;}
.rb-hidden .rb-vd [data-rw]{animation-play-state:paused !important;}
@media (prefers-reduced-motion:reduce){.rb-vd [data-rw]{animation:none !important;}}
.rb-nomo .rb-vd [data-rw]{animation:none !important;}
.rbw-sentinel{position:absolute;visibility:hidden;pointer-events:none;}

/* ================= Love Story (love story.psd, 941x1672) =================
   Additive: nothing above (Cover .. Video) is changed. Follows the previous section in normal flow, shown with the Hero
   (.is-hero-active); the scene scales to the section WIDTH only; the section height follows the number of moments (script.js). */
.rb-ls{position:relative;display:none;width:100%;overflow:hidden;background:#fef9ee;}
.rb-app.is-hero-active .rb-ls{display:block;}
.rb-ls-scene{position:absolute;top:0;left:0;width:941px;height:1672px;transform-origin:0 0;}

.rbs-line{pointer-events:none;transform-origin:50% 0;}
.rbs-line i{position:absolute;display:block;background:#ae4757;}
.rbs-line i.s{left:3.5px;width:4.6px;}
.rbs-line i.p{left:3.2px;width:5.4px;height:5.4px;border-radius:50%;}
.rbs-dot{background:#ae4757;border-radius:50%;pointer-events:none;}
.rbs-ph{border-radius:50%;overflow:hidden;box-sizing:border-box;border:3.5px solid #cb4a54;background:linear-gradient(155deg,#f6e3da,#e8c3bd);pointer-events:none;}
.rbs-ph img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;}
.rbs-ph img[hidden]{display:none;}

.rbs-txt{font-family:'Newsreader',serif;font-optical-sizing:auto;pointer-events:none;color:#070a14;}
.rbs-title,.rbs-date{height:56px;display:flex;align-items:flex-start;white-space:nowrap;}
.rbs-title span,.rbs-date span{display:block;transform-origin:0 0;}
.rbs-title{font-weight:500;font-size:50px;line-height:56px;color:#0b0c16;}
.rbs-date{font-weight:400;font-size:46.8px;line-height:56px;color:#b3203f;}
.rbs-title[hidden],.rbs-date[hidden]{display:none;}
.rbs-body{width:424px;font-weight:400;font-size:40.5px;line-height:43px;margin-top:-3px;color:#070a14;overflow-wrap:anywhere;white-space:pre-line;}

@keyframes rsIn{
  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;}
}
.rb-ls [data-rs]{animation-play-state:paused;animation-fill-mode:both;animation-name:rsIn;animation-duration:var(--rs-dur,1200ms);animation-delay:var(--rs-d,0ms);animation-timing-function:cubic-bezier(.22,.61,.36,1);}
.rb-ls [data-rs="line"]{--rp-sx:1;--rp-sy:.04;--rp-o:0;animation-timing-function:cubic-bezier(.45,.05,.25,1);}
.rb-ls.is-ls-play [data-rs]{animation-play-state:running;}
.rb-ls.rbs-js-replay.is-ls-play [data-rs]{animation-play-state:paused;}
.rb-hidden .rb-ls [data-rs]{animation-play-state:paused !important;}
@media (prefers-reduced-motion:reduce){.rb-ls [data-rs]{animation:none !important;}}
.rb-nomo .rb-ls [data-rs]{animation:none !important;}
.rbs-sentinel{position:absolute;visibility:hidden;pointer-events:none;}

/* ================= RSVP (Rscv.psd, 1064x2019) =================
   Additive: nothing above (Cover .. Love Story) is changed. Follows the Love Story in normal flow, shown with the Hero
   (.is-hero-active); the scene scales to the section WIDTH only; the section height follows the description length and the wishes
   switch (script.js). Cards, radios and button are CSS; heading script, wave, flowers and line icons are separate rasters. */
.rb-rs{position:relative;display:none;width:100%;overflow:hidden;overflow:clip;background:#fef9f1;}
.rb-app.is-hero-active .rb-rs{display:block;}
.rb-rs-scene{position:absolute;top:0;left:0;width:1064px;height:2019px;transform-origin:0 0;--rr-min:16px;}
.rbr-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.rbr-form{position:absolute;left:0;top:0;width:0;height:0;margin:0;padding:0;border:0;}

.rbr-desc{font-family:'Newsreader',serif;font-weight:390;font-variation-settings:"opsz" 24;font-optical-sizing:none;font-size:46.8px;line-height:57.7px;color:#0a1018;text-align:center;pointer-events:none;}
.rbr-desc p{margin:0;white-space:pre-line;}
.rbr-desc.is-custom p{white-space:normal;text-wrap:balance;overflow-wrap:anywhere;}

.rbr-card{box-sizing:border-box;display:block;margin:0;padding:0;min-width:0;border:2.4px solid #cba486;border-radius:36px;background:#fdf8f2;font-family:'Newsreader',serif;transition:border-color .18s ease,box-shadow .18s ease;}
.rbr-card[hidden]{display:none;}
.rbr-card:focus-within{border-color:#c0303f;box-shadow:0 0 0 4px rgba(192,48,63,.16);}
.rbr-card.is-bad{border-color:#b3203f;}
.rbr-ic{position:absolute;display:block;pointer-events:none;-webkit-user-drag:none;}
.rbr-ctl{position:absolute;box-sizing:border-box;margin:0;border:0;border-radius:0;background:transparent;color:#0f0f11;outline:none;-webkit-appearance:none;appearance:none;font-family:'Newsreader',serif;font-weight:400;font-variation-settings:"opsz" 24;font-optical-sizing:none;font-size:max(44px,var(--rr-min));line-height:60px;letter-spacing:0;}
.rbr-ctl::placeholder{color:#0f0f11;opacity:1;}
input.rbr-ctl{left:174px;top:5px;width:740px;height:132px;padding:0;font-size:max(46.9px,var(--rr-min));font-weight:340;}
.rbr-sel{left:181px;top:4px;width:740px;height:131px;padding:0 70px 0 0;cursor:pointer;text-overflow:ellipsis;font-size:max(47.6px,var(--rr-min));font-weight:340;}
.rbr-sel:disabled{opacity:1;cursor:default;}
.rbr-c2.is-off{opacity:.5;}
.rbr-ta{left:184px;top:0;width:700px;height:145px;padding:44px 0 22px;resize:none;overflow-y:auto;line-height:56px;font-size:max(49px,var(--rr-min));font-weight:400;}

.rbr-c3{display:block;}
.rbr-opt{position:absolute;left:54px;display:flex;align-items:center;height:64px;width:880px;cursor:pointer;}
.rbr-opt input{position:absolute;left:0;top:0;width:64px;height:64px;margin:0;opacity:0;cursor:pointer;}
.rbr-ring{flex:none;box-sizing:border-box;width:63px;height:63px;border-radius:50%;border:4.5px solid #bb2b3b;background:transparent;}
.rbr-opt input:checked + .rbr-ring{border-width:0;background:radial-gradient(circle,#fdf8f2 0 9.5px,#bc3440 10px 25px,#d87a7e 25.5px 28.5px,#b82736 29px 31.5px);}
.rbr-opt input:focus-visible + .rbr-ring{box-shadow:0 0 0 5px rgba(192,48,63,.28);}
.rbr-optt{margin-left:70px;font-family:'Newsreader',serif;font-weight:420;font-variation-settings:"opsz" 24;font-optical-sizing:none;font-size:max(47px,var(--rr-min));line-height:64px;color:#0f0f11;white-space:nowrap;position:relative;top:8px;}

.rbr-btn{box-sizing:border-box;margin:0;padding:0;border:0;border-radius:64px;background:linear-gradient(180deg,#bd4957,#bf4e5c);cursor:pointer;color:#fff;-webkit-appearance:none;appearance:none;overflow:hidden;font-family:'Newsreader',serif;transition:filter .18s ease;}
.rbr-btn:hover{filter:brightness(1.04);}
.rbr-btn:focus-visible{outline:5px solid rgba(192,48,63,.35);outline-offset:6px;}
.rbr-btn:disabled{cursor:default;filter:saturate(.8) brightness(1.06);}
.rbr-btn-t{position:absolute;left:184px;top:7px;height:127px;line-height:127px;font-weight:400;font-variation-settings:"opsz" 24;font-optical-sizing:none;font-size:41.6px;letter-spacing:0;white-space:nowrap;color:#fff;}
.rbr-btn-ic{position:absolute;left:645px;top:44px;width:60px;height:40px;pointer-events:none;-webkit-user-drag:none;}

.rbr-status,.rbr-note{margin:0;text-align:center;font-family:'Newsreader',serif;font-weight:400;font-optical-sizing:none;font-variation-settings:"opsz" 24;font-size:max(36px,calc(13px * var(--bwk,3)));line-height:1.3;}
.rbr-status{color:#b3203f;min-height:0;}
.rbr-status.is-ok{color:#3f6f4b;}
.rbr-status:empty{display:none;}
.rbr-note{color:#7d5560;font-style:italic;}
.rbr-note[hidden]{display:none;}

.rb-rs [data-rr]{animation-play-state:paused;animation-fill-mode:both;animation-name:rvIn;animation-duration:var(--rr-dur,1200ms);animation-delay:var(--rr-d,0ms);animation-timing-function:cubic-bezier(.22,.61,.36,1);}
.rb-rs [data-rr="deco"],.rb-rs [data-rr="float"]{
  animation-duration:var(--rr-dur,1400ms),var(--rr-i-dur,12000ms);
  animation-delay:var(--rr-d,0ms),calc(var(--rr-d,0ms) + var(--rr-dur,1400ms) + var(--rr-i-off,0ms));
  animation-iteration-count:1,infinite;animation-fill-mode:both,none;
}
.rb-rs [data-rr="deco"]{animation-name:rvIn,rvLive;animation-timing-function:cubic-bezier(.25,.85,.3,1.15),ease-in-out;}
.rb-rs [data-rr="float"]{animation-name:rvIn,rvFloat;animation-timing-function:cubic-bezier(.22,.61,.36,1),ease-in-out;}
.rb-rs.is-rs-play [data-rr]{animation-play-state:running;}
.rb-rs.rbr-js-replay.is-rs-play [data-rr]{animation-play-state:paused;}
.rb-hidden .rb-rs [data-rr]{animation-play-state:paused !important;}
@media (prefers-reduced-motion:reduce){.rb-rs [data-rr]{animation:none !important;}}
.rb-nomo .rb-rs [data-rr]{animation:none !important;}
.rbr-sentinel{position:absolute;visibility:hidden;pointer-events:none;}

/* ================= Hadiah (hadiah.psd, 1000x1573) =================
   Additive: nothing above (Cover .. RSVP) is changed. Follows the RSVP in normal flow, shown with the Hero (.is-hero-active); the scene
   scales to the section WIDTH only; the section height follows the description length and the number of accounts (script.js).
   The two bank cards (and their different PSD sizes/fills) are CSS slots; heading, landscape, bank logos and icons are separate rasters. */
.rb-gf{position:relative;display:none;width:100%;overflow:hidden;overflow:clip;background:#fef9ef;}
.rb-app.is-hero-active .rb-gf{display:block;}
.rb-gf-scene{position:absolute;top:0;left:0;width:1000px;height:1573px;transform-origin:0 0;}
.rbk-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

.rbk-desc{font-family:'Newsreader',serif;font-weight:390;font-variation-settings:"opsz" 24;font-optical-sizing:none;font-size:47.2px;line-height:61.7px;color:#0a1018;text-align:center;pointer-events:none;}
.rbk-desc p{margin:0;white-space:pre-line;}
.rbk-desc.is-custom p{white-space:normal;text-wrap:balance;overflow-wrap:anywhere;}

.rbk-card{box-sizing:border-box;display:block;font-family:'Newsreader',serif;color:#0f0b0c;}
.rbk-card[hidden]{display:none;}
.rbk-card.s1{left:88px;width:837px;height:200px;border:2px solid #dcc2a8;border-radius:42px;background:#fdf9f1;--cp-l:706px;--cp-t:41px;--tx-l:344px;--lg-l:36px;--lg-t:57px;--fb-t:139px;--tx-pt:15px;--ho-mt:2px;--num-fs:41px;--ho-fs:40.3px;}
.rbk-card.s2{left:90px;width:834px;height:188px;border:2.4px solid #d8ae8d;border-radius:32px;background:#fcf6ed;--cp-l:697px;--cp-t:34px;--tx-l:322px;--lg-l:34px;--lg-t:49px;--fb-t:133px;--tx-pt:16px;--ho-mt:-2px;--num-fs:41.6px;--ho-fs:40.6px;}
.rbk-logo{position:absolute;left:var(--lg-l);top:calc(var(--lg-t) + var(--ex,0px));width:250px;height:92px;pointer-events:none;display:flex;align-items:center;}
.rbk-logo img{display:block;max-width:100%;max-height:100%;object-fit:contain;-webkit-user-drag:none;}
.rbk-logo-t{display:block;font-weight:500;font-variation-settings:"opsz" 24;font-optical-sizing:none;font-size:50px;line-height:56px;color:#0f0b0c;overflow-wrap:anywhere;max-height:150px;overflow:hidden;}
.rbk-txt{position:absolute;box-sizing:border-box;left:var(--tx-l);top:0;width:380px;height:100%;padding-top:var(--tx-pt,0px);display:flex;flex-direction:column;justify-content:center;pointer-events:none;}
.rbk-num,.rbk-holder{font-weight:400;font-variation-settings:"opsz" 24;font-optical-sizing:none;overflow-wrap:anywhere;}
.rbk-num{font-size:var(--num-fs,41px);line-height:55px;letter-spacing:0;}
.rbk-holder{margin-top:var(--ho-mt,0px);font-size:var(--ho-fs,40.3px);line-height:55px;letter-spacing:.6px;}
.rbk-holder[hidden]{display:none;}
.rbk-copy{position:absolute;left:calc(var(--cp-l) - 6px);top:calc(var(--cp-t) + var(--ex,0px) - 5px);width:130px;height:132px;margin:0;padding:0;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;border-radius:30px;}
.rbk-copy img{position:absolute;left:32px;top:31px;width:66px;height:70px;pointer-events:none;-webkit-user-drag:none;transition:transform .2s ease,filter .2s ease;}
.rbk-copy:hover img{transform:scale(1.06);}
.rbk-copy:focus-visible{outline:4px solid rgba(192,48,63,.4);outline-offset:-2px;}
.rbk-card.is-done .rbk-copy img{transform:scale(1.1);}
.rbk-fb{position:absolute;left:var(--cp-l);top:calc(var(--fb-t) + var(--ex,0px));width:118px;text-align:center;font-size:max(30px,calc(11px * var(--bwk,3)));line-height:1.1;font-weight:500;color:#a8121c;white-space:nowrap;pointer-events:none;}
.rbk-fb:empty{display:none;}
.rbk-card.is-done .rbk-fb{color:#3f6f4b;}

.rbk-cta{box-sizing:border-box;border-radius:72px;background:#a94a51;color:#fff;overflow:hidden;font-family:'Newsreader',serif;margin:0;padding:0;border:0;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;transition:filter .18s ease;}
.rbk-cta[hidden]{display:none;}
.rbk-cta.is-pending{visibility:hidden;pointer-events:none;}
.rbk-cta:hover{filter:brightness(1.05);}
.rbk-cta:active{filter:brightness(.94);}
.rbk-cta:focus-visible{outline:5px solid rgba(169,74,81,.45);outline-offset:8px;}
.rbk-cta-gift{position:absolute;left:76px;top:34px;width:77px;height:75px;display:block;}
.rbk-cta-arrow{position:absolute;left:677px;top:54px;width:58px;height:41px;display:block;}
.rbk-cta-t{position:absolute;left:196px;top:9px;height:143px;line-height:143px;font-weight:380;font-variation-settings:"opsz" 24;font-optical-sizing:none;font-size:42px;letter-spacing:.4px;white-space:nowrap;}

.rb-gf [data-rk]{animation-play-state:paused;animation-fill-mode:both;animation-name:rvIn;animation-duration:var(--rk-dur,1200ms);animation-delay:var(--rk-d,0ms);animation-timing-function:cubic-bezier(.22,.61,.36,1);}
.rb-gf [data-rk="deco"],.rb-gf [data-rk="float"]{
  animation-duration:var(--rk-dur,1400ms),var(--rk-i-dur,12000ms);
  animation-delay:var(--rk-d,0ms),calc(var(--rk-d,0ms) + var(--rk-dur,1400ms) + var(--rk-i-off,0ms));
  animation-iteration-count:1,infinite;animation-fill-mode:both,none;
}
.rb-gf [data-rk="deco"]{animation-name:rvIn,rvLive;animation-timing-function:cubic-bezier(.25,.85,.3,1.15),ease-in-out;}
.rb-gf [data-rk="float"]{animation-name:rvIn,rvFloat;animation-timing-function:cubic-bezier(.22,.61,.36,1),ease-in-out;}
.rb-gf.is-gf-play [data-rk]{animation-play-state:running;}
.rb-gf.rbk-js-replay.is-gf-play [data-rk]{animation-play-state:paused;}
.rb-hidden .rb-gf [data-rk]{animation-play-state:paused !important;}
@media (prefers-reduced-motion:reduce){.rb-gf [data-rk]{animation:none !important;}}
.rb-nomo .rb-gf [data-rk]{animation:none !important;}
.rbk-sentinel{position:absolute;visibility:hidden;pointer-events:none;}

/* QRIS viewer (opened by the KIRIM KADO DIGITAL button; the customer's own gift_qris image) -- plain CSS px, outside the scaled scene */
.rbk-qr{position:fixed;inset:0;z-index:9999;background:rgba(18,12,10,.86);display:flex;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 14px) 14px calc(env(safe-area-inset-bottom,0px) + 14px);box-sizing:border-box;overscroll-behavior:contain;}
.rbk-qr[hidden]{display:none;}
.rbk-qr-card{position:relative;box-sizing:border-box;width:min(100%,440px);max-height:100%;overflow:auto;background:#fef9ef;border-radius:28px;padding:22px 20px 18px;text-align:center;font-family:'Newsreader',serif;color:#0f0b0c;box-shadow:0 18px 60px rgba(0,0,0,.45);}
.rbk-qr-t{font-weight:500;font-size:22px;line-height:1.2;letter-spacing:3px;color:#a94a51;margin:0 0 12px;}
.rbk-qr-frame{background:#fff;border-radius:16px;padding:10px;border:2px solid #e3c9ae;display:flex;align-items:center;justify-content:center;}
.rbk-qr-img{display:block;width:100%;height:auto;max-height:min(62vh,100vw);object-fit:contain;-webkit-touch-callout:default;user-select:auto;-webkit-user-select:auto;}
.rbk-qr-hint{margin:12px 4px 0;font-size:16px;line-height:1.35;color:#5a4b47;}
.rbk-qr-actions{display:flex;gap:10px;margin-top:14px;}
.rbk-qr-btn{flex:1;min-height:48px;border-radius:26px;font:500 17px/1.1 'Newsreader',serif;letter-spacing:.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;text-decoration:none;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
.rbk-qr-save{background:#a94a51;color:#fff;border:2px solid #a94a51;}
.rbk-qr-close{background:transparent;color:#a94a51;border:2px solid #cfa9a0;}
.rbk-qr-btn:focus-visible,.rbk-qr-x:focus-visible{outline:3px solid #0f0b0c;outline-offset:2px;}
.rbk-qr-x{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(169,74,81,.12);color:#a94a51;font:400 28px/44px 'Newsreader',serif;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;}

/* ================= Closing (clousing.psd, 941x1672) =================
   Additive: nothing above (Cover .. Hadiah) is changed. The LAST section; follows the Hadiah in normal flow, shown with the Hero
   (.is-hero-active); the scene scales to the section WIDTH only; the section height follows the paragraph length (script.js).
   Heading, divider, "and", flowers and landscape are separate rasters; paragraph, couple names and date are live text. */
.rb-cz{position:relative;display:none;width:100%;overflow:hidden;overflow:clip;background:#fcf3e3;}
.rb-app.is-hero-active .rb-cz{display:block;}
.rb-cz-scene{position:absolute;top:0;left:0;width:941px;height:1672px;transform-origin:0 0;}
.rbz-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.rbz-text{font-family:'Newsreader',serif;font-weight:390;font-variation-settings:"opsz" 24;font-optical-sizing:none;font-size:40.8px;line-height:52px;color:#1f1918;text-align:center;pointer-events:none;}
.rbz-text p{margin:0;white-space:pre-line;}
.rbz-text.is-custom p{white-space:normal;text-wrap:balance;overflow-wrap:anywhere;}
.rbz-name{font-family:'Pinyon Script',cursive;font-weight:400;font-size:148px;line-height:1;color:#b0151f;}
.rbz-nb{font-size:128px;}
.rbz-date{font-family:'Cormorant Garamond',serif;font-weight:600;font-variant-numeric:lining-nums;font-size:43px;line-height:1;letter-spacing:6px;padding-left:6px;color:#222020;}

.rb-cz [data-rz]{animation-play-state:paused;animation-fill-mode:both;animation-name:rvIn;animation-duration:var(--rz-dur,1200ms);animation-delay:var(--rz-d,0ms);animation-timing-function:cubic-bezier(.22,.61,.36,1);}
.rb-cz [data-rz="deco"],.rb-cz [data-rz="float"]{
  animation-duration:var(--rz-dur,1400ms),var(--rz-i-dur,12000ms);
  animation-delay:var(--rz-d,0ms),calc(var(--rz-d,0ms) + var(--rz-dur,1400ms) + var(--rz-i-off,0ms));
  animation-iteration-count:1,infinite;animation-fill-mode:both,none;
}
.rb-cz [data-rz="deco"]{animation-name:rvIn,rvLive;animation-timing-function:cubic-bezier(.25,.85,.3,1.15),ease-in-out;}
.rb-cz [data-rz="float"]{animation-name:rvIn,rvFloat;animation-timing-function:cubic-bezier(.22,.61,.36,1),ease-in-out;}
.rb-cz.is-cz-play [data-rz]{animation-play-state:running;}
.rb-cz.rbz-js-replay.is-cz-play [data-rz]{animation-play-state:paused;}
.rb-hidden .rb-cz [data-rz]{animation-play-state:paused !important;}
@media (prefers-reduced-motion:reduce){.rb-cz [data-rz]{animation:none !important;}}
.rb-nomo .rb-cz [data-rz]{animation:none !important;}
.rbz-sentinel{position:absolute;visibility:hidden;pointer-events:none;}

/* ---- Musik: floating play/pause (outside the 12 sections; shown after Buka Undangan) ---- */
.rbm-btn{position:fixed;z-index:60;bottom:calc(16px + env(safe-area-inset-bottom,0px));right:max(14px,calc(50vw - 240px + 14px));width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:rgba(255,248,239,.92);color:#bd4350;box-shadow:0 2px 10px rgba(73,72,78,.22),0 0 0 1.5px rgba(189,67,80,.55) inset;display:flex;align-items:center;justify-content:center;
  cursor:pointer;-webkit-tap-highlight-color:transparent;opacity:0;transition:opacity .6s ease,transform .2s ease;}
.rbm-btn[hidden]{display:none;}
.rbm-btn.is-shown{opacity:1;}
.rbm-btn:active{transform:scale(.92);}
.rbm-btn:focus-visible{outline:2px solid #bd4350;outline-offset:3px;}
.rbm-ic{width:22px;height:22px;fill:currentColor;display:none;}
.rbm-btn.is-on .rbm-ic-pause{display:block;}
.rbm-btn:not(.is-on) .rbm-ic-play{display:block;}
.rbm-btn.is-on::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid rgba(189,67,80,.45);animation:rbmPulse 2.6s ease-out infinite;pointer-events:none;}
@keyframes rbmPulse{0%{transform:scale(.92);opacity:.8}100%{transform:scale(1.3);opacity:0}}
.rb-nomo .rbm-btn.is-on::after{animation:none;}
@media (prefers-reduced-motion:reduce){.rbm-btn.is-on::after{animation:none;}}