/* Hallmark · shape: the paper card, unfolded · genre: editorial · theme: custom · job: attend · idea: "the family's watercolour card, opened on a phone: blooms gather at the corners and the cross stays at the centre" · vibe: "soft watercolour, maroon ink, quiet church joy"
 * paper: oklch(98.2% 0.009 8) · accent: oklch(35% 0.115 14) · display: Pinyon Script (names) · body: EB Garamond · hero: centred card face, cross over the couple's names, corner blooms · nav: none, one page read top to bottom · footer: a spray, the names, the maker's credit · imagery: original watercolour SVG (flowers, cross, couple) · signature: the names in maroon script under a softly glowing painted cross
 * axes: light/handwritten/warm · posture: restrained colour, centred canvas hero · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, a floral invite is a known genre; tied it to this card with the family lines, the S/O and D/O wording and the real Ranchi venue set as type */
/* Hallmark · waive 80 · couple and flower paintings in SVG · the handover asks for an original painted couple and watercolour flowers, the card's own look */
/* Hallmark · answered F4 · the WhatsApp reply keeps its own green because guests know it on sight; maroon stays the page primary */
/* Hallmark · waive 23 · posture: blush envelope ground and lilac flap are paper tokens · on this invite only the wax seal is maroon accent, the rest is card paper */
/* Hallmark · waive 77 · the invitation section is the family lines and the S/O and D/O wording · it is the card text the client wrote, set as a statement, and needs no extra visual */
/* Hallmark · waive 29 · one blush halo behind the hero cross · the handover asks the cross to glow softly on this invite */
@import url("./tokens.css");
@import url("./base.css");

html { scroll-behavior: smooth; }
body { font-size: 1.125rem; }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-accent-ink); font: 500 var(--text-md)/1 var(--font-body); letter-spacing: 0.01em; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-ink-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--quiet { background: color-mix(in oklab, var(--color-paper) 70%, transparent); color: var(--color-ink); border-color: var(--color-ink-2); }
.btn--quiet:hover { background: var(--color-paper-2); }
.btn--wa { background: var(--color-whatsapp); border-color: var(--color-whatsapp); color: var(--color-whatsapp-ink); }
.btn--wa:hover { background: color-mix(in oklab, var(--color-whatsapp) 85%, var(--color-ink)); }
@media (prefers-reduced-motion: reduce) { .btn { transition: background-color var(--dur-short) linear; } }

/* Envelope: shown only when scripting runs */
.envelope { display: none; }
.js .envelope { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--space-md); background: var(--color-paper-2); transition: opacity var(--dur-long) var(--ease-out) 500ms; }
.js.sealed body { overflow: hidden; }
.envelope__paper { position: relative; width: min(100%, 420px, 66svh); aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper); box-shadow: 0 24px 48px -24px color-mix(in oklab, var(--color-ink) 35%, transparent), 0 2px 6px color-mix(in oklab, var(--color-ink) 10%, transparent); transition: transform 900ms var(--ease-in-out) 250ms; }
.envelope__flowers { position: absolute; left: -10%; bottom: -8%; width: 52%; transform: rotate(180deg) scaleX(-1); opacity: 0.9; }
.envelope__flowers--r { left: auto; right: -10%; transform: rotate(180deg); }
.envelope__flap { position: absolute; inset: 0 0 auto; height: 58%; background: var(--color-paper-3); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform 600ms var(--ease-in-out); }
.seal { position: absolute; left: 50%; top: 58%; z-index: var(--z-raised); display: grid; place-items: center; width: 92px; height: 92px; translate: -50% -50%; padding: 0; border: 0; border-radius: 50%; background: var(--color-ink); cursor: pointer; box-shadow: 0 6px 14px -6px color-mix(in oklab, var(--color-ink) 70%, transparent); transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); animation: seal-breathe 2.4s var(--ease-in-out) 3; }
.seal { color: var(--color-accent-ink); }
.seal:hover { transform: scale(1.04); }
.seal:active { transform: scale(0.97); }
.seal:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.envelope__text { position: absolute; inset: 72% var(--space-lg) auto; display: grid; gap: var(--space-xs); text-align: center; }
.envelope__to { font: 400 var(--text-xl)/1.2 var(--font-outlier); color: var(--color-ink); }
.envelope__hint { font-size: var(--text-sm); color: var(--color-muted); }
.envelope.is-open .envelope__flap { transform: rotateX(180deg); }
.envelope.is-open .seal { opacity: 0; transform: scale(0.8); }
.envelope.is-open .envelope__paper { transform: translateY(110%); }
.envelope.is-open { opacity: 0; pointer-events: none; }
@keyframes seal-breathe { 50% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .seal { animation: none; } .js .envelope, .envelope__paper, .envelope__flap { transition: opacity 200ms linear; } .envelope.is-open .envelope__paper { transform: none; } }

/* Falling petals: one shower after the envelope opens, under 5 seconds */
.petals { position: fixed; inset: 0; z-index: var(--z-sticky); pointer-events: none; overflow: hidden; }
.petals i { position: absolute; top: -40px; left: calc(var(--x) * 1%); width: 14px; height: 10px; border-radius: 80% 10% 80% 10%; background: var(--color-blush); opacity: 0; }
.petals i:nth-child(3n) { background: var(--color-lilac); width: 10px; height: 8px; }
.petals i:nth-child(1) { --x: 6; --d: 0s; } .petals i:nth-child(2) { --x: 18; --d: 0.5s; } .petals i:nth-child(3) { --x: 27; --d: 0.2s; } .petals i:nth-child(4) { --x: 38; --d: 0.9s; } .petals i:nth-child(5) { --x: 47; --d: 0.4s; } .petals i:nth-child(6) { --x: 56; --d: 1.1s; }
.petals i:nth-child(7) { --x: 64; --d: 0.1s; } .petals i:nth-child(8) { --x: 72; --d: 0.7s; } .petals i:nth-child(9) { --x: 80; --d: 0.3s; } .petals i:nth-child(10) { --x: 88; --d: 1s; } .petals i:nth-child(11) { --x: 94; --d: 0.6s; } .petals i:nth-child(12) { --x: 12; --d: 1.2s; }
.is-showering .petals i { animation: petal-fall 3.6s linear var(--d) 1 both; }
@keyframes petal-fall {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
  10% { opacity: 0.85; }
  50% { transform: translate3d(28px, 50dvh, 0) rotate(160deg); }
  85% { opacity: 0.75; }
  100% { opacity: 0; transform: translate3d(-12px, 105dvh, 0) rotate(320deg); }
}
@media (prefers-reduced-motion: reduce) { .petals { display: none; } }

/* Music toggle */
.sound { position: fixed; top: var(--space-md); right: var(--space-md); z-index: var(--z-sticky-nav); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--color-rule); border-radius: 50%; background: color-mix(in oklab, var(--color-paper) 88%, transparent); color: var(--color-ink); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.sound:hover { background: var(--color-paper-2); }
.sound:active { background: var(--color-paper-3); }
.sound:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.sound .sound__on, .sound[aria-pressed="true"] .sound__off { display: none; }
.sound[aria-pressed="true"] .sound__on { display: inline; }

/* Hero: the card face */
.hero { position: relative; display: grid; place-items: center; min-height: 100svh; padding: var(--space-3xl) var(--space-md) var(--space-2xl); overflow: hidden; text-align: center; }
.hero__corner { position: absolute; width: clamp(240px, 62vw, 520px); pointer-events: none; }
.hero__corner--tl { top: -3%; left: -14%; }
.hero__corner--br { right: -14%; bottom: -3%; transform: rotate(180deg); }
.hero__inner { position: relative; display: grid; justify-items: center; gap: var(--space-sm); max-width: 40rem; }
.cross { position: relative; width: clamp(64px, 14vw, 96px); margin-bottom: var(--space-xs); }
.cross::before { content: ""; position: absolute; inset: 10% -20%; border-radius: 50%; background: var(--color-blush); filter: blur(22px); opacity: 0.45; }
.cross img { position: relative; width: 100%; height: auto; }
.is-open-page .cross::before { animation: cross-glow 3.2s var(--ease-in-out) 600ms 1 both; }
@keyframes cross-glow { 0% { opacity: 0.2; transform: scale(0.85); } 45% { opacity: 0.85; transform: scale(1.1); } 100% { opacity: 0.45; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .is-open-page .cross::before { animation: none; } }
.hero__greet { font-size: var(--text-lead); font-style: italic; color: var(--color-ink-2); }
.names { margin-bottom: var(--space-lg); font: 400 var(--text-names)/1.05 var(--font-outlier); color: var(--color-ink); padding-block: var(--space-2xs); }
.names__amp { display: block; font-size: 0.55em; line-height: 1; color: var(--color-ink-2); }

/* Sections */
section { position: relative; width: 100%; max-width: var(--container); margin-inline: auto; padding: var(--section-gap-s) var(--gutter); }

.invite { display: grid; justify-items: center; gap: var(--space-md); text-align: center; background: linear-gradient(180deg, var(--color-paper), var(--color-paper-2) 55%, var(--color-paper)); max-width: none; }
.invite__open { font-size: var(--text-lead); font-style: italic; color: var(--color-ink-2); }
.invite__event { font: 500 var(--text-section)/1.1 var(--font-display); color: var(--color-ink); max-width: 14ch; }
.spray { width: min(70%, 260px); height: auto; margin-block: var(--space-xs); }
.families { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); justify-items: center; width: 100%; max-width: calc(var(--container) - 2 * var(--gutter)); margin-top: var(--space-sm); }
.family { display: grid; gap: var(--space-xs); }
.family__name { font: 400 var(--text-3xl)/1.15 var(--font-outlier); color: var(--color-ink); }
.family__parents { font-size: var(--text-md); color: var(--color-muted); }
.families__amp { font: 400 var(--text-2xl)/1 var(--font-outlier); color: var(--color-ink-2); }
@media (min-width: 48rem) { .families { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; } .family__name { font-size: clamp(2.5rem, 3vw + 1rem, 3.5rem); } }

.verse { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; padding-block: var(--section-gap); }
.verse__couple { margin: 0; justify-self: center; width: min(100%, 460px); }
.verse__couple img { width: 100%; height: auto; }
.verse__text { margin: 0; text-align: center; }
.verse__text p { font: 400 clamp(1.75rem, 2vw + 1rem, 2.75rem)/1.3 var(--font-display); color: var(--color-ink); max-width: 28ch; margin-inline: auto; text-wrap: balance; }
.verse__text footer { margin-top: var(--space-md); font-size: var(--text-md); color: var(--color-muted); }
.verse__text cite { font-style: normal; }
@media (min-width: 56rem) { .verse { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .verse__text { text-align: left; } .verse__text p { margin-inline: 0; } }

.when { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); text-align: center; padding-block: var(--section-gap); border-block: 1px solid var(--color-rule); max-width: calc(var(--container) - 2 * var(--gutter)); }
.date__day { display: grid; justify-items: center; color: var(--color-ink); }
.date__num { font: 400 clamp(6rem, 14vw + 2rem, 11rem)/0.9 var(--font-display); font-variant-numeric: lining-nums; }
.date__month { font: 400 var(--text-2xl)/1.2 var(--font-display); }
.date__time { margin-top: var(--space-sm); font-size: var(--text-lead); color: var(--color-ink-2); }
.countdown { display: none; }
.js .countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 26rem; margin: var(--space-xl) auto 0; }
.countdown p { display: grid; gap: var(--space-2xs); padding-inline: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); border-left: 1px solid var(--color-rule); }
.countdown p:first-child { border-left: 0; }
.countdown b { font: 400 var(--text-2xl)/1 var(--font-display); color: var(--color-ink); font-variant-numeric: tabular-nums lining-nums; }
.venue { display: grid; justify-items: center; gap: var(--space-sm); }
.venue__name { font: 500 var(--text-section)/1.1 var(--font-display); color: var(--color-ink); }
.venue__addr { max-width: 26ch; margin-bottom: var(--space-sm); font-size: var(--text-lead); color: var(--color-ink-2); }
.calendar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-sm); padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
.calendar__label { flex-basis: 100%; font-size: var(--text-md); color: var(--color-muted); }
@media (min-width: 56rem) { .when { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } .calendar { grid-column: 1 / -1; } }

.rsvp { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); padding-block: var(--section-gap) var(--section-gap-s); overflow: hidden; }
.rsvp__corner { position: absolute; top: 0; right: -18%; width: min(70vw, 420px); transform: scaleX(-1); opacity: 0.7; pointer-events: none; }
.rsvp__head { position: relative; display: grid; justify-items: start; gap: var(--space-md); align-content: start; }
.rsvp__head h2 { font: 500 var(--text-section)/1.1 var(--font-display); color: var(--color-ink); }
.rsvp__head p { max-width: 34ch; color: var(--color-ink-2); }
.form { position: relative; display: grid; gap: var(--space-lg); padding: var(--space-xl) var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: color-mix(in oklab, var(--color-paper) 92%, transparent); }
.field { display: grid; gap: var(--space-xs); }
.field label, .seg legend { font-size: var(--text-md); color: var(--color-ink); }
.field input, .field select { min-height: 48px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); outline: 2px solid transparent; outline-offset: 1px; }
.field input:hover, .field select:hover { border-color: var(--color-ink-2); }
.field input:focus-visible, .field select:focus-visible { outline-color: var(--color-focus); }
.field input[aria-invalid] { border-color: var(--color-error); }
.field input:disabled, .field select:disabled { opacity: 0.55; cursor: not-allowed; }
.seg { margin: 0; padding: 0; border: 0; }
.seg legend { margin-bottom: var(--space-xs); padding: 0; }
.seg__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); background: var(--color-paper); color: var(--color-ink); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.seg label:first-of-type { border-radius: var(--radius-card) 0 0 var(--radius-card); }
.seg label:last-of-type { border-radius: 0 var(--radius-card) var(--radius-card) 0; border-left: 0; }
.seg label:hover { background: var(--color-paper-2); }
.seg input:checked + label { background: var(--color-ink); color: var(--color-accent-ink); border-color: var(--color-ink); }
.seg input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.form__send { justify-self: start; }
.form__help { min-height: 1lh; font-size: var(--text-md); color: var(--color-ink-2); }
@media (min-width: 56rem) { .rsvp { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
@media (max-width: 55.99rem) { .rsvp__corner { display: none; } }

/* Footer */
.foot { display: grid; justify-items: center; gap: var(--space-xs); padding: var(--space-2xl) var(--gutter) var(--space-3xl); text-align: center; background: var(--color-paper-2); }
.foot__names { font: 400 var(--text-3xl)/1.1 var(--font-outlier); color: var(--color-ink); }
.foot__credit { font-size: var(--text-sm); color: var(--color-muted); }

/* One reveal per section, visible without scripting */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }
.names:focus { outline: none; }