/* ==========================================================================
   Embroidered garden wedding invitation
   Mobile-first; on wide screens the invitation sits in a phone-width column.
   Sizes use cqw (1% of the invitation's width) so text scales with the art.
   ========================================================================== */

:root {
  --bg: #F4EFE6;
  --ink: #3D4A3E;
  --ink-soft: #5F6A5A;
  --muted: #858a7b;
  --gold: #A9874F;
  --gold-light: #D9BC83;
  --rose: #B06F78;
  --sage: #7F8F72;
  --line: rgba(61, 74, 62, .22);
  --display: "Cormorant Garamond", "Cormorant", "Noto Serif Georgian", Georgia, serif;
  --serif: "EB Garamond", "Noto Serif Georgian", Georgia, serif;
  --col: 480px;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-door: cubic-bezier(.42, .06, .24, 1);
  --gold-thread: linear-gradient(110deg, #93702F 0%, #A9874F 36%, #E2C98C 47%, #A9874F 58%, #8A682C 100%);
}

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

html {
  background: radial-gradient(120% 80% at 50% 0%, #E9E5D8 0%, #CED2C0 100%) fixed;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; font-weight: inherit; }
button { font: inherit; color: inherit; }

/* The invitation column -------------------------------------------------- */
.app {
  container-type: inline-size;
  position: relative;
  max-width: var(--col);
  margin: 0 auto;
  min-height: 100vh;
  overflow-x: clip;
  background-color: var(--bg);
  box-shadow: 0 0 80px rgba(40, 50, 35, .18);
}
/* very soft paper grain laid over everything, so pictures and page share one surface */
.app::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .32  0 0 0 0 .25  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width: 480px) {
  html { background: var(--bg); }
  .app { box-shadow: none; }
}

/* Shared type -------------------------------------------------------------- */
.title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 11.5cqw;
  line-height: 1.05;
  letter-spacing: .01em;
  text-align: center;
  color: var(--ink);
}
.title--rule::after {
  content: "";
  display: block;
  width: 13cqw;
  height: 1px;
  margin: 3.4cqw auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0);
  transition: transform 1.6s var(--ease-out) .7s;
}
.title--rule.is-in::after { transform: scaleX(1); }
.label {
  font-family: var(--serif);
  font-size: 3.1cqw;
  letter-spacing: .26em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-soft);
}
.label--tight { line-height: 1.6; }

/* Georgian text: no capitals (CSS would turn it into Mtavruli), no faux italics, less tracking */
:lang(ka) {
  text-transform: none;
  font-style: normal;
  letter-spacing: .01em;
}
.note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 4.5cqw;
  line-height: 1.6;
  text-align: center;
  color: var(--ink-soft);
}

/* gold thread that slowly catches the light */
.gold-shine {
  display: block;
  width: fit-content;
  margin-inline: auto;
  color: transparent;
  background: var(--gold-thread) 0 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gold-shine 5.5s ease-in-out infinite;
}
@keyframes gold-shine {
  0% { background-position: 100% 0; }
  55%, 100% { background-position: 0% 0; }
}

/* Image panels with text laid over their empty linen ----------------------- */
.panel { position: relative; }
.panel > img { width: 100%; }
.panel__body {
  position: absolute;
  top: var(--top, 20%);
  bottom: var(--bottom, 20%);
  left: var(--side, 14%);
  right: var(--side, 14%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Scroll reveals ----------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(4px);
  transition:
    opacity 1.1s ease,
    transform 1.2s var(--ease-out),
    filter 1.1s ease;
  transition-delay: calc(var(--d, 0) * 130ms);
}
/* large pictures "bloom" into place: a soft focus pull instead of a slide */
.panel.reveal {
  transform: scale(1.045);
  filter: blur(6px);
  transition-duration: 1.6s, 1.9s, 1.6s;
}
img.reveal { transform: translateY(26px) scale(.95); }
.reveal.is-in { opacity: 1; transform: none; filter: none; }

/* headings that appear letter by letter */
.reveal.is-split { opacity: 1; transform: none; filter: none; }
.w { display: inline-block; white-space: nowrap; }
.ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(.38em) rotate(7deg);
  filter: blur(6px);
  transition: opacity .9s ease, transform 1.15s var(--ease-out), filter .9s ease;
  transition-delay: calc(var(--d, 0) * 130ms + var(--i, 0) * 48ms + 120ms);
}
.is-in .ch { opacity: 1; transform: none; filter: none; }

/* "being stitched" reveals for garlands and borders */
.stitch { transition: clip-path 2.2s cubic-bezier(.55, .05, .25, 1); }
.stitch--x { clip-path: inset(0 50% 0 50%); }
.stitch--down { clip-path: inset(0 0 100% 0); transition-duration: 2.8s; }
.stitch--right { clip-path: inset(0 100% 0 0); }
.stitch.is-in { clip-path: inset(0 0 0 0); }

/* pictures that drift a little slower or faster than the page */
[data-drift] { translate: 0 var(--drift, 0px); }

/* tiny twinkling gold stars */
.sparkle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 3;
  width: var(--s);
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23FFF9E3'/%3E%3Cstop offset='.45' stop-color='%23EBD293'/%3E%3Cstop offset='1' stop-color='%23B08A45'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M12 0C12.9 7.6 16.4 11.1 24 12 16.4 12.9 12.9 16.4 12 24 11.1 16.4 7.6 12.9 0 12 7.6 11.1 11.1 7.6 12 0Z' fill='url(%23g)'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 .8cqw rgba(255, 240, 200, .9));
  opacity: 0;
  animation: twinkle var(--t) ease-in-out var(--delay) infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); }
  50% { opacity: .95; transform: scale(1) rotate(90deg); }
}

/* ==========================================================================
   Opening doors
   ========================================================================== */
.intro {
  position: fixed;
  inset: 0;
  z-index: 50;
  width: min(100%, var(--col));
  margin-inline: auto;
  overflow: hidden;
  touch-action: none;
  transition: opacity .6s ease 1.8s, visibility 0s linear 2.4s;
}
.intro__stage {
  container-type: inline-size;
  position: absolute;
  inset: 0;
  perspective: 1000px;
  perspective-origin: 50% 50%;
}

.door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  transform-style: preserve-3d;
  transition: transform 2s var(--ease-door) .3s;
  will-change: transform;
}
.door--left { left: 0; transform-origin: 0 50%; }
.door--right { right: 0; transform-origin: 100% 50%; }

.door__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  background: #8E9C7D;
}
/* each door shows its half of one continuous linen panel */
.door__face::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 200%;
  background: url("../img/doors.webp") center / cover no-repeat;
}
.door--left .door__face::before { left: 0; }
.door--right .door__face::before { right: 0; }

/* soft shadow where the two doors meet */
.door__face::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 7cqw;
}
.door--left .door__face::after {
  right: 0;
  background: linear-gradient(to left, rgba(20, 28, 16, .38), rgba(20, 28, 16, .08) 35%, transparent);
}
.door--right .door__face::after {
  left: 0;
  background: linear-gradient(to right, rgba(20, 28, 16, .30) 0, rgba(255, 255, 255, .10) 2px, rgba(20, 28, 16, .06) 35%, transparent);
}

/* a quiet running stitch around each door */
.door__stitch {
  position: absolute;
  inset: 4.5cqw 3.6cqw;
  border: 1.5px dashed rgba(246, 240, 226, .42);
  border-radius: 1.2cqw;
}

.door__shade {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 2s ease .3s;
}
.door--left .door__shade { background: linear-gradient(to right, rgba(15, 20, 12, .15), rgba(15, 20, 12, .6)); }
.door--right .door__shade { background: linear-gradient(to left, rgba(15, 20, 12, .15), rgba(15, 20, 12, .6)); }

/* the seal */
.seal {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 3;
  width: 40cqw;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  translate: -50% -50%;
  filter: drop-shadow(0 1.6cqw 2.4cqw rgba(25, 35, 20, .45));
  animation: seal-breathe 3.4s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
  transition: transform .6s var(--ease-out), opacity .5s ease .2s, filter .6s ease;
}
.seal img { width: 100%; }
.seal:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 6px; border-radius: 12px; }

/* gentle light sweeping across the seal */
.seal::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 252, 240, .55) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%;
  -webkit-mask: url("../img/plaque.webp") center / 100% 100% no-repeat;
  mask: url("../img/plaque.webp") center / 100% 100% no-repeat;
  animation: seal-sheen 5s ease-in-out 1.2s infinite;
}

/* pulsing ring inviting a tap */
.seal::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 248, 228, .7);
  translate: -50% -50%;
  opacity: 0;
  animation: seal-ring 2.6s ease-out 1.5s infinite;
}

.seal__mono {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 1%;
  font-family: var(--display);
  font-weight: 500;
  font-size: 13.5cqw;
  line-height: 1;
  letter-spacing: -.01em;
  color: transparent;
  background: linear-gradient(170deg, #E4CB92 10%, #A47E3C 42%, #E9D7A6 58%, #94702F 85%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 .25cqw 0 rgba(255, 255, 255, .7)) drop-shadow(0 -.15cqw 0 rgba(90, 64, 20, .35));
}
.seal__mono i {
  font-style: italic;
  font-size: .72em;
  margin: 0 .04em;
  translate: 0 .06em;
}

.intro__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8%;
  font-family: var(--serif);
  font-size: 3cqw;
  letter-spacing: .5em;
  text-indent: .5em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(250, 246, 234, .85);
  text-shadow: 0 1px 6px rgba(20, 30, 15, .35);
  animation: hint 2.8s ease-in-out infinite;
  transition: opacity .4s ease;
}

/* opening sequence */
.intro.is-opening { opacity: 0; visibility: hidden; pointer-events: none; }
.is-opening .seal {
  animation: none;
  transform: scale(1.14);
  opacity: 0;
  filter: drop-shadow(0 4cqw 5cqw rgba(25, 35, 20, .35));
}
.is-opening .seal::before, .is-opening .seal::after { animation: none; opacity: 0; }
.is-opening .intro__hint { opacity: 0; animation: none; }
.is-opening .door--left { transform: rotateY(-112deg); }
.is-opening .door--right { transform: rotateY(112deg); }
.is-opening .door__shade { opacity: 1; }

@keyframes seal-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}
@keyframes seal-sheen {
  0%, 30% { background-position: 130% 0; }
  70%, 100% { background-position: -30% 0; }
}
@keyframes seal-ring {
  0% { opacity: .9; scale: .9; }
  100% { opacity: 0; scale: 1.9; }
}
@keyframes hint {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

/* ==========================================================================
   Rose petals drifting over the whole invitation
   ========================================================================== */
.petals {
  position: fixed;
  inset: 0;
  z-index: 20;
  width: min(100%, var(--col));
  margin-inline: auto;
  container-type: inline-size;
  overflow: hidden;
  pointer-events: none;
}
.petals i {
  position: absolute;
  top: -5%;
  left: var(--x);
  width: var(--s);
  aspect-ratio: 5 / 4;
  opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.35' cy='.35' r='.8'%3E%3Cstop offset='0' stop-color='%23F7E3E2'/%3E%3Cstop offset='1' stop-color='%23C48690'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M1 8C4 1.2 13.5 0 19 5.6 15.4 13.6 6.4 16 1 8Z' fill='url(%23g)'/%3E%3Cpath d='M3 8.2C7 6.4 12 6 17 6.2' stroke='%23fff' stroke-opacity='.35' stroke-width='.6' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: petal-fall var(--t) linear var(--delay) infinite;
  will-change: transform, opacity;
}
.petals i.is-cream {
  filter: saturate(0) brightness(1.18) sepia(.25);
}
@keyframes petal-fall {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) rotateX(0deg); opacity: 0; }
  8% { opacity: var(--o, .85); }
  50% { transform: translate3d(var(--dx), 52svh, 0) rotate(170deg) rotateX(160deg); }
  90% { opacity: var(--o, .85); }
  100% { transform: translate3d(calc(var(--dx) * -.5), 108svh, 0) rotate(340deg) rotateX(320deg); opacity: 0; }
}

/* ==========================================================================
   Main scene
   ========================================================================== */
.hero {
  /* hero text scales with the narrower of the screen's width and height,
     so on any phone it stays in the empty linen above the house */
  --hu: min(1cqw, .46cqh);
  container-type: size;
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  max-height: 1040px;
  overflow: hidden;
  background: var(--bg);
}
.hero__art {
  position: absolute;
  inset: 0;
  transform: scale(1.16);
  transition: transform 3.4s cubic-bezier(.2, .6, .15, 1) .6s;
  /* the bottom of the scene melts into the page instead of ending in a hard line */
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}
.is-opened .hero__art { transform: scale(1); }
.hero__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  transform: translateY(calc(var(--p, 0) * 9%)) scale(calc(1 + var(--p, 0) * .06));
  will-change: transform;
}
/* the scene breathes very slowly once it is open */
.is-opened .hero__art img { animation: breathe 16s ease-in-out 4s infinite alternate; }
@keyframes breathe {
  from { scale: 1; }
  to { scale: 1.045; }
}

/* warm light drifting across the linen */
.hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 246, 222, .62), rgba(255, 246, 222, 0)) no-repeat;
  background-size: 90% 46%;
  opacity: 0;
  transition: opacity 3s ease 2.4s;
  animation: glow-drift 17s ease-in-out infinite alternate;
}
.is-opened .hero__glow { opacity: 1; }
@keyframes glow-drift {
  0% { background-position: -10% 6%; }
  100% { background-position: 110% 30%; }
}

.hero__text {
  position: absolute;
  left: 0;
  right: 0;
  top: 7%;
  height: 31%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: translateY(calc(var(--p, 0) * -60px));
  opacity: calc(1 - var(--p, 0) * 1.6);
}
.hero__names {
  font-family: var(--display);
  font-weight: 500;
  font-size: calc(var(--hu) * 13.5);
  line-height: .96;
  color: var(--ink);
}
.hero__names > span { display: block; }
.hero__names .ch {
  transform: translateY(.32em) rotate(5deg);
  filter: blur(8px);
  transition: opacity 1.3s ease, transform 1.5s var(--ease-out), filter 1.3s ease;
  transition-delay: calc(1.4s + var(--i) * 80ms);
}
.hero__names .amp {
  font-style: italic;
  font-size: .6em;
  line-height: 1.1;
  opacity: 0;
  transform: scale(.5) rotate(-14deg);
  filter: blur(6px);
  transition: opacity 1.4s ease, transform 1.7s var(--ease-out), filter 1.4s ease;
  transition-delay: calc(1.4s + var(--i, 7) * 80ms);
}
.is-opened .hero__names .ch,
.is-opened .hero__names .amp { opacity: 1; transform: none; filter: none; }
.hero__date {
  margin-top: calc(var(--hu) * 3.8);
  font-family: var(--serif);
  font-size: calc(var(--hu) * 3.4);
  letter-spacing: .34em;
  text-indent: .34em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition: opacity 1.6s ease 2.8s, transform 1.8s var(--ease-out) 2.8s, filter 1.6s ease 2.8s;
}
.is-opened .hero__date { opacity: 1; transform: none; filter: none; }
.hero__text .sparkle { animation-delay: calc(var(--delay) + 3s); }

/* scroll hint */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 13%;
  z-index: 2;
  width: 1px;
  height: 11cqw;
  translate: -50% 0;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .85));
  opacity: 0;
  transition: opacity 1s ease 3.6s;
}
.scroll-cue span {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1.8cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% 0;
  background: radial-gradient(circle at 35% 30%, #fff 0 25%, #EDE5D6 60%, #BFB29C 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  animation: cue 2.4s ease-in-out infinite;
}
.is-opened .scroll-cue { opacity: 1; }
.is-scrolled .scroll-cue { opacity: 0; transition-delay: 0s; }
@keyframes cue {
  0% { top: 0; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ==========================================================================
   Welcome card
   ========================================================================== */
/* the card slides up under the bottom of the main scene and the two pictures fade into each other */
.welcome { position: relative; z-index: 1; margin-top: -16cqw; }
.welcome .panel > img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 11%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 11%, #000 90%, transparent 100%);
}
/* a slow band of light passing over the embroidery */
.welcome .panel::after {
  content: "";
  position: absolute;
  inset: 11% 0 10%;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 36%, rgba(255, 251, 238, .34) 50%, transparent 64%) no-repeat;
  background-size: 260% 100%;
  background-position: 130% 0;
}
.welcome .panel.is-in::after { animation: seal-sheen 9s ease-in-out 1.6s infinite; }
.welcome__body { --top: 25%; --bottom: 43%; --side: 18%; gap: 4cqw; }
.welcome__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 10cqw;
  line-height: 1.02;
  color: var(--ink);
}
.welcome__title .sub {
  display: block;
  font-style: italic;
  font-size: .62em;
  margin-top: 1.4cqw;
  color: var(--ink-soft);
}
.welcome__text {
  font-family: var(--serif);
  font-size: 4.1cqw;
  line-height: 1.65;
  letter-spacing: .02em;
  color: var(--ink-soft);
}

/* ==========================================================================
   Countdown
   ========================================================================== */
.countdown { position: relative; padding: 1cqw 0 0; }
.garland img { width: 100%; }
.garland--top { width: 96%; margin: 0 auto 1cqw; }
.garland--top img { transform-origin: 50% 0; animation: sway-soft 7s ease-in-out infinite; }
.garland--bottom { width: 100%; margin-top: 2cqw; }
.garland--bottom img { transform-origin: 50% 0; animation: sway-soft 8.5s ease-in-out -3s infinite; }

.countdown__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3cqw;
  padding: 5cqw 6cqw 1cqw;
}
.medal { display: flex; flex-direction: column; align-items: center; gap: 3cqw; }
.medal__disc { position: relative; width: 100%; }
.medal__disc img { width: 100%; }
/* medallions float gently, each on its own beat, and a gleam runs across them */
.medal.is-in .medal__disc { animation: medal-float 5.5s ease-in-out infinite; animation-delay: calc(var(--d, 0) * -1.6s); }
.medal__disc::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 252, 240, .75) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%;
  background-position: 130% 0;
  -webkit-mask: url("../img/medallion.webp") center / 100% 100% no-repeat;
  mask: url("../img/medallion.webp") center / 100% 100% no-repeat;
}
.medal.is-in .medal__disc::after { animation: seal-sheen 6s ease-in-out infinite; animation-delay: calc(var(--d, 0) * .4s + 1.2s); }
@keyframes medal-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -1.8cqw; }
}
.medal__num {
  position: absolute;
  left: 0;
  right: 0;
  top: 56%;
  translate: 0 -50%;
  text-align: center;
  font-family: var(--display);
  font-weight: 500;
  font-size: 8.4cqw;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}
.medal__num.is-tick { animation: tick .6s var(--ease-out); }
.medal__label {
  font-size: 2.9cqw;
  letter-spacing: .28em;
  text-indent: .28em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
@keyframes tick {
  0% { opacity: .2; transform: translateY(-6px); }
  100% { opacity: 1; transform: none; }
}
@keyframes sway-soft {
  0%, 100% { transform: rotate(.6deg); }
  50% { transform: rotate(-.6deg); }
}

/* ==========================================================================
   Names
   ========================================================================== */
.names { position: relative; padding: 7cqw 8cqw 9cqw; text-align: center; }
.names__lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: 4.4cqw;
  color: var(--ink-soft);
}
.names__name {
  margin-top: 5cqw;
  font-family: var(--display);
  font-weight: 500;
  font-size: 12cqw;
  line-height: 1.05;
  color: var(--ink);
}
.names__and {
  margin-top: 1cqw;
  font-family: var(--display);
  font-style: italic;
  font-size: 7cqw;
}
.names__name + .names__lead { margin-top: 6cqw; }
.names__date {
  margin-top: 4cqw;
  font-size: 4.2cqw;
  letter-spacing: .06em;
  color: var(--ink);
}

/* ==========================================================================
   Ceremony & reception
   ========================================================================== */
.venue { position: relative; }
.venue__card { width: 100%; }
.venue__card > img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 6%);
}
.venue__body { --top: 12%; --bottom: 31%; --side: 12%; gap: 2.4cqw; }
.venue__body > * { max-width: 56cqw; }
.venue__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 7.8cqw;
  line-height: 1;
}
.venue__title .sub { display: block; }

/* the three places of the day */
.stops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 1.8cqw; }
.stop { display: flex; flex-direction: column; align-items: center; gap: .4cqw; text-wrap: balance; }
.stop + .stop::before {
  content: "";
  width: 10cqw;
  height: 1px;
  margin-bottom: 1.6cqw;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.stop__what { font-size: 2.85cqw; line-height: 1.35; color: var(--ink-soft); }
.stop__what time {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.3em;
  letter-spacing: .03em;
  color: var(--gold);
}
.stop__place {
  font-family: var(--display);
  font-weight: 500;
  font-size: 4.5cqw;
  line-height: 1.2;
  color: var(--ink);
}
.stop__place [lang="ka"] { font-size: .86em; }
.stop__place:lang(ka) { font-size: 3.8cqw; }
.stop__address { font-size: 2.6cqw; line-height: 1.4; color: var(--ink-soft); }
.stop__map {
  display: inline-flex;
  align-items: center;
  gap: 1cqw;
  padding: .5cqw .2cqw;
  border-bottom: 1px solid var(--line);
  font-size: 2.4cqw;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  transition: color .3s ease, border-color .3s ease;
}
.stop__map:hover { color: var(--rose); border-color: var(--rose); }
.stop__map svg { width: 3cqw; height: 3cqw; fill: none; stroke: currentColor; stroke-width: 1.4; }
/* the places appear one after another once the card has opened */
.venue__card .stop { opacity: 0; transform: translateY(10px); transition: opacity 1s ease, transform 1.2s var(--ease-out); }
.venue__card.is-in .stop { opacity: 1; transform: none; }
.venue__card.is-in .stop:nth-child(1) { transition-delay: .9s; }
.venue__card.is-in .stop:nth-child(2) { transition-delay: 1.2s; }
.venue__card.is-in .stop:nth-child(3) { transition-delay: 1.5s; }

.hanging {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: -17cqw;
  pointer-events: none;
}
.hanging img {
  width: 100%;
  transform-origin: 50% 0;
  animation: sway 6.5s ease-in-out infinite;
}
@keyframes sway {
  0%, 100% { transform: skewX(1.1deg); }
  50% { transform: skewX(-1.1deg); }
}

.actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2cqw;
  margin-top: 2.5cqw;
}
.action {
  display: inline-flex;
  align-items: center;
  gap: 2.2cqw;
  padding: 1.8cqw 1cqw;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  font-family: var(--serif);
  font-size: 3.4cqw;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease;
}
.action:hover { color: var(--rose); border-color: var(--rose); }
.action svg {
  width: 4.2cqw;
  height: 4.2cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

/* ==========================================================================
   Dress code
   ========================================================================== */
.dress { padding: 0 8cqw 2cqw; text-align: center; }
.dress__code {
  margin-top: 4cqw;
  font-family: var(--display);
  font-weight: 500;
  font-size: 8.4cqw;
}
.dress .note { margin-top: 3cqw; }
.dress__art { width: 108%; max-width: none; margin: 6cqw -4% 0; }

/* ==========================================================================
   Our story
   ========================================================================== */
.story { padding: 4cqw 0 2cqw; }
.story__arch {
  position: relative;
  width: 94%;
  margin: 0 auto;
  transform: scale(calc(1.28 - var(--p, 0) * .28));
  opacity: calc(.25 + var(--p, 0) * .75);
  transform-origin: 50% 35%;
  will-change: transform;
}
.story__arch img { width: 100%; }
.story__body {
  position: absolute;
  top: 30%;
  bottom: 9%;
  left: 25%;
  right: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4cqw;
}
.story .title { font-size: 10cqw; }
.story .note { font-size: 3.85cqw; line-height: 1.55; }

/* ==========================================================================
   Timeline
   ========================================================================== */
.timeline { position: relative; padding: 4cqw 6cqw 8cqw; }
.timeline__list {
  position: relative;
  list-style: none;
  margin: 7cqw 0 8cqw;
  padding: 0;
}
/* a gold running stitch that sews itself down the page */
.timeline__list::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  translate: -50% 0;
  background: repeating-linear-gradient(to bottom, var(--gold) 0 7px, transparent 7px 12px);
  transform-origin: 50% 0;
  transform: scaleY(var(--p, 0));
}
.tl {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 12cqw 1fr;
  align-items: center;
  min-height: 30cqw;
}
.tl + .tl { margin-top: 2cqw; }
.tl__icon { width: 100%; max-width: 30cqw; justify-self: center; transform-origin: 50% 80%; }
/* the little embroidered pictures rock gently, like they hang from a thread */
.tl__icon.is-in { animation: rock 5s ease-in-out infinite; }
.tl:nth-child(even) .tl__icon.is-in { animation-delay: -2.5s; }
@keyframes rock {
  0%, 100% { rotate: -2.5deg; }
  50% { rotate: 2.5deg; }
}
.tl__pearl {
  justify-self: center;
  width: 5cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 16%, #F3EDE2 38%, #D8CDBA 72%, #AFA28B 100%);
  box-shadow: 0 1px 2px rgba(60, 50, 30, .35), 0 0 0 4px var(--bg);
  position: relative;
  z-index: 1;
  transform: scale(0);
  transition: transform .9s cubic-bezier(.3, 1.6, .5, 1) .25s;
}
.tl__pearl.is-in { transform: scale(1); }
.tl__pearl::after {
  content: "";
  position: absolute;
  inset: -35%;
  border-radius: 50%;
  border: 1px solid rgba(169, 135, 79, .6);
  opacity: 0;
}
.tl__pearl.is-in::after { animation: seal-ring 3.4s ease-out 1s infinite; }
.tl__text { display: flex; flex-direction: column; gap: 1.4cqw; }
.tl--icon-left .tl__text { text-align: left; padding-left: 1cqw; }
.tl--icon-right .tl__text { text-align: right; padding-right: 1cqw; }
.tl__text time {
  font-family: var(--display);
  font-weight: 500;
  font-size: 7.2cqw;
  line-height: 1;
  color: var(--ink);
}
.tl__text > span {
  font-size: 3.1cqw;
  line-height: 1.5;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.tl__text > span:lang(ka),
.tl__text > span.is-plain {
  font-size: 3.2cqw;
  line-height: 1.45;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--ink);
}
.tl__text > span.is-plain { letter-spacing: .06em; }
.timeline .actions { margin-top: 5cqw; }
.tl__text small {
  font-size: 2.75cqw;
  line-height: 1.45;
  font-style: italic;
  color: var(--ink-soft);
}
.tl__text small:lang(ka) { font-style: normal; }

/* ==========================================================================
   The day after
   ========================================================================== */
.after { padding: 4cqw 8cqw 14cqw; text-align: center; }
.divider { width: 116%; margin: 0 -8% 10cqw; }
.divider img { width: 100%; }
.after .label { margin-top: 3cqw; }
.after__place {
  margin-top: 6cqw;
  font-family: var(--display);
  font-weight: 500;
  font-size: 8cqw;
}
.after__art { width: 76%; margin: 8cqw auto 6cqw; }
.after__when { font-size: 4.2cqw; color: var(--ink); }
.after .note { margin-top: 6cqw; }

/* ==========================================================================
   Gifts
   ========================================================================== */
.gifts { padding: 2cqw 4cqw 4cqw; }
.gifts__body { --top: 16%; --bottom: 16%; --side: 18%; gap: 5cqw; }
.gifts .note { font-size: 4.2cqw; }
.gifts__card .note { opacity: 0; transform: translateY(12px); transition: opacity 1.2s ease 1s, transform 1.4s var(--ease-out) 1s; }
.gifts__card.is-in .note { opacity: 1; transform: none; }

/* ==========================================================================
   RSVP
   ========================================================================== */
.rsvp { position: relative; padding: 6cqw 9cqw 10cqw; text-align: center; }
.rsvp__topiary {
  position: absolute;
  top: -4cqw;
  right: -3cqw;
  width: 27cqw;
  pointer-events: none;
  transform-origin: 50% 100%;
  animation: topiary-sway 6s ease-in-out infinite;
}
@keyframes topiary-sway {
  0%, 100% { rotate: -2deg; }
  50% { rotate: 2deg; }
}
.rsvp .label { margin-top: 4cqw; }
.rsvp__by {
  margin-top: 2cqw;
  font-family: var(--display);
  font-weight: 500;
  font-size: 6.4cqw;
}
.rsvp__envelope {
  width: 48%;
  margin: 5cqw auto 3cqw;
  animation: float 5.5s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { translate: 0 0; rotate: -1.5deg; }
  50% { translate: 0 -2.2cqw; rotate: 1.5deg; }
}

.form { display: flex; flex-direction: column; gap: 6cqw; margin-top: 4cqw; text-align: left; }
.field { display: flex; flex-direction: column; gap: 2.2cqw; margin: 0; padding: 0; border: 0; min-width: 0; }
.field__label {
  padding: 0;
  font-size: 4.2cqw;
  line-height: 1.45;
  color: var(--ink);
}
.field input[type="text"],
.field select,
.field textarea {
  width: 100%;
  padding: 2.6cqw 3.2cqw;
  border: 1px solid rgba(61, 74, 62, .28);
  border-radius: 2cqw;
  background: rgba(255, 253, 248, .6);
  font-family: var(--serif);
  font-size: max(16px, 4.2cqw);
  color: var(--ink);
  outline: none;
  transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235F6A5A' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 3.5cqw center;
  background-size: 3cqw;
}
.field textarea { resize: vertical; min-height: 18cqw; }
.field input::placeholder, .field textarea::placeholder { color: #a3a597; font-style: italic; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold);
  background-color: #FFFDF8;
  box-shadow: 0 0 0 3px rgba(169, 135, 79, .14);
}

.choice {
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 1.4cqw 0;
  font-size: 4.3cqw;
  color: var(--ink);
  cursor: pointer;
}
/* radio buttons drawn as pearls */
.choice input {
  flex: none;
  width: 5.6cqw;
  height: 5.6cqw;
  margin: 0;
  border-radius: 50%;
  border: 1px solid rgba(61, 74, 62, .4);
  background: #FFFDF8;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: box-shadow .3s ease, background .3s ease, transform .3s ease;
}
.choice input:checked {
  border-color: rgba(120, 100, 70, .5);
  background: radial-gradient(circle at 34% 30%, #fff 0 16%, #F3EDE2 38%, #D8CDBA 72%, #AFA28B 100%);
  box-shadow: 0 1px 3px rgba(60, 50, 30, .35);
  animation: pearl-pop .5s cubic-bezier(.3, 1.6, .5, 1);
}
@keyframes pearl-pop {
  0% { transform: scale(.6); }
  100% { transform: scale(1); }
}
.choice input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.form__more {
  display: flex;
  flex-direction: column;
  gap: 6cqw;
  transition: opacity .5s ease;
}
.form.is-declining .form__more { display: none; }

.form__error { font-size: 4cqw; font-style: italic; color: var(--rose); text-align: center; }

.submit {
  position: relative;
  align-self: center;
  margin-top: 2cqw;
  padding: 4cqw 13cqw;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--ink);
  font-family: var(--serif);
  font-size: 3.6cqw;
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  color: #F6F0E2;
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 4px rgba(217, 188, 131, .55);
  transition: transform .3s var(--ease-out), background-color .3s ease;
}
/* a glint of gold passing over the button now and then */
.submit::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 236, 190, .32) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%;
  background-position: 130% 0;
  animation: seal-sheen 4.8s ease-in-out 2s infinite;
}
.submit:hover { background-color: #33402F; }
.submit:active { transform: scale(.97); }
.submit[disabled] { opacity: .7; cursor: progress; }

.thanks { margin-top: 8cqw; }
.thanks__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 10cqw;
  line-height: 1.1;
}
.thanks .note { margin-top: 4cqw; }
.rsvp.is-sent .rsvp__envelope { animation: fly-away 1.6s cubic-bezier(.5, 0, .3, 1) forwards; }
@keyframes fly-away {
  0% { translate: 0 0; rotate: 0deg; opacity: 1; }
  30% { translate: 0 2cqw; rotate: -4deg; }
  100% { translate: 40cqw -60cqw; rotate: 14deg; opacity: 0; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { position: relative; padding: 0 0 10cqw; text-align: center; }
.footer__art { width: 100%; margin-bottom: 5cqw; }
.footer__names {
  font-family: var(--display);
  font-weight: 500;
  font-size: 9cqw;
}
.footer__names i { color: var(--gold); }
.footer .label { margin-top: 2.5cqw; }

/* ==========================================================================
   Reduced motion: keep it calm
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .stitch, .ch, .tl__pearl, .venue__card .stop, .gifts__card .note { transition-duration: .01s !important; transition-delay: 0s !important; }
  .hero__art, .story__arch, .hero__art img { transform: none !important; }
  .garland--top img, .garland--bottom img, .hanging img, .rsvp__envelope, .rsvp__topiary, .seal, .seal::before, .seal::after,
  .intro__hint, .scroll-cue span, .hero__art img, .hero__glow, .gold-shine, .medal__disc, .medal__disc::after,
  .tl__icon, .tl__pearl::after, .welcome .panel::after, .submit::after { animation: none !important; }
  .door { transition-duration: .01s; transition-delay: 0s; }
  .intro { transition: opacity .5s ease, visibility 0s linear .5s; }
}