/* ===== Fonts =====
   font-display: block, not swap — swap paints a system fallback first and then
   re-flows the whole page into the real face. The loading screen sits on top
   until document.fonts settles, so the block period is never seen. */
@font-face {
  font-family: 'DM Medea';
  src: url('DM-Medea.ttf') format('truetype');
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: 'BPG Irubaqidze';
  src: url('bpg_irubaqidze.otf') format('opentype');
  font-weight: 400;
  font-display: block;
}

/* ────────────────────────────────────────
   VIEWPORT HEIGHT — the in-app browser jump

   Instagram / Messenger / Facebook slide a bottom nav bar in and out while the
   guest scrolls. That bar is a NATIVE view sitting outside the webview: when it
   appears, the app resizes the webview's whole frame. The page is not told
   "some chrome appeared" — it is told the window got shorter.

   Which means `svh` does not help here. `svh` / `lvh` / `dvh` describe the
   browser's OWN retractable chrome, and an in-app webview has none as far as it
   knows — so all three units recompute together off the new frame, exactly like
   plain `vh`. There is no CSS unit that survives this. Anything sized against
   the viewport is re-measured mid-scroll and the page shifts under the thumb.

   So the height is pinned in JavaScript instead. `--vh` is measured off
   visualViewport before first paint (inline script in index.html), re-pinned
   for the first ~6s while Chrome iOS (opened from WhatsApp) settles its real
   viewport, and after that rewritten ONLY when the viewport WIDTH changes.
   A later height-only resize can only be that nav bar, and is ignored.

   The cascade, in the order it must stay:

     min-height: 100vh;             ← floor for engines without svh
     min-height: 100svh;            ← better floor, correct in real Safari/Chrome
     .vh-lock … calc(var(--vh)*100) ← the pin. MUST come last and win.

   The pin lives on a `.vh-lock` class rather than in the declarations above so
   that a browser with JS disabled keeps the `svh` fallback, instead of hitting
   an unresolved var() and collapsing the section to zero height.

   Never introduce `dvh` here — it tracks the bar by definition and repaints on
   every frame of the slide.
──────────────────────────────────────── */
.vh-lock .hero,
.vh-lock .rsvp,
.vh-lock .mobile-prompt {
  min-height: calc(var(--vh) * 100);
}

html, body {
  /* stops the rubber-band overscroll that makes the toolbar flap on every
     flick at the top or bottom of the page */
  overscroll-behavior-y: none;
}

/* ===== Loading screen =====
   Holds the hero back until its corner artwork has decoded and the webfonts
   are ready, so nothing pops in or re-flows once the guest is looking. */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--paper, #f4efe4);
  transition: opacity 0.6s ease;
}

.loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* The hero corners and hero text animate themselves in on load. Without this
   they would play out behind the loading screen and the guest would uncover a
   finished, static hero. `is-loading` is set on <html> before first paint and
   dropped when the loader fades, so the intro starts when it is watchable.
   The loader lives outside .site, so its spinner keeps turning. */
html.is-loading .site,
html.is-loading .site * {
  animation-play-state: paused !important;
}

.loader__spinner {
  width: 38px;
  height: 38px;
  border: 2px solid rgba(184, 154, 94, 0.25);
  border-top-color: var(--gold, #b89a5e);
  border-radius: 50%;
  animation: loader-spin 0.9s linear infinite;
}

@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

/* ===== Base ===== */
:root {
  /* 1% of the viewport height in pixels, frozen by the head script.
     See the VIEWPORT HEIGHT note above. */
  --vh: 1vh;

  --paper:      #f4efe4;
  --paper-soft: #efe8d8;
  --text:       #4a4636;
  --text-soft:  #8a8270;
  --name:       #2f2c24;
  --green:      #6f7d59;
  --gold:       #b89a5e;
  --line:       #cbbf9e;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  background-color: var(--paper);
  color: var(--text);
  font-family: 'BPG Irubaqidze', serif;
  -webkit-font-smoothing: antialiased;
}

/* ===== Custom scrollbar ===== */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--gold) var(--paper-soft);
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--paper-soft);
}
::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 8px;
}

/* ===== Hero ===== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 50% 38%, #fbf8ef 0%, var(--paper) 62%);
}

.corner {
  position: absolute;
  width: 46vw;
  max-width: 230px;
  height: auto;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}

.corner--tl {
  top: -2vw;
  left: -8vw;
  transform-origin: top left;
  animation:
    intro-tl 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s both,
    sway-a 7s ease-in-out 1.8s infinite;
}
.corner--tr {
  top: -4vw;
  right: -6vw;
  width: 52vw;
  max-width: 250px;
  transform-origin: top right;
  animation:
    intro-tr 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s both,
    sway-b 8s ease-in-out 1.8s infinite;
}
.corner--bl {
  bottom: -1vw;
  left: -7vw;
  width: 52vw;
  max-width: 250px;
  transform-origin: bottom left;
  animation:
    intro-bl 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s both,
    sway-b 8.5s ease-in-out 1.8s infinite;
}
.corner--br {
  bottom: -1vw;
  right: -9vw;
  transform-origin: bottom right;
  animation:
    intro-br 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s both,
    sway-a 7.5s ease-in-out 1.8s infinite;
}

/* Idle sway — more pronounced drift + rotation */
@keyframes sway-a {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-7px) rotate(3.2deg); }
}
@keyframes sway-b {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-7px) rotate(-3.2deg); }
}

/* Entry — each corner glides in from its own corner */
@keyframes intro-tl {
  from { opacity: 0; transform: translate(-130%, -130%) rotate(0deg); }
  to   { opacity: 1; transform: translate(0, 0) rotate(0deg); }
}
@keyframes intro-tr {
  from { opacity: 0; transform: translate(130%, -130%) rotate(0deg); }
  to   { opacity: 1; transform: translate(0, 0) rotate(0deg); }
}
@keyframes intro-bl {
  from { opacity: 0; transform: translate(-130%, 130%) rotate(0deg); }
  to   { opacity: 1; transform: translate(0, 0) rotate(0deg); }
}
@keyframes intro-br {
  from { opacity: 0; transform: translate(130%, 130%) rotate(0deg); }
  to   { opacity: 1; transform: translate(0, 0) rotate(0deg); }
}

/* ===== Hero content ===== */
.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 116px 30px 120px;
}

/* Hero text — staggered elegant entrance */
@keyframes hero-text-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero__content > * {
  opacity: 0;
  animation: hero-text-in 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.hero__content > *:nth-child(1) { animation-delay: 0.30s; }
.hero__content > *:nth-child(2) { animation-delay: 0.46s; }
.hero__content > *:nth-child(3) { animation-delay: 0.62s; }
.hero__content > *:nth-child(4) { animation-delay: 0.78s; }
.hero__content > *:nth-child(5) { animation-delay: 0.94s; }
.hero__content > *:nth-child(6) { animation-delay: 1.10s; }

.hero__invite {
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: var(--text-soft);
  margin-bottom: 14px;
}

.hero__name {
  font-family: 'DM Medea', serif;
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.05;
  color: var(--name);
  letter-spacing: 0.01em;
}

.hero__amp {
  font-family: 'Pinyon Script', cursive;
  font-size: 2.4rem;
  color: var(--gold);
  margin: 4px 0;
}

.hero__month {
  font-size: 1.4rem;
  letter-spacing: 0.34em;
  color: var(--text);
  margin: 24px 0 14px;
  padding-right: 1.5rem;
}

.hero__date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 2rem;
}

.hero__date-side {
  font-size: 0.92rem;
  letter-spacing: 0.16em;
  color: var(--text-soft);
  position: relative;
  padding: 0 14px;
}
.hero__date-side::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 1px;
  height: 30px;
  background: var(--line);
  transform: translateY(-50%);
}
.hero__date-side:first-of-type::before { right: 0; }
.hero__date-side:last-of-type::before  { left: 0; }

.hero__date-num {
  font-family: 'DM Medea', serif;
  font-size: 3rem;
  font-weight: 400;
  color: var(--name);
  line-height: 1;
}

.hero__place {
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  color: var(--text);
}
.hero__pin {
  color: var(--green);
  font-size: 0.66rem;
  vertical-align: 0.12em;
  margin-right: 5px;
}

.hero__message {
  font-size: 1.18rem;
  line-height: 1.65;
  color: var(--text-soft);
}

/* ===== Countdown ===== */
.countdown {
  position: relative;
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 50% 50%, #fbf8ef 0%, var(--paper) 70%);
  padding: 62px 30px 66px;
  text-align: center;
}

.countdown__eyebrow {
  font-family: 'DM Medea', serif;
  font-size: 1.85rem;
  color: var(--name);
  letter-spacing: 0.04em;
}

.countdown__ornament {
  display: block;
  font-size: 0.9rem;
  color: var(--gold);
  margin: 12px 0 6px;
}

.countdown__grid {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

.cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 64px;
  padding: 16px 6px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.45);
}

.cd-unit__num {
  font-family: 'DM Medea', serif;
  font-size: 2rem;
  line-height: 1;
  color: var(--name);
}

.cd-unit__label {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--text-soft);
}

/* ===== Divider ===== */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 4px 60px;
  background-color: var(--paper);
}
.divider__line {
  height: 1px;
  width: 70px;
  background: linear-gradient(to right, transparent, var(--line));
}
.divider__line:last-child {
  background: linear-gradient(to left, transparent, var(--line));
}
.divider__mark {
  font-size: 0.78rem;
  color: var(--gold);
}

/* ===== Schedule ===== */
.schedule {
  position: relative;
  background-color: var(--paper);
  padding: 64px 30px 72px;
  text-align: center;
}

.schedule__eyebrow {
  font-family: 'DM Medea', serif;
  font-size: 1.85rem;
  color: var(--name);
  letter-spacing: 0.04em;
}

.schedule__ornament {
  display: block;
  font-size: 0.9rem;
  color: var(--gold);
  margin: 12px 0 4px;
}

.timeline {
  position: relative;
  margin-top: 30px;
  padding: 8px 0;
}

.event {
  position: relative;
  padding: 26px 0;
}

.event__time {
  font-family: 'DM Medea', serif;
  font-size: 1.7rem;
  color: var(--gold);
  letter-spacing: 0.02em;
}

.event__title {
  font-family: 'DM Medea', serif;
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--name);
  margin: 8px 0 10px;
}

.event__venue {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--text-soft);
}

.event__map {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 9px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  color: var(--text);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  background-color: var(--paper);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.event__map:hover {
  background-color: var(--green);
  border-color: var(--green);
  color: var(--paper);
}
.event__pin {
  font-size: 0.6rem;
  color: var(--green);
  transition: color 0.3s ease;
}
.event__map:hover .event__pin { color: var(--paper); }

/* ===== RSVP ===== */
.rsvp {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 50% 42%, #fbf8ef 0%, var(--paper) 64%);
}

.rsvp__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 180px 34px 180px;
}

.rsvp__eyebrow {
  font-family: 'DM Medea', serif;
  font-size: 1.85rem;
  color: var(--name);
  letter-spacing: 0.04em;
}

.rsvp__ornament {
  display: block;
  font-size: 0.9rem;
  color: var(--gold);
  margin: 12px 0 6px;
}

.rsvp__note {
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: var(--text-soft);
  margin-bottom: 30px;
}

.rsvp__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 320px;
}

.rsvp__input {
  width: 100%;
  padding: 13px 16px;
  font-family: 'BPG Irubaqidze', serif;
  font-size: 1rem;
  color: var(--text);
  background-color: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.rsvp__input::placeholder { color: var(--text-soft); }
.rsvp__input:focus {
  border-color: var(--gold);
  background-color: rgba(255, 255, 255, 0.85);
}

.rsvp__guests {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* a "no" answer has no party to count; script.js toggles this */
.rsvp__guests.is-hidden { display: none; }

.rsvp__hint {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  text-align: left;
  padding-left: 4px;
}

.rsvp__radios {
  display: flex;
  gap: 12px;
  margin: 2px 0;
}

.radio-card {
  flex: 1;
  cursor: pointer;
}
.radio-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.radio-card__face {
  display: block;
  padding: 12px 8px;
  font-size: 0.96rem;
  color: var(--text);
  text-align: center;
  background-color: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.radio-card input:checked + .radio-card__face {
  background-color: var(--green);
  border-color: var(--green);
  color: var(--paper);
}

.rsvp__submit {
  margin-top: 6px;
  padding: 13px 20px;
  font-family: 'BPG Irubaqidze', serif;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--paper);
  background-color: var(--name);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.rsvp__submit:hover { background-color: var(--green); }
.rsvp__submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.rsvp__status {
  margin-top: 18px;
  min-height: 1.2em;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--green);
}
.rsvp__status.is-error { color: #b5524a; }

/* ===== Footer ===== */
.footer {
  background-color: var(--paper);
  padding: 28px 20px 36px;
  text-align: center;
}
.footer__credit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--text-soft);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  opacity: 0.3;
  transition: opacity 0.3s ease;
}
.footer__credit:hover { opacity: 0.65; }
.footer__credit img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* ===== Desktop notice ===== */
.mobile-prompt {
  display: none;
}

@media (min-width: 769px) {
  .site { display: none; }
  .mobile-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: 40px;
    gap: 18px;
  }
  .mobile-prompt img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    opacity: 0.8;
  }
  .mobile-prompt p {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--text-soft);
    letter-spacing: 0.04em;
  }
}