/* ============================================================
   1. INK & PAPER   (sampled from the reference posters)
   ============================================================ */
:root{
  --paper:#F9F1EA;        /* warm, faintly pink stock */
  --paper-2:#FFFAF6;
  --ink:#4A4438;
  --ink-soft:#6B6555;
  --rose:#9E4F59;         /* pink dark enough to read */
  --btn:#F0919F;          /* Mia's pink, on every button */
  --btn-ink:#3B3630;      /* 5.3:1 on the button pink   */
  --pink:#F0919F;         /* Mia                      */
  --pink-mid:#F0AEB5;
  --pink-soft:#F8DADC;    /* fills, tiles             */
  --blue:#2E54A6;         /* only inside the artwork  */
  --blue-soft:#9DB2DE;
  --tomato:#E0472B;
  --leaf:#6BA05A;
  --yellow:#F7D774;
  --rule:#EADFD5;

  --gap:clamp(16px,3.4vw,26px);
  --measure:min(600px,100%);
}

/* ============================================================
   2. BASE
   ============================================================ */
@font-face{font-family:'Sans';src:url(assets/sans.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Sans';src:url(assets/sansb.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Script';src:url(assets/script.woff2) format('woff2');font-weight:400;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:'Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow:hidden;overscroll-behavior:none;
}
body.scrollable{overflow:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* paper grain */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.55;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

/* ============================================================
   3. SCREENS  (one visible at a time)
   ============================================================ */
.screen{
  position:fixed;inset:0;display:grid;place-items:center;
  padding:max(24px,env(safe-area-inset-top)) 22px max(24px,env(safe-area-inset-bottom));
  opacity:0;pointer-events:none;visibility:hidden;z-index:1;
  transition:opacity .7s cubic-bezier(.4,0,.2,1),visibility 0s linear .7s;
}
.screen.on{
  opacity:1;pointer-events:auto;visibility:visible;z-index:2;
  transition:opacity .7s cubic-bezier(.4,0,.2,1),visibility 0s;
}
#invite,#ask{overflow-y:auto;align-content:safe center;justify-items:center}
@supports not (align-content:safe center){#invite,#ask{align-content:start}}
.wrap{width:var(--measure);text-align:center}
#invite .wrap{width:min(660px,100%)}
.wrap.wide{width:min(720px,100%)}

/* ============================================================
   4. TYPE
   ============================================================ */
.eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--rose);margin:0 0 var(--gap);
}
.display{
  font-weight:600;font-size:clamp(34px,8.6vw,58px);line-height:1.02;
  letter-spacing:-.03em;margin:0;white-space:pre-line;
}
.display.big{font-size:clamp(30px,7.4vw,50px);margin:0 0 clamp(20px,4vh,34px)}
.script{
  font-family:'Script',cursive;font-size:clamp(26px,6vw,38px);line-height:1;
  color:var(--blue);margin:0 0 2px;overflow-wrap:anywhere;
}
.lede{font-size:clamp(14px,3.4vw,16px);color:#5C5A4C;margin:calc(var(--gap) * .7) 0 var(--gap)}
.lede.small{font-size:14px;margin:0 0 34px}
.body{font-size:15px;color:#5C5A4C;margin:0 0 16px}
.tiny{font-size:12.5px;line-height:1.5;color:#65624F;margin:8px 0 0}
.tiny.err{color:var(--rose);min-height:18px}

/* ============================================================
   5. INPUT  (one hand-drawn rule, nothing else)
   ============================================================ */
.field{position:relative;display:block;width:min(340px,100%);margin:0 auto var(--gap)}
.field.small{width:min(300px,100%);margin:0 auto}
.field input{
  width:100%;display:block;background:none;border:0;outline:0;color:var(--ink);
  font-family:'Sans',sans-serif;font-weight:600;font-size:clamp(22px,5.4vw,28px);
  letter-spacing:-.02em;text-align:center;padding:2px 4px 10px;
}
.field.small input{font-size:18px;font-weight:400;letter-spacing:0}
.field input::placeholder{color:#B9B4A0;font-weight:400}
.field input:focus-visible{outline:none}
.rule{display:block;width:100%;height:8px;overflow:visible}
.rule path{
  fill:none;stroke:var(--rose);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:340;stroke-dashoffset:340;animation:draw 1s .5s cubic-bezier(.6,0,.3,1) forwards;
}
.field:focus-within .rule path{stroke:var(--btn);stroke-width:4}
.hint{display:block;min-height:18px;margin-top:10px;font-size:12.5px;color:var(--rose);opacity:0;transition:opacity .25s}
.hint.show{opacity:1}
.field.nudge{animation:nudge .4s ease}

/* ============================================================
   6. BUTTONS & LINKS
   ============================================================ */
.btn{
  font-family:'Sans',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--btn-ink);background:var(--btn);border:0;border-radius:999px;
  padding:15px 38px;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.3),background .25s;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{transform:translateY(-2px);background:#E87C8D}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn:focus-visible,.pick:focus-visible,.chip:focus-visible,
.outlink:focus-visible,.link:focus-visible,#skip:focus-visible{
  outline:2px solid var(--blue);outline-offset:4px
}

.choice{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.pick{
  font-family:'Sans',sans-serif;font-size:14px;font-weight:600;color:var(--ink);
  background:none;border:2px solid var(--rule);border-radius:999px;
  padding:15px 22px;cursor:pointer;transition:all .22s;
  -webkit-tap-highlight-color:transparent;
}
.pick:hover{border-color:var(--ink)}
.pick[aria-pressed="true"]{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
#no[aria-pressed="true"]{background:var(--blue-deep);border-color:var(--blue-deep)}

.chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.chip{
  font-family:'Sans',sans-serif;font-size:14px;color:var(--ink);
  background:none;border:2px solid var(--rule);border-radius:999px;
  width:46px;height:46px;cursor:pointer;transition:all .22s;
  -webkit-tap-highlight-color:transparent;
}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}

.outlink{
  display:inline-block;font-size:13px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  border:2px solid var(--ink);border-radius:999px;padding:12px 26px;transition:all .22s;
}
.outlink:hover{background:var(--ink);color:var(--paper-2)}
.link{
  font-size:13px;color:#5C5A4C;background:none;border:0;cursor:pointer;
  border-bottom:1.5px solid var(--rule);padding:2px 1px 4px;text-decoration:none;transition:all .22s;
}
.link:hover{color:var(--rose);border-color:var(--rose)}
.actions{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin:28px 0 0}

/* ============================================================
   7. THE STORY
   ============================================================ */
#story{padding:0}
#scene{width:100%;height:100%;display:block}
.ln{fill:none;stroke:var(--blue-soft);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.ln.thin{stroke-width:5}
#sunDisc{fill:var(--yellow)}
#rays line{stroke:var(--yellow);stroke-width:7;stroke-linecap:round}
#rays{transform-box:view-box;transform-origin:0 0;animation:spin 48s linear infinite}
#sun{opacity:0}
.fill-pink{fill:var(--pink)}
.heart{fill:var(--pink);opacity:0}
#hearts{opacity:0}
@keyframes spin{to{transform:rotate(360deg)}}
.fill-tom{fill:var(--tomato)}
.fill-blue{fill:var(--blue-soft)}
.fill-tom{fill:var(--tomato)}
.fill-pink{fill:var(--pink)}
.fill-leaf{fill:var(--leaf)}
.shine{fill:var(--paper-2);opacity:.34}
.sm{opacity:.9}
.string{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;opacity:.5}

#balA,#balB,#balC,#bunting,#confetti{opacity:0}
.float ellipse,.float text{transform-box:fill-box;transform-origin:center}
#buntLine{stroke:var(--ink);stroke-width:3;opacity:.55}
.flag{transform-box:fill-box;transform-origin:top center}
.conf{opacity:0}
.env{fill:var(--paper-2);stroke:var(--blue-soft);stroke-width:6;stroke-linejoin:round}
.env-line{fill:none;stroke:var(--blue-soft);stroke-width:5;stroke-linejoin:round;stroke-linecap:round}
#post{opacity:0}
.red-fill{fill:var(--blue)}
.red-fold{fill:none;stroke:var(--blue);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;opacity:.5}
#trail{fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round;stroke-dasharray:5 13;opacity:.65}
.draw{stroke-dasharray:1;stroke-dashoffset:1}


#beat{
  position:absolute;left:50%;transform:translateX(-50%);
  top:clamp(26px,7vh,64px);width:min(90vw,640px);text-align:center;margin:0;
  font-size:clamp(12px,3vw,14px);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);pointer-events:none;
}
#beat span{display:inline-block;opacity:0}
#beat span.in{animation:beatIn .6s cubic-bezier(.2,.8,.3,1) forwards}
#beat span.out{animation:beatOut .4s ease forwards}
#skip{
  position:absolute;right:max(18px,env(safe-area-inset-right));
  bottom:max(18px,env(safe-area-inset-bottom));
  background:none;border:0;cursor:pointer;padding:12px 14px;
  font-family:'Sans',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:#65624F;transition:color .2s;
}
#skip:hover{color:var(--rose)}

/* ============================================================
   8. THE INVITATION  (the original artwork, addressed to the guest)
   ============================================================ */
.stamp{
  margin:0 auto;width:min(640px,100%);
  container-type:inline-size;
}
#cardTilt{position:relative;transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.8,.3,1);will-change:transform}
#card{
  display:block;width:100%;height:auto;
  max-height:min(54vh,520px);object-fit:contain;
  filter:drop-shadow(0 16px 30px rgba(74,68,56,.16));
}
/* handwritten, in the empty corner of the stamp */
.addressed{
  position:absolute;left:13%;top:68%;
  font-family:'Script',cursive;color:var(--rose);
  font-size:clamp(22px,7.6cqw,48px);line-height:1;
  transform:rotate(-3deg);transform-origin:left center;
  white-space:nowrap;pointer-events:none;
  opacity:0;
}
#cardRise.in .addressed{
  opacity:1;transition:opacity .7s ease .75s,transform .7s cubic-bezier(.2,.9,.3,1) .75s;
  transform:rotate(-3deg) translateY(0);
}
.hosts{
  font-size:clamp(12px,3vw,14.5px);font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink);margin:var(--gap) 0 10px;
}
.details{margin:0 0 var(--gap)}
.det-when{
  font-family:'Script',cursive;font-size:clamp(26px,6.4vw,38px);line-height:1.05;
  color:var(--rose);margin:0 0 2px;
}
.det-where{font-size:clamp(14px,3.6vw,17px);color:var(--ink);margin:0}
.det-where a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--pink-soft)}
.det-where a:hover{color:var(--rose);border-color:var(--rose)}
.sep{display:inline-block;width:4px;height:4px;border-radius:50%;
  background:var(--pink);margin:0 10px;vertical-align:.22em}

/* ============================================================
   9. TWO SMALL THINGS  (side by side, no scrolling)
   ============================================================ */
.wrap.widest{width:min(840px,100%)}
.display.mid{font-size:clamp(26px,6.4vw,40px);margin:0 0 clamp(20px,4vh,34px)}

.tiles{
  display:grid;gap:clamp(12px,2.4vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(262px,1fr));
  align-items:start;text-align:left;
}
.tile{
  position:relative;background:var(--paper-2);border-radius:14px;
  padding:clamp(24px,3.8vw,34px) clamp(20px,3.2vw,30px) clamp(26px,3.8vw,34px);
  box-shadow:0 8px 22px rgba(74,68,56,.08);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.85,.3,1),box-shadow .3s;
}
.tile h3{
  font-size:clamp(17px,3.6vw,20px);font-weight:600;letter-spacing:-.01em;
  margin:0 0 16px;color:var(--ink);
}
.tile-n{
  position:absolute;top:18px;right:18px;
  width:22px;height:22px;border-radius:50%;
  background:var(--pink-mid);color:var(--paper-2);
  font-size:11px;font-weight:600;display:grid;place-items:center;
}
.tile.locked{opacity:.32;transform:scale(.985);pointer-events:none}
.tile.locked .tile-n{background:var(--rule)}

.choice{display:flex;gap:10px;flex-wrap:wrap}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.follow{margin-top:18px;animation:riseIn .5s ease both}
.follow[hidden]{display:none}
#send{margin-top:clamp(22px,4vh,32px)}

/* ============================================================
   10. DONE
   ============================================================ */
.tick{width:64px;height:auto;margin:0 auto 24px;display:block;overflow:visible}
.tick path{
  fill:none;stroke:var(--blue);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:120;stroke-dashoffset:120;animation:draw .8s .2s cubic-bezier(.6,0,.3,1) forwards;
}

/* ============================================================
   11. MOTION
   ============================================================ */
.rise{opacity:0;transform:translateY(24px)}
.rise.in{opacity:1;transform:none;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.85,.28,1)}
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}
  50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
@keyframes beatIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes beatOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-10px)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;
    animation-iteration-count:1 !important}
  .rise{opacity:1;transform:none}
  .rule path,.tick path{stroke-dashoffset:0}
  .hand{opacity:1}
}

/* ============================================================
   12. THE KEEPSAKE  (their invitation, savable to Photos)
   ============================================================ */
.keepsake{margin:clamp(20px,4vh,32px) 0 0;text-align:center;position:relative}
.keepsake[hidden]{display:none}
.keepsake img{
  display:block;width:min(360px,84%);height:auto;margin:0 auto 10px;
  border-radius:3px;filter:drop-shadow(0 14px 26px rgba(74,68,56,.16));
  opacity:0;transform:translateY(16px) scale(.97);
}
.keepsake img.in{
  opacity:1;transform:none;
  transition:opacity .9s ease,transform .9s cubic-bezier(.2,.85,.28,1);
}
.heart-btn{
  display:grid;place-items:center;margin:0 auto 8px;
  width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;
  background:var(--pink-soft);
  transition:transform .25s cubic-bezier(.2,.9,.3,1.4),background .25s;
  -webkit-tap-highlight-color:transparent;
}
.heart-btn svg{width:26px;height:26px;fill:var(--rose);transition:transform .25s}
.heart-btn:hover{background:var(--pink-mid)}
.heart-btn:hover svg{transform:scale(1.12)}
.heart-btn:active{transform:scale(.92)}
.heart-btn.saved{background:var(--btn)}
.heart-btn.saved svg{fill:var(--btn-ink);animation:thump .6s ease}
.heart-btn:focus-visible{outline:2px solid var(--rose);outline-offset:4px}
@keyframes thump{0%,100%{transform:scale(1)}30%{transform:scale(1.35)}60%{transform:scale(.9)}}

.sleeps{
  font-family:'Script',cursive;font-size:clamp(24px,6vw,36px);
  color:var(--rose);margin:2px 0 var(--gap);
}
.bighearts{display:block;width:min(240px,62%);height:auto;margin:0 auto 10px;overflow:visible}
.well{display:block;width:92px;height:auto;margin:0 0 14px}
.wl{fill:none;stroke:var(--rose);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}


/* ============================================================
   13. PRELUDE, RSVP IN LINE, WISHING WELL, THE SORRY SCREEN
   ============================================================ */
.prelude{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:.34;pointer-events:none;z-index:0;
}
#gate .wrap{position:relative;z-index:1}
.pre-float{transform-box:view-box;transform-origin:0 0}
#preA{animation:drift 9s ease-in-out infinite}
#preB{animation:drift 11s ease-in-out infinite reverse}
@keyframes drift{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-16px) rotate(1.6deg)}}
.fill-yellow{fill:var(--yellow)}

/* the invitation now carries the question */
#invite{align-content:start}
#invite .wrap{padding:clamp(20px,5vh,46px) 0 60px}
.det-when{font-size:clamp(30px,7.6vw,46px)}
.det-where{font-size:clamp(15px,4vw,19px)}
.hosts{font-size:clamp(12.5px,3.2vw,15px)}
.rsvp{
  margin-top:clamp(30px,6vh,52px);padding-top:clamp(24px,5vh,38px);
  border-top:2px solid var(--pink-soft);
}
.ask-q{
  font-family:'Script',cursive;font-weight:400;
  font-size:clamp(30px,7.4vw,44px);color:var(--rose);margin:0 0 18px;
}
#invite .choice{justify-content:center}
#invite .chips{justify-content:center;margin:0 0 6px}
#invite .field.small{margin:14px auto 0}
#phoneWhy{margin:8px 0 20px}
#invite .field.small input{text-align:center}

/* wishing well */
.wishart{display:block;width:min(320px,80%);height:auto;margin:0 auto 18px;overflow:visible}
#wishRays line{stroke:var(--yellow);stroke-width:4;stroke-linecap:round}
#wishRays{transform-box:view-box;transform-origin:0 0;animation:spin 40s linear infinite}
.coin{fill:var(--pink);opacity:0}
.script.big{
  font-family:'Script',cursive;font-size:clamp(32px,8.4vw,52px);line-height:1;
  color:var(--rose);margin:0 0 8px;overflow-wrap:anywhere;
}
.wide-body{max-width:34em;margin-left:auto;margin-right:auto}
.actions.stacked{flex-direction:column;align-items:center;gap:14px}
#wish .btn{text-decoration:none;display:inline-block}

/* the sms nudge */
.sms{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:13px;color:var(--ink-soft);margin:18px 0 0;
}
.sms-ic{width:30px;height:26px;flex:0 0 30px}
.sms-ic .bub{fill:none;stroke:var(--rose);stroke-width:2.4;stroke-linejoin:round}
.sms-ic .dt{fill:var(--rose)}
.sms-ic .d1{animation:blip 1.5s ease-in-out infinite}
.sms-ic .d2{animation:blip 1.5s ease-in-out .2s infinite}
.sms-ic .d3{animation:blip 1.5s ease-in-out .4s infinite}
@keyframes blip{0%,60%,100%{opacity:.3}30%{opacity:1}}

/* can't make it */
.sorryart{display:block;width:min(400px,92%);height:auto;margin:0 auto 20px;overflow:visible}
#sadRays line{stroke:var(--yellow);stroke-width:5;stroke-linecap:round;opacity:.75}
.popper .bal{transform-box:fill-box;transform-origin:center}
.popper .burst line{stroke-width:4;stroke-linecap:round;opacity:0}
#sorry .display{font-size:clamp(26px,6.4vw,40px)}

/* ============================================================
   14. GIVING, AND THE FIXES
   ============================================================ */

/* the guest count must actually disappear for a decline.
   .chips sets display:flex, which beats the UA rule for [hidden]. */
.chips[hidden],.choice[hidden],.actions[hidden],.sms[hidden],.give[hidden]{display:none !important}

/* save button that says what it does */
.heart-btn{
  width:auto;height:auto;border-radius:999px;
  padding:10px 20px 10px 14px;
  grid-auto-flow:column;align-items:center;gap:9px;
}
.heart-cta{
  font-family:'Sans',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--btn-ink);
}
.heart-btn.saved .heart-cta{color:var(--btn-ink)}

/* the sms line gets a heart */
.sms-heart{width:18px;height:17px;flex:0 0 18px;fill:var(--btn);
  animation:beatHeart 2.4s ease-in-out infinite}
@keyframes beatHeart{0%,100%{transform:scale(1)}18%{transform:scale(1.22)}36%{transform:scale(1)}54%{transform:scale(1.14)}}

/* an animated way to give */
.give{
  display:flex;align-items:center;gap:16px;text-decoration:none;
  width:min(360px,94%);margin:clamp(20px,4vh,30px) auto 0;
  padding:16px 22px;border-radius:18px;
  background:var(--paper-2);border:2px solid var(--pink-soft);
  transition:transform .28s cubic-bezier(.2,.9,.3,1.3),border-color .28s,box-shadow .28s;
  -webkit-tap-highlight-color:transparent;
}
.give:hover{transform:translateY(-3px);border-color:var(--btn);
  box-shadow:0 12px 24px rgba(74,68,56,.10)}
.give:focus-visible{outline:2px solid var(--rose);outline-offset:4px}
.give-art{width:52px;height:48px;flex:0 0 52px;overflow:visible}
.gw{fill:none;stroke:var(--rose);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.give-coin{fill:var(--yellow);stroke:var(--rose);stroke-width:2.4;
  transform-box:fill-box;transform-origin:center;
  animation:dropCoin 2.8s cubic-bezier(.45,0,.7,1) infinite}
@keyframes dropCoin{
  0%{transform:translateY(-10px) scale(.7);opacity:0}
  22%{transform:translateY(0) scale(1);opacity:1}
  56%{transform:translateY(17px) scale(1);opacity:1}
  70%,100%{transform:translateY(20px) scale(.6);opacity:0}
}
.give:hover .give-coin{animation-duration:1.4s}
.give-text{display:flex;flex-direction:column;gap:3px;text-align:left}
.give-label{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.give-sub{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}

/* the can't-make-it giving screen */
.giftart{display:block;width:min(300px,78%);height:auto;margin:0 auto 16px;overflow:visible}
#giftBal{transform-box:view-box;transform-origin:0 0;animation:drift 6s ease-in-out infinite}
#giftTag{transform-box:view-box;transform-origin:0 0;animation:swing 5s ease-in-out infinite}
@keyframes swing{0%,100%{transform:translate(150px,162px) rotate(-3deg)}
  50%{transform:translate(150px,162px) rotate(3deg)}}

/* ============================================================
   15. SCROLLING, COLOURED WORDS, EXTRA SPARKLE
   ============================================================ */

/* every screen scrolls. Only #invite used to, so the later
   screens clipped their content on short viewports. */
.screen{overflow-y:auto;overscroll-behavior:contain}
#story{overflow:hidden}
#wish,#gift,#sorry,#done{align-content:safe center;justify-items:center}
@supports not (align-content:safe center){
  #wish,#gift,#sorry,#done{align-content:start}
}
#wish .wrap,#gift .wrap,#done .wrap,#sorry .wrap{padding:clamp(18px,4vh,40px) 0 52px}

/* words worth colouring */
.hl{
  color:var(--rose);font-weight:600;
  background-image:linear-gradient(transparent 62%,var(--pink-soft) 62%);
  background-repeat:no-repeat;background-size:0% 100%;
  animation:swash .7s .35s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes swash{to{background-size:100% 100%}}

/* the little white heart in the headings */
.script.big,.display.mid{line-height:1.1}

/* hearts drifting over the wishing well */
.wish-heart{opacity:0}

/* a pop of confetti as the final screen lands */
.popper-burst{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(400px,96%);height:auto;pointer-events:none;overflow:visible;
}
#done .wrap{position:relative}
.pop-bit{opacity:0}

/* the choice buttons give a little bounce when picked */
.pick.picked{animation:pickPop .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes pickPop{0%{transform:scale(1)}40%{transform:scale(1.09)}100%{transform:scale(1)}}
.chip.picked{animation:pickPop .45s cubic-bezier(.3,1.6,.5,1)}

/* the giving button breathes */
.give{animation:breathe 5s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.give:hover{animation:none}

/* Screens that are not on stage should not burn frames animating. */
.screen:not(.on),
.screen:not(.on) *{animation-play-state:paused !important}