/* =========================================================================
   Вячеслав & Ирина — wedding party invitation
   Watercolor + colored pencil on warm paper. Mobile-first.
   ========================================================================= */

/* ---------- fonts (self-hosted, latin + cyrillic subsets) ---------- */
@font-face { font-family: "Shantell Sans"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("assets/fonts/shantell-sans-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Shantell Sans"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("assets/fonts/shantell-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, U+2661, U+2665; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("assets/fonts/onest-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("assets/fonts/onest-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: "Caveat"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/caveat-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/caveat-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; }

/* ---------- tokens ---------- */
:root {
  color-scheme: light;

  --paper: #F6F0E4;
  --paper-light: #FBF7EE;
  --ink: #3E342E;
  --ink-soft: #66574D;
  --blue: #8FAAC0;
  --blue-deep: #4F6F88;
  --lav: #B5A7CD;
  --sage: #AFBF98;
  --sage-deep: #56704E;
  --pink: #E4B7AF;
  --pink-deep: #B8736E;
  --terra: #CD8C69;
  --terra-deep: #97583A;
  --burg: #7E3B45;
  --ochre: #D9B676;
  --stream: #9DB6C8;
  --stream-line: #5F819C;

  --f-display: "Shantell Sans", "Comic Sans MS", system-ui, sans-serif;
  --f-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-hand: "Caveat", "Segoe Print", cursive;

  --gutter: 16px;
  --measure: 34rem;
  --ease-paint: cubic-bezier(.3, .1, .2, 1);
  --section-gap: clamp(4.5rem, 14vw, 9rem);
  /* soft ragged blob (assets/decor/bleed-mask.webp) inlined so a watercolor reveal can never hide a layer */
  --bleed-mask: url("data:image/webp;base64,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");
}
@media (min-width: 700px) { :root { --gutter: 32px; } }
@media (min-width: 1100px) { :root { --gutter: 48px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--f-body);
  overflow-x: hidden;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
/* paper: grain + fibers, plus two barely visible stains */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 40% at 12% 18%, rgb(214 190 150 / .10), transparent 70%),
    radial-gradient(50% 36% at 88% 72%, rgb(190 170 140 / .08), transparent 70%),
    url("assets/decor/paper-grain.webp") 0 0 / 256px 256px;
  opacity: .5;
  transition: opacity 1.2s ease;
}
img, svg { display: block; max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: rgb(228 183 175 / .6); }

:focus-visible { outline: 3px solid var(--burg); outline-offset: 3px; border-radius: 6px; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--gutter); top: -100px; z-index: 100; padding: .7rem 1rem; background: var(--paper-light); border: 2px solid var(--ink); border-radius: 12px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }
.noscript { text-align: center; padding: 1rem; font-family: var(--f-hand); font-size: 1.4rem; }

/* ---------- type ---------- */
.lettering {
  font-family: var(--f-display);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.01em;
  color: var(--burg);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .lettering, .lettering .ch {
    background-image: var(--wash);
    background-size: 700px auto;
    background-position: calc(var(--i, 0) * -37px) calc(var(--i, 0) * -11px);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .lettering .lettering { background-image: var(--wash); }
  /* once split into letters only the letters carry the wash (the parent would also paint the hidden screen-reader copy) */
  .lettering[data-split], [data-split] .lettering { background-image: none; }
}
.lettering--burg { --wash: url("assets/decor/wash-burg.webp"); color: var(--burg); }
.lettering--blue { --wash: url("assets/decor/wash-blue.webp"); color: var(--blue-deep); }
.lettering--terra { --wash: url("assets/decor/wash-terra.webp"); color: var(--terra-deep); }
.lettering--sage { --wash: url("assets/decor/wash-sage.webp"); color: var(--sage-deep); }
.ch { display: inline-block; white-space: pre; }

.title {
  position: relative;
  z-index: 6;
  font-size: clamp(2.5rem, 11vw, 4.8rem);
  text-align: center;
  padding-inline: var(--gutter);
  text-wrap: balance;
}
.title--xl { font-size: clamp(3rem, 15vw, 7.5rem); }

.hand { font-family: var(--f-hand); font-weight: 600; color: var(--burg); line-height: 1.1; }

.note {
  position: relative;
  z-index: 6;
  display: inline-block;
  font-family: var(--f-hand);
  font-weight: 600;
  font-size: clamp(1.55rem, 6vw, 2.1rem);
  line-height: 1.05;
  color: var(--ink-soft);
}

section { position: relative; }
section + section { margin-top: var(--section-gap); }

/* ---------- the creek ---------- */
.story { position: relative; isolation: isolate; padding-bottom: 3rem; overflow: hidden; }
@supports (overflow: clip) { .story { overflow: clip; } }
.stream {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.stream path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.stream .s-wash { stroke: var(--stream); stroke-opacity: .55; stroke-width: 8px; }
.stream .s-core { stroke: #B9CCD8; stroke-opacity: .7; stroke-width: 3px; }
.stream .s-bank { stroke: var(--stream-line); stroke-opacity: .5; stroke-width: 1.2px; }
/* the water flows: light dashes run downstream along drawn parts of the creek near the viewport */
.stream .s-flow, .stream .s-flow2 { stroke-linecap: round; stroke-opacity: 0; transition: stroke-opacity 1s ease; animation: flow 1.6s linear infinite paused; }
.stream .s-flow { stroke: #FFFEFA; stroke-width: 2.8px; stroke-dasharray: 8 19; animation-duration: 1.2s; }
.stream .s-flow2 { stroke: #DDE9EF; stroke-width: 1.8px; stroke-dasharray: 3 26; animation-name: flow2; animation-duration: 2s; }
.stream .s-flow.is-on { stroke-opacity: 1; animation-play-state: running; }
.stream .s-flow2.is-on { stroke-opacity: .85; animation-play-state: running; }
@keyframes flow { to { stroke-dashoffset: -27; } }
@keyframes flow2 { to { stroke-dashoffset: -29; } }
@media (min-width: 1100px) { .stream .s-flow { stroke-width: 3.4px; } .stream .s-flow2 { stroke-width: 2.2px; } }
.stream .s-heart { fill: var(--pink); fill-opacity: .9; stroke: var(--burg); stroke-width: 1.6px; opacity: 0; transition: opacity 1s ease .3s; }
.stream.is-done .s-heart { opacity: 1; }
@media (min-width: 1100px) {
  .stream .s-wash { stroke-width: 11px; }
  .stream .s-core { stroke-width: 4px; }
  .stream .s-bank { stroke-width: 1.4px; }
}
/* waypoints the creek must pass through (zero-size markers) */
.sw { position: absolute; width: 0; height: 0; pointer-events: none; }

.walker {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: 58px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
  will-change: transform;
}
.walker img { width: 100%; height: auto; transform-origin: 50% 100%; }
.walker.is-visible { opacity: 1; }
.walker.is-flipped img { scale: -1 1; }
.walker.is-walking img { animation: step .5s ease-in-out infinite alternate; }
@keyframes step { from { translate: 0 0; rotate: -1.5deg; } to { translate: 0 -2px; rotate: 1.5deg; } }
@media (min-width: 1100px) { .walker { width: 78px; } }

/* ---------- scenes ---------- */
/* Each scene is a canvas (--cw × --ch) shown through a window (--vx, --vw) that depends on the screen.
   Scenes must not create stacking contexts: the creek (z 3) slides between their layers. */
.scene {
  --cw: 2000; --ch: 1300; --vx: 0; --vw: 2000;
  position: relative;
  width: min(100%, 1680px);
  margin-inline: auto;
  aspect-ratio: var(--vw) / var(--ch);
  overflow: hidden;
}
@supports (overflow: clip) { .scene { overflow: visible; overflow-x: clip; } }
.layer {
  position: absolute;
  top: 0;
  left: calc(var(--vx) / var(--vw) * -100%);
  width: calc(var(--cw) / var(--vw) * 100%);
  height: 100%;
  max-width: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.layer--ref { visibility: hidden; }
.z-1 { z-index: 1; } .z-2 { z-index: 2; } .z-4 { z-index: 4; } .z-5 { z-index: 5; }

.scene--hero { --cw: 1600; --ch: 1300; --vx: 280; --vw: 1040; }
.scene--teriberka { --cw: 2000; --ch: 1150; --vx: 560; --vw: 920; }
.scene--party { --cw: 2000; --ch: 1300; --vx: 560; --vw: 1040; }
.scene--finale { --cw: 2000; --ch: 1400; --vx: 480; --vw: 1040; }
@media (min-width: 700px) {
  .scene--hero { --vx: 120; --vw: 1360; }
  .scene--teriberka { --vx: 300; --vw: 1400; }
  .scene--party { --vx: 260; --vw: 1480; }
  .scene--finale { --vx: 240; --vw: 1520; }
}
@media (min-width: 1100px) {
  .scene--hero { --vx: 0; --vw: 1600; }
  .scene--teriberka, .scene--party, .scene--finale { --vx: 0; --vw: 2000; }
}

/* ambient motion inside scenes (paused when the scene is off screen) */
.water-motion .falling path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 10 26; opacity: .8; animation: fall 1.6s linear infinite; }
.water-motion .falling path + path { animation-duration: 2.1s; }
.water-motion .falling--small path { stroke-width: 1.6; stroke-dasharray: 5 13; animation-name: fall-small; }
@keyframes fall-small { to { stroke-dashoffset: -18; } }
.water-motion .ripples ellipse { fill: none; stroke: #fff; stroke-width: 2.4; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ripple 3.2s ease-out infinite; }
.water-motion .ripples ellipse + ellipse { animation-delay: 1.6s; }
@keyframes ripple { 0% { opacity: .9; scale: .35; } 100% { opacity: 0; scale: 1.5; } }
.sea-motion path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 26 44; opacity: .8; animation: waves 4.5s linear infinite; }
.sea-motion path:nth-child(2n) { animation-duration: 6s; animation-direction: reverse; }
.sea-motion path:nth-child(3n) { animation-duration: 5.2s; }
.sea-motion .foam { stroke-width: 4; stroke-dasharray: 60 30 20 40; opacity: .7; animation: foam 7s ease-in-out infinite alternate; }
@keyframes waves { to { stroke-dashoffset: -140; } }
@keyframes foam { from { stroke-dashoffset: 0; opacity: .45; } to { stroke-dashoffset: -60; opacity: .85; } }
@keyframes fall { to { stroke-dashoffset: -36; } }
.gulls path { fill: none; stroke: var(--ink-soft); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: glide 9s ease-in-out infinite alternate; }
.gulls path:nth-child(2) { animation-delay: -3s; } .gulls path:nth-child(3) { animation-delay: -6s; }
@keyframes glide { from { translate: 0 0; } to { translate: 26px -10px; } }
.smoke path { fill: none; stroke: #C9C2BA; stroke-width: 9; stroke-linecap: round; opacity: 0; animation: smoke 6s ease-in-out infinite; }
.smoke path:nth-child(2) { animation-delay: 2s; } .smoke path:nth-child(3) { animation-delay: 4s; }
@keyframes smoke { 0% { opacity: 0; translate: 0 20px; } 30% { opacity: .55; } 100% { opacity: 0; translate: 10px -70px; } }
.fireflies circle { fill: #F4DC9C; opacity: .3; animation: twinkle 3.2s ease-in-out infinite alternate; }
.fireflies circle:nth-child(3n) { animation-delay: -1.1s; } .fireflies circle:nth-child(3n+1) { animation-delay: -2.2s; }
@keyframes twinkle { to { opacity: 1; } }
.is-offscreen .water-motion path, .is-offscreen .water-motion ellipse, .is-offscreen .sea-motion path, .is-offscreen .gulls path, .is-offscreen .smoke path, .is-offscreen .fireflies circle { animation-play-state: paused; }

/* butterflies & dragonflies (moved by script.js; the wing beats are sprite frames) */
.critter {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: 52px;
  aspect-ratio: 80 / 70;
  pointer-events: none;
  background: var(--sprite) 0 0 / calc(var(--frames) * 100%) 100% no-repeat;
  animation: wings var(--beat, .3s) steps(3, jump-none) infinite alternate;
  will-change: transform;
  opacity: 0;
  transition: opacity .8s ease;
}
.critter.is-here { opacity: 1; }
.critter--dragonfly { width: 74px; animation-timing-function: steps(2, jump-none); --beat: .07s; }
@keyframes wings { from { background-position: 0 0; } to { background-position: 100% 0; } }
@media (min-width: 1100px) { .critter { width: 66px; } .critter--dragonfly { width: 92px; } }

/* =========================================================================
   01 · COVER
   ========================================================================= */
.hero { padding-top: max(10px, env(safe-area-inset-top)); }
.hero__frame {
  --hero-ar: calc(1040 / 1300);
  width: 100%;
}
.scene--hero { width: 100%; }
@media (min-width: 700px) {
  .hero__frame { --hero-ar: calc(1360 / 1300); }
  .scene--hero { width: min(100% - 2 * var(--gutter), 900px, calc((100vh - 220px) * var(--hero-ar))); width: min(100% - 2 * var(--gutter), 900px, calc((100svh - 220px) * var(--hero-ar))); min-width: 520px; }
}
@media (min-width: 1100px) {
  .hero__frame { --hero-ar: calc(1600 / 1300); }
  .scene--hero { width: min(100% - 2 * var(--gutter), 1060px, calc((100vh - 215px) * var(--hero-ar))); width: min(100% - 2 * var(--gutter), 1060px, calc((100svh - 215px) * var(--hero-ar))); }
}

.portrait.layer {
  left: calc((350 - var(--vx)) / var(--vw) * 100%);
  top: calc(400 / 1300 * 100%);
  width: calc(900 / var(--vw) * 100%);
  height: auto;
  aspect-ratio: 1194 / 1083;
}
.portrait__part { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the portrait is split along the line where his face meets hers, so they can appear one after another */
.portrait__part--v { clip-path: polygon(0 0, 61.8% 0, 61% 18.1%, 55.1% 27.3%, 52.6% 34.7%, 51.1% 39.7%, 49.7% 47.6%, 48.4% 58.7%, 45.1% 66.1%, 35.8% 73.5%, 25.8% 82.7%, 26.6% 100%, 0 100%); }
.portrait__part--i { clip-path: polygon(61.8% 0, 100% 0, 100% 100%, 26.6% 100%, 25.8% 82.7%, 35.8% 73.5%, 45.1% 66.1%, 48.4% 58.7%, 49.7% 47.6%, 51.1% 39.7%, 52.6% 34.7%, 55.1% 27.3%, 61% 18.1%); }
.portrait.is-whole .portrait__part--v { clip-path: none; }
.portrait.is-whole .portrait__part--i { visibility: hidden; }

.hero__names {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  top: 3.2%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: .22em;
  padding-inline: 4%;
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 11.6vw, 4.6rem);
  line-height: .92;
  text-align: center;
}
.hero__names .lettering { display: inline-block; }
.hero__names > :first-child { flex-basis: 100%; }
.hero__amp { font-family: var(--f-hand); font-weight: 600; font-size: .78em; color: var(--terra-deep); translate: 0 -.04em; rotate: -8deg; display: inline-block; }
@media (min-width: 700px) {
  .hero__names { font-size: clamp(3rem, 8.4vw, 5.6rem); top: 4%; }
  .hero__names > :first-child { flex-basis: auto; }
}
@media (min-width: 1100px) { .hero__names { font-size: clamp(3.6rem, 6.4vw, 6.4rem); top: 5%; } }

.hero__text {
  position: relative;
  z-index: 6;
  margin-top: -.4rem;
  padding-inline: var(--gutter);
  text-align: center;
}
.hero__married { font-size: clamp(1.9rem, 8.6vw, 3.6rem); line-height: 1; }
.hero__sub { margin: .7rem auto 0; max-width: 22rem; font-size: clamp(1.1rem, 4.6vw, 1.3rem); line-height: 1.45; color: var(--ink-soft); text-wrap: balance; }
.hero__date { margin-top: 1.2rem; }
.stamp {
  display: inline-block;
  padding: .55rem 1.6rem .45rem;
  font-family: var(--f-hand);
  font-weight: 600;
  font-size: clamp(1.9rem, 8vw, 2.5rem);
  line-height: 1;
  color: var(--burg);
  rotate: -3deg;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 80' preserveAspectRatio='none'%3E%3Cpath d='M18 44C10 22 60 7 128 8s104 14 98 36-68 30-120 28S22 62 18 44c-2-8 8-16 20-20' fill='none' stroke='%237E3B45' stroke-width='2.2' stroke-linecap='round' stroke-opacity='.75' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.stamp time:empty::before { content: "\00a0"; }

/* hero intro sequence: paper → mountains → waterfall → flowers → Vyacheslav → Irina → names → «Мы поженились!» → date */
.js.intro body::before { opacity: 0; }
.js.intro-go body::before { opacity: .5; }
.js .hero [data-intro] { opacity: 0; }
.js.intro-go .hero [data-intro] { animation: 1.5s var(--ease-paint) both; }
.js.intro-go .hero [data-intro="mountains"] { animation-name: bleed; animation-delay: .35s; animation-duration: 1.8s; --mx: 50%; --my: 60%; }
.js.intro-go .hero [data-intro="waterfall"] { animation-name: bleed; animation-delay: 1s; --mx: 80%; --my: 45%; }
.js.intro-go .hero [data-intro="flowers"] { animation-name: bleed; animation-delay: 1.5s; --mx: 50%; --my: 100%; }
.js.intro-go .hero [data-intro="groom"] { animation-name: settle; animation-delay: 2.1s; animation-duration: 1.2s; }
.js.intro-go .hero [data-intro="bride"] { animation-name: settle; animation-delay: 2.6s; animation-duration: 1.2s; }
.js.intro-go .hero [data-intro="names"] { animation-name: appear; animation-delay: 3.05s; animation-duration: .2s; }
.js.intro-go .hero [data-intro="married"] { animation-name: write; animation-delay: 3.6s; animation-duration: 1.2s; }
.js.intro-go .hero .hero__sub[data-intro] { animation-name: soft; animation-delay: 4s; animation-duration: 1s; }
.js.intro-go .hero [data-intro="date"] { animation-name: stamp; animation-delay: 4.35s; animation-duration: .9s; }
.js.intro-go .hero__names .ch { animation: letter .7s var(--ease-paint) both; animation-delay: calc(3.1s + var(--i) * 45ms); }

@keyframes bleed {
  from { opacity: 0; -webkit-mask-size: 30% 30%; mask-size: 30% 30%; }
  25% { opacity: 1; }
  to { opacity: 1; -webkit-mask-size: 480% 480%; mask-size: 480% 480%; }
}
[data-intro="mountains"], [data-intro="waterfall"], [data-intro="flowers"], .scene .layer[data-step], .walk__art {
  -webkit-mask-image: var(--bleed-mask);
  mask-image: var(--bleed-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: var(--mx, 50%) var(--my, 50%);
  mask-position: var(--mx, 50%) var(--my, 50%);
  -webkit-mask-size: 480% 480%;
  mask-size: 480% 480%;
}
/* Once a layer has finished appearing it is an ordinary picture again: no mask, no animation
   left hanging. A finished animation still costs the graphics chip a texture of its own, and a
   phone holding dozens of them starts dropping the ones it cannot fit — that is the blink. */
.is-painted { animation: none !important; opacity: 1 !important; will-change: auto; }
.is-painted, .no-mask { -webkit-mask-image: none !important; mask-image: none !important; }
@keyframes settle { from { opacity: 0; scale: .97; filter: blur(5px); } to { opacity: 1; scale: 1; filter: blur(0); } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes soft { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: blur(0); } }
@keyframes write { from { opacity: 1; clip-path: inset(-10% 100% -20% 0); } to { opacity: 1; clip-path: inset(-10% -5% -20% 0); } }
@keyframes stamp { from { opacity: 0; scale: 1.25; rotate: 4deg; } 60% { opacity: 1; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes letter { from { opacity: 0; translate: 0 .35em; rotate: -8deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }

/* =========================================================================
   scroll reveals
   ========================================================================= */
.js [data-reveal="soft"] { opacity: 0; filter: blur(3px); transition: opacity 1s ease, filter 1s ease; transition-delay: var(--d, 0s); }
.js [data-reveal="soft"].is-in { opacity: 1; filter: none; }
.js [data-reveal="write"] { clip-path: inset(-10% 100% -20% 0); transition: clip-path 1.3s cubic-bezier(.45, .05, .35, 1); transition-delay: var(--d, 0s); }
.js [data-reveal="write"].is-in { clip-path: inset(-10% -5% -20% 0); }
.js [data-reveal="letters"] .ch { opacity: 0; }
.js [data-reveal="letters"].is-in .ch { animation: letter .75s var(--ease-paint) both; animation-delay: calc(var(--d, 0s) + var(--i) * 40ms); }
.js [data-reveal="paint"] { opacity: 0; }
.js [data-reveal="paint"].is-in { animation: bleed 1.8s var(--ease-paint) both; animation-delay: var(--d, 0s); }

.js .scene[data-reveal="scene"] .layer[data-step] { opacity: 0; }
.js .scene[data-reveal="scene"].is-in .layer[data-step] { animation: bleed 2s var(--ease-paint) both; animation-delay: calc(var(--step, 0) * .32s); }
.js .scene[data-reveal="scene"].is-in .layer.z-4[data-step] { animation-name: rise; animation-duration: 1.3s; }
@keyframes rise { from { opacity: 0; translate: 0 1.2%; } to { opacity: 1; translate: 0 0; } }
.layer[data-step="1"] { --step: 1; --my: 70%; } .layer[data-step="2"] { --step: 2; --my: 80%; } .layer[data-step="3"] { --step: 3; }
.layer[data-step="4"] { --step: 4; } .layer[data-step="5"] { --step: 5; } .layer[data-step="6"] { --step: 6; --my: 100%; }

/* =========================================================================
   02 · ABOUT US — a walk along the creek
   ========================================================================= */
.about .title { margin-bottom: 1.5rem; }
.walk {
  position: relative;
  list-style: none;
  margin: 0 auto;
  padding: 0 var(--gutter);
  max-width: 1040px;
  display: grid;
  gap: .4rem;
}
.walk__stop {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  column-gap: .9rem;
}
.walk__art { width: 100%; height: auto; position: relative; z-index: 2; }
.walk__text { position: relative; z-index: 6; font-size: clamp(1.08rem, 4.4vw, 1.4rem); line-height: 1.45; text-wrap: pretty; }
.walk__text--lead { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.25rem, 5vw, 1.7rem); line-height: 1.2; color: var(--ink); }
.walk__stop:nth-child(even) .walk__art { order: 2; }
.walk__stop:nth-child(even) .walk__text { text-align: right; }
.walk__stop .sw { left: 27%; top: 74%; }
.walk__stop:nth-child(even) .sw { left: 73%; }
.walk__stop--6 { grid-template-columns: 1fr; padding: 1.4rem 0 .6rem; text-align: center; }
.walk__stop.walk__stop--6 .walk__text { text-align: center; max-width: 18rem; margin: auto; }
.walk__stop--6 .sw { left: 50%; top: 100%; }
.mark { background: linear-gradient(transparent 58%, rgb(228 183 175 / .55) 58%, rgb(228 183 175 / .55) 90%, transparent 90%); padding-inline: .1em; }
.about__after {
  position: relative;
  z-index: 6;
  margin: 1.4rem auto 0;
  max-width: 24rem;
  padding-inline: var(--gutter);
  text-align: center;
  font-size: clamp(1.15rem, 4.6vw, 1.45rem);
  line-height: 1.45;
}
.about__after .hand { display: block; font-size: clamp(2rem, 8.4vw, 2.8rem); }
.sw--about-in { right: 10px; top: 0; }
.sw--about-out { right: 14%; bottom: -3rem; }
.sw--hero-a { right: 12px; bottom: -1rem; }

@media (min-width: 700px) {
  .walk { gap: 0; }
  .walk__stop { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 2.5rem; width: 86%; }
  .walk__stop:nth-child(even) { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); margin-left: auto; }
  .walk__stop:nth-child(odd) { margin-right: auto; }
  .walk__art { max-width: 340px; justify-self: center; }
  .walk__text { font-size: clamp(1.3rem, 2vw, 1.6rem); }
  .walk__text--lead { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
  .walk__stop .sw { left: 22%; }
  .walk__stop:nth-child(even) .sw { left: 78%; }
  .walk__stop--6 { width: 100%; }
}

/* =========================================================================
   03 · TERIBERKA
   ========================================================================= */
.teriberka__title { margin-bottom: -6vw; text-align: left; padding-left: calc(var(--gutter) + 2vw); }
.teriberka__text {
  position: relative;
  z-index: 6;
  margin: .6rem auto 0;
  max-width: 26rem;
  padding-inline: var(--gutter);
  text-align: center;
  font-size: clamp(1.15rem, 4.6vw, 1.4rem);
  line-height: 1.5;
}
.teriberka__question { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.35rem, 5.4vw, 1.9rem); line-height: 1.25; text-wrap: balance; }
.teriberka__yes { margin-top: .9rem; font-size: clamp(2.4rem, 10.5vw, 3.8rem); display: inline-block; white-space: nowrap; }
.teriberka__heart { display: inline-block; width: .62em; height: .56em; margin-left: .25em; vertical-align: -.02em; overflow: visible; }
.teriberka__heart path { fill: rgb(228 183 175 / 0); stroke: var(--burg); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s ease 1.2s, fill .8s ease 2s; }
.teriberka__yes.is-in .teriberka__heart path, html:not(.js) .teriberka__heart path { stroke-dashoffset: 0; fill: rgb(228 183 175 / .9); }
.sw--ter-in { left: 12px; top: 1rem; }
.sw--ter-text { left: calc(-1 * var(--gutter) + 7px); top: 0; }
.sw--ter-out { left: 8px; bottom: -.5rem; }
.sw--kstati-in { right: 10px; top: -2.5rem; }
.sw--party-top { left: 10px; top: -1.8rem; }
@media (min-width: 1200px) {
  .sw--ter-text { display: none; }
  .teriberka__title { position: absolute; top: 1vw; left: max(4vw, calc(50% - 780px)); margin: 0; padding: 0; z-index: 6; }
  .teriberka__text { position: absolute; z-index: 6; top: clamp(3.5rem, 5vw, 6rem); right: max(4vw, calc(50% - 760px)); margin: 0; padding: 0; text-align: right; max-width: 34rem; }
}

/* =========================================================================
   04 · BY THE WAY
   ========================================================================= */
.kstati { padding-inline: var(--gutter); max-width: 1140px; margin-inline: auto; }
.kstati__words { position: relative; z-index: 6; }
.kstati__by { font-size: clamp(3rem, 15vw, 6rem); }
.kstati__big { margin-top: .4rem; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.9rem, 8.6vw, 3.3rem); line-height: 1.05; color: var(--ink); }
.smile { display: inline-block; rotate: 90deg; margin-left: .15em; color: var(--terra-deep); }
.kstati__body { margin-top: 1.4rem; display: grid; gap: 1rem; font-size: clamp(1.08rem, 4.4vw, 1.3rem); line-height: 1.5; }
.kstati__list { font-family: var(--f-hand); font-weight: 600; font-size: clamp(1.6rem, 6.4vw, 2.1rem); line-height: 1.12; color: var(--ink-soft); }
.kstati__art { position: relative; margin: 1.6rem auto 0; max-width: 460px; }
.kstati__art img { width: 100%; height: auto; }
.note--done { position: absolute; right: 2%; top: -2%; rotate: 4deg; padding: .4rem .9rem .5rem; background: var(--paper-light); box-shadow: 0 1px 0 rgb(0 0 0 / .05); }
.note--done::before { content: ""; position: absolute; left: 50%; top: -12px; width: 64px; height: 22px; translate: -50% 0; rotate: -6deg; background: rgb(175 191 152 / .55); clip-path: polygon(0 10%, 8% 0, 16% 12%, 26% 0, 36% 10%, 48% 0, 60% 12%, 72% 0, 84% 10%, 100% 0, 100% 90%, 90% 100%, 78% 88%, 64% 100%, 52% 90%, 38% 100%, 26% 88%, 12% 100%, 0 90%); }
.check { display: inline-block; width: 1.1em; height: .9em; vertical-align: -.05em; overflow: visible; }
.check path { fill: none; stroke: var(--sage-deep); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s ease .9s; }
.is-in .check path, html:not(.js) .check path { stroke-dashoffset: 0; }
.kstati__next { position: relative; z-index: 6; margin-top: 2rem; text-align: center; font-size: clamp(2rem, 8vw, 2.8rem); }
.sw--kstati { right: 10px; bottom: -1rem; }
@media (min-width: 900px) {
  .kstati { display: grid; grid-template-columns: 1.1fr .9fr; column-gap: 3rem; align-items: center; }
  .kstati__art { margin-top: 0; }
  .kstati__next { grid-column: 1 / -1; }
  .sw--kstati { right: -2rem; bottom: -1rem; }
}

/* =========================================================================
   05 · SHASHLIK PARTY
   ========================================================================= */
.party__head { position: relative; z-index: 6; text-align: center; padding-inline: var(--gutter); margin-bottom: -9vw; }
.party__title { font-family: var(--f-display); font-size: clamp(3.2rem, 17.5vw, 7rem); line-height: .82; text-transform: uppercase; letter-spacing: -.02em; }
.party__title .lettering { display: inline-block; }
.party__word { display: inline-block !important; }
.party__title > .lettering:first-child { rotate: -3deg; }
.party__title > .lettering:last-child { rotate: 2deg; translate: .25em 0; }
.party__cheer { margin-top: .9rem; font-family: var(--f-body); font-weight: 600; font-size: clamp(.95rem, 3.8vw, 1.15rem); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.party__text { position: relative; z-index: 6; margin: .6rem auto 0; max-width: 26rem; padding-inline: var(--gutter); text-align: center; font-size: clamp(1.15rem, 4.6vw, 1.45rem); line-height: 1.5; }
.sw--party-out { left: 14px; bottom: -2.5rem; }
@media (min-width: 700px) {
  .party__title { font-size: clamp(5rem, 13vw, 10.5rem); }
  .party__title .lettering { display: inline; }
  .party__head { margin-bottom: -12vw; }
}
@media (min-width: 1100px) { .party__head { margin-bottom: -10vw; } .party__title { font-size: min(9.5vw, 10.5rem); } }

/* =========================================================================
   06 · WHEN & WHERE — a sketchbook page
   ========================================================================= */
.where { padding-inline: var(--gutter); }
.sketchbook {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 2.2rem 1.25rem 1.5rem;
  background-color: var(--paper-light);
  background-image: radial-gradient(rgb(95 129 156 / .22) 1px, transparent 1.4px);
  background-size: 22px 22px;
  background-position: 11px 11px;
  border-radius: 6px 10px 8px 12px;
  box-shadow: 0 1px 2px rgb(80 60 40 / .08), 0 14px 32px -18px rgb(80 60 40 / .25);
  rotate: -.6deg;
}
.tape { position: absolute; width: 104px; height: 30px; background: rgb(228 183 175 / .6); clip-path: polygon(0 12%, 6% 0, 14% 10%, 22% 0, 32% 12%, 44% 0, 56% 10%, 68% 0, 80% 12%, 92% 0, 100% 10%, 100% 88%, 94% 100%, 82% 90%, 70% 100%, 58% 88%, 46% 100%, 34% 90%, 22% 100%, 10% 88%, 0 100%); }
.tape--l { left: -14px; top: 14px; rotate: -32deg; }
.tape--r { right: -12px; top: 10px; rotate: 28deg; background: rgb(181 167 205 / .55); }
.tape--c { left: 50%; top: -14px; translate: -50% 0; rotate: -3deg; background: rgb(175 191 152 / .6); }
.where__info { position: relative; z-index: 6; display: grid; gap: 1.6rem; }
.sketchbook { display: flex; flex-direction: column-reverse; }
.where__info .sticker-btn { margin-bottom: .4rem; }
.where__q { font-family: var(--f-hand); font-weight: 600; font-size: clamp(2.4rem, 11vw, 3.4rem); line-height: 1; color: var(--terra-deep); rotate: -2deg; }
.where__big { margin-top: .35rem; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.7rem, 7.5vw, 2.6rem); line-height: 1.05; overflow-wrap: anywhere; }
.where__line { margin-top: .25rem; font-style: normal; font-size: clamp(1.1rem, 4.5vw, 1.3rem); line-height: 1.45; overflow-wrap: anywhere; }
.where__line--time { font-weight: 600; }
.where__hint { font-family: var(--f-hand); font-weight: 600; font-size: 1.4rem; color: var(--ink-soft); margin-top: -.6rem; }
.where__adults { position: relative; z-index: 6; max-width: 26rem; font-size: .98rem; line-height: 1.45; color: var(--ink-soft); }
.where__adults .hand { display: block; font-size: 1.7rem; line-height: 1; color: var(--burg); margin-bottom: .2rem; }
.field__hint { font-size: .92rem; color: var(--ink-soft); }
.map { position: relative; margin: 0 0 1.4rem; aspect-ratio: 900 / 760; --cw: 900; --ch: 760; --vx: 0; --vw: 900; }
.map .layer--ref { left: 0; width: 100%; }
.map__base, .map__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__lines { overflow: visible; }
.map__road { fill: none; stroke: var(--ink-soft); stroke-width: 2.4; stroke-linecap: round; stroke-opacity: .55; stroke-dasharray: 1 0; }
.map__road--small { stroke-width: 1.8; }
.map__route { fill: none; stroke: var(--terra-deep); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: .012 .014; stroke-dashoffset: 0; opacity: 0; transition: opacity .8s ease .6s; }
.sketchbook.is-in .map__route, html:not(.js) .map__route { opacity: .85; }
.map__pin path { fill: var(--pink-deep); stroke: var(--burg); stroke-width: 2; }
.map__label { font-family: var(--f-hand); font-weight: 600; font-size: 50px; fill: var(--ink-soft); }
.map__label--here { fill: var(--burg); font-size: 58px; }
.sw--where-out { right: 8px; bottom: -3rem; }
@media (min-width: 860px) {
  .sketchbook { display: grid; grid-template-columns: .85fr 1.15fr; column-gap: 2.5rem; align-items: center; padding: 3rem 3rem 2.4rem; }
  .map { margin: 0; }
}

.sticker-btn {
  position: relative;
  z-index: 6;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 52px;
  padding: .7rem 1.5rem .75rem;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: #F3D9C4;
  border: 2px solid var(--ink);
  border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px;
  box-shadow: 3px 4px 0 var(--ink);
  rotate: -2deg;
  cursor: pointer;
  transition: rotate .25s ease, translate .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.sticker-btn:hover { rotate: 0deg; translate: -1px -1px; box-shadow: 4px 5px 0 var(--ink); background-color: #F0CDB4; }
.sticker-btn:active { translate: 2px 3px; box-shadow: 1px 1px 0 var(--ink); }
.sticker-btn[aria-disabled="true"] { background: #EDE6DA; color: var(--ink-soft); cursor: default; }

/* =========================================================================
   07 · OUR PLAN — a drawn route
   ========================================================================= */
.plan .title { margin-bottom: 2rem; }
.route { list-style: none; margin: 0 auto; padding: 0 var(--gutter) 0 calc(var(--gutter) + 58px); max-width: 780px; display: grid; gap: 1.9rem; }
.stop { position: relative; display: grid; grid-template-columns: 76px 1fr; grid-template-areas: "icon time" "icon what"; column-gap: 1rem; align-items: center; }
.stop .sw { left: -40px; top: 38px; }
.stop:nth-child(even) .sw { left: -22px; }
.stop__icon { grid-area: icon; position: relative; z-index: 6; width: 76px; height: 76px; display: grid; place-items: center; background: center / 100% 100% no-repeat; }
.stop__icon--sage { background-image: url("assets/decor/blob-sage.webp"); }
.stop__icon--terra { background-image: url("assets/decor/blob-terra.webp"); }
.stop__icon--pink { background-image: url("assets/decor/blob-pink.webp"); }
.stop__icon--lav { background-image: url("assets/decor/blob-lav.webp"); }
.stop__icon--blue { background-image: url("assets/decor/blob-blue.webp"); }
.stop__icon svg { width: 54px; height: 54px; overflow: visible; }
.stop__icon path { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .stop__icon path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s ease .2s; }
.js .stop.is-in .stop__icon path { stroke-dashoffset: 0; }
.js .stop.is-in .stop__icon { animation: wiggle 1.1s ease-in-out .3s both; }
@keyframes wiggle { 0%, 100% { rotate: 0deg; } 20% { rotate: -9deg; } 45% { rotate: 7deg; } 70% { rotate: -4deg; } }
.stop__time { grid-area: time; position: relative; z-index: 6; font-family: var(--f-hand); font-weight: 600; font-size: clamp(1.9rem, 8vw, 2.4rem); line-height: 1; color: var(--terra-deep); }
.stop__what { grid-area: what; position: relative; z-index: 6; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.35rem, 6vw, 1.9rem); line-height: 1.1; text-transform: uppercase; letter-spacing: .01em; }
.js .stop { opacity: 0; transition: opacity .9s ease; }
.js .stop.is-in { opacity: 1; }
.stop--later .stop__what { font-size: clamp(1.15rem, 5vw, 1.5rem); line-height: 1.25; }
.stop__couple { grid-column: 2; width: 84px; height: auto; margin-top: .6rem; }
.plan__end { position: relative; z-index: 6; margin-top: 2.6rem; text-align: center; padding-inline: var(--gutter); font-size: clamp(2.2rem, 10vw, 4rem); text-transform: uppercase; }
.sw--plan-out { right: 12px; bottom: -2.6rem; }
.sw--wear-in { right: 10px; top: -1rem; }
.sw--line-r { right: 5%; top: 78%; }
.sw--line-l { left: 5%; top: 84%; }
@media (min-width: 900px) {
  .route { padding: 0; gap: 0; }
  .stop { width: 50%; grid-template-columns: 90px 1fr; column-gap: 1.2rem; padding-left: 2.4rem; min-height: 150px; }
  .stop:nth-child(odd) { margin-left: 50%; }
  .stop:nth-child(even) { grid-template-columns: 1fr 90px; grid-template-areas: "time icon" "what icon"; padding: 0 2.4rem 0 0; text-align: right; }
  .stop .sw { left: 0; top: 45px; }
  .stop:nth-child(even) .sw { left: 100%; }
  .stop__icon { width: 90px; height: 90px; }
  .stop__icon svg { width: 62px; height: 62px; }
  .stop:nth-child(odd) .sw { left: -34px; }
  .stop:nth-child(even) .sw { left: calc(100% + 34px); }
  .stop__couple { width: 104px; }
}

/* =========================================================================
   08 · WHAT TO WEAR
   ========================================================================= */
.wear__big { position: relative; z-index: 6; margin-top: 1rem; text-align: center; font-family: var(--f-display); font-weight: 800; font-size: clamp(2.3rem, 11vw, 5rem); line-height: .98; text-transform: uppercase; color: var(--ink); padding-inline: var(--gutter); }
.clothesline { position: relative; margin: 2rem auto 0; max-width: 1100px; height: clamp(170px, 46vw, 330px); }
.clothesline__rope { position: absolute; left: 0; top: 0; width: 100%; height: 40%; overflow: visible; }
.clothesline__rope path { fill: none; stroke: var(--ink-soft); stroke-width: 2; vector-effect: non-scaling-stroke; }
.clothesline__items { list-style: none; margin: 0; padding: 0 3%; display: flex; justify-content: space-between; align-items: flex-start; }
.clothesline__items li { position: relative; z-index: 4; width: 19%; transform-origin: 50% 2%; }
.clothesline__items img { width: 100%; height: auto; transform-origin: 50% 4%; animation: sway 5.5s ease-in-out infinite alternate; }
.clothesline__items li:nth-child(1) { margin-top: 3.5%; width: 21%; }
.clothesline__items li:nth-child(2) { margin-top: 6.5%; width: 16.5%; }
.clothesline__items li:nth-child(3) { margin-top: 7.4%; width: 20%; }
.clothesline__items li:nth-child(4) { margin-top: 6.6%; width: 17.5%; }
.clothesline__items li:nth-child(5) { margin-top: 3.8%; width: 21%; }
.clothesline__items li:nth-child(2) img { animation-delay: -1.4s; animation-duration: 6.2s; }
.clothesline__items li:nth-child(3) img { animation-delay: -2.8s; }
.clothesline__items li:nth-child(4) img { animation-delay: -.8s; animation-duration: 4.8s; }
.clothesline__items li:nth-child(5) img { animation-delay: -3.6s; animation-duration: 6.6s; }
@keyframes sway { from { rotate: -2.2deg; } to { rotate: 2.4deg; } }
.wear__text { position: relative; z-index: 6; margin: 1.6rem auto 0; max-width: 28rem; padding-inline: var(--gutter); display: grid; gap: 1rem; text-align: center; font-size: clamp(1.08rem, 4.4vw, 1.3rem); line-height: 1.5; }
.wear__text p:first-child { font-family: var(--f-display); font-weight: 700; font-size: 1.3em; }
.note--style { display: block; width: fit-content; margin: 1.6rem auto 0; rotate: -3deg; color: var(--burg); }
.sw--wear { left: calc(-1 * var(--gutter) + 8px); top: 0; }
@media (min-width: 900px) {
  .wear__text { max-width: 900px; grid-template-columns: repeat(3, 1fr); column-gap: 2.5rem; text-align: left; align-items: start; }
  .wear__text p:first-child { font-size: 1.6em; line-height: 1.15; }
}

/* =========================================================================
   RSVP
   ========================================================================= */
.rsvp { padding-inline: var(--gutter); }
.rsvp[hidden] { display: none; }
.sw--rsvp { left: 10px; top: 0; }
.rsvp__card { position: relative; z-index: 6; max-width: 540px; margin: 0 auto; padding: 2.4rem 1.25rem 1.8rem; background: var(--paper-light); border-radius: 10px 6px 12px 8px; box-shadow: 0 1px 2px rgb(80 60 40 / .08), 0 16px 36px -20px rgb(80 60 40 / .3); rotate: .5deg; }
.rsvp__title { text-align: center; font-size: clamp(3rem, 14vw, 4.4rem); }
.rsvp__form { margin-top: 1.5rem; display: grid; gap: 1.2rem; }
.choice { border: 0; margin: 0; padding: 0; display: grid; gap: .7rem; }
.choice__opt { position: relative; display: block; cursor: pointer; }
.choice__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice__opt span { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: .6rem 1rem; text-align: center; font-family: var(--f-display); font-weight: 700; font-size: 1.08rem; text-transform: uppercase; letter-spacing: .03em; border: 2px dashed rgb(62 52 46 / .45); border-radius: 225px 16px 255px 14px / 14px 255px 16px 225px; transition: background-color .25s, border-color .25s, rotate .25s; }
.choice__opt input:checked + span { background: #F1D9D2; border: 2px solid var(--ink); rotate: -1deg; box-shadow: 2px 3px 0 var(--ink); }
.choice__opt input:focus-visible + span { outline: 3px solid var(--burg); outline-offset: 3px; }
@media (min-width: 520px) { .choice { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .3rem; }
.field[hidden] { display: none; }
.field label { font-family: var(--f-hand); font-weight: 600; font-size: 1.55rem; line-height: 1; color: var(--ink-soft); }
.field input, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: .6rem .2rem;
  background: transparent;
  border: 0;
  border-bottom: 2px solid rgb(62 52 46 / .5);
  border-radius: 0;
  font-size: 1.12rem;
  outline: none;
}
.field textarea { resize: vertical; min-height: 88px; line-height: 1.45; }
.field input:focus-visible, .field textarea:focus-visible { border-bottom-color: var(--burg); box-shadow: 0 2px 0 var(--burg); }
.field input::placeholder, .field textarea::placeholder { color: rgb(102 87 77 / .6); }
.field__error { font-size: .95rem; color: var(--burg); font-weight: 600; }
/* sending failed — sits right above the send button, not under a field */
.rsvp__error { margin: -.4rem 0 .2rem; }
.rsvp__error[hidden] { display: none; }
.field input[aria-invalid="true"] { border-bottom-color: var(--burg); }
.stepper { display: flex; align-items: center; gap: .6rem; }
.stepper input { width: 4.2rem; text-align: center; font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper__btn { width: 48px; height: 48px; border: 2px solid var(--ink); border-radius: 50% 46% 52% 48%; background: var(--paper); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.stepper__btn:hover { background: #F1D9D2; }
.sticker-btn--send { justify-self: center; margin-top: .4rem; font-size: 1.2rem; padding-inline: 2rem; }
.rsvp__thanks { text-align: center; padding: 1.6rem 0 .6rem; outline: none; }
.rsvp__thanks-big { font-size: clamp(3rem, 14vw, 4.4rem); }
.rsvp__thanks-text { margin-top: .6rem; font-family: var(--f-hand); font-weight: 600; font-size: 2rem; color: var(--ink-soft); }
.link-btn { margin-top: 1.2rem; min-height: 44px; padding: .4rem .8rem; background: none; border: 0; text-decoration: underline; text-decoration-style: wavy; text-underline-offset: 5px; cursor: pointer; color: var(--ink-soft); }
@media (min-width: 700px) { .rsvp__card { padding: 3rem 3rem 2.4rem; } }

/* =========================================================================
   09 · FINALE
   ========================================================================= */
.finale__text { position: relative; z-index: 6; max-width: 50rem; margin: 0 auto; padding-inline: var(--gutter); text-align: center; display: grid; gap: 1rem; font-size: clamp(1.1rem, 4.5vw, 1.35rem); line-height: 1.5; }
.finale__title { font-size: clamp(2.5rem, calc(4vw + 1.6rem), 5rem); line-height: .98; margin-bottom: .4rem; }
.finale__text p:not(.finale__sign) { max-width: 36rem; margin-inline: auto; }
.finale__sign { margin-top: .6rem; }
.finale__sign .hand { display: block; font-size: 2rem; }
.finale__names { display: block; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.5rem, 6.4vw, 2.2rem); text-transform: uppercase; letter-spacing: .02em; }
.scene--finale { margin-top: -6vw; }
.finale__bye { position: relative; z-index: 6; margin-top: -4vw; text-align: center; font-size: clamp(2.2rem, 9.6vw, 6rem); text-transform: uppercase; }
.back-to-start { position: relative; z-index: 6; display: block; width: fit-content; margin: 2.6rem auto 0; min-height: 44px; padding: .5rem .8rem; font-family: var(--f-hand); font-weight: 600; font-size: 1.6rem; color: var(--ink-soft); text-decoration-style: wavy; text-underline-offset: 6px; }
.sw--finale-top { right: 8px; top: -2rem; }
.sw--end { left: 58%; bottom: 4.5rem; }
@media (min-width: 1100px) {
  .scene--finale { margin-top: -15vw; }
  .finale__text { max-width: 58rem; }
}

/* =========================================================================
   Opening screen: loading, then the envelope
   ========================================================================= */
.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  background: var(--paper);
  overflow: hidden;
}
.gate[hidden] { display: none; }
.gate__inner { display: grid; justify-items: center; gap: clamp(.9rem, 3vw, 1.6rem); text-align: center; width: min(100%, 520px); }
.gate__eyebrow { font-weight: 600; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }
.gate__title { font-size: clamp(2rem, 9vw, 3.2rem); line-height: 1; }
.gate__loading { display: grid; justify-items: center; gap: .5rem; }
.gate__bar { width: min(72vw, 300px); height: 15px; padding: 2px; border: 2px solid var(--ink); border-radius: 255px 14px 225px 12px / 12px 225px 14px 255px; background: var(--paper-light); }
.gate__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--blue); transition: width .35s ease; }
.gate__percent { font-family: var(--f-hand); font-weight: 600; font-size: 1.45rem; line-height: 1; color: var(--ink-soft); }
.gate__percent b { color: var(--burg); }
.gate__actions { display: grid; justify-items: center; gap: .3rem; }
.gate__open[disabled] { opacity: .45; box-shadow: 2px 3px 0 var(--ink); cursor: default; }
.gate__quiet { margin-top: 0; font-family: var(--f-hand); font-size: 1.25rem; }

.envelope { position: relative; width: min(84vw, 420px); aspect-ratio: 900 / 640; perspective: 1400px; transform-style: preserve-3d; }
.envelope__layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.envelope__back { z-index: 1; }
.envelope__card { z-index: 2; transition: transform 1.1s cubic-bezier(.18, .9, .24, 1) .45s; }
.envelope__front { z-index: 3; }
.envelope__flap { z-index: 4; transform-origin: 50% 31.25%; transition: transform 1s cubic-bezier(.45, 0, .2, 1) .18s; }
.envelope__seal { z-index: 5; transform-origin: 50% 63%; transition: transform .5s ease, opacity .5s ease; }
.gate.is-opening .envelope__seal { transform: scale(1.3) rotate(16deg); opacity: 0; }
.gate.is-opening .envelope__flap { transform: rotateX(-166deg); }
.gate.is-opening .envelope__card { transform: translateY(-17%) rotate(-1.2deg); }
.gate.is-opening .gate__loading, .gate.is-opening .gate__actions { opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.gate.is-closing { animation: gate-out .8s ease forwards; }
@keyframes gate-out { to { opacity: 0; scale: 1.05; } }
body.is-gated { overflow: hidden; }

.credit { position: relative; z-index: 6; margin: 1.4rem auto 0; padding-inline: var(--gutter); max-width: 34rem; text-align: center; font-size: .8rem; line-height: 1.5; color: rgb(102 87 77 / .75); }
.credit a { display: inline-block; padding: .9rem .15rem; margin-block: -.9rem; color: inherit; text-underline-offset: 3px; }

/* ---------- music toggle (only when CONFIG.music.src is set) ---------- */
/* shown only when the system asks for less motion: lets the page be woken up anyway */
.motion-toggle {
  position: fixed;
  left: max(14px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 50;
  min-height: 44px;
  padding: .5rem 1rem;
  font-family: var(--f-hand);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--ink);
  background: var(--paper-light);
  border: 2px solid var(--ink);
  border-radius: 225px 16px 255px 14px / 14px 255px 16px 225px;
  box-shadow: 2px 3px 0 var(--ink);
  cursor: pointer;
}
.motion-toggle[hidden] { display: none; }

.music { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 50; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper-light); box-shadow: 2px 3px 0 var(--ink); font-size: 1.4rem; cursor: pointer; }
.music[aria-pressed="true"] { background: #F1D9D2; }
.music[hidden] { display: none; }

/* ---------- reduced motion: no parallax, no ambient loops, only soft fades ---------- */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-on) { scroll-behavior: auto; }
  html:not(.motion-on) *, html:not(.motion-on) *::before, html:not(.motion-on) *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
  html.js:not(.motion-on) .hero [data-intro], html.js:not(.motion-on) [data-reveal], html.js:not(.motion-on) .scene .layer[data-step], html.js:not(.motion-on) .stop { opacity: 1 !important; filter: none !important; clip-path: none !important; -webkit-mask-image: none !important; mask-image: none !important; translate: none !important; transition: opacity .6s ease !important; }
  html.js:not(.motion-on) [data-reveal="letters"] .ch { opacity: 1; }
  html.js:not(.motion-on) .stop__icon path, html:not(.motion-on) .check path { stroke-dashoffset: 0 !important; transition: none !important; }
  html:not(.motion-on) .walker { display: none; }
  html:not(.motion-on) .water-motion path, html:not(.motion-on) .water-motion ellipse, html:not(.motion-on) .sea-motion path, html:not(.motion-on) .gulls path, html:not(.motion-on) .smoke path, html:not(.motion-on) .fireflies circle, html:not(.motion-on) .clothesline__items img { animation: none !important; }
  html:not(.motion-on) .smoke path { opacity: .35; }
  html:not(.motion-on) .stream .s-flow, html:not(.motion-on) .stream .s-flow2, html:not(.motion-on) .critter, html:not(.motion-on) .water-motion .ripples { display: none; }
  html:not(.motion-on) .envelope__flap, html:not(.motion-on) .envelope__card, html:not(.motion-on) .envelope__seal { transition: none !important; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.motion-on { scroll-behavior: smooth; }