/* A softer editorial type system and motion language for the invitation. */
body, button, input { font-family: Georgia, 'Times New Roman', serif; }
.stage p, .stage-options p, .option-card, .day-card, .other-day, .calendar-wrap, .signature-hint { font-family: Georgia, 'Times New Roman', serif; }
.stage h1, .stage h2, .stage h3 { letter-spacing: -.035em; }
.stage-intro .lead { font-size: clamp(25px, 2.55vw, 37px); line-height: 1.3; color: #584464; }
.stage-lead p { color: #584464; }

/* The selected Lottie artwork floats gently while its drawn hearts open. */
.story-art { width: min(39vw, 555px); right: 5%; transform: translateY(-42%); }
.art-svg { display: none; }
.lottie-envelope { width: 100%; aspect-ratio: 1; animation: artworkFloat 6s ease-in-out infinite; filter: drop-shadow(0 17px 17px rgba(93, 57, 132, .11)); }
@keyframes artworkFloat { 50% { transform: translate3d(0,-20px,0) rotate(1.5deg); } }

/* Buttons have a passing highlight and tiny vector hearts on hover. */
.button-primary { position: relative; isolation: isolate; overflow: visible; font-weight: 600; letter-spacing: -.01em; transition: transform .55s cubic-bezier(.18,.8,.2,1), box-shadow .55s ease, background .45s ease, padding .5s ease, min-height .5s ease, font-size .5s ease, opacity .3s ease; }
.button-primary:before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: linear-gradient(115deg, transparent 22%, rgba(255,255,255,.36) 48%, transparent 72%); transform: translateX(-130%); opacity: 0; pointer-events: none; }
.button-primary:hover:not(:disabled) { transform: translate3d(0,-7px,0) rotate(-1deg); background: #ef4f75; box-shadow: 0 24px 38px rgba(210,72,111,.34), 0 0 0 7px rgba(255,255,255,.22); }
.button-primary:hover:not(:disabled):before { opacity: 1; animation: buttonGlint .8s ease-out forwards; }
.button-primary:active:not(:disabled) { transform: translate3d(0,-2px,0) rotate(0); }
@keyframes buttonGlint { to { transform: translateX(130%); } }
.hover-heart { position: absolute; width: 18px; height: 18px; z-index: 5; left: var(--heart-left); top: var(--heart-top); fill: #f2577b; stroke: #fff8f3; stroke-width: 1.5; pointer-events: none; animation: heartLift 1.45s cubic-bezier(.18,.74,.3,1) both; }
@keyframes heartLift { 0% { opacity: 0; transform: translate(0,10px) rotate(-15deg) scale(.3); } 24% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--heart-dx),var(--heart-dy)) rotate(var(--heart-rotation)) scale(1.1); } }
.stage-intro .button { min-width: 340px; }

/* The refusal runs along a curved route and leaves disappearing footprints. */
.answer-arena { height: 215px; overflow: visible; }
.button-no { z-index: 4; will-change: transform; font-weight: 600; transition: background .3s ease, box-shadow .3s ease; }
.button-no.is-running { background: #fffdf8; box-shadow: 0 13px 18px rgba(97,63,140,.14); }
.button-no.is-gone { opacity: 0; visibility: hidden; pointer-events: none; transform: none !important; }
.runner-legs { position: absolute; left: 33%; bottom: -19px; display: flex; gap: 23px; opacity: 0; transition: opacity .18s; }
.runner-legs i { width: 9px; height: 26px; background: #765385; border-radius: 2px 2px 8px 8px; transform-origin: top center; }
.is-running .runner-legs { opacity: 1; }
.is-running .runner-legs i:first-child { animation: legRun .22s ease-in-out infinite alternate; }
.is-running .runner-legs i:last-child { animation: legRun .22s ease-in-out infinite alternate-reverse; }
@keyframes legRun { from { transform: rotate(-38deg); } to { transform: rotate(46deg); } }
.footprint-trail { position: fixed; z-index: 3; width: 23px; height: 23px; opacity: 0; pointer-events: none; filter: invert(46%) sepia(16%) saturate(857%) hue-rotate(229deg); animation: printFade 1.15s ease-out both; }
@keyframes printFade { 0% { opacity: 0; transform: rotate(-25deg) scale(.4); } 22% { opacity: .68; transform: rotate(-25deg) scale(1); } 100% { opacity: 0; transform: rotate(-25deg) scale(.75); } }
.tease-message { display: none; }
.yes-button.has-eyes { min-height: 104px; padding-top: 38px; padding-left: 58px; padding-right: 58px; font-size: clamp(25px,2.4vw,34px); transform: none; }
.yes-button.has-eyes:hover { transform: translate3d(0,-7px,0) rotate(-1deg); }
.button-eyes { top: 8px; gap: 14px; }
.button-eyes i { width: 25px; height: 28px; background: #fffdf9; box-shadow: inset 0 -3px 2px rgba(253,207,224,.8), 0 2px 3px rgba(122,33,73,.25); }
.button-eyes i:after { width: 10px; height: 11px; top: var(--eye-y,11px); left: var(--eye-x,9px); background: #352440; box-shadow: inset 2px -2px 0 #5e4267; transition: top .11s ease-out,left .11s ease-out; }
.button-eyes i:before { content: ''; position: absolute; width: 3px; height: 3px; border-radius: 50%; background: white; left: calc(var(--eye-x,9px) + 2px); top: calc(var(--eye-y,11px) + 2px); z-index: 2; transition: top .11s ease-out,left .11s ease-out; }

/* Real vector icons from Lucide and a clearer card selection. */
.option-card, .day-card, .time-card { transition: transform .5s cubic-bezier(.2,.85,.23,1), background .45s ease, border-color .45s ease, box-shadow .45s ease; }
.option-card:hover, .day-card:hover, .time-card:hover { transform: translate3d(0,-6px,0) rotate(-.4deg); box-shadow: 0 15px 23px rgba(97,63,140,.13); }
.option-card[aria-pressed=true] { transform: translate3d(0,-4px,0); background: #ffe9f0; border-color: #f56683; box-shadow: 0 12px 28px rgba(241,101,131,.2); }
.option-icon { width: 35px; height: 35px; object-fit: contain; filter: invert(34%) sepia(20%) saturate(1081%) hue-rotate(236deg); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.option-card[aria-pressed=true] .option-icon { transform: rotate(-10deg) scale(1.12); }
.option-check { display: none; }

/* Custom month view appears below a full-size alternate-day button. */
.other-day { display: inline-flex; align-items: center; justify-content: center; min-height: 57px; padding: 10px 23px; margin-top: 6px; border-radius: 999px; border: 2px solid #d6b6e6; background: #fffaf7; color: #704c7f; font-size: 19px; text-decoration: none; box-shadow: 0 7px 16px rgba(96,61,130,.08); transition: transform .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease; }
.other-day:hover, .other-day[aria-expanded=true], .other-day.is-selected { transform: translateY(-3px); background: #fff0f5; border-color: #f56683; box-shadow: 0 13px 23px rgba(210,72,111,.13); }
#dayNext { display: flex; margin-left: auto; margin-top: 25px; }
.calendar-wrap { display: block; width: min(100%,390px); padding: 19px; margin: 15px 0 0; background: #fffdf9; border: 2px solid #ead8ee; border-radius: 23px; box-shadow: 0 19px 30px rgba(87,53,112,.11); animation: calendarEnter .38s cubic-bezier(.2,.8,.2,1) both; }
@keyframes calendarEnter { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.calendar-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; color: #392540; font-size: 19px; }
.calendar-head button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f4e7f7; color: #6c467c; font-size: 27px; line-height: 1; transition: background .25s ease,transform .25s ease; }
.calendar-head button:hover:not(:disabled) { background: #f8d9e4; transform: translateY(-2px); }
.calendar-head button:disabled { opacity: .3; cursor: default; }
.calendar-weekdays,.calendar-days { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; text-align: center; }
.calendar-weekdays { margin-bottom: 8px; font-size: 14px; color: #977c9f; }
.calendar-days button,.calendar-days span { height: 39px; display: grid; place-items: center; }
.calendar-days button { border: 0; background: transparent; border-radius: 50%; color: #49344f; font-size: 17px; transition: background .25s ease,color .25s ease,transform .25s ease; }
.calendar-days button:hover:not(:disabled) { background: #f7e2ec; transform: translateY(-2px); }
.calendar-days button[aria-pressed=true] { background: #f56683; color: #fff; }
.calendar-days button:disabled { opacity: .25; cursor: default; }

/* The seal uses a transparent wax texture and lands over the photo edge. */
.stage-final { width: min(1180px,100%); }
.stage-final .stage-inner { grid-template-columns: minmax(260px,34%) minmax(0,1fr); gap: clamp(36px,5vw,75px); }
.photo-wrap { max-width: 315px; }
.wax-stamp { width: 154px; height: 154px; right: -55px; bottom: -32px; top: auto; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 16px; font-family: Georgia,serif; font-weight: 700; letter-spacing: .06em; filter: drop-shadow(0 7px 5px rgba(105,17,27,.24)); }
.wax-stamp:after { content: ''; position: absolute; inset: -11px; border: 2px solid rgba(158,40,59,.28); border-radius: 50%; opacity: 0; transform: scale(.7); }
.stage-final.is-active .wax-stamp:after { animation: impactRing .65s 1.65s ease-out forwards; }
@keyframes impactRing { 20% { opacity: .72; } 100% { opacity: 0; transform: scale(1.34); } }
.wax-stamp img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wax-stamp span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(9deg); color: #fff3e0; text-shadow: 0 1px 2px #781021; }
.signature-box { width: 100%; max-width: 570px; height: 160px; background: #fff9fc; }
.signature-hint { top: 42%; font-size: 19px; }
.stage-final .button { min-width: 260px; }
.accepted-heart { font-size: 43px; }

@media(max-width:900px) { .story-art { width: min(76vw,520px); right: -6%; } .stage-final .stage-inner { grid-template-columns: minmax(180px,31%) 1fr; } }
@media(max-width:650px) {
  .story-art { width: min(82vw,340px); right: 5%; bottom: 7%; top: auto; transform: none; }
  .stage-intro .lead { font-size: 21px; }
  .stage-intro .button { min-width: 0; }
  .button-primary:hover:not(:disabled) { transform: translateY(-4px); }
  .answer-arena { height: 175px; }
  .yes-button.has-eyes { min-height: 90px; padding: 34px 28px 12px; font-size: 23px; }
  .stage-final .stage-inner { grid-template-columns: 1fr; }
  .wax-stamp { width: 104px; height: 104px; right: -39px; bottom: -26px; font-size: 11px; }
  .signature-box { height: 145px; }
  .signature-hint { font-size: 14px; }
  #dayNext { width: 100%; }
  .day-card strong { font-size: 15px; }
}
@media(prefers-reduced-motion:reduce) { .lottie-envelope { animation: none; } .footprint-trail { display: none; } .wax-stamp:after { display: none; } }