/* ==========================================================================
   Guest-facing invitation page. Themed entirely by the template variables
   from templates.css; --page / --page-ink are the reading surface below the cover.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.inv-body { margin: 0; background: #e9e4ea; font-family: "Onest", system-ui, sans-serif; }
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 20px; height: 20px; flex: none; }

/* Fonts, colours and the stationery details (headings, countdown, buttons, RSVP) per template
   come from templates.css; this file lays the page out. */
.inv {
  --page: var(--bg);
  --page-ink: var(--ink);
  --page-acc: var(--acc);
  position: relative; max-width: 480px; margin: 0 auto; min-height: 100svh;
  background: var(--page); color: var(--page-ink); font-family: var(--fb);
  box-shadow: 0 0 60px rgba(28,26,58,.18);
}
/* Page colours per template (--page, --page-acc, --on-acc) are in templates.css, shared with the card previews. */
.inv :focus-visible { outline: 2.5px solid var(--page-acc); outline-offset: 3px; }

.inv-main { outline: none; padding-bottom: 72px; }
/* Fill the screen on tall phones, but never shorter than the shape the cover is designed for
   (short phones, laptops): then the guest scrolls to the rest. */
.inv-cover.cv { aspect-ratio: 9 / 18.5; min-height: min(100svh, 900px); }
.inv-cover .cv-body { position: absolute; }

/* ---- sections ---- */
.inv-sec { padding: 56px 32px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.inv-sec + .inv-sec { border-top: 1px solid color-mix(in srgb, var(--page-ink) 12%, transparent); }
.inv-h { margin: 0 0 8px; font: 500 34px/1.1 var(--fd); color: var(--page-acc); }
.inv-kicker { margin: 0; font: italic 500 26px/1.2 var(--fd); color: var(--page-acc); }
.inv-text { margin: 0; font-size: 17px; line-height: 1.65; max-width: 34ch; }
.inv-muted { opacity: .7; font-size: 15px; }
.inv-big { margin: 0; font: 500 32px/1.15 var(--fd); font-variant-numeric: lining-nums; }
.inv-venue { margin: 8px 0 0; font-size: 19px; font-weight: 600; }

/* countdown */
.cd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; max-width: 360px; }
.cd div { display: grid; gap: 2px; padding: 14px 4px; border-radius: 14px; background: color-mix(in srgb, var(--page-ink) 6%, transparent); }
.cd span { font: 500 34px/1 var(--fd); font-variant-numeric: lining-nums tabular-nums; }
.cd small { font-size: 13px; opacity: .7; }
.cd-done { font: 500 26px/1.2 var(--fd); margin: 0; }

/* buttons */
.inv-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.inv-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px;
  border-radius: 99px; border: 1.5px solid var(--page-acc); color: var(--page-ink);
  text-decoration: none; font-weight: 500; font-size: 15px; cursor: pointer; background: transparent;
}
.inv-btn .icon { color: var(--page-acc); }
.inv-btn--ghost { border-color: color-mix(in srgb, var(--page-ink) 25%, transparent); }
.inv-btn--solid { background: var(--page-acc); color: var(--on-acc, #fff); border-color: var(--page-acc); font-weight: 600; }
.inv-btn--solid .icon { color: currentColor; }
.inv-btn:hover { filter: brightness(1.05); }

/* program */
.prog { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; width: 100%; max-width: 320px; text-align: left; }
.prog li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px dashed color-mix(in srgb, var(--page-ink) 22%, transparent); }
.prog li:last-child { border-bottom: 0; }
.prog time { font: 600 20px/1.3 var(--fd); color: var(--page-acc); font-variant-numeric: lining-nums tabular-nums; }

/* rsvp */
.rsvp { display: grid; gap: 18px; width: 100%; max-width: 360px; text-align: left; margin-top: 12px; }
.rsvp-opts { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.rsvp-opts label { position: relative; display: block; cursor: pointer; }
.rsvp-opts input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.rsvp-opts span { display: block; padding: 14px 18px; border-radius: 14px; border: 1.5px solid color-mix(in srgb, var(--page-ink) 22%, transparent); font-weight: 500; text-align: center; transition: background-color .2s, border-color .2s; }
.rsvp-opts input:checked + span { border-color: var(--page-acc); background: color-mix(in srgb, var(--page-acc) 16%, transparent); }
.rsvp-opts input:focus-visible + span { outline: 2.5px solid var(--page-acc); outline-offset: 2px; }
.rsvp-field { display: grid; gap: 6px; font-size: 15px; font-weight: 500; }
.rsvp-field input, .rsvp-field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px; font-size: 16px;
  border: 1.5px solid color-mix(in srgb, var(--page-ink) 22%, transparent);
  background: color-mix(in srgb, var(--page) 85%, white); color: var(--page-ink);
}
.rsvp-field input:focus, .rsvp-field textarea:focus { outline: none; border-color: var(--page-acc); }
.rsvp-count { grid-template-columns: 1fr auto; align-items: center; }
.stepper { display: inline-flex; align-items: center; gap: 4px; border: 1.5px solid color-mix(in srgb, var(--page-ink) 22%, transparent); border-radius: 99px; padding: 3px; }
.stepper button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--page-ink) 8%, transparent); font-size: 20px; cursor: pointer; }
.stepper output { min-width: 32px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.rsvp-err { margin: 0; color: var(--page-acc); font-weight: 600; font-size: 15px; }
.rsvp .inv-btn { justify-content: center; width: 100%; }
.rsvp-done { display: grid; gap: 8px; justify-items: center; outline: none; }
.inv-upload { margin-top: 8px; }
.inv-upload:focus-within { outline: 2.5px solid var(--page-acc); outline-offset: 3px; }

.inv-foot { padding: 32px 24px 40px; text-align: center; font-size: 14px; opacity: .7; }
.inv-foot p { margin: 0; }

/* demo bar */
.demo-bar {
  position: fixed; z-index: 20; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); translate: -50% 0;
  display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 18px; border-radius: 99px;
  background: #1c1a3a; color: #f5f0f3; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.3);
  width: max-content; max-width: calc(100% - 24px);
}
.demo-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-bar a { flex: none; padding: 10px 16px; border-radius: 99px; background: #d8992a; color: #1c1a3a; font-weight: 600; text-decoration: none; }
.env:not(.is-gone) ~ .demo-bar { display: none; }

/* ======================= Envelope ======================= */
.env {
  position: fixed; inset: 0; z-index: 30; display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg) 92%, black);
  transition: opacity .6s ease .5s, visibility 0s linear 1.1s;
}
.env-card { position: relative; display: grid; justify-items: center; gap: 22px; width: min(340px, 86vw); }
.env-to { margin: 0; font: italic 500 28px/1.2 var(--fd); color: var(--ink); text-align: center; }
.tpl-kelagayi:not([data-v="ag"]) .env-to { color: #fff; }
.env-paper { position: relative; width: 100%; aspect-ratio: 1.45; perspective: 900px; }
.env-pocket, .env-flap { position: absolute; inset: 0; }
.env-pocket {
  background: color-mix(in srgb, var(--page) 92%, var(--acc)); border-radius: 6px;
  box-shadow: 0 24px 48px -16px rgba(0,0,0,.45);
}
.env-pocket::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background:
    linear-gradient(to top right, transparent 49.5%, color-mix(in srgb, var(--page-ink) 10%, transparent) 50%, transparent 51%) left / 50% 100% no-repeat,
    linear-gradient(to top left, transparent 49.5%, color-mix(in srgb, var(--page-ink) 10%, transparent) 50%, transparent 51%) right / 50% 100% no-repeat;
}
.env-flap {
  z-index: 2; height: 58%; transform-origin: top center; transition: transform .7s cubic-bezier(.4,.1,.2,1);
  background: color-mix(in srgb, var(--page) 80%, var(--acc));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.env-seal {
  position: absolute; z-index: 3; top: calc(58% - 40px); /* sits on the flap tip */
  left: calc(50% - 40px); width: 80px; height: 80px; border-radius: 50%; border: 0; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--acc) 70%, white), var(--acc) 55%, color-mix(in srgb, var(--acc) 70%, black));
  box-shadow: 0 6px 14px rgba(0,0,0,.35), inset 0 0 0 5px color-mix(in srgb, var(--acc) 85%, black);
  transition: transform .3s ease, opacity .3s ease;
  animation: seal 2.4s ease-in-out infinite;
}
.env-seal-mono { font: 600 26px/1 var(--fd); color: color-mix(in srgb, var(--acc) 25%, white); letter-spacing: .04em; }
.env-hint { margin: 0; font-size: 14px; color: var(--ink); opacity: .75; }
.tpl-kelagayi:not([data-v="ag"]) .env-hint { color: #fff; }
@keyframes seal { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.env.is-open .env-flap { transform: rotateX(180deg); }
.env.is-open .env-seal { transform: scale(.6); opacity: 0; animation: none; }
.env.is-open { opacity: 0; visibility: hidden; }
.env.is-gone { display: none; }

@media (prefers-reduced-motion: reduce) {
  .env-seal { animation: none; }
  .env, .env-flap, .env-seal { transition-duration: .01ms; transition-delay: 0s; }
}