/* =========================================================================
   Ақ босаға — Kazakh Wedding Invitation
   Palette: Lavender Mist · mobile-first · see DESIGN.md
   ========================================================================= */

/* ---- Tokens ------------------------------------------------------------ */
:root {
  /* Lavender Mist palette */
  --bg: #F3F0FA;          /* Wisteria Mist — page field */
  --surface: #FAF8FE;     /* Petal White — cards / plates */
  --ink: #33304A;         /* Amethyst Slate — body + headings */
  --ink-muted: #6E6A85;   /* Dusk Lilac Grey — secondary text */
  --primary: #7563B4;     /* Muted Wisteria — the one accent */
  --primary-deep: #5F4F9C;/* pressed / hover of the accent */
  --secondary: #C9C3E4;   /* Powder Lilac — supporting wash */
  --border: #DAD5EC;      /* Silver Wisteria — hairlines */
  --on-accent: #FFFFFF;
  --primary-wash: rgba(117, 99, 180, 0.08);

  /* Type */
  --font-display: "Cormorant Garamond", "Noto Serif", Georgia, serif;
  --font-body: "Manrope", "Golos Text", system-ui, -apple-system, sans-serif;

  --fs-display: clamp(2.6rem, 11vw, 4rem);
  --fs-h1: clamp(1.75rem, 7vw, 3rem);
  --fs-h2: clamp(1.55rem, 5.4vw, 2.25rem);
  --fs-title: 1.2rem;
  --fs-body: clamp(0.95rem, 2.6vw, 1.05rem);
  --fs-small: 0.82rem;
  --fs-label: 0.7rem;

  /* Space */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 40px;
  --sp-5: 64px; --sp-6: 96px;
  --section-y: clamp(64px, 13vw, 120px);
  --container: 620px;

  /* Shape */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Elevation (tinted to the palette, never pure black) */
  --shadow-soft: 0 14px 40px -26px rgba(51, 48, 74, 0.30);
  --shadow-lift: 0 16px 34px -18px rgba(117, 99, 180, 0.42);

  /* Motion (Emil: strong custom curves, brief) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 160ms;
  --dur-base: 220ms;
  --dur-reveal: 640ms;

  /* Z-index scale (semantic, no magic 9999) */
  --z-frame: 5;
  --z-content: 10;
  --z-cue: 20;
}

/* ---- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--bg);
  /* airy tinted field: gentle wisteria light, never flat */
  background-image:
    radial-gradient(120% 80% at 12% 0%, #FBF9FE 0%, transparent 55%),
    radial-gradient(110% 90% at 92% 8%, rgba(201, 195, 228, 0.35) 0%, transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---- Typography helpers ------------------------------------------------ */
.serif { font-family: var(--font-display); font-weight: 500; }
.eyebrow {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--primary-deep); /* 6.05:1 on the field — accent that still passes AA */
}
.kicker {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

/* ---- Layout ------------------------------------------------------------ */
.section { padding-block: var(--section-y); position: relative; z-index: var(--z-content); }
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(22px, 6vw, 40px);
  text-align: center;
}
.hairline {
  width: 56px; height: 1px; margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
}
.hairline--accent {
  background: linear-gradient(90deg, transparent, var(--primary) 50%, transparent);
  opacity: 0.7;
}

/* ---- Reveal on scroll (enhances an already-visible default) ------------ */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: 60ms; }
.js .reveal[data-delay="2"] { transition-delay: 120ms; }
.js .reveal[data-delay="3"] { transition-delay: 180ms; }

/* ---- Living choreography: children cascade inside their section --------- */
/* Hairlines draw themselves in */
.js .hairline.reveal {
  opacity: 0; transform: scaleX(0.3);
  transition: opacity 600ms var(--ease-out), transform 760ms var(--ease-out);
}
.js .hairline.reveal.is-visible { opacity: 1; transform: scaleX(1); }

/* Facts (date / time / venue) arrive one after another */
.js .facts.reveal { transform: none; }
.js .facts.reveal .fact {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-reveal) var(--ease-out) var(--d, 0ms),
              transform var(--dur-reveal) var(--ease-out) var(--d, 0ms);
}
.js .facts.reveal.is-visible .fact { opacity: 1; transform: none; }
.facts .fact:nth-child(2) { --d: 110ms; }
.facts .fact:nth-child(3) { --d: 220ms; }

/* The poem breathes line by line */
.js .reveal .greeting__poem span {
  opacity: 0; transform: translateY(10px);
  transition: opacity 540ms var(--ease-out) var(--d, 0ms),
              transform 540ms var(--ease-out) var(--d, 0ms);
}
.js .reveal.is-visible .greeting__poem span { opacity: 1; transform: none; }
.greeting__poem span:nth-child(2) { --d: 80ms; }
.greeting__poem span:nth-child(3) { --d: 160ms; }
.greeting__poem span:nth-child(4) { --d: 240ms; }
.greeting__poem span:nth-child(5) { --d: 320ms; }
.greeting__poem span:nth-child(6) { --d: 400ms; }

/* Countdown digits cascade in */
.js .countdown__grid.reveal { transform: none; }
.js .countdown__grid.reveal > * {
  opacity: 0; transform: translateY(14px);
  transition: opacity 520ms var(--ease-out) var(--d, 0ms),
              transform 520ms var(--ease-out) var(--d, 0ms);
}
.js .countdown__grid.reveal.is-visible > * { opacity: 1; transform: none; }
.countdown__grid > *:nth-child(2) { --d: 50ms; }
.countdown__grid > *:nth-child(3) { --d: 100ms; }
.countdown__grid > *:nth-child(4) { --d: 150ms; }
.countdown__grid > *:nth-child(5) { --d: 200ms; }
.countdown__grid > *:nth-child(6) { --d: 250ms; }
.countdown__grid > *:nth-child(7) { --d: 300ms; }

/* The wedding day settles into place once the calendar is seen */
@keyframes day-pop {
  0%   { transform: scale(0.55); }
  100% { transform: scale(1); }
}
.js .calendar.reveal.is-visible .calendar__day--highlight {
  animation: day-pop 460ms var(--ease-out) 420ms backwards;
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(48px, 12vw, 96px) clamp(22px, 6vw, 40px);
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute; inset: 0; z-index: 0;
  background-color: #E9E4F6;
  /* Default atmospheric fallback (used when no photo is set) */
  background-image:
    radial-gradient(120% 85% at 22% 12%, #FBF9FE 0%, transparent 55%),
    radial-gradient(120% 100% at 84% 26%, rgba(201, 195, 228, 0.65) 0%, transparent 62%),
    radial-gradient(150% 130% at 50% 116%, rgba(117, 99, 180, 0.28) 0%, transparent 60%),
    linear-gradient(180deg, #F3F0FA 0%, #E6E0F4 100%);
  background-size: cover;
  background-position: center;
}
/* Faint botanical line motif over the fallback (drops out under a photo) */
.hero__media::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("../assets/hero-motif.svg");
  background-repeat: no-repeat;
  background-position: center 88%;
  background-size: min(360px, 66%);
  opacity: 0.32;
}
.hero[data-has-photo="true"] .hero__media { background-image: none; }
.hero[data-has-photo="true"] .hero__media::before { display: none; }

/* Pale lavender scrim — morning light, not a dark veil */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(243, 240, 250, 0.30) 0%,
    rgba(237, 233, 246, 0.42) 55%,
    rgba(233, 228, 244, 0.58) 100%
  );
}
.hero[data-has-photo="true"] .hero__scrim {
  background: linear-gradient(
    180deg,
    rgba(243, 240, 250, 0.62) 0%,
    rgba(237, 233, 246, 0.62) 45%,
    rgba(51, 48, 74, 0.38) 100%
  );
}
/* Over a real photo, keep the dark-ink text legible on any image */
.hero[data-has-photo="true"] .hero__title,
.hero[data-has-photo="true"] .hero__names,
.hero[data-has-photo="true"] .hero__subtitle,
.hero[data-has-photo="true"] .hero__eyebrow {
  text-shadow: 0 1px 18px rgba(24, 20, 34, 0.55), 0 1px 3px rgba(24, 20, 34, 0.35);
}
/* Мягкий серый тонет на пёстром снимке — в фото-режиме уплотняем */
.hero[data-has-photo="true"] .hero__subtitle { color: var(--ink); }

/* Whisper-thin ceremonial frame */
.hero__frame {
  position: absolute;
  inset: clamp(14px, 4vw, 26px);
  z-index: var(--z-frame);
  border: 1px solid rgba(117, 99, 180, 0.32);
  pointer-events: none;
}
.hero__frame::after {
  content: "";
  position: absolute; inset: 5px;
  border: 1px solid rgba(218, 213, 236, 0.6);
}

.hero__content {
  position: relative; z-index: var(--z-content);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(14px, 3.4vw, 22px);
  max-width: min(92vw, 32rem);
}
.hero__eyebrow { color: var(--primary-deep); }
.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
  white-space: pre-line;
}
.hero__names {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 1.1;
  color: var(--ink);
  text-wrap: balance;
}
.hero__names .amp {
  color: var(--primary);
  font-style: italic;
  font-weight: 500;
  padding: 0 0.18em;
}
.hero__subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 3.4vw, 1.35rem);
  color: var(--ink-muted);
}
.hero__cue {
  position: absolute;
  bottom: clamp(14px, 4vw, 28px);
  left: 50%; transform: translateX(-50%);
  z-index: var(--z-cue);
  display: grid; place-items: center;
  padding: 10px; /* ≥44px tap/focus target around the 26px glyph */
  color: var(--primary);
  animation: cue-bob 2.4s var(--ease-in-out) infinite;
}
.hero__cue svg { width: 26px; height: 26px; }
@keyframes cue-bob {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.55; }
  50%      { transform: translate(-50%, 7px); opacity: 1; }
}

/* Entrance for the hero content (transition-based; .is-in added by JS).
   Robust: if JS/animation is disabled, .is-in / .force-visible still shows it. */
.js .hero__content > * {
  opacity: 0; transform: translateY(14px);
  filter: blur(8px); /* проявление из расфокуса — премиальный вход */
  transition: opacity var(--dur-reveal) var(--ease-out) var(--enter-delay, 0ms),
              transform var(--dur-reveal) var(--ease-out) var(--enter-delay, 0ms),
              filter var(--dur-reveal) var(--ease-out) var(--enter-delay, 0ms);
}
.js .hero__content.is-in > * { opacity: 1; transform: none; filter: blur(0); }
.js .hero__content > *:nth-child(2) { --enter-delay: 90ms; }
.js .hero__content > *:nth-child(3) { --enter-delay: 170ms; }
.js .hero__content > *:nth-child(4) { --enter-delay: 250ms; }

/* Safety net: any JS failure adds .force-visible on <html> → nothing stays hidden */
.js.force-visible .hero__content > *,
.js.force-visible .reveal { opacity: 1 !important; transform: none !important; }

/* =========================================================================
   FIXED-PHOTO MODE — фото пришпилено к экрану, страница скользит поверх.
   Активируется классом body.has-photo (ставит app.js, когда задано hero.photo)
   ========================================================================= */
body.has-photo .hero__media { position: fixed; }
/* Секции становятся «занавесом»: непрозрачный фон, наезжающий на фото */
body.has-photo main .section,
body.has-photo .footer { background: var(--bg); }

/* Окно-передышка: фото проглядывает целиком между письмом и деталями */
.photo-window { position: relative; min-height: 56svh; display: none; }
body.has-photo .photo-window {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4) var(--sp-3);
}
/* Одна тихая строка поверх фото — смысл окна без утяжеления */
.photo-window__caption {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 5vw, 1.9rem);
  letter-spacing: 0.06em;
  text-align: center;
  color: #FAF8FE;
  text-shadow: 0 1px 16px rgba(24, 20, 34, 0.6), 0 1px 3px rgba(24, 20, 34, 0.4);
}
/* лёгкая вуаль для связности с палитрой */
.photo-window::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(51, 48, 74, 0.08);
}
/* эхо церемониальной рамки обложки */
.photo-window::after {
  content: "";
  position: absolute; inset: clamp(14px, 4vw, 26px);
  border: 1px solid rgba(250, 248, 254, 0.55);
  pointer-events: none;
}

/* =========================================================================
   HOSTS
   ========================================================================= */
.hosts .container { display: flex; flex-direction: column; gap: var(--sp-2); }
.hosts__names {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: 0.02em;
  color: var(--ink);
}
.hosts__caption {
  /* настоящий курсив Cormorant (у Manrope курсива нет — был faux-наклон) */
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-muted);
}

/* =========================================================================
   GREETING (letter / poem)
   ========================================================================= */
.greeting .container { display: flex; flex-direction: column; gap: var(--sp-3); }
.greeting__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  color: var(--primary);
}
.greeting__plate {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: clamp(28px, 7vw, 44px) clamp(22px, 6vw, 40px);
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.greeting__opening { color: var(--ink); font-weight: 500; }
.greeting__poem {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 3.6vw, 1.4rem);
  line-height: 1.9;
  color: var(--ink);
}
.greeting__poem span { display: block; }
.greeting__text {
  max-width: 62ch; margin-inline: auto;
  color: var(--ink-muted);
  text-wrap: pretty;
}
.greeting__text strong { color: var(--ink); font-weight: 600; }

/* =========================================================================
   DETAILS (date / time / venue + map + calendar)
   ========================================================================= */
.details .container { display: flex; flex-direction: column; gap: var(--sp-4); }

.facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
}
.fact {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-2);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.fact__icon { color: var(--primary); }
.fact__icon svg { width: 26px; height: 26px; }
.fact__label {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 500;
  color: var(--ink-muted);
}
.fact__value { font-weight: 600; color: var(--ink); text-wrap: pretty; }
.fact--wide { grid-column: 1 / -1; }

/* Primary button (the single accent CTA) */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: center;
  margin-top: 6px;
  padding: 13px 30px;
  min-height: 44px;
  background: var(--primary);
  color: var(--on-accent);
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.btn svg { width: 17px; height: 17px; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--primary-deep); transform: translateY(-1px); box-shadow: var(--shadow-lift); }
}
.btn:active { transform: scale(0.97); }

/* Calendar */
.calendar {
  margin-inline: auto;
  width: 100%; max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.calendar__head {
  background: var(--primary);
  color: var(--on-accent);
  padding: 13px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.calendar__weekdays,
.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.calendar__weekdays {
  background: var(--primary-wash);
  padding: 8px 6px;
}
.calendar__wd {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--ink); text-align: center;
}
.calendar__grid { padding: 8px; gap: 2px; }
.calendar__day {
  aspect-ratio: 1;
  display: grid; place-items: center;
  font-size: 0.82rem; font-weight: 500;
  color: var(--ink);
  border-radius: var(--r-pill);
}
.calendar__day--weekend { color: var(--primary); }
.calendar__day--highlight {
  background: var(--primary);
  color: var(--on-accent);
  font-weight: 700;
  box-shadow: 0 6px 16px -8px rgba(117, 99, 180, 0.7);
}
.calendar__day--empty { visibility: hidden; }

/* =========================================================================
   COUNTDOWN
   ========================================================================= */
.countdown .container { display: flex; flex-direction: column; gap: var(--sp-3); }
.countdown__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  color: var(--primary);
}
.countdown__grid {
  display: flex; justify-content: center; align-items: baseline;
  gap: clamp(8px, 3vw, 20px);
}
.countdown__unit { display: flex; flex-direction: column; align-items: center; min-width: 56px; }
.countdown__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 11vw, 3.6rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.countdown__label {
  margin-top: 6px;
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.countdown__sep {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  color: var(--secondary);
  line-height: 1;
}
.countdown__done {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--primary);
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer {
  text-align: center;
  padding: var(--sp-5) var(--sp-3) var(--sp-4);
  position: relative; z-index: var(--z-content);
}
.footer__seal {
  display: flex; justify-content: center;
  margin-bottom: var(--sp-3);
  color: var(--primary);
}
.footer__seal svg { width: 52px; height: 52px; }
.footer__seal circle, .footer__seal line, .footer__seal path { vector-effect: non-scaling-stroke; }
.footer__line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 4vw, 1.5rem);
  color: var(--ink);
}
.footer__names { margin-top: var(--sp-2); }
.footer__names .amp { color: var(--primary); font-style: italic; padding: 0 0.14em; }
.footer__date { margin-top: 8px; font-size: var(--fs-small); color: var(--ink-muted); letter-spacing: 0.04em; }

/* =========================================================================
   RSVP — подтверждение присутствия (виден только с заданным endpoint)
   ========================================================================= */
.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;
}

.rsvp__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  color: var(--primary);
}
.rsvp__subtitle {
  margin-top: 8px;
  color: var(--ink-muted);
}
.rsvp__card {
  margin-top: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: clamp(24px, 6vw, 36px) clamp(20px, 5vw, 32px);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-align: left;
}
.rsvp__field { display: flex; flex-direction: column; gap: 8px; }
.rsvp__label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
}
.rsvp__input {
  width: 100%;
  padding: 13px 14px;
  font: inherit;
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.rsvp__input::placeholder { color: var(--ink-muted); opacity: 0.75; }
.rsvp__input:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(117, 99, 180, 0.18);
}
.rsvp__input--num { max-width: 120px; }

/* Выбор «келемін / келе алмаймын» — две настоящие радиокнопки в виде пилюль */
.rsvp__choice {
  border: 0; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.rsvp__pill { position: relative; display: block; }
.rsvp__pill input {
  position: absolute; inset: 0;
  opacity: 0;
  cursor: pointer;
}
.rsvp__pill span {
  display: grid; place-items: center;
  min-height: 48px;
  padding: 10px 12px;
  text-align: center;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}
.rsvp__pill:active span { transform: scale(0.97); }
.rsvp__pill input:focus-visible + span {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
.rsvp__pill input:checked + span,
.rsvp__pill.is-checked span {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-accent);
}

.rsvp__submit { align-self: center; margin-top: 4px; }
.rsvp__submit[disabled] { opacity: 0.6; cursor: default; }

.rsvp__error {
  font-size: var(--fs-small);
  color: #8F4457; /* приглушённая семантика ошибки; смысл несёт текст, не цвет */
}
.rsvp__error--net { text-align: center; }

/* Состояние «отправлено» */
.rsvp__done {
  margin-top: var(--sp-3);
  padding: var(--sp-4) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.rsvp__done-icon { width: 44px; height: 44px; color: var(--primary); }
.rsvp__done-title {
  font-size: var(--fs-h2);
  color: var(--ink);
}
.rsvp__done-text { color: var(--ink-muted); }

/* =========================================================================
   INTRO — заставка «открыть приглашение». По умолчанию скрыта; показывается
   только когда JS ставит body.intro-on (значит всё сработало без ошибок).
   ========================================================================= */
.intro { display: none; }
body.intro-on { overflow: hidden; }
body.intro-on .intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 4vw, 22px);
  position: fixed; inset: 0;
  z-index: 100; /* выше всего, включая кнопку музыки */
  overflow: hidden;
  transition: opacity 1600ms var(--ease-out),
              transform 1600ms var(--ease-out),
              filter 1600ms var(--ease-out);
}
/* уход заставки — «входим» в приглашение */
body.intro-open .intro {
  opacity: 0;
  transform: scale(1.12);
  filter: blur(6px);
  pointer-events: none;
}
.intro__media {
  position: absolute; inset: 0;
  background-color: #E9E4F6;
  background-image:
    radial-gradient(120% 85% at 22% 12%, #FBF9FE 0%, transparent 55%),
    radial-gradient(120% 100% at 84% 26%, rgba(201, 195, 228, 0.65) 0%, transparent 62%),
    linear-gradient(180deg, #F3F0FA 0%, #E6E0F4 100%);
  background-size: cover;
  background-position: center;
}
.intro__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(38, 34, 54, 0.50) 0%, rgba(38, 34, 54, 0.70) 100%);
}

/* Кнопка = сам шаңырақ: без текста, без рамки */
.intro__open {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  padding: 22px;
  background: none; border: none;
  color: #FAF8FE;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: sh-breath 3s var(--ease-in-out) 1.7s infinite;
}
.intro__open:focus-visible { outline: 2px solid rgba(250, 248, 254, 0.85); outline-offset: 6px; border-radius: 50%; }
.intro__open:active .intro__shanyrak { transform: scale(0.97); }

.intro__shanyrak {
  width: clamp(140px, 44vw, 200px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 3px 16px rgba(20, 16, 30, 0.55));
  transition: transform 300ms var(--ease-out);
}
/* самопрорисовка линий: кольца → спицы → плетение */
.intro__shanyrak .dw {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: sh-draw 0.85s var(--ease-out) forwards;
}
.intro__shanyrak .sh-rings .dw { animation-delay: 0s; }
.intro__shanyrak .sh-ticks .dw { animation-delay: 0.3s; }
.intro__shanyrak .sh-weave .dw { animation-delay: 0.6s; }
@keyframes sh-draw { to { stroke-dashoffset: 0; } }
@keyframes sh-breath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }

/* подсказка «нажмите, чтобы открыть» — появляется после прорисовки */
.intro__hint {
  position: relative; z-index: 1;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(250, 248, 254, 0.9);
  text-shadow: 0 1px 10px rgba(20, 16, 30, 0.55);
  opacity: 0;
  animation: hint-in 700ms var(--ease-out) 1.7s forwards;
}
@keyframes hint-in { to { opacity: 0.9; } }

/* раскрытие: шаңырақ расходится с поворотом, обложка проступает */
body.intro-open .intro__open {
  animation-play-state: paused;
}
body.intro-open .intro__shanyrak {
  transform: scale(1.75) rotate(45deg);
  opacity: 0;
  transition: transform 1600ms var(--ease-out), opacity 1200ms ease;
}
body.intro-open .intro__hint {
  opacity: 0;
  transition: opacity 600ms ease;
}

/* =========================================================================
   MUSIC TOGGLE — плавающая кнопка; видна только когда задан трек
   ========================================================================= */
.music-toggle {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: var(--z-cue);
  width: 48px; height: 48px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--primary-deep);
  display: none;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 24px -10px rgba(51, 48, 74, 0.3);
  transition: transform var(--dur-press) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
body.has-music .music-toggle { display: grid; }
@media (hover: hover) and (pointer: fine) {
  .music-toggle:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
}
.music-toggle:active { transform: scale(0.94); }
.music-toggle__note { width: 20px; height: 20px; }

/* Эквалайзер в состоянии «играет» */
.music-toggle__eq {
  display: none;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
}
.music-toggle__eq span {
  width: 3px; height: 16px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: bottom;
  animation: eq-dance 1.1s var(--ease-in-out) infinite;
}
.music-toggle__eq span:nth-child(2) { animation-delay: 0.25s; }
.music-toggle__eq span:nth-child(3) { animation-delay: 0.5s; }
@keyframes eq-dance {
  0%, 100% { transform: scaleY(0.35); }
  50%      { transform: scaleY(1); }
}
.music-toggle[data-playing="true"] .music-toggle__note { display: none; }
.music-toggle[data-playing="true"] .music-toggle__eq { display: flex; }

/* =========================================================================
   RESPONSIVE (compose upward, not shrink)
   ========================================================================= */
@media (min-width: 560px) {
  .facts { grid-template-columns: 1fr 1fr; }
  .fact { padding: var(--sp-4) var(--sp-3); }
}
@media (min-width: 900px) {
  :root { --container: 680px; }
}

/* =========================================================================
   REDUCED MOTION — gentler, never zero (fade only, no movement)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 0; transform: none; transition: opacity 300ms ease; }
  .js .reveal.is-visible { opacity: 1; }
  .js .hairline.reveal,
  .js .facts.reveal .fact,
  .js .reveal .greeting__poem span,
  .js .countdown__grid.reveal > * {
    transform: none; transition: opacity 300ms ease;
  }
  .js .calendar.reveal.is-visible .calendar__day--highlight { animation: none; }
  .music-toggle__eq span { animation: none; transform: scaleY(0.7); }
  body.intro-on .intro { transition: opacity 400ms ease; }
  body.intro-open .intro { transform: none; filter: none; }
  .intro__open { animation: none; }
  .intro__shanyrak { animation: none; }
  .intro__shanyrak .dw { stroke-dashoffset: 0; animation: none; }
  body.intro-open .intro__shanyrak { transform: none; transition: opacity 400ms ease; }
  .intro__hint { opacity: 0.9; animation: none; }
  .js .hero__content > * { transform: none; filter: none; transition: opacity 300ms ease; }
  .js .hero__content.is-in > * { opacity: 1; }
  .hero__cue { animation: none; }
  .btn:hover { transform: none; }
}