/* =========================================================
   Мирела & Атанас – wedding website
   All sizes are in Canva "points" (the design is 1024.5pt wide)
   multiplied by --u, so the site scales like the Canva original.
   ========================================================= */
/* Canva's "Crimson" (SIL Open Font License), extracted from the design – exact glyphs */
@font-face { font-family: "Crimson Canva"; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/crimson-a.woff") format("woff"); unicode-range: U+0020, U+0021, U+0022, U+0026, U+002C, U+002D, U+002E, U+0030, U+0032, U+0034, U+0037, U+003F, U+0041, U+0042, U+0043, U+0044, U+0045, U+0046, U+0047, U+0049, U+004B, U+004C, U+004D, U+004F, U+0052, U+0053, U+0054, U+0056, U+0057, U+0061, U+0063, U+0065, U+0066, U+0069, U+006B, U+006C, U+006D, U+006E, U+006F, U+0072, U+0073, U+0074, U+0410, U+0411, U+0412, U+0413, U+0414, U+0415, U+0416, U+0417, U+0418, U+0419, U+041A, U+041B, U+041C, U+041D, U+041E, U+041F, U+0420, U+0421, U+0422, U+0423, U+0424, U+0425, U+0426, U+0427, U+0428, U+0429, U+042A, U+042F, U+0430, U+0432, U+0433, U+0434, U+0435, U+0437, U+0438, U+043A, U+043B, U+043C, U+043D, U+043E, U+043F, U+0440, U+0441, U+0442, U+0443, U+044A, U+044F; }
@font-face { font-family: "Crimson Canva"; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/crimson-b.woff") format("woff"); unicode-range: U+002B, U+0031, U+0033, U+0035, U+0036, U+0038, U+0039, U+003A; }
@font-face { font-family: "Crimson Canva"; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/crimson-semibold.woff") format("woff"); unicode-range: U+0030, U+0031, U+0033, U+0036, U+0037, U+0038, U+0039, U+003A; }
/* Crimson Pro and Open Sans (SIL Open Font License), self-hosted variable fonts from Google Fonts.
   Crimson Pro has no Cyrillic: Bulgarian text in that stack falls through to Georgia / the system serif. */
@font-face { font-family: "Crimson Pro"; font-weight: 200 900; font-display: swap;
  src: url("../assets/fonts/crimson-pro-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-weight: 300 800; font-display: swap;
  src: url("../assets/fonts/open-sans-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Open Sans"; font-weight: 300 800; font-display: swap;
  src: url("../assets/fonts/open-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  --u: clamp(0.85px, calc(100vw / 1024.5), 1.6px);
  --bg: #FEFFFA;
  --ink: #515D3D;
  --olive: #8C9068;
  --olive-btn: #ACAE69;
  --label: #7F6449;
  --opt: #6F5840;
  --field: #F2EEE9;
  --line: #BEAD9C;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Crimson Canva", "Crimson Pro", "Crimson Text", Georgia, serif;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  /* "backwards", not "both": a held final frame would block the .page-leave fade */
  animation: pageIn .7s var(--ease) backwards;
}
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
body.page-leave { opacity: 0; transition: opacity .45s var(--ease); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; border-radius: 4px; }
.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Navigation (script words, coloured through a mask) ---------- */
.nav { position: relative; z-index: 30; height: calc(49 * var(--u)); background: var(--bg); }
.nav a {
  position: absolute;
  left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
  opacity: .6;
  transition: opacity .3s, transform .3s var(--ease);
}
.nav a img { width: 100%; height: 100%; }
.nav a:hover { opacity: .85; transform: translateY(-1px); }
.nav a[aria-current="page"] { opacity: 1; }

/* ---------- Absolute compositions (Начало, Покана) ---------- */
.canvas {
  position: relative;
  width: min(calc(var(--W) * var(--u)), calc(100vw - 16px));
  aspect-ratio: var(--W) / var(--H);
  margin: 0 auto;
}
.canvas .el { position: absolute; display: block; margin: 0; padding: 0; border: 0; background: none; }
.canvas .el > img, .inr > img { width: 100%; height: 100%; }
.inr { position: absolute; display: block; }

/* landing */
.c1 .names { animation: write 2.2s cubic-bezier(.45, .05, .35, 1) .2s both; }
@keyframes write { from { clip-path: inset(-10% 100% -10% 0); opacity: .2; } 30% { opacity: 1; } to { clip-path: inset(-10% -2% -10% 0); opacity: 1; } }
.c1 .env, .c1 .fl, .c1 .open-label, .c1 .seal { animation: rise 1.3s var(--ease) both; }
.c1 .env { animation-delay: .9s; cursor: pointer; }
.c1 .fl-l { animation-delay: 1.25s; }
.c1 .fl-r { animation-delay: 1.4s; }
.c1 .open-label { animation-delay: 1.5s; pointer-events: none; }
.c1 .seal { animation: rise 1.3s var(--ease) 1.5s both, pulse 2.8s ease-in-out 3s infinite; cursor: pointer; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(214, 177, 98, 0)); }
  50% { transform: scale(1.05); filter: drop-shadow(0 0 calc(8 * var(--u)) rgba(214, 177, 98, .8)); }
}
.c1 .env img { transition: transform .6s var(--ease), filter .6s; }
.c1 .env:hover img { transform: translateY(calc(-3 * var(--u))); filter: drop-shadow(0 calc(10 * var(--u)) calc(14 * var(--u)) rgba(80, 70, 40, .12)); }

/* opening: every element leaves softly, one after another */
.c1.opening .seal { animation: sealOut .85s cubic-bezier(.4, 0, .2, 1) forwards; }
.c1.opening .open-label { animation: fadeOut .55s var(--ease) .1s forwards; }
.c1.opening .fl-r { animation: outR 1s var(--ease) .25s forwards; }
.c1.opening .fl-l { animation: outL 1s var(--ease) .32s forwards; }
.c1.opening .env { animation: outEnv 1.05s var(--ease) .42s forwards; }
.c1.opening .names { animation: outUp 1s var(--ease) .55s forwards; }
body.opening .nav { animation: fadeOut .9s var(--ease) .6s forwards; }
@keyframes sealOut {
  0% { transform: scale(1); }
  22% { transform: scale(.9); }
  55% { opacity: 1; transform: scale(1.12); filter: drop-shadow(0 0 calc(10 * var(--u)) rgba(214, 177, 98, .9)); }
  100% { opacity: 0; transform: scale(1.35); filter: blur(4px); }
}
@keyframes fadeOut { to { opacity: 0; } }
@keyframes outUp { to { opacity: 0; transform: translateY(calc(-10 * var(--u))); filter: blur(3px); } }
@keyframes outEnv { to { opacity: 0; transform: translateY(calc(8 * var(--u))) scale(.97); } }
@keyframes outL { to { opacity: 0; transform: translate(calc(-14 * var(--u)), calc(8 * var(--u))) rotate(-4deg); } }
@keyframes outR { to { opacity: 0; transform: translate(calc(14 * var(--u)), calc(-8 * var(--u))) rotate(4deg); } }

/* invitation collage: elements arrive one by one */
.c2 .pop { opacity: 0; }
.c2.in .pop { animation: popIn 1.25s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(var(--d, 0s) * 1.6 + .15s); }
.c2.in .pop.fl { animation-name: bloom; animation-duration: 1.5s; }
.c2 .pop.done { animation: none !important; opacity: 1; }
@keyframes popIn { from { opacity: 0; translate: 0 calc(18 * var(--u)); filter: blur(3px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes bloom { from { opacity: 0; scale: .94; filter: blur(2px); } to { opacity: 1; scale: 1; filter: blur(0); } }
.p-invite.arrive .nav { animation: fadeIn 1s var(--ease) .1s both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.c2 .lift, .c2 .grow { transition: transform .45s var(--ease), filter .45s; }
.c2 .lift:hover { transform: translateY(calc(-4 * var(--u))); filter: drop-shadow(0 calc(8 * var(--u)) calc(10 * var(--u)) rgba(40, 40, 20, .15)); }
.c2 .grow:hover { transform: scale(1.04); }
.c2 .fl { pointer-events: none; }

/* ---------- Column pages (Детайли, Присъствие) ---------- */
.banner { width: 100%; height: calc(127 * var(--u)); object-fit: cover; }
.col { display: flex; flex-direction: column; align-items: center; padding: 0 16px; }
.blk {
  margin-top: calc(var(--mt) * var(--u));
  translate: calc(var(--dx) * var(--u)) 0;
  max-width: 100%;
}
.pic { width: calc(var(--w) * var(--u)); max-width: calc(100vw - 32px); }
.pic img, .pic a { width: 100%; display: block; }
.label .lbl { position: relative; display: block; }
.label .lbl > img { width: 100%; }

.txt {
  margin-top: calc(var(--mt) * var(--u));
  font-size: calc(var(--fs) * var(--u));
  line-height: calc(var(--lh) * var(--u));
  min-height: calc(var(--h) * var(--u));
  font-weight: 400;
  text-align: center;
  color: var(--ink);
}
.txt.date { font-weight: 400; }
.txt.pastel { font-family: "Crimson Pro", Georgia, serif; font-weight: 400; letter-spacing: .02em; }
.txt.small { font-weight: 400; }
.txt.q { font-weight: 400; text-shadow: 0 calc(.7 * var(--u)) calc(1.4 * var(--u)) rgba(0, 0, 0, .28); }
.txt.a { font-weight: 400; }
h1.txt, h2.txt, h3.txt { margin-bottom: 0; }
p.txt { margin-bottom: 0; }

.dot { width: calc(3.2 * var(--u)); height: calc(3.2 * var(--u)); border-radius: 50%; background: var(--ink); }

.map { transition: transform .35s var(--ease), filter .35s; }
.map:hover { transform: translateY(calc(-2 * var(--u))); filter: brightness(1.02) drop-shadow(0 calc(4 * var(--u)) calc(6 * var(--u)) rgba(120, 110, 40, .18)); }

/* back / forward links */
.backs { display: flex; justify-content: center; width: 100%; }
.foot { margin-top: calc(var(--mt) * var(--u)); }
.backs.two { width: min(calc(431.5 * var(--u)), 100%); justify-content: space-between; }
.back { display: block; width: calc(var(--w) * var(--u)); transition: transform .35s var(--ease), opacity .35s; }
.back:hover { transform: translateY(calc(-2 * var(--u))); opacity: .8; }
.timeline { position: relative; height: calc(var(--h) * var(--u)); translate: calc(var(--tdx, 0) * var(--u)) 0 !important; }
.timeline > img { width: 100%; height: 100%; }
.timeline .tl-t, .timeline .tl-d {
  position: absolute; left: calc(var(--cx) * var(--u)); top: calc(var(--y) * var(--u));
  transform: translateX(-50%); white-space: nowrap; text-align: center; color: var(--ink);
}
.timeline .tl-t { font-size: calc(22.4 * var(--u)); line-height: calc(23 * var(--u)); font-weight: 600; }
.timeline .tl-d { font-family: "Crimson Pro", Georgia, serif; font-size: calc(14.625 * var(--u)); line-height: calc(20.25 * var(--u)); }
.timeline .tl-line { position: absolute; left: 50%; top: 0; bottom: calc(6 * var(--u)); width: max(1px, calc(.9 * var(--u))); transform: translateX(-50%); background: linear-gradient(var(--ink) 85%, rgba(81, 93, 61, 0)); opacity: .85; }
.rings { width: 100%; height: calc(126 * var(--u)); object-fit: cover; margin-top: calc(var(--mt) * var(--u)); }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* contacts */
.contacts { font-size: calc(14.625 * var(--u)); line-height: calc(24 * var(--u)); text-align: center; }
.ct-h { font: inherit; margin: 0; }
.ct-row { display: grid; grid-template-columns: calc(59.4 * var(--u)) auto; column-gap: calc(24.5 * var(--u)); justify-content: center; text-align: left; }
.ct-row span:first-child { padding-left: calc(1 * var(--u)); }
.contacts a { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.contacts a:hover { color: var(--olive); }

/* =========================================================
   RSVP form (measured from the Canva form, in points)
   ========================================================= */
.formwrap { --fu: max(var(--u), min(calc((100vw - 32px) / 281), 1.3px)); width: calc(280.6 * var(--fu)); max-width: 100%; }
.form-card {
  width: 100%;
  background: #FFFFFD;
  border: calc(1.6 * var(--fu)) solid var(--olive-btn);
  border-radius: calc(9 * var(--fu));
  padding: calc(7.3 * var(--fu)) calc(17.8 * var(--fu)) calc(17.5 * var(--fu));
  box-shadow: calc(-4 * var(--fu)) calc(5 * var(--fu)) calc(12 * var(--fu)) rgba(0, 0, 0, .33);
  text-align: left;
}
.field { border: 0; margin: calc(16.1 * var(--fu)) 0 0; padding: 0; min-width: 0; }
.field:first-child { margin-top: 0; }
.lab {
  display: block; float: none; width: 100%;
  padding: 0;
  margin: 0 0 calc(6.3 * var(--fu));
  font-family: "Open Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: max(14px, calc(9 * var(--fu)));
  line-height: max(1.35em, calc(12.9 * var(--fu)));
  color: var(--label);
}
.lab .lt { font-family: "Crimson Pro", Georgia, serif; font-weight: 400; font-size: 1.05em; white-space: nowrap; }
.inp {
  display: block; width: 100%;
  height: max(44px, calc(25.3 * var(--fu)));
  border: calc(.75 * var(--fu)) solid var(--line);
  border-radius: calc(4.6 * var(--fu));
  background: #fff;
  padding: 0 calc(6.2 * var(--fu));
  font-family: "Crimson Pro", Georgia, serif;
  font-size: max(16px, calc(9.5 * var(--fu))); /* under 16px iOS zooms the page on focus */
  color: #5E4C3B;
  transition: border-color .25s, box-shadow .25s;
}
.inp.area { height: max(88px, calc(49.3 * var(--fu))); padding-top: calc(5 * var(--fu)); resize: vertical; }
.inp:focus { outline: none; border-color: var(--olive-btn); box-shadow: 0 0 0 calc(2 * var(--fu)) rgba(172, 174, 105, .25); }
.opt { position: relative; display: block; margin-top: calc(4.6 * var(--fu)); cursor: pointer; }
.lab + .opt { margin-top: 0; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt span {
  display: flex; align-items: center;
  height: max(44px, calc(32.5 * var(--fu)));
  padding: 0 calc(6.2 * var(--fu));
  border-radius: calc(4.6 * var(--fu));
  border: calc(.9 * var(--fu)) solid transparent;
  background: var(--field);
  font-family: "Crimson Pro", Georgia, serif;
  font-size: max(15px, calc(8.7 * var(--fu)));
  color: var(--opt);
  transition: background .25s, border-color .25s, color .25s;
}
.opt.tall span { height: max(48px, calc(40.4 * var(--fu))); }
.opt:hover span { background: #ECE7E0; }
.opt input:checked + span { border-color: var(--olive-btn); background: #F1F1E2; color: #5E5432; font-weight: 600; }
.opt input:focus-visible + span { outline: 2px solid var(--olive); outline-offset: 2px; }
.err { display: none; margin-top: calc(3 * var(--fu)); font-family: "Open Sans", Arial, sans-serif; font-size: max(13px, calc(7 * var(--fu))); color: #A2523F; }
.field.invalid .err { display: block; }
.field.invalid .inp { border-color: #C98B7A; }
.field.invalid .opt span { border-color: #E4BFB4; }
.form-card.declined .cond { display: none; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.send {
  display: block; width: 100%;
  height: max(46px, calc(27.4 * var(--fu)));
  margin-top: calc(7.8 * var(--fu));
  border: 0; border-radius: 999px;
  background: var(--olive-btn);
  color: #2F3622;
  font-family: "Open Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: max(15px, calc(9.6 * var(--fu)));
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .3s, transform .3s var(--ease);
}
.send:hover { background: #A1A35F; transform: translateY(-1px); }
.send[disabled] { opacity: .65; cursor: wait; }
.send.again { height: auto; min-height: 46px; margin-top: calc(18 * var(--fu)); padding: 8px 16px; font-size: 14px; }
.status { min-height: calc(8 * var(--fu)); margin: calc(5 * var(--fu)) 0 0; text-align: center; font-size: max(13px, calc(6.5 * var(--fu))); line-height: 1.3; color: #A2523F; }
.thanks { font-family: "Crimson Pro", Georgia, serif; text-align: center; padding: calc(30 * var(--fu)) 0 calc(14 * var(--fu)); }
.thanks .t1 { font-size: calc(22 * var(--fu)); line-height: 1.2; color: var(--olive); margin: 0; text-transform: none; font-style: italic; }
.thanks p { margin: calc(12 * var(--fu)) 0 0; font-size: max(14px, calc(11 * var(--fu))); line-height: 1.4; color: var(--ink); text-transform: uppercase; }

/* password page */
.gate { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px 8vh; }
.gate-names { width: min(100%, 560px); }
.gate-seal { width: 72px; margin: 18px 0 22px; }

@media (max-width: 899px) {
  .blk { translate: none; }
  /* readable text: the Canva sizes are too small once --u hits its minimum */
  .txt {
    font-size: max(14px, calc(var(--fs) * var(--u)));
    line-height: max(1.4em, calc(var(--lh) * var(--u)));
    text-wrap: balance;
  }
  .txt.small { font-size: max(12.5px, calc(var(--fs) * var(--u))); }
  .txt.flow br { display: none; }
  .contacts { font-size: 14px; line-height: 24px; }
  .ct-row { grid-template-columns: 70px auto; align-items: center; }
  .contacts a { display: inline-block; padding: 10px 4px; } /* 44px touch target */
  /* the timeline text is part of the image, so show the image larger */
  .timeline { --u: min(1.17px, calc((50vw - 8px) / 151)); }
}
@media (max-width: 760px) {
  /* the menu fills the phone width */
  .nav { --u: min(1.1px, calc((100vw - 16px) / 340)); height: calc(49 * var(--u) + 6px); }
  .nav a { opacity: .75; }
  /* larger touch area around the thin script words */
  .nav a::before { content: ""; position: absolute; inset: -14px -6px; }
  .back { position: relative; }
  .back::before { content: ""; position: absolute; inset: -6px; }
  .p-home main { min-height: calc(100svh - 62px); display: flex; flex-direction: column; justify-content: center; padding-bottom: 8vh; }
  .c1 { width: calc(100vw - 8px); }
  .c2 { width: calc(100vw - 4px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .c2 .pop { opacity: 1 !important; transform: none !important; translate: none !important; filter: none !important; }
}
.foot .backs.two { margin: 0 auto; }