@font-face { font-family: Fraunces; src: url(fonts/fraunces.woff2) format("woff2"); font-weight: 300 600; font-display: swap; }
@font-face { font-family: Fraunces; src: url(fonts/fraunces-ext.woff2) format("woff2"); font-weight: 300 600; font-display: swap; unicode-range: U+0100-024F; }
@font-face { font-family: "Great Vibes"; src: url(fonts/greatvibes.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url(fonts/worksans.woff2) format("woff2"); font-weight: 300 600; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url(fonts/worksans-ext.woff2) format("woff2"); font-weight: 300 600; font-display: swap; unicode-range: U+0100-024F; }

:root {
  --linden: #3E4A2E;
  --dusk: #20271A;
  --sand: #F5EFE1;
  --blush: #EBD2C8;
  --line: #DCD2BC;
  --error: #8A3B22;
  --stage-h: max(100vh, 600px);
}
@supports (height: 100svh) { :root { --stage-h: max(100svh, 600px); } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--dusk); color: var(--linden); font: 400 1rem/1.6 "Work Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, p, fieldset, legend { margin: 0; padding: 0; border: 0; }
button, input { font: inherit; color: inherit; }

/* The scene */
.stage { --frame-h: max(var(--stage-h), calc(min(100vw, var(--stage-h) * .64) / .5581)); position: relative; height: var(--stage-h); width: min(100%, calc(var(--stage-h) * .64)); margin: 0 auto; overflow: hidden; background: var(--dusk); color: var(--sand); text-align: center; }
.frame { position: absolute; left: 50%; top: 50%; width: max(100%, calc(var(--stage-h) * .5581)); aspect-ratio: 1536 / 2752; transform: translate(-50%, -50%); }
.art, .strings, .bulbs { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.strings path { fill: none; stroke: #12160C; stroke-width: 2.6; opacity: .85; }

.b { position: absolute; width: 8.4%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.b::before { content: ""; position: absolute; left: 50%; top: 50%; width: 13%; height: 13%; border-radius: 50%; background: #6A6D58; transform: translate(-50%, -50%); }
.b i { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle, #FFFBF1 0 7%, #F5EFE1 11%, rgba(235,210,200,.55) 20%, rgba(235,210,200,.2) 40%, rgba(235,210,200,0) 68%); will-change: opacity; }

.scrim { position: absolute; inset: 0; background: #141A0E; opacity: 0; pointer-events: none; }
.js .scrim { opacity: .8; transition: opacity 2.2s ease .1s; }
.is-lit .scrim, .js .is-lit .scrim { opacity: .16; }

.prompt { display: none; position: absolute; left: 50%; top: 50%; width: min(78%, 20rem); transform: translate(-50%, -50%); background: none; border: 0; padding: 1rem; color: var(--sand); font: 400 1.35rem/1.35 Fraunces, Georgia, serif; font-variation-settings: "opsz" 36; cursor: pointer; transition: opacity .5s ease; animation: breathe 3.4s ease-in-out infinite; }
.js .prompt { display: block; }
.is-lit .prompt { opacity: 0; visibility: hidden; pointer-events: none; animation: none; transition: opacity .5s ease, visibility 0s linear .5s; }
.js .is-dark { cursor: pointer; }

.reveal { position: absolute; left: 0; right: 0; top: 41%; padding: 0 1.5rem; text-shadow: 0 1px 14px rgba(20,26,14,.55); }
/* Sits in the gap between the first two strings: --std-y is a fraction of the forest image's height,
   and the size follows the image width, so it clears the bulbs on every screen. */
.std { --std-y: .245; position: absolute; left: 50%; top: calc(50% + (var(--std-y) - .5) * var(--frame-h)); z-index: 1; margin: 0; padding: .12em .15em .1em; white-space: nowrap; color: var(--sand); font: 600 min(calc(var(--frame-h) * .5581 * .095), 10.8vw)/1.1 Fraunces, Georgia, serif; font-variation-settings: "opsz" 72; letter-spacing: .035em; text-transform: uppercase; text-shadow: 0 0 2px rgba(20,26,14,.55), 0 2px 12px rgba(20,26,14,.8), 0 0 28px rgba(235,210,200,.4); transform: translate(-50%, -50%); }
.std::before { content: ""; position: absolute; inset: -20% -10%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(20,26,14,.6), rgba(20,26,14,.35) 55%, rgba(20,26,14,0)); }
.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.reveal > * { transition: opacity 1.2s ease, transform 1.2s ease; }
.js .is-dark .reveal > * { opacity: 0; transform: translateY(10px); }
.js .is-dark .std { opacity: 0; }
/* First tap only: the heading pops in as the fireworks start. */
.is-lit:not(.is-instant) .std { animation: pop 1s cubic-bezier(.18, 1.35, .4, 1) .95s both; }
.is-lit .reveal > :nth-child(1) { transition-delay: 1.9s; }
.is-lit .reveal > :nth-child(2) { transition-delay: 2.15s; }
.is-lit .reveal > :nth-child(3) { transition-delay: 2.4s; }
.is-lit .reveal > :nth-child(4) { transition-delay: 2.6s; }
.is-lit .reveal > :nth-child(5) { transition-delay: 2.9s; }

.names { color: var(--blush); font: 400 clamp(3rem, 14.5vw, 4.2rem)/1.1 "Great Vibes", "Snell Roundhand", cursive; }
.amp { font: 300 .62em/1 Fraunces, Georgia, serif; font-variation-settings: "opsz" 72; vertical-align: .08em; margin: 0 .05em; }
.line { margin-top: .9rem; font: 400 1.25rem/1.3 Fraunces, Georgia, serif; font-variation-settings: "opsz" 24; }
.date { margin-top: 1.35rem; font: 400 1.5rem/1.3 Fraunces, Georgia, serif; font-variation-settings: "opsz" 30; }
.place { margin-top: .3rem; font-size: 1rem; }
.note { margin: 1.35rem auto 0; max-width: 19.5rem; font-size: .95rem; line-height: 1.5; }

.down { position: absolute; left: 50%; bottom: max(1.4rem, env(safe-area-inset-bottom)); z-index: 2; transform: translateX(-50%); min-width: 44px; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; color: #12160C; font-weight: 500; text-decoration: none; white-space: nowrap; opacity: 0; transition: opacity 1s ease 3.4s; pointer-events: none; }
.down svg { animation: nudge 2.4s ease-in-out infinite; }
.is-lit .down, html:not(.js) .down { opacity: 1; pointer-events: auto; }
.mist { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(to bottom, rgba(245,239,225,0) 0%, rgba(245,239,225,.16) 30%, rgba(245,239,225,.62) 65%, var(--sand) 100%); pointer-events: none; transition: opacity 2s ease .6s; }
.js .is-dark .mist { opacity: 0; }

/* Calendar and form */
.below { background: var(--sand); padding: .5rem 1.5rem max(4rem, env(safe-area-inset-bottom)); }
.js .below { display: none; }
.js .page-lit .below { display: block; }
.block { max-width: 26rem; margin: 0 auto; padding-top: 2.5rem; }
h2 { font: 400 1.65rem/1.25 Fraunces, Georgia, serif; font-variation-settings: "opsz" 36; }
.lead { margin-top: .5rem; }

.cal { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: 1rem; }
.cal a { display: flex; align-items: center; justify-content: center; min-height: 3rem; border: 1px solid var(--linden); border-radius: 8px; color: var(--linden); text-decoration: none; }
.cal a:hover, .cal a:active { background: var(--blush); }

#raspuns { border-top: 1px solid var(--line); margin-top: 2.5rem; }
.field { margin-top: 1.6rem; }
label, legend, .label { display: block; font-weight: 500; margin-bottom: .45rem; }
input[type=text] { width: 100%; min-height: 3rem; padding: .6rem .8rem; font-size: 1rem; background: #FBF7EC; border: 1px solid var(--line); border-radius: 8px; color: var(--linden); }
input[type=text]:focus { outline: 2px solid var(--linden); outline-offset: 1px; }
.others-field { margin-bottom: .6rem; }
.others-field label { font-weight: 400; margin-bottom: .25rem; }

.options { display: grid; gap: .55rem; }
.options label { margin: 0; font-weight: 400; cursor: pointer; }
.options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.options span { display: flex; align-items: center; min-height: 3rem; padding: .5rem .9rem; border: 1px solid var(--line); border-radius: 8px; transition: background .2s ease, border-color .2s ease; }
.options input:checked + span { background: var(--blush); border-color: var(--linden); }
.options input:focus-visible + span { outline: 2px solid var(--linden); outline-offset: 1px; }

.stepper { display: inline-flex; align-items: center; gap: .3rem; }
.stepper button { width: 3rem; height: 3rem; border: 1px solid var(--linden); border-radius: 8px; background: none; font-size: 1.4rem; line-height: 1; cursor: pointer; touch-action: manipulation; }
.stepper button[aria-disabled=true] { border-color: var(--line); color: #A9A78F; cursor: default; }
.stepper output { min-width: 3rem; text-align: center; font: 400 1.6rem/1 Fraunces, Georgia, serif; }
.hint { margin-top: .5rem; font-size: .92rem; }

.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.submit { display: block; width: 100%; min-height: 3.25rem; margin-top: 1.9rem; border: 0; border-radius: 8px; background: var(--linden); color: var(--sand); cursor: pointer; font-weight: 500; touch-action: manipulation; }
.submit[aria-busy=true] { opacity: .75; cursor: progress; }
.err { color: var(--error); font-size: .92rem; }
.err:not(:empty) { margin-top: .4rem; }
.fine { margin-top: 1rem; font-size: .88rem; line-height: 1.5; }

.thanks { padding: 2rem 0 1rem; }
.thanks h2:focus { outline: none; }
.link { margin-top: .8rem; padding: .6rem 0; border: 0; background: none; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

@media (max-height: 700px) {
  .reveal { padding: 0 .75rem; }
  .names { font-size: clamp(2.7rem, 13vw, 3.4rem); }
  .line { margin-top: .4rem; font-size: 1.1rem; }
  .date { margin-top: .7rem; font-size: 1.3rem; }
  .place { margin-top: .1rem; font-size: .875rem; }
  .note { margin-top: .6rem; font-size: .85rem; line-height: 1.4; }
}

.is-instant, .is-instant * { transition: none !important; }

@keyframes pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  45% { opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(1.07); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes breathe { 50% { opacity: .62; } }
@keyframes nudge { 50% { transform: translateY(5px); } }
@keyframes twinkle { to { opacity: .55; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}