/* Moon Mobile (baby shower): design motion on top of assets/scenes/scenes.css. Generated by src/moon_mobile/gen.py (+ sections.py).
   Plain rules = the rest state (reduced motion, editor, the still render). */

/* the hero text area is drawn clear (a pale sky), so the studio's white wash over the art is not needed */
body.sc-moon_mobile.es-studio-v2 .sa-hero .sa-hero-overlay{background:none}

/* ---- program: a small mobile arm heads the section; every row is a felt card hanging on a thread ---- */
body.sc-moon_mobile #program>.sc-p-program{width:min(72vw,280px);margin:-26px auto 8px}
body.sc-moon_mobile.es-studio-v2 #program .sa-prog-line-v{display:none}
body.sc-moon_mobile.es-studio-v2 #program .sa-prog-mobile-wrap{padding-top:30px}
body.sc-moon_mobile.es-studio-v2 #program .sa-prog-mobile-wrap::before{content:"";position:absolute;left:50%;top:-2px;width:160px;height:30px;margin-left:-80px;max-width:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 30'%3E%3Crect x='14' y='13' width='132' height='7' rx='3.5' fill='%23D9B56C'/%3E%3Ccircle cx='14' cy='16.5' r='6.5' fill='%23BF9A52'/%3E%3Ccircle cx='146' cy='16.5' r='6.5' fill='%23BF9A52'/%3E%3Cpath d='M80 15C70 3 58 5 60 13C62 21 72 19 80 15Z' fill='%23F4D6D6'/%3E%3Cpath d='M80 15C90 3 102 5 100 13C98 21 88 19 80 15Z' fill='%23F4D6D6'/%3E%3Cpath d='M78 15L71 29H76L80 19L84 29H89L82 15Z' fill='%23E2B3B3'/%3E%3Ccircle cx='80' cy='15' r='4' fill='%23E2B3B3'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
body.sc-moon_mobile.es-studio-v2 #program .sa-program-mobile{gap:40px!important;padding-top:6px}
body.sc-moon_mobile.es-studio-v2 #program .sa-prog-row{position:relative;align-items:center;gap:14px;padding:15px 18px 15px 16px;border-radius:20px;
  background:var(--cz-section-bg,var(--mm-card,#FFFBF6));box-shadow:4px 6px 0 rgba(62,74,97,.07);outline:1.5px dashed rgba(143,179,209,.75);outline-offset:-7px;
  transform-origin:50% -36px}
body.sc-moon_mobile #program .sa-prog-row:nth-child(3n+2){--mm-card:#EEF4FA}
body.sc-moon_mobile #program .sa-prog-row:nth-child(3n){--mm-card:#FBEFEF}
/* the thread (with a wooden bead and a blush knot) the card hangs from */
body.sc-moon_mobile #program .sa-prog-row::before{content:"";position:absolute;left:50%;bottom:calc(100% - 3px);width:16px;height:40px;margin-left:-8px;max-width:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 40'%3E%3Cpath d='M8 0V35' stroke='%233E4A61' stroke-width='1.4' stroke-opacity='.8'/%3E%3Cellipse cx='8' cy='15' rx='4.2' ry='5.2' fill='%23D9B56C'/%3E%3Cpath d='M8 34C3 29 0 34 2 37C4 40 7 37 8 35C9 37 12 40 14 37C16 34 13 29 8 34Z' fill='%23E2B3B3'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;pointer-events:none}
/* a small felt charm sewn to the card's top corner: stars and a moon in turn */
body.sc-moon_mobile #program .sa-prog-row::after{content:"";position:absolute;inset-inline-end:10px;top:-11px;width:26px;height:26px;max-width:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -20 40 40'%3E%3Cpath d='M-0.6 -14.1Q1.2 -17 2.6 -13.8L5.1 -8.2Q5.7 -6.8 7.2 -6.4L13.2 -4.9Q16.5 -4.1 14 -1.8L9.3 2.3Q8.2 3.3 8.3 4.8L8.8 11Q9 14.4 6.1 12.7L0.7 9.6Q-0.6 8.8 -2 9.4L-7.8 11.7Q-10.9 13 -10.2 9.7L-8.9 3.6Q-8.6 2.1 -9.6 1L-13.6 -3.8Q-15.8 -6.4 -12.4 -6.7L-6.2 -7.3Q-4.7 -7.5 -3.9 -8.8Z' fill='%23E6C47C'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;pointer-events:none}
body.sc-moon_mobile #program .sa-prog-row:nth-child(2n)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -20 40 40'%3E%3Cpath d='M15 5.6A16 16 0 1 1 1.6 -15.9A12.8 12.8 0 0 0 15 5.6Z' fill='%23EBCB85'/%3E%3C/svg%3E")}
body.sc-moon_mobile.es-studio-v2 #program .sa-prog-row>div:first-child{background:var(--cz-section-bg,#FFFFFF);box-shadow:none;border:1.5px solid rgba(143,179,209,.55);color:var(--cz-title,#3E4A61)!important}
body.sc-moon_mobile.es-studio-v2 #program :is(.sa-prog-row,.sa-prog-item) .sa-prog-time{flex:none;padding:2px 9px!important;border-radius:99px!important;background:var(--mm-pill-cz,#CFE3F2)!important;
  font:600 11.5px/1.5 var(--font-body)!important;font-family:var(--font-body)!important;letter-spacing:.03em;color:var(--cz-title,#3E4A61)!important;font-variant-numeric:tabular-nums}
body.sc-moon_mobile.es-studio-v2 #program .sa-prog-row h3{color:var(--cz-text,#3E4A61)!important;line-height:1.15}
body.sc-moon_mobile.es-studio-v2 #program .sa-prog-row>div+div{padding-top:0}
body.sc-moon_mobile.es-studio-v2 #program .sa-prog-row p:empty{display:none}

/* entrance: each card drops in on its thread and swings to rest, one after another */
.sc-js body.sc-moon_mobile #program .sa-prog-row:not(.sc-in){opacity:0;transform:translateY(-30px)}
.sc-js body.sc-moon_mobile #program .sa-prog-row.sc-in{animation:sc-mm-hang 1.9s linear calc(500ms + var(--k,0) * 200ms) both}
.sc-js body.sc-moon_mobile #program:not(.sc-in) .sa-prog-mobile-wrap::before{opacity:0}
.sc-js body.sc-moon_mobile #program.sc-in .sa-prog-mobile-wrap::before{animation:sc-fade 500ms cubic-bezier(.23,1,.32,1) 450ms both}
body.sc-moon_mobile #program .sa-prog-row:nth-child(2){--k:1}
body.sc-moon_mobile #program .sa-prog-row:nth-child(3){--k:2}
body.sc-moon_mobile #program .sa-prog-row:nth-child(4){--k:3}
body.sc-moon_mobile #program .sa-prog-row:nth-child(5){--k:4}
body.sc-moon_mobile #program .sa-prog-row:nth-child(n+6){--k:5}
/* a pendulum settling: fastest through rest, still at each turn, every swing smaller */
@keyframes sc-mm-hang{
  0%{opacity:0;transform:translateY(-30px) rotate(0);animation-timing-function:cubic-bezier(.3,.7,.4,1)}
  18%{opacity:1;transform:translateY(2px) rotate(2.6deg);animation-timing-function:cubic-bezier(.33,0,.66,1)}
  38%{transform:rotate(-1.9deg);animation-timing-function:cubic-bezier(.33,0,.66,1)}
  58%{transform:rotate(1.1deg);animation-timing-function:cubic-bezier(.33,0,.66,1)}
  78%{transform:rotate(-.45deg);animation-timing-function:cubic-bezier(.33,0,.66,1)}
  100%{opacity:1;transform:none}}

/* tablets (the three-column programme): the same cards hang from the top thread */
@media (min-width:768px){
  body.sc-moon_mobile.es-studio-v2 #program .sa-prog-line-h{top:0;height:1.5px;background:rgba(62,74,97,.45)}
  body.sc-moon_mobile.es-studio-v2 #program .sa-prog-item{position:relative;margin-top:44px;padding:18px 12px;border-radius:20px;background:var(--cz-section-bg,var(--mm-card,#FFFBF6));
    box-shadow:4px 6px 0 rgba(62,74,97,.07);outline:1.5px dashed rgba(143,179,209,.75);outline-offset:-7px;transform-origin:50% -44px}
  body.sc-moon_mobile #program .sa-prog-item:nth-child(3n+2){--mm-card:#EEF4FA}
  body.sc-moon_mobile #program .sa-prog-item:nth-child(3n){--mm-card:#FBEFEF}
  body.sc-moon_mobile #program .sa-prog-item::before{content:"";position:absolute;left:50%;bottom:calc(100% - 3px);width:16px;height:48px;margin-left:-8px;max-width:none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 40'%3E%3Cpath d='M8 0V35' stroke='%233E4A61' stroke-width='1.4' stroke-opacity='.8'/%3E%3Cellipse cx='8' cy='15' rx='4.2' ry='5.2' fill='%23D9B56C'/%3E%3Cpath d='M8 34C3 29 0 34 2 37C4 40 7 37 8 35C9 37 12 40 14 37C16 34 13 29 8 34Z' fill='%23E2B3B3'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
  .sc-js body.sc-moon_mobile #program:not(.sc-in) .sa-prog-item{opacity:0}
  .sc-js body.sc-moon_mobile #program.sc-in .sa-prog-item{animation:sc-mm-hang 1.9s linear calc(600ms + var(--k,0) * 260ms) both}
  body.sc-moon_mobile #program .sa-prog-item:nth-child(2){--k:1}
  body.sc-moon_mobile #program .sa-prog-item:nth-child(3){--k:2}
}

/* ---- Colours & type: the couple's choices win on every card and surface drawn in the design's own colours. These
   exist ONLY when the couple chose that colour (each names var(--cz-...) without a fallback); otherwise every
   var(--x, <design value>) falls back and the page is exactly the design. The cloud edges of the cards are images, so
   with a chosen section colour they switch to that colour cut to the same cloud shape (a mask). ---- */
body.sc-moon_mobile{--mm-cz-fill:var(--cz-section-bg);
  --mm-cz-foot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 24'%3E%3Cpath d='M0 0H96V6C96 16 86 22 78 16C72 24 60 24 56 16C50 24 38 24 34 16C28 24 16 24 12 16C6 22 0 16 0 8Z' fill='%23FFFDF9'/%3E%3C/svg%3E") 0 0/72px 18px repeat-x,linear-gradient(var(--cz-section-bg) 0 0) 0 0/0 0 no-repeat;
  --mm-cz-top:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 24'%3E%3Cpath d='M0 24V16C0 8 6 2 12 8C16 0 28 0 34 8C38 0 50 0 56 8C60 0 72 0 78 8C86 2 96 8 96 16V24Z' fill='%23FFFDF9'/%3E%3C/svg%3E") 0 100%/80px 20px repeat-x,linear-gradient(var(--cz-section-bg) 0 0) 0 0/0 0 no-repeat;
  --mm-pill-cz:color-mix(in srgb,var(--cz-title) 16%,var(--cz-section-bg,#FFFDF9));
  --mm-ring:color-mix(in srgb,var(--es-form-ink) 100%,var(--cz-section-bg))}

/* ---- welcome: the letter on a soft white card: a cloud-scalloped top with a moon and a star peeking over it,
   a stitched edge, a scalloped foot ---- */
body.sc-moon_mobile.es-studio-v2 .es-welcome{padding-top:84px}
body.sc-moon_mobile.es-studio-v2 .es-welcome-inner{padding:22px 24px 26px;background:var(--cz-section-bg,#FFFDF9);border-radius:0 0 22px 22px;
  outline:1.5px dashed rgba(143,179,209,.8);outline-offset:-10px;box-shadow:0 10px 0 -2px rgba(143,179,209,.18)}
body.sc-moon_mobile .es-welcome-inner>.sc-p-welcome{position:absolute;left:-3%;bottom:calc(100% - 3px);width:106%;max-width:none;margin:0}
body.sc-moon_mobile .es-welcome-inner::after{content:"";position:absolute;left:0;right:0;top:calc(100% - 2px);height:18px;max-width:none;
  background:var(--mm-cz-fill,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 24'%3E%3Cpath d='M0 0H96V6C96 16 86 22 78 16C72 24 60 24 56 16C50 24 38 24 34 16C28 24 16 24 12 16C6 22 0 16 0 8Z' fill='%23FFFDF9'/%3E%3C/svg%3E") 0 0/72px 18px repeat-x);-webkit-mask:var(--mm-cz-foot,none);mask:var(--mm-cz-foot,none);pointer-events:none}
.sc-js body.sc-moon_mobile .es-welcome:not(.sc-in) .es-welcome-inner{opacity:0;transform:translateY(18px)}
.sc-js body.sc-moon_mobile .es-welcome.sc-in .es-welcome-inner{animation:sc-rise 800ms cubic-bezier(.23,1,.32,1) both}

/* ---- countdown: a moon peeks from behind a stitched cloud; below, four felt stars hang on threads of different
   lengths from a wooden rod, each carrying its number: the threads draw down, the stars pop and swing to rest ---- */
body.sc-moon_mobile #countdown>.sc-p-countdown{width:min(70vw,270px);margin:-20px auto 4px}
body.sc-moon_mobile.es-studio-v2 #countdown .grid{position:relative;gap:0 2px;max-width:400px;margin:0 auto;padding-top:8px}
body.sc-moon_mobile.es-studio-v2 #countdown .grid::before{content:"";position:absolute;left:3%;right:3%;top:0;height:16px;max-width:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16'%3E%3Crect x='8' y='5' width='284' height='6' rx='3' fill='%23D9B56C'/%3E%3Ccircle cx='8' cy='8' r='6.5' fill='%23BF9A52'/%3E%3Ccircle cx='292' cy='8' r='6.5' fill='%23BF9A52'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
body.sc-moon_mobile.es-studio-v2 #countdown .grid>div{position:relative;margin-top:var(--mm-drop,40px);padding:0 0 4px;border:0;background:none;transform-origin:50% calc(-1 * var(--mm-drop,40px))}
body.sc-moon_mobile.es-studio-v2 #countdown .grid>div+div{border:0}
body.sc-moon_mobile #countdown .grid>div::before{content:"";position:absolute;left:50%;bottom:calc(100% - 4px);width:1.6px;height:calc(var(--mm-drop,40px) + 2px);margin-left:-.8px;
  background:rgba(62,74,97,.7);transform-origin:50% 0;max-width:none}
body.sc-moon_mobile.es-studio-v2 #countdown [id^=cd_]{display:block;width:78px;max-width:none;height:78px;margin:0 auto;background:var(--mm-star) 50% 50%/100% 100% no-repeat;
  font:500 27px/84px var(--font-display);color:#3E4A61!important;text-align:center}
body.sc-moon_mobile.es-studio-v2 #countdown .grid span:last-child{display:block;margin-top:4px;font:700 9px/1.3 var(--font-body);letter-spacing:.14em;color:var(--cz-text,#3E4A61)!important}
html[dir=rtl] body.sc-moon_mobile.es-studio-v2 #countdown .grid span:last-child{font-size:11.5px;letter-spacing:0}
body.sc-moon_mobile #countdown .grid>div:nth-child(1){--mm-drop:34px;--mm-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 104'%3E%3Cpath d='M45.9 15.8Q50 8 54.1 15.8L61.6 30Q63.4 33.5 67.4 34.2L83.2 36.9Q91.8 38.4 85.7 44.7L74.5 56.2Q71.8 59.1 72.3 63L74.6 78.9Q75.9 87.6 68 83.7L53.6 76.6Q50 74.9 46.4 76.6L32 83.7Q24.1 87.6 25.4 78.9L27.7 63Q28.2 59.1 25.5 56.2L14.3 44.7Q8.2 38.4 16.8 36.9L32.6 34.2Q36.6 33.5 38.4 30Z' transform='translate(4 6)' fill='%233E4A61' fill-opacity='0.1'/%3E%3Cpath d='M45.9 15.8Q50 8 54.1 15.8L61.6 30Q63.4 33.5 67.4 34.2L83.2 36.9Q91.8 38.4 85.7 44.7L74.5 56.2Q71.8 59.1 72.3 63L74.6 78.9Q75.9 87.6 68 83.7L53.6 76.6Q50 74.9 46.4 76.6L32 83.7Q24.1 87.6 25.4 78.9L27.7 63Q28.2 59.1 25.5 56.2L14.3 44.7Q8.2 38.4 16.8 36.9L32.6 34.2Q36.6 33.5 38.4 30Z' fill='%23E6C47C'/%3E%3Cpath d='M47 23.8Q50 17.7 53 23.8L58.7 35.3Q60.1 38.1 63.1 38.6L75.8 40.4Q82.6 41.4 77.7 46.2L68.5 55.1Q66.3 57.3 66.8 60.3L69 73Q70.2 79.8 64.1 76.6L52.7 70.6Q50 69.2 47.3 70.6L35.9 76.6Q29.8 79.8 31 73L33.2 60.3Q33.7 57.3 31.5 55.1L22.3 46.2Q17.4 41.4 24.2 40.4L36.9 38.6Q39.9 38.1 41.3 35.3Z' fill='none' stroke='%23B8914A' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.55' stroke-dasharray='3.5 4'/%3E%3C/svg%3E");--k:0}
body.sc-moon_mobile #countdown .grid>div:nth-child(2){--mm-drop:58px;--mm-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 104'%3E%3Cpath d='M45.9 15.8Q50 8 54.1 15.8L61.6 30Q63.4 33.5 67.4 34.2L83.2 36.9Q91.8 38.4 85.7 44.7L74.5 56.2Q71.8 59.1 72.3 63L74.6 78.9Q75.9 87.6 68 83.7L53.6 76.6Q50 74.9 46.4 76.6L32 83.7Q24.1 87.6 25.4 78.9L27.7 63Q28.2 59.1 25.5 56.2L14.3 44.7Q8.2 38.4 16.8 36.9L32.6 34.2Q36.6 33.5 38.4 30Z' transform='translate(4 6)' fill='%233E4A61' fill-opacity='0.1'/%3E%3Cpath d='M45.9 15.8Q50 8 54.1 15.8L61.6 30Q63.4 33.5 67.4 34.2L83.2 36.9Q91.8 38.4 85.7 44.7L74.5 56.2Q71.8 59.1 72.3 63L74.6 78.9Q75.9 87.6 68 83.7L53.6 76.6Q50 74.9 46.4 76.6L32 83.7Q24.1 87.6 25.4 78.9L27.7 63Q28.2 59.1 25.5 56.2L14.3 44.7Q8.2 38.4 16.8 36.9L32.6 34.2Q36.6 33.5 38.4 30Z' fill='%23F2C7C4'/%3E%3Cpath d='M47 23.8Q50 17.7 53 23.8L58.7 35.3Q60.1 38.1 63.1 38.6L75.8 40.4Q82.6 41.4 77.7 46.2L68.5 55.1Q66.3 57.3 66.8 60.3L69 73Q70.2 79.8 64.1 76.6L52.7 70.6Q50 69.2 47.3 70.6L35.9 76.6Q29.8 79.8 31 73L33.2 60.3Q33.7 57.3 31.5 55.1L22.3 46.2Q17.4 41.4 24.2 40.4L36.9 38.6Q39.9 38.1 41.3 35.3Z' fill='none' stroke='%23E2B3B3' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.55' stroke-dasharray='3.5 4'/%3E%3C/svg%3E");--k:1}
body.sc-moon_mobile #countdown .grid>div:nth-child(3){--mm-drop:42px;--mm-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 104'%3E%3Cpath d='M45.9 15.8Q50 8 54.1 15.8L61.6 30Q63.4 33.5 67.4 34.2L83.2 36.9Q91.8 38.4 85.7 44.7L74.5 56.2Q71.8 59.1 72.3 63L74.6 78.9Q75.9 87.6 68 83.7L53.6 76.6Q50 74.9 46.4 76.6L32 83.7Q24.1 87.6 25.4 78.9L27.7 63Q28.2 59.1 25.5 56.2L14.3 44.7Q8.2 38.4 16.8 36.9L32.6 34.2Q36.6 33.5 38.4 30Z' transform='translate(4 6)' fill='%233E4A61' fill-opacity='0.1'/%3E%3Cpath d='M45.9 15.8Q50 8 54.1 15.8L61.6 30Q63.4 33.5 67.4 34.2L83.2 36.9Q91.8 38.4 85.7 44.7L74.5 56.2Q71.8 59.1 72.3 63L74.6 78.9Q75.9 87.6 68 83.7L53.6 76.6Q50 74.9 46.4 76.6L32 83.7Q24.1 87.6 25.4 78.9L27.7 63Q28.2 59.1 25.5 56.2L14.3 44.7Q8.2 38.4 16.8 36.9L32.6 34.2Q36.6 33.5 38.4 30Z' fill='%23DCEAF5'/%3E%3Cpath d='M47 23.8Q50 17.7 53 23.8L58.7 35.3Q60.1 38.1 63.1 38.6L75.8 40.4Q82.6 41.4 77.7 46.2L68.5 55.1Q66.3 57.3 66.8 60.3L69 73Q70.2 79.8 64.1 76.6L52.7 70.6Q50 69.2 47.3 70.6L35.9 76.6Q29.8 79.8 31 73L33.2 60.3Q33.7 57.3 31.5 55.1L22.3 46.2Q17.4 41.4 24.2 40.4L36.9 38.6Q39.9 38.1 41.3 35.3Z' fill='none' stroke='%238FB3D1' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.55' stroke-dasharray='3.5 4'/%3E%3C/svg%3E");--k:2}
body.sc-moon_mobile #countdown .grid>div:nth-child(4){--mm-drop:64px;--mm-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 104'%3E%3Cpath d='M45.9 15.8Q50 8 54.1 15.8L61.6 30Q63.4 33.5 67.4 34.2L83.2 36.9Q91.8 38.4 85.7 44.7L74.5 56.2Q71.8 59.1 72.3 63L74.6 78.9Q75.9 87.6 68 83.7L53.6 76.6Q50 74.9 46.4 76.6L32 83.7Q24.1 87.6 25.4 78.9L27.7 63Q28.2 59.1 25.5 56.2L14.3 44.7Q8.2 38.4 16.8 36.9L32.6 34.2Q36.6 33.5 38.4 30Z' transform='translate(4 6)' fill='%233E4A61' fill-opacity='0.1'/%3E%3Cpath d='M45.9 15.8Q50 8 54.1 15.8L61.6 30Q63.4 33.5 67.4 34.2L83.2 36.9Q91.8 38.4 85.7 44.7L74.5 56.2Q71.8 59.1 72.3 63L74.6 78.9Q75.9 87.6 68 83.7L53.6 76.6Q50 74.9 46.4 76.6L32 83.7Q24.1 87.6 25.4 78.9L27.7 63Q28.2 59.1 25.5 56.2L14.3 44.7Q8.2 38.4 16.8 36.9L32.6 34.2Q36.6 33.5 38.4 30Z' fill='%23FFF6E2'/%3E%3Cpath d='M47 23.8Q50 17.7 53 23.8L58.7 35.3Q60.1 38.1 63.1 38.6L75.8 40.4Q82.6 41.4 77.7 46.2L68.5 55.1Q66.3 57.3 66.8 60.3L69 73Q70.2 79.8 64.1 76.6L52.7 70.6Q50 69.2 47.3 70.6L35.9 76.6Q29.8 79.8 31 73L33.2 60.3Q33.7 57.3 31.5 55.1L22.3 46.2Q17.4 41.4 24.2 40.4L36.9 38.6Q39.9 38.1 41.3 35.3Z' fill='none' stroke='%23B8914A' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.55' stroke-dasharray='3.5 4'/%3E%3C/svg%3E");--k:3}

.sc-js body.sc-moon_mobile #countdown .grid:not(.sc-in)::before{opacity:0}
.sc-js body.sc-moon_mobile #countdown .grid.sc-in::before{animation:sc-fade 500ms cubic-bezier(.23,1,.32,1) both}
.sc-js body.sc-moon_mobile #countdown .grid:not(.sc-in)>div::before{transform:scaleY(0)}
.sc-js body.sc-moon_mobile #countdown .grid.sc-in>div::before{animation:sc-mm-thread 520ms cubic-bezier(.45,0,.3,1) calc(300ms + var(--k,0) * 170ms) both}
@keyframes sc-mm-thread{from{transform:scaleY(0)}to{transform:none}}
.sc-js body.sc-moon_mobile #countdown .grid:not(.sc-in)>div>*{opacity:0;transform:scale(.5)}
.sc-js body.sc-moon_mobile #countdown .grid.sc-in>div>*{animation:sc-pop 520ms cubic-bezier(.23,1,.32,1) calc(760ms + var(--k,0) * 170ms) both}
.sc-js body.sc-moon_mobile #countdown .grid.sc-in>div{animation:sc-mm-settle 2.2s linear calc(800ms + var(--k,0) * 170ms) both}
@keyframes sc-mm-settle{
  0%{transform:rotate(0);animation-timing-function:cubic-bezier(.33,.66,.66,1)}
  14%{transform:rotate(5deg);animation-timing-function:cubic-bezier(.33,0,.66,1)}
  36%{transform:rotate(-3.4deg);animation-timing-function:cubic-bezier(.33,0,.66,1)}
  58%{transform:rotate(2deg);animation-timing-function:cubic-bezier(.33,0,.66,1)}
  80%{transform:rotate(-.8deg);animation-timing-function:cubic-bezier(.33,0,.66,1)}
  100%{transform:none}}

/* ---- venue: a quilt of hills is laid down patch by patch and a small hot-air balloon floats up over it and bobs;
   the date/time/place badges are felt circles with stitches, the buttons and the map are stitched too ---- */
body.sc-moon_mobile #details>.sc-p-details{width:min(80vw,310px);margin:-18px auto 6px}
body.sc-moon_mobile.es-studio-v2 #details .sa-map-rows>div>div:first-child{border-radius:50%!important;border:0!important;background:var(--mm-rc,#DCEAF5)!important;
  outline:1.3px dashed rgba(62,74,97,.35);outline-offset:-5px;box-shadow:0 4px 0 rgba(143,179,209,.25)!important;color:#3E4A61!important}
body.sc-moon_mobile #details .sa-map-rows>div:nth-child(2){--mm-rc:#F7E3E1;--k:1}
body.sc-moon_mobile #details .sa-map-rows>div:nth-child(3){--mm-rc:#F3E6C4;--k:2}
body.sc-moon_mobile.es-studio-v2 #details .sa-map-actions a{border:0!important;border-radius:999px!important;background:var(--cz-section-bg,#FFFDF9)!important;outline:1.3px dashed rgba(143,179,209,.8);outline-offset:-5px;
  box-shadow:0 4px 0 rgba(143,179,209,.25);color:var(--cz-text,#3E4A61)!important}
body.sc-moon_mobile.es-studio-v2 #details .sa-map-embed .sa-gallery-card{border:7px solid var(--cz-section-bg,#FFFDF9)!important;border-radius:18px!important;outline:1.3px dashed rgba(143,179,209,.8);outline-offset:-4px;box-shadow:0 6px 0 rgba(143,179,209,.22)!important}
.sc-js body.sc-moon_mobile #details .sa-map-rows>div:not(.sc-in){opacity:0;transform:translateY(-14px)}
.sc-js body.sc-moon_mobile #details .sa-map-rows>div.sc-in{animation:sc-mm-drop 700ms cubic-bezier(.23,1,.32,1) calc(var(--k,0) * 120ms) both}
@keyframes sc-mm-drop{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1;transform:translateY(2px)}100%{opacity:1;transform:none}}
.sc-js body.sc-moon_mobile #details .sa-map-actions:not(.sc-in) a{opacity:0;transform:translateY(10px)}
.sc-js body.sc-moon_mobile #details .sa-map-actions.sc-in a{animation:sc-rise 560ms cubic-bezier(.23,1,.32,1) both}
.sc-js body.sc-moon_mobile #details .sa-map-actions.sc-in a:nth-child(2){animation-delay:100ms}
.sc-js body.sc-moon_mobile #details .sa-map-actions.sc-in a:nth-child(3){animation-delay:200ms}

/* ---- gallery: a moon holds a tiny frame by its horn; each photo hangs on its own thread from a wooden peg, drops in
   and then sways gently (paused off screen) ---- */
body.sc-moon_mobile #gallery>.sc-p-gallery{width:min(64vw,250px);margin:-20px auto 10px}
body.sc-moon_mobile.es-studio-v2 #gallery .grid{gap:44px 18px;padding-top:30px}
body.sc-moon_mobile.es-studio-v2 #gallery .sa-gallery-card{position:relative;overflow:visible;border:7px solid var(--cz-section-bg,#FFFDF9);border-radius:16px;box-shadow:0 8px 0 rgba(143,179,209,.25);
  outline:1.3px dashed rgba(143,179,209,.8);outline-offset:-4px;transform-origin:50% -30px}
body.sc-moon_mobile.es-studio-v2 #gallery .sa-gallery-card img{border-radius:9px}
body.sc-moon_mobile #gallery .sa-gallery-card::before{content:"";position:absolute;left:50%;bottom:calc(100% + 4px);width:16px;height:34px;margin-left:-8px;max-width:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 34'%3E%3Cpath d='M8 0V30' stroke='%233E4A61' stroke-opacity='.75' stroke-width='1.4'/%3E%3Ccircle cx='8' cy='5' r='5' fill='%23D9B56C'/%3E%3Cellipse cx='8' cy='18' rx='3.6' ry='4.4' fill='%23E2B3B3'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
body.sc-moon_mobile #gallery .grid>:nth-child(2n){--mm-p:7.4s;--mm-a:-1.3deg}
body.sc-moon_mobile #gallery .grid>:nth-child(3n){--mm-p:8.2s}
.sc-js body.sc-moon_mobile #gallery .grid>:not(.sc-in){opacity:0;translate:0 -26px}
.sc-js body.sc-moon_mobile #gallery .grid>.sc-in{animation:sc-mm-hangin 700ms cubic-bezier(.23,1,.32,1) both,sc-mm-sway var(--mm-p,6.8s) linear 700ms infinite}
.sc-js body.sc-moon_mobile #gallery:not(.sc-run) .grid>*{animation-play-state:paused}
@keyframes sc-mm-hangin{0%{opacity:0;translate:0 -26px}60%{opacity:1;translate:0 3px}100%{opacity:1;translate:0 0}}
@keyframes sc-mm-sway{
  0%{rotate:0deg;animation-timing-function:cubic-bezier(.33,.66,.66,1)}
  25%{rotate:var(--mm-a,1.3deg);animation-timing-function:cubic-bezier(.33,0,.66,.33)}
  50%{rotate:0deg;animation-timing-function:cubic-bezier(.33,.66,.66,1)}
  75%{rotate:calc(var(--mm-a,1.3deg) * -1);animation-timing-function:cubic-bezier(.33,0,.66,.33)}
  100%{rotate:0deg}}

/* ---- dress code: three knitted swatches pegged on a thread (the thread draws, the swatches rise in and sway); the
   words on a soft stitched card ---- */
body.sc-moon_mobile #dress_code>.sc-p-dress_code{width:min(70vw,270px);margin:-20px auto 6px}
body.sc-moon_mobile.es-studio-v2 :is(#dress_code,#gifts,#closing) .sa-text-section__body{position:relative;padding:22px 22px 20px;background:var(--cz-section-bg,#FFFDF9);border-radius:22px;
  outline:1.4px dashed rgba(143,179,209,.8);outline-offset:-8px;box-shadow:0 8px 0 rgba(143,179,209,.2);color:var(--cz-text,#3E4A61)!important}
body.sc-moon_mobile.es-studio-v2 #closing .sa-text-section__body{background:transparent;outline:0;box-shadow:none;padding:0}
.sc-js body.sc-moon_mobile :is(#dress_code,#gifts,#closing) .sa-text-section__body:not(.sc-in){opacity:0;transform:translateY(14px)}
.sc-js body.sc-moon_mobile :is(#dress_code,#gifts,#closing) .sa-text-section__body.sc-in{animation:sc-rise 700ms cubic-bezier(.23,1,.32,1) 250ms both}

/* ---- gifts: a felt balloon carries a tiny parcel up into view and bobs there; the words on a stitched card with a bow ---- */
body.sc-moon_mobile #gifts>.sc-p-gifts{width:min(64vw,250px);margin:-20px auto 6px}
.sc-js .sc-piece.sc-moon_mobile:not(.sc-in) .sc-mm-float{opacity:0;transform:translateY(46px)}
.sc-js .sc-piece.sc-moon_mobile.sc-in .sc-mm-float{animation:sc-mm-float 1.4s cubic-bezier(.22,1,.36,1) var(--t,0ms) both}
@keyframes sc-mm-float{from{opacity:0;transform:translateY(46px)}35%{opacity:1}to{opacity:1;transform:none}}
body.sc-moon_mobile #gifts .sa-text-section__body{margin-top:26px!important}
body.sc-moon_mobile #gifts .sa-text-section__body::before{content:"";position:absolute;left:50%;top:-14px;width:52px;height:26px;margin-left:-26px;max-width:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cpath d='M30 15C20 2 6 4 8 13C10 22 22 20 30 15ZM30 15C40 2 54 4 52 13C50 22 38 20 30 15Z' fill='%23F4D6D6'/%3E%3Cpath d='M28 16L20 29H25L30 20L35 29H40L32 16Z' fill='%23E2B3B3'/%3E%3Ccircle cx='30' cy='15' r='4.5' fill='%23E2B3B3'/%3E%3C/svg%3E") 50% 50%/100% 100% no-repeat}

/* ---- rsvp: a stitched cloud with a star swinging below it on a thread; the form is a soft cloud card (scalloped top,
   stitched edge); on a "yes" a felt star pops above the button (moon_mobile.js; never on "no", never when the form
   does not submit) ---- */
body.sc-moon_mobile #rsvp>.sc-p-rsvp{width:min(60vw,240px);margin:-20px auto 4px}
body.sc-moon_mobile.es-studio-v2 #rsvp form{overflow:visible;margin-top:22px;border:0;border-radius:0 0 26px 26px;background:var(--cz-section-bg,#FFFDF9)!important;
  outline:1.5px dashed rgba(143,179,209,.8);outline-offset:-10px;box-shadow:0 10px 0 -2px rgba(143,179,209,.2)}
body.sc-moon_mobile #rsvp form::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:20px;max-width:none;
  background:var(--mm-cz-fill,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 24'%3E%3Cpath d='M0 24V16C0 8 6 2 12 8C16 0 28 0 34 8C38 0 50 0 56 8C60 0 72 0 78 8C86 2 96 8 96 16V24Z' fill='%23FFFDF9'/%3E%3C/svg%3E") 0 100%/80px 20px repeat-x);-webkit-mask:var(--mm-cz-top,none);mask:var(--mm-cz-top,none);pointer-events:none}
body.sc-moon_mobile #rsvp form :is(input[type=radio],input[type=checkbox]){accent-color:#8FB3D1}
/* keyboard focus stays clearly visible on the card: the ink colour (>= 7:1), not the pale accent */
body.sc-moon_mobile.es-studio-v2 #rsvp form :is(input,textarea,select,button):focus-visible{outline:2px solid var(--mm-ring,var(--cz-text,#3E4A61));outline-offset:2px}
body.sc-moon_mobile.es-studio-v2 #rsvp button[type=submit]{border:0;border-radius:999px;box-shadow:0 5px 0 rgba(143,179,209,.35)}
.sc-js body.sc-moon_mobile #rsvp form>:not(.sc-in):not([type=hidden]){opacity:0;transform:translateY(10px)}
.sc-js body.sc-moon_mobile #rsvp form>.sc-in:not([type=hidden]){animation:sc-rise 520ms cubic-bezier(.23,1,.32,1) both}
/* the "yes" star (placed by moon_mobile.js above the button): pops, glows, then settles away */
body.sc-moon_mobile #rsvp>.sc-mm-star{position:absolute;z-index:20;width:74px;height:74px;margin:-37px 0 0 -37px;max-width:none;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 104'%3E%3Cpath d='M45.9 15.8Q50 8 54.1 15.8L61.6 30Q63.4 33.5 67.4 34.2L83.2 36.9Q91.8 38.4 85.7 44.7L74.5 56.2Q71.8 59.1 72.3 63L74.6 78.9Q75.9 87.6 68 83.7L53.6 76.6Q50 74.9 46.4 76.6L32 83.7Q24.1 87.6 25.4 78.9L27.7 63Q28.2 59.1 25.5 56.2L14.3 44.7Q8.2 38.4 16.8 36.9L32.6 34.2Q36.6 33.5 38.4 30Z' transform='translate(4 6)' fill='%233E4A61' fill-opacity='0.1'/%3E%3Cpath d='M45.9 15.8Q50 8 54.1 15.8L61.6 30Q63.4 33.5 67.4 34.2L83.2 36.9Q91.8 38.4 85.7 44.7L74.5 56.2Q71.8 59.1 72.3 63L74.6 78.9Q75.9 87.6 68 83.7L53.6 76.6Q50 74.9 46.4 76.6L32 83.7Q24.1 87.6 25.4 78.9L27.7 63Q28.2 59.1 25.5 56.2L14.3 44.7Q8.2 38.4 16.8 36.9L32.6 34.2Q36.6 33.5 38.4 30Z' fill='%23E6C47C'/%3E%3Cpath d='M47 23.8Q50 17.7 53 23.8L58.7 35.3Q60.1 38.1 63.1 38.6L75.8 40.4Q82.6 41.4 77.7 46.2L68.5 55.1Q66.3 57.3 66.8 60.3L69 73Q70.2 79.8 64.1 76.6L52.7 70.6Q50 69.2 47.3 70.6L35.9 76.6Q29.8 79.8 31 73L33.2 60.3Q33.7 57.3 31.5 55.1L22.3 46.2Q17.4 41.4 24.2 40.4L36.9 38.6Q39.9 38.1 41.3 35.3Z' fill='none' stroke='%23B8914A' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.55' stroke-dasharray='3.5 4'/%3E%3C/svg%3E") 50% 50%/100% 100% no-repeat;animation:sc-mm-starpop 1.6s cubic-bezier(.23,1,.32,1) both}
@keyframes sc-mm-starpop{0%{opacity:0;transform:scale(.2) rotate(-30deg)}22%{opacity:1;transform:scale(1.18) rotate(6deg)}38%{transform:scale(1) rotate(0)}
  80%{opacity:1;transform:translateY(-10px)}100%{opacity:0;transform:translateY(-22px) scale(.9)}}
body.sc-moon_mobile #rsvp>.sc-mm-star i{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;background:#D9B56C;max-width:none;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:sc-mm-spark 900ms cubic-bezier(.23,1,.32,1) 180ms both}
@keyframes sc-mm-spark{from{opacity:0;transform:none}30%{opacity:1}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}}

/* ---- closing: the moon settles in under a stitched cloud blanket; the stars round it breathe slowly ---- */
body.sc-moon_mobile #closing>.sc-p-closing{width:min(72vw,290px);margin:-10px auto 16px}
.sc-js body.sc-moon_mobile #closing .sa-closing-sign:not(.sc-in){opacity:0;transform:translateY(12px)}
.sc-js body.sc-moon_mobile #closing .sa-closing-sign.sc-in{animation:sc-rise 800ms cubic-bezier(.23,1,.32,1) 400ms both}