/* Anna & Sebastian — one card: winter on the front, summer on the back.
   The picture stays put (sticky), the words scroll over it, and between
   winter and summer the card turns over, bottom to top, with a twist.
   Fonts: Cormorant Garamond (names, headings, body), Caveat (hand notes). */

:root {
  --paper: #faf6ef;
  --paper-2: #f1e9db;
  --ink: #2a2620;
  --ink-soft: #5c524a;
  --winter: #34507a;
  --winter-deep: #1f2d45;
  --summer: #8a3a26;
  --gold: #a07a3a;
  --line: #ddd2c0;
  --focus: #1d5fb8;
  --error: #a3261b;
  --ok: #2f6b3a;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #151b26;
  color: var(--ink);
  font: 500 clamp(19px, .6vw + 15px, 21px)/1.5 var(--serif);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.hand { font-family: var(--hand); font-weight: 600; }

/* ---------- top bar ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: max(12px, env(safe-area-inset-top)) var(--gutter) 12px;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.mono { white-space: nowrap;
  font: italic 600 22px/1 var(--serif); text-decoration: none; color: var(--ink);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  padding: 8px 12px; border-radius: 999px; box-shadow: 0 1px 2px rgba(30,40,60,.15);
}
.mono span { color: var(--gold); }
.lang {
  display: flex; gap: 2px; padding: 4px;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  border-radius: 999px; box-shadow: 0 1px 2px rgba(30,40,60,.15);
}
.lang button {
  font: 600 15px/1 var(--serif); letter-spacing: .02em;
  min-width: 44px; min-height: 36px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-soft); cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.lang button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; }
.flag { width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.18); flex: none; }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
@media (hover: hover) { .lang button:hover:not([aria-pressed="true"]) { background: var(--paper-2); color: var(--ink); } }

/* =================================================================
   THE STAGE: sticky picture behind everything
   ================================================================= */
.world { position: relative; }
.stage {
  position: sticky; top: 0; z-index: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  perspective: 1500px; perspective-origin: 50% 50%;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, #34425e 0%, #1a2130 60%, #121721 100%);
}
.stage__in { position: absolute; inset: 0; transform-style: preserve-3d; animation: arrive 1.5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes arrive {
  /* never past edge-on, so the back of the card never shows while it arrives */
  from { transform: rotateX(-72deg) rotateZ(8deg) scale(.8); opacity: 0; }
  30% { opacity: 1; }
  to { transform: none; }
}
.card { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }

.face {
  position: absolute; inset: 0; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  /* panorama geometry: as big as the screen allows while the whole
     building stays in view; sky above it, ground below it */
  --pt: clamp(150px, 20svh, 220px);
  --pw: max(100vw, min(203svh, 220vw));
  --ph: calc(var(--pw) * 0.3848);
  --px: 0px;
  background: linear-gradient(to bottom, var(--sky-top) 0, var(--sky) var(--pt));
}
/* the two sides sit a hair apart, so the side facing us is always the nearer
   one and is drawn on top, even where backface-visibility is ignored */
.face--winter { transform: translateZ(2px); }
.face--summer { transform: rotateX(180deg) translateZ(2px); }
/* iPhone Safari ignores backface-visibility when a face holds animated
   layers, so the side turned away is also hidden outright */
.card:not(.is-summer) .face--summer,
.card.is-summer .face--winter { visibility: hidden; opacity: 0; }
.face--winter { --sky-top: #8e9fc0; --sky: #adb9d3; --px: -6vw; }
.face--summer { --sky-top: #8aaee2; --sky: #afc3e8; --px: 2vw; }

.pano {
  position: absolute; z-index: 1;
  top: var(--pt); left: 50%;
  width: var(--pw); height: var(--ph);
  translate: calc(-50% + var(--px)) 0;
}
.pano > img {
  width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 88%, transparent 100%);
}
.ground { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; top: calc(var(--pt) + var(--ph) * .8); }
.face--winter .ground { background: linear-gradient(to bottom, #d9d5df 0, #e9e9f1 18%, #f4f5f9 60%, #fbfbfd 100%); }
.face--summer .ground {
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(255,236,214,.22), transparent 70%),
    linear-gradient(to bottom, #9d8c8e 0, #a39393 35%, #96878a 100%);
}

/* the couple: a cut-out pasted on, like a collage */
.couple {
  position: absolute; z-index: 5;
  bottom: max(1.2svh, 6px); left: var(--cx); translate: -50% 0;
  height: var(--ch); width: auto;
  filter: drop-shadow(0 10px 12px rgba(25,35,55,.28));
}
.couple--winter { --cx: 77%; --ch: min(72svh, 780px); }
.couple--summer { --cx: 23%; --ch: min(72svh, 780px); }

.drift { position: absolute; z-index: 2; left: 0; bottom: 0; width: 100%; height: 13svh; }
.snow { position: absolute; inset: 0; z-index: 7; width: 100%; height: 100%; pointer-events: none; }

/* ---------- drawn sprites: one strip of frames, shown one at a time ---------- */
.spr { position: absolute; overflow: hidden; aspect-ratio: var(--ar); }
.spr > img { height: 100%; width: calc(var(--n) * 100%); max-width: none; will-change: transform; }
.spr--loop > img { animation: spr var(--dur) steps(var(--n)) infinite; }
@keyframes spr { to { transform: translateX(-100%); } }
.flip { scale: -1 1; }

/* winter: animals on the snow, and the tracks they leave */
.tracks { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.critters { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.critters--front { z-index: 6; }
.critter { left: 0; top: 0; transform-origin: 50% 100%; }
.critter > img { filter: drop-shadow(0 3px 2px rgba(60,75,110,.18)); }

/* summer: tourists, families, photographers and the bear, all on the square behind us */
.crowd { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.crowd > .spr { left: 0; top: 0; }

.lawn { position: absolute; z-index: 2; left: 0; bottom: 0; width: 100%; height: clamp(70px, 13svh, 150px); object-fit: cover; object-position: 50% 100%; }
.couple--summer { z-index: 4; }
.butterflies { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.butterflies--back { z-index: 3; }
.bfly, .bee { left: 0; top: 0; }

/* =================================================================
   THE WORDS: scroll over the picture
   ================================================================= */
.content { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; }

.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; justify-content: center; padding: calc(max(12px, env(safe-area-inset-top)) + 60px) var(--gutter) 0; }
.title { text-align: center; color: var(--winter-deep); text-shadow: 0 0 22px rgba(255,255,255,.75), 0 0 3px rgba(255,255,255,.9); }
.hero--summer .title { color: #4a1d12; }
.title__kicker { margin: 0; font-size: clamp(24px, 1.2vw + 18px, 34px); line-height: 1; color: var(--winter); }
.hero--summer .title__kicker { color: var(--summer); }
.names {
  margin: .08em 0 .06em;
  font: italic 600 clamp(40px, 3.6vw + 16px, 72px)/1 var(--serif);
  letter-spacing: -.01em; text-wrap: balance;
}
.names em { color: var(--gold); font-weight: 500; padding: 0 .05em; }
.title__date { margin: 0; font: 700 clamp(17px, .5vw + 14px, 22px)/1.2 var(--serif); letter-spacing: .02em; font-variant-numeric: lining-nums; }

.scroll-hint {
  position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); translate: -50% 0;
  font-size: 24px; color: var(--winter); text-decoration: none;
  padding: 4px 16px; border-radius: 999px; background: rgba(251,252,254,.85);
  box-shadow: 0 2px 6px rgba(30,40,60,.15);
  animation: nudge 2.4s ease-in-out infinite;
}
@keyframes nudge { 50% { translate: -50% 6px; } }

/* paper cards pinned over the picture */
.panel {
  position: relative;
  width: min(580px, calc(100% - 32px));
  margin: 0 auto 22svh;
  padding: clamp(26px, 4vw, 44px) clamp(22px, 4vw, 44px);
  background: rgba(251,248,242,.94);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -12px rgba(20,30,50,.35);
  rotate: -.5deg;
}
.panel:nth-of-type(odd) { rotate: .5deg; }
.panel::before { /* a strip of tape */
  content: ""; position: absolute; top: -13px; left: 50%; width: 120px; height: 26px; translate: -50% 0; rotate: -3deg;
  background: rgba(236,226,206,.82); box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.panel h2 { font: italic 600 clamp(32px, 2vw + 22px, 46px)/1.05 var(--serif); margin: 0 0 .5em; color: var(--winter); text-wrap: balance; }
.panel--summer h2 { color: var(--summer); }
.panel p { margin: 0 0 .85em; }
.panel p:last-child { margin-bottom: 0; }
.panel strong { color: var(--winter); white-space: nowrap; }
.panel__date { font-weight: 700; color: var(--gold); margin-top: -.4em !important; }
h3 { font: 700 1.05em/1.2 var(--serif); margin: 0; }
address { font-style: normal; margin: 0 0 .85em; }
.map a { color: var(--winter); font-weight: 600; text-underline-offset: 4px; }
.note { font-size: clamp(28px, 1.4vw + 20px, 36px); color: var(--summer); line-height: 1.1; rotate: -1deg; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: grid; grid-template-columns: 40px 10.5ch 1fr; gap: 6px 14px; align-items: start;
  padding: 14px 0; border-bottom: 1px dashed var(--line);
}
.timeline li:last-child { border-bottom: 0; }
.ico { width: 34px; height: 34px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.timeline time { font-weight: 700; font-variant-numeric: tabular-nums lining-nums; color: var(--winter); white-space: nowrap; padding-top: 2px; }
.timeline p { margin: .1em 0 0; color: var(--ink-soft); font-size: .92em; }

/* ---------- the RSVP form ---------- */
.rsvp { margin-top: 1.2em; }
.field { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.field > label, .field > legend { display: block; font-weight: 700; margin-bottom: 8px; padding: 0; line-height: 1.3; }
input[type="text"], select, textarea {
  font: 500 18px/1.3 var(--serif); color: var(--ink);
  width: 100%; min-height: 48px; padding: 10px 14px;
  background: #fff; border: 1.5px solid #cfc3ae; border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { resize: vertical; min-height: 88px; }
input[type="text"]:focus, select:focus, textarea:focus { outline: none; border-color: var(--winter); box-shadow: 0 0 0 3px rgba(52,80,122,.18); }
[aria-invalid="true"] { border-color: var(--error) !important; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 16px;
  border: 1.5px solid #cfc3ae; border-radius: 999px; background: #fff; cursor: pointer;
  font-weight: 600; line-height: 1.2;
  transition: border-color .15s ease, background-color .15s ease;
}
.choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--winter); }
.choice:has(input:checked) { border-color: var(--winter); background: #eef2f8; }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.soft-note {
  margin: 12px 0 0 !important; padding: 12px 14px; border-radius: 12px;
  background: #eef2f8; color: var(--winter-deep); font-size: .92em; line-height: 1.4;
  border-left: 3px solid var(--gold);
}
.people__list { display: grid; gap: 10px; margin-bottom: 10px; }
.people__list:empty { display: none; }
.people--guests .person { grid-template-columns: 1fr; }
.person {
  position: relative; display: grid; grid-template-columns: 1fr 9.5em; gap: 8px 10px;
  padding: 12px 14px 14px; border: 1.5px solid #ddd0b8; border-radius: 14px; background: #fffdf9;
  animation: kid-in .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes kid-in { from { opacity: 0; translate: 0 -6px; } }
.person__head { grid-column: 1 / -1; margin: 0 !important; font-weight: 700; color: var(--winter); line-height: 1.2; padding-right: 40px; }
.person label { display: block; font-size: 16px; font-weight: 600; color: var(--ink-soft); margin-bottom: 4px; }
.person__x {
  position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-soft); font: 500 26px/1 var(--serif); cursor: pointer;
}
@media (hover: hover) { .person__x:hover { background: var(--paper-2); color: var(--error); } }
.add-person {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 18px 8px 8px;
  border: 1.5px dashed var(--winter); border-radius: 999px; background: #fff; color: var(--winter);
  font: 700 18px/1 var(--serif); cursor: pointer; transition: background-color .15s ease;
}
.add-person__plus {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--winter); color: #fff; font: 600 24px/1 var(--serif);
}
@media (hover: hover) { .add-person:hover { background: #eef2f8; } }
.add-person:active { translate: 0 1px; }
@media (max-width: 420px) { .person { grid-template-columns: 1fr; } }
.form-msg { min-height: 0; margin: 0 0 12px; font-weight: 600; color: var(--error); }
.form-msg:empty { display: none; }
.send {
  width: 100%; min-height: 54px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--winter); color: #fff; font: 700 20px/1 var(--serif); letter-spacing: .02em;
  box-shadow: 0 6px 16px -6px rgba(31,45,69,.6);
  transition: background-color .15s ease, translate .15s ease;
}
@media (hover: hover) { .send:hover { background: var(--winter-deep); } }
.send:active { translate: 0 1px; }
.send[disabled] { opacity: .6; cursor: progress; }
.thanks { padding: 10px 0 4px; outline: none; }
.thanks__big { font-size: clamp(30px, 1.6vw + 22px, 40px); line-height: 1.1; color: var(--ok); margin: 0 0 10px; }
.linkish { background: none; border: 0; padding: 8px 0; color: var(--winter); font: 600 18px/1.2 var(--serif); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

.direct { margin-top: 26px; padding-top: 18px; border-top: 1px dashed var(--line); }
.direct p { margin-bottom: 10px; font-weight: 600; color: var(--ink-soft); }
.who { margin-top: 12px; }
.who__name { margin: 0 0 6px !important; font: italic 600 22px/1.1 var(--serif) !important; color: var(--winter) !important; }
.contacts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.contacts a {
  display: inline-flex; align-items: center; gap: .4em; min-height: 46px; padding: 8px 16px;
  border: 1.5px solid var(--winter); border-radius: 999px; color: var(--winter);
  text-decoration: none; font-weight: 700; font-size: 17px; font-variant-numeric: lining-nums;
  transition: background-color .2s ease, color .2s ease;
}
.contacts a small { font-weight: 500; font-size: 15px; opacity: .85; }
@media (hover: hover) { .contacts a:hover { background: var(--winter); color: #fff; } }

/* ---------- fold-out notes (residents of Russia / of the EU) ---------- */
.fold { padding-top: 0; padding-bottom: 0; }
.fold > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 18px 0; font: italic 600 clamp(22px, 1vw + 18px, 28px)/1.15 var(--serif); color: var(--winter);
}
.panel--summer.fold > summary { color: var(--summer); }
.fold > summary::-webkit-details-marker { display: none; }
.fold__chev {
  flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid currentColor; position: relative;
  transition: rotate .25s ease;
}
.fold__chev::before, .fold__chev::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.8px; background: currentColor; translate: -50% -50%;
}
.fold__chev::after { rotate: 90deg; transition: rotate .25s ease; }
.fold[open] .fold__chev::after { rotate: 0deg; }
.fold__body { padding: 0 0 clamp(22px, 3vw, 36px); border-top: 1px dashed var(--line); padding-top: 16px; }
.fold[open] .fold__body { animation: kid-in .3s cubic-bezier(.2,.8,.2,1); }
.fold:not([open]) { margin-bottom: 10svh; }
/* the residents-of-Russia note is only for the Russian version */
html:not([lang="ru"]) .fold--ru { display: none; }
/* summer: the note for EU guests, as plain text under "to be continued" */
.eu-note { margin-top: 1.4em; padding-top: 1.1em; border-top: 1px dashed var(--line); }
.eu-note p { margin: 0 0 .7em; }
.eu-note p:last-child { margin-bottom: 0; }

/* ---------- the turn ---------- */
.flipzone { position: relative; height: 230vh; height: 230svh; display: flex; justify-content: center; }
.flipzone__note {
  margin: 8svh 0 0; height: fit-content; padding: 6px 22px; rotate: -3deg;
  font-size: clamp(32px, 2vw + 24px, 52px); color: #fff; text-align: center;
  text-shadow: 0 2px 14px rgba(10,20,40,.55);
}

.foot { padding: 0 var(--gutter) max(28px, env(safe-area-inset-bottom)); display: flex; justify-content: center; }
.foot p { margin: 0; padding: 8px 18px; border-radius: 999px; background: rgba(251,248,242,.9); color: var(--ink-soft); font-size: 17px; }

/* ---------- wide screens: cards on the side, couple visible next to them ---------- */
@media (min-width: 900px) {
  .panel--winter { margin-left: clamp(24px, 6vw, 110px); }
  .panel--summer { margin-right: clamp(24px, 6vw, 110px); margin-left: auto; }
}

/* ---------- phones ---------- */
@media (max-width: 700px) {
  .face { --pt: clamp(150px, 20svh, 200px); }
  .face--winter { --px: 0px; }
  .face--summer { --px: 3vw; }
  .couple--winter, .couple--summer { --cx: 50%; --ch: min(47svh, 140vw); }
  .drift { height: 10svh; }
  .lawn { height: 16svh; }
  .face--summer .ground { background: radial-gradient(ellipse 90% 40% at 50% 45%, rgba(255,240,200,.16), transparent 70%), linear-gradient(to bottom, #9d8c8e 0, #a39393 9%, #9a9a52 15%, #94964b 55%, #909349 100%); }
  .hero { padding-top: calc(max(12px, env(safe-area-inset-top)) + 54px); }
  .names { font-size: clamp(36px, 10vw, 48px); }
  .title__kicker { font-size: 24px; }
  .title__date { font-size: 17px; }
  .timeline li { grid-template-columns: 34px 1fr; }
  .timeline li > div { grid-column: 2; }
  .ico { width: 28px; height: 28px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .face { --pt: 70px; }
  .couple--winter, .couple--summer { --ch: 80svh; }
  .hero { padding-top: 56px; }
}

/* ---------- reduced motion: keep the pictures, stop the moving ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .critters, .tracks, .butterflies, .crowd .walker { display: none; }
  .crowd .bear { left: 60%; top: auto; bottom: 16svh; height: 12svh; }
}