/* სოსო & მაგდა invitation styles, mobile-first. Linked from index.html only. */

/* ===== 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 native bottom nav bar in and out
   while the guest scrolls, and the app resizes the whole webview frame when it
   does. vh, svh, lvh and dvh ALL recompute off that frame, so no CSS unit
   survives it. Chrome iOS opened from WhatsApp has a second bug: it reports a
   viewport ~110px off at first paint and settles without a catchable resize.

   So the height is pinned in JavaScript: `--vh` is measured off
   visualViewport.height before first paint (inline script in index.html),
   re-pinned for the first ~6s while the browser settles (script.js), and after
   that only rewritten when the viewport WIDTH changes.

   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 so a browser with JS disabled keeps the
   `svh` fallback instead of hitting an unresolved var(). Never use `dvh`.
──────────────────────────────────────── */
.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;
}

/* Loader scroll-lock. Deliberately NOT position:fixed / overflow:hidden: those
   freeze Chrome iOS in its short first-paint viewport. The gesture itself is
   trapped in script.js. */
html.is-locked,
html.is-locked body {
  overscroll-behavior: none;
  touch-action: 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__date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 2rem 0 14px;
}

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

/* ===== Hero scroll cue =====
   Sits above the corner florals (z-index 3) at the bottom centre. It waits for
   the staggered hero text (last item lands ~2.3s) before fading in, and the
   whole thing is paused by html.is-loading like the rest of the hero. */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform: translateX(-50%);
  opacity: 0;
  animation: scroll-cue-in 1s ease 2.2s both;
  pointer-events: none;
}

.hero__scroll-text {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  color: var(--text-soft);
}

/* a thin hairline with a gold bead travelling down it, reads as "keep going"
   without an arrow icon */
.hero__scroll-line {
  position: relative;
  width: 1px;
  height: 34px;
  overflow: hidden;
  background-color: var(--line);
}
.hero__scroll-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 12px;
  background-color: var(--gold);
  animation: scroll-cue-bead 2.2s cubic-bezier(0.65, 0, 0.35, 1) 3.2s infinite;
  transform: translateY(-12px);
}

@keyframes scroll-cue-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes scroll-cue-bead {
  0%   { transform: translateY(-12px); }
  70%  { transform: translateY(34px); }
  100% { transform: translateY(34px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-line::after { animation: none; transform: translateY(11px); }
}

/* ===== 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__label {
  margin: 4px 0 -6px;
  font-size: 0.9rem;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--text-soft);
}

.rsvp__input::placeholder { color: var(--text-soft); }
.rsvp__input:focus {
  border-color: var(--gold);
  background-color: rgba(255, 255, 255, 0.85);
}

.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: auto;
  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;
  }
}