/* Hallmark · shape: a cream cloth with painted borders · genre: editorial · theme: custom · job: attend · idea: "a cream cloth with a hand-drawn vine border lifts away; leaves, birds and vines stay in the borders and corners while the cross sits in the middle" · vibe: "earthy red, ochre, cream; regional line art"
 * paper: oklch(95.8% 0.025 85) · accent: oklch(45% 0.13 35) · display: Rozha One · body: Martel · hero: names centred in a frame with a bird in each corner, vine bands above and below · nav: none, one page read top to bottom · footer: a leaf divider, the names, the maker's and music credits · imagery: original line art SVG (vine band, corner birds, dotted cross, couple in a white saree) · signature: the vine-and-leaf band and corner birds framing the names
 * palette: pinned by the handover (earthy red, ochre, cream) · axes: light/high-contrast-serif/warm · posture: restrained colour, centred canvas hero · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: E, many small patterns can crowd; kept them to borders and corners only, as the handover asks */
/* Hallmark · waive 65 · guard: the handover pins earthy red, ochre and cream for this look · cream cloth and red line art are the Jharkhand look the client is being shown */
/* Hallmark · waive 23 · posture: restrained colour, the cloth and frame are cream paper · earthy red carries the names and the one venue band on this Jharkhand invite */
/* Hallmark · waive 77 · the family lines, the verse and the Ranchi hall are set as statements · the patterns stay in borders and corners, so these sections keep their space */
/* Hallmark · waive 80 · couple, birds and leaves drawn in line art SVG · the handover asks for regional leaves, birds and vines in borders and an original couple in a white saree */
/* Hallmark · answered F4 · the WhatsApp reply keeps its own green because guests know it on sight; earthy red stays the page primary */
@import url("./tokens.css");
@import url("./base.css");

html { scroll-behavior: smooth; }
body { font-size: 1.0625rem; line-height: 1.7; }

.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); }

/* Pattern: the vine band and the corner birds, borders and corners only */
.band { height: 48px; background: url("art/border.svg") repeat-x center / auto 48px; }
.corner { position: absolute; width: clamp(96px, 20vw, 200px); height: auto; pointer-events: none; }
.corner--tl { top: 0; left: 0; }
.corner--tr { top: 0; right: 0; transform: scaleX(-1); }
.corner--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.corner--br { bottom: 0; right: 0; transform: scale(-1, -1); }

/* 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-accent); border-radius: var(--radius-card); background: var(--color-accent); color: var(--color-accent-ink); font: 600 var(--text-md)/1 var(--font-body); 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); border-color: 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: transparent; color: var(--color-accent); }
.btn--quiet:hover { background: var(--color-paper-2); border-color: var(--color-accent); }
.btn--onred { background: transparent; color: var(--color-accent-ink); border-color: var(--color-ochre); }
.btn--onred:hover { background: var(--color-ink-2); border-color: var(--color-ochre); }
.btn--onred:focus-visible { outline-color: var(--color-paper); }
.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)); border-color: var(--color-whatsapp); }
@media (prefers-reduced-motion: reduce) { .btn { transition: background-color var(--dur-short) linear; } }

/* Cloth: a cream panel with a vine hem that lifts away. Shown only when scripting runs */
.cloth { display: none; }
.js .cloth { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; grid-template-rows: 1fr auto; background: var(--color-paper-2); transition: transform 1100ms var(--ease-in-out) 150ms, opacity var(--dur-long) var(--ease-out) 1000ms; }
.js.sealed body { overflow: hidden; }
.cloth__middle { display: grid; place-content: center; justify-items: center; gap: var(--space-sm); padding: var(--space-md); text-align: center; }
.cloth__to { font: 400 var(--text-2xl)/1.2 var(--font-display); color: var(--color-ink); }
.cloth__open { display: grid; place-items: center; width: 132px; height: 132px; padding: var(--space-sm); border: 1px solid var(--color-rule); border-radius: 50%; background: var(--color-paper); cursor: pointer; transition: transform var(--dur-short) var(--ease-out); }
.cloth__open img { width: 100%; height: auto; }
.cloth__open:hover { transform: scale(1.04); }
.cloth__open:active { transform: scale(0.97); }
.cloth__open:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.cloth__hint { font-size: var(--text-md); color: var(--color-muted); }
.cloth.is-open { transform: translateY(-100%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .js .cloth { transition: opacity 200ms linear; } .cloth.is-open { transform: none; } }

/* Leaves falling: one shower after the cloth lifts */
.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: 12px; height: 7px; border-radius: 100% 0; background: var(--color-ochre); opacity: 0; }
.petals i:nth-child(2n) { background: var(--color-red); }
.petals i:nth-child(1) { --x: 6; --d: 0s; } .petals i:nth-child(2) { --x: 17; --d: 0.6s; } .petals i:nth-child(3) { --x: 28; --d: 0.2s; } .petals i:nth-child(4) { --x: 39; --d: 0.9s; } .petals i:nth-child(5) { --x: 50; --d: 0.4s; }
.petals i:nth-child(6) { --x: 61; --d: 1.1s; } .petals i:nth-child(7) { --x: 72; --d: 0.1s; } .petals i:nth-child(8) { --x: 82; --d: 0.7s; } .petals i:nth-child(9) { --x: 91; --d: 0.3s; } .petals i:nth-child(10) { --x: 96; --d: 1s; }
.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; bottom: 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) 90%, 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 names in a frame, a bird in each corner, bands above and below */
.hero { display: grid; grid-template-rows: auto 1fr auto; min-height: 100svh; }
.hero__frame { position: relative; display: grid; place-items: center; padding: var(--space-xl) var(--space-md); }
.hero__inner { position: relative; display: grid; justify-items: center; gap: var(--space-sm); max-width: 40rem; text-align: center; }
.cross { position: relative; width: clamp(96px, 18vw, 140px); margin-bottom: var(--space-xs); }
.cross::before { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: var(--color-paper-3); filter: blur(20px); opacity: 0.6; }
.cross img { position: relative; width: 100%; height: auto; }
.is-open-page .cross::before { animation: cross-glow 3.2s var(--ease-in-out) 800ms 1 both; }
@keyframes cross-glow { 0% { opacity: 0.2; transform: scale(0.8); } 45% { opacity: 1; transform: scale(1.3); } 100% { opacity: 0.6; transform: none; } }
@media (prefers-reduced-motion: reduce) { .is-open-page .cross::before { animation: none; } }
.hero__greet { font-size: var(--text-lead); color: var(--color-ink-2); }
.names { margin-bottom: var(--space-lg); font: 400 var(--text-names)/1.05 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-accent); }
.names__amp { display: block; font-size: 0.55em; line-height: 1.1; color: var(--color-ochre); }

/* Sections */
section { 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-sm); text-align: center; }
.invite__open { font-size: var(--text-lead); color: var(--color-ink-2); }
.invite h2 { font: 400 var(--text-section)/1.15 var(--font-display); color: var(--color-ink); max-width: 16ch; }
.divider { width: min(70%, 260px); height: auto; margin-block: var(--space-sm); }
.families { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); justify-items: center; width: 100%; margin-top: var(--space-md); }
.family { display: grid; gap: var(--space-2xs); }
.family__name { font: 400 clamp(1.875rem, 2vw + 1rem, 3rem)/1.2 var(--font-display); color: var(--color-accent); }
.family__parents { color: var(--color-muted); }
.families__amp { font: 400 var(--text-2xl)/1 var(--font-display); color: var(--color-ochre); }
@media (min-width: 52rem) { .families { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; } }

.verse { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; padding-block: var(--section-gap-s) var(--section-gap); }
.verse__couple { margin: 0; justify-self: center; width: min(100%, 420px); }
.verse__couple img { width: 100%; height: auto; }
.verse__text { margin: 0; text-align: center; }
.verse__text p { font: 400 clamp(2rem, 2.5vw + 1rem, 3.25rem)/1.25 var(--font-display); color: var(--color-ink); max-width: 28ch; margin-inline: auto; text-wrap: balance; }
.verse__text footer { margin-top: var(--space-md); color: var(--color-accent); }
.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; justify-items: center; text-align: center; }
.when__num { font-weight: 400; font: 400 clamp(2.75rem, 6vw + 1rem, 5.5rem)/1.05 var(--font-display); color: var(--color-accent); }
.when__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)); width: min(100%, 30rem); margin-top: var(--space-xl); }
.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-3xl)/1 var(--font-display); color: var(--color-ink); font-variant-numeric: tabular-nums lining-nums; }

/* Venue: the one earthy red band, framed by vine bands */
.venue { max-width: none; padding: 0; }
.venue__body { display: grid; justify-items: center; gap: var(--space-sm); padding: var(--section-gap-s) var(--gutter); background: var(--color-accent); color: var(--color-accent-ink); text-align: center; }
.venue h2 { font: 400 var(--text-section)/1.15 var(--font-display); }
.venue__addr { max-width: 32ch; margin-bottom: var(--space-sm); font-size: var(--text-lead); }
.calendar { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin-top: var(--space-xl); }
.calendar__label { flex-basis: 100%; }

.rsvp { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); padding-block: var(--section-gap) var(--section-gap-s); }
.rsvp__head { display: grid; justify-items: start; gap: var(--space-md); align-content: start; }
.rsvp__head h2 { font: 400 var(--text-section)/1.15 var(--font-display); color: var(--color-accent); }
.rsvp__head p { max-width: 34ch; color: var(--color-ink-2); }
.form { display: grid; gap: var(--space-lg); padding: var(--space-xl) var(--space-lg); border: 1px solid var(--color-rule); background: var(--color-paper-2); }
.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); }
.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-sm); border: 1px solid var(--color-muted); background: var(--color-paper); color: var(--color-ink); text-align: center; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.seg label:last-of-type { border-left: 0; }
.seg label:hover { background: var(--color-paper-3); }
.seg input:checked + label { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.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); } }

/* 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-2xl)/1.2 var(--font-display); color: var(--color-accent); }
.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; }