/* ==========================================================================
   Rafayel & Narine — shared foundations
   Reset, keyframes, page frame, RSVP scaffolding, music button.
   Everything colour/type-specific lives in v1.css / v2.css / v3.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surround);
  color: var(--ink);
  font-family: Jost, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
input, button, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }

/* --- Page frame ---------------------------------------------------------- */

.page {
  display: flex;
  justify-content: center;
  padding: 40px 16px;
}

.card {
  width: 100%;
  max-width: 900px;
  background: var(--page-bg);
  border: 1px solid var(--card-border);
  padding: 14px;
}

.frame { border: var(--frame-border); }

/* Horizontal rhythm. The mock is a fixed 900px canvas; the gutter collapses
   on narrow screens per the handoff's responsive guidance. */
:root { --gutter: 60px; }

/* --- Shared keyframes (exact values from the handoff) -------------------- */

@keyframes om-rise     { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes om-curtainL { from { transform: translateX(0); } to { transform: translateX(-102%); } }
@keyframes om-curtainR { from { transform: translateX(0); } to { transform: translateX(102%); } }
@keyframes om-spin     { to { transform: rotate(45deg) rotate(360deg); } }
@keyframes om-marquee  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes om-float    { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
@keyframes om-sway     { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes om-blink    { 0%, 45% { opacity: 1; } 50%, 95% { opacity: .15; } }
@keyframes om-dash     { to { background-position: 0 -44px; } }
@keyframes om-sprocket { to { background-position: -60px 0; } }
@keyframes om-pop      { 0% { transform: scale(.7); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes om-orbit    { to { transform: rotate(360deg); } }
@keyframes om-flip     { 0% { transform: rotateX(-90deg); opacity: .2; } 100% { transform: none; opacity: 1; } }
@keyframes om-flicker  { 0%, 100% { opacity: 1; } 43% { opacity: .55; } 47% { opacity: 1; } 62% { opacity: .4; } 65% { opacity: 1; } }
@keyframes om-spinner  { to { transform: rotate(360deg); } }
@keyframes om-cover-out { to { opacity: 0; transform: scale(1.02); visibility: hidden; } }

/* --- Two-step invitation cover ----------------------------------------- */

body.has-cover { overflow: hidden; }
.invite-cover {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--cover-surround);
  color: var(--cover-ink);
}
.invite-cover.is-opening {
  animation: om-cover-out .7s cubic-bezier(.7, 0, .2, 1) forwards;
  pointer-events: none;
}
.invite-cover__panel {
  position: relative;
  width: min(872px, 100%);
  min-height: min(532px, calc(100dvh - 32px));
  overflow: hidden;
  border: var(--cover-border);
  background: var(--cover-paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 42px 24px;
  text-align: center;
}
.invite-cover__texture { position: absolute; inset: 0; pointer-events: none; }
.invite-cover__kicker,
.invite-cover__names,
.invite-cover__emblem,
.invite-cover__open,
.invite-cover__note { position: relative; }
.invite-cover__kicker {
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
}
.invite-cover__names {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(44px, 8vw, 68px);
  line-height: 1.02;
}
.invite-cover__emblem {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
}
.invite-cover__open {
  border: 0;
  padding: 15px 28px;
  background: var(--cover-action);
  color: var(--cover-action-ink);
  font-size: 12px;
  letter-spacing: .25em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.invite-cover__open:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--cover-shadow); }
.invite-cover__open:focus-visible { outline: 3px solid var(--cover-ink); outline-offset: 4px; }
.invite-cover__note { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; opacity: .68; }

.cover-v1 {
  --cover-surround:#6E1B2C; --cover-paper:#E8B7C4; --cover-ink:#6E1B2C;
  --cover-action:#6E1B2C; --cover-action-ink:#F7EFE3; --cover-shadow:#C29B4A;
  --cover-border:3px double #C29B4A;
}
.cover-v1 .invite-cover__emblem { border-radius:50%; background:#6E1B2C; color:#E8B7C4; border:3px double #C29B4A; font-size:32px; animation:om-float 7s ease-in-out infinite; }
.cover-v1 .invite-cover__texture { inset:24px; border:2px solid #C29B4A; transform:rotate(45deg); width:30px; height:30px; }
.cover-v2 {
  --cover-surround:#1E2B2A; --cover-paper:#EFE7D6; --cover-ink:#1E2B2A;
  --cover-action:#8A3324; --cover-action-ink:#EFE7D6; --cover-shadow:#C08A2E;
  --cover-border:2px solid #C08A2E;
}
.cover-v2 .invite-cover__texture { background-image:linear-gradient(#DCD1B8 1px,transparent 1px); background-size:100% 28px; opacity:.55; }
.cover-v2 .invite-cover__emblem { width:190px; height:116px; border:2px solid #1E2B2A; background:#E2D7BC; }
.cover-v2 .invite-cover__emblem::after { content:'CONTENTS: 1 MARRIAGE'; align-self:end; width:100%; padding:13px 0; border-top:2px solid #1E2B2A; font-size:9px; letter-spacing:.2em; color:#2C6B62; }
.cover-v3 {
  --cover-surround:#FBF3E6; --cover-paper:#2B3A4A; --cover-ink:#E7C9A0;
  --cover-action:#D4622B; --cover-action-ink:#FBF3E6; --cover-shadow:#2E8B8B;
  --cover-border:1px solid #E7C9A0;
}
.cover-v3 .invite-cover__emblem { width:220px; height:116px; border:1px dashed #E7C9A0; color:#FBF3E6; font-size:13px; letter-spacing:.18em; animation:om-orbit 20s linear infinite; }
.cover-v4 {
  --cover-surround:#6E3B1F; --cover-paper:#E8A020; --cover-ink:#6E3B1F;
  --cover-action:#C8551F; --cover-action-ink:#F7E7C4; --cover-shadow:#6E3B1F;
  --cover-border:4px solid #6E3B1F;
}
.cover-v4 .invite-cover__texture { background-image:repeating-linear-gradient(90deg,rgba(110,59,31,.16) 0 3px,transparent 3px 9px); }
.cover-v4 .invite-cover__names { font-family:Bitter,serif; font-weight:700; text-transform:uppercase; }
.cover-v4 .invite-cover__emblem { width:132px; height:96px; border-radius:66px 66px 0 0; background:#3E2413; color:#E8A020; align-items:end; padding-bottom:12px; font-family:Bitter,serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
.cover-v4 .invite-cover__open { font-family:Bitter,serif; font-weight:700; }

/* --- Marquee (shared mechanic) ------------------------------------------ */

.marquee { overflow: hidden; white-space: nowrap; }
.marquee__track { display: inline-flex; animation: om-marquee var(--marquee-speed, 26s) linear infinite; }

/* --- RSVP scaffolding ---------------------------------------------------- */

.rsvp__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 520px;
  margin: 30px auto 0;
}

.field { display: flex; flex-direction: column; gap: 7px; }
.field--half { flex: 1; min-width: 0; }
.row { display: flex; gap: 18px; }

.stepper { display: flex; align-items: stretch; }
.stepper__value { flex: 1; text-align: center; }
.stepper__btn { cursor: pointer; }
.stepper__btn[disabled] { opacity: .35; cursor: not-allowed; }

.segmented { display: flex; }
.segmented__btn {
  flex: 1;
  padding: 12px 0;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

textarea.input { resize: vertical; min-height: 84px; }

/* Native validation glow is replaced by our own inline messaging. */
.input:invalid { box-shadow: none; }

.submit { cursor: pointer; }
.submit[disabled] { cursor: progress; opacity: .72; }

/* Honeypot — off-screen, never focusable by keyboard. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Inline feedback. Colours are themed per direction. */
.rsvp__status {
  margin-top: 14px;
  padding: 12px 14px;
  font-size: 13px;
  letter-spacing: .08em;
  line-height: 1.5;
  display: none;
}
.rsvp__status.is-visible { display: block; }
.rsvp__status.is-error   { background: var(--status-error-bg);   color: var(--status-error-fg);   border: 1px solid var(--status-error-fg); }
.rsvp__status.is-success { background: var(--status-success-bg); color: var(--status-success-fg); border: 1px solid var(--status-success-fg); }

/* Success panel replaces the form in place, in the panel's own styling. */
.rsvp__done { display: none; text-align: center; padding: 10px 0 0; }
.rsvp__done.is-visible { display: block; animation: om-rise .6s ease both; }
.rsvp__done-title { margin-bottom: 10px; }

.is-hidden { display: none !important; }

/* Spinner inside the submit button while the request is in flight. */
.submit__spinner {
  display: none;
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: -2px;
  animation: om-spinner .7s linear infinite;
}
.submit.is-busy .submit__spinner { display: inline-block; }

/* --- Floating music toggle ---------------------------------------------- */

.music-toggle {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 100;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--music-bg);
  color: var(--music-fg);
  border: 1px solid var(--music-border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
  transition: transform .2s ease, opacity .2s ease;
}
.music-toggle:hover { transform: scale(1.08); }
.music-toggle:focus-visible { outline: 2px solid var(--music-fg); outline-offset: 3px; }
.music-toggle svg { width: 20px; height: 20px; display: block; fill: currentColor; }
.music-toggle .icon-muted { display: none; }
.music-toggle.is-muted .icon-muted { display: block; }
.music-toggle.is-muted .icon-playing { display: none; }
.music-toggle__label { display: none; }

/* The four invitation designs use the handoff's labelled top-corner control.
   The chooser keeps the quieter circular icon at the bottom. */
.invite-page .music-toggle {
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  bottom: auto;
  width: auto;
  height: auto;
  min-height: 34px;
  border-radius: 0;
  padding: 7px 12px;
  box-shadow: none;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.invite-page .music-toggle:hover { transform: translateY(-2px); }
.invite-page .music-toggle .icon-muted,
.invite-page .music-toggle .icon-playing { display: none; }
.invite-page .music-toggle__label { display: inline; white-space: nowrap; }

/* Gentle pulse only while we are waiting for the guest's first gesture. */
.music-toggle.is-pending { animation: om-float 3.4s ease-in-out infinite; }

/* --- Skip link ----------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--page-bg);
  z-index: 200;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.skip-link:focus { left: 8px; top: 8px; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 768px) {
  :root { --gutter: 24px; }
  .page { padding: 16px 10px; }
  .card { padding: 10px; }
  .row { flex-direction: column; gap: 18px; }
}

@media (max-width: 420px) {
  :root { --gutter: 18px; }
}

/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* Entrance animations use `both`, so a near-zero duration lands them on
     their end state. The 2A curtains must be sent fully off-stage. */
  .hero__curtain--l { transform: translateX(-102%) !important; }
  .hero__curtain--r { transform: translateX(102%) !important; }
  .music-toggle.is-pending { animation: none !important; }
}