@font-face{font-family:InviteHand;src:url('assets/hand.ttf') format('truetype');font-display:swap}
*{box-sizing:border-box}
html{background:#ece5d8;overscroll-behavior-y:none}
body{margin:0;color:#2c3d63;background:#ece5d8}
canvas,img{display:block}
.invitation{position:relative}
.paper-stage{position:relative;width:100%;background:#ece5d8}
#story{display:none;width:100%;height:100%}
.static-invitation{display:flex;flex-direction:column;align-items:center;gap:clamp(24px,5vw,56px);padding:clamp(16px,5vw,56px) 16px}
.static-invitation img{max-width:100%;width:min(100%,560px);height:auto;box-shadow:0 14px 34px rgba(60,46,30,.16)}
.scroll-note,.prelude{display:none}
.preparing .static-invitation{display:none}
.preparing .paper-stage{height:100svh}
.preparing .prelude{display:block;position:absolute;top:28%;left:0;right:0;text-align:center;font-family:InviteHand,cursive;font-size:clamp(34px,5vw,60px);line-height:1.1}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.animated .invitation{height:900svh}
.animated .paper-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.animated #story{display:block}
.animated .static-invitation{display:none}
.animated .scroll-note{position:absolute;display:flex;align-items:center;gap:13px;bottom:26px;left:50%;transform:translateX(-50%);margin:0;color:#526583;pointer-events:none;white-space:nowrap}
.scroll-note span{font-family:InviteHand,cursive;font-size:20px}
.scroll-note .again,.scroll-note.later .first{display:none}.scroll-note.later .again{display:inline}
.scroll-note.later{transition:opacity .8s ease,color .4s ease,background-color .4s ease;padding:4px 14px 4px 16px;border-radius:999px;background:rgba(236,229,216,.88)}.scroll-note.on-night{color:#e8dcc0;background:rgba(31,46,70,.75)}
@media(max-width:650px){.animated .invitation{height:820svh}.scroll-note span{font-size:19px}}
@media(prefers-reduced-motion:reduce){.animated .invitation{height:auto}.animated .paper-stage{position:relative;height:auto;overflow:visible}.animated #story,.animated .scroll-note{display:none}.animated .static-invitation{display:flex}}