:root { color-scheme: light; color: #3b442c; background: #e6e0d3; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
.invitation {
  container-type: inline-size;
  width: min(100%, 600px);
  margin-inline: auto;
  background: #f4efe5;
  box-shadow: 0 0 70px #433c2724;
}
img { display: block; width: 100%; height: auto; }
.panel { position: relative; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid #a28045; outline-offset: 3px; }
.open {
  position: absolute;
  left: 32%; right: 32%; bottom: 1.5%;
  min-height: 30px;
  display: grid; place-items: center;
  background: #263125;
  color: #dedfcb;
  text-align: center;
  text-decoration: none;
  font: 400 clamp(9px, 2cqw, 12px)/1.2 Arial, sans-serif;
  text-transform: uppercase;
}
.map { position: absolute; left: 32%; top: 72%; width: 36%; height: 6.4%; border-radius: 99px; }
.map:hover { background: #3b442c14; }
.clock {
  position: absolute;
  top: 8.5%; left: 11.3%; right: 11.3%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  background: #f3eee4;
  font: 400 clamp(14px, 4.6cqw, 27px)/1 Georgia, serif;
  font-variant-numeric: tabular-nums;
  padding: .15em 0;
}
.clock b { font-weight: 400; }
form {
  margin: 0 6% 7.2cqw;
  padding: 6.5cqw 6cqw 5.5cqw;
  background: #ebe7d9;
  border-radius: 2.7cqw;
  font: 400 clamp(14px, 3cqw, 18px)/1.45 Georgia, serif;
}
form h2, form .eyebrow, .form-hint, #status { text-align: center; }
form h2 { font-size: 6.5cqw; font-weight: 400; margin: 2.7cqw 0 4.2cqw; }
.eyebrow, button { font: 400 clamp(9px, 2cqw, 12px)/1.3 Arial, sans-serif; text-transform: uppercase; }
.eyebrow { margin: 0; color: #646b56; }
input:not([type=radio]), textarea {
  display: block; width: 100%;
  padding: 2cqw; border: 1px solid #bcbda8; background: transparent;
  font: max(16px, 2.8cqw)/1.3 Georgia, serif;
  color: inherit; border-radius: 0;
}
textarea { resize: vertical; }
textarea[hidden] { display: none; }
fieldset { border: 0; padding: 0; margin: 3cqw 0 4cqw; }
fieldset label { display: flex; align-items: center; gap: .6em; min-height: 33px; }
input[type=radio] { margin: 0; accent-color: #3b442c; }
.form-hint, #status { font-size: clamp(12px, 2.25cqw, 14px); margin: 2.2cqw 0; }
#status:empty { display: none; }
button {
  display: block; width: 74%; min-height: 44px; margin: 0 auto;
  background: #3b442c; color: #faf7ef; border: 0; border-radius: 999px; cursor: pointer;
}
button:hover { background: #4b5638; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.artwork { position: relative; }
.art-layer { position: absolute; object-fit: fill; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .reveal { opacity: 0; transform: translateY(7px); }
  .motion-ready .reveal.is-visible {
    animation: appear .8s cubic-bezier(.2,.65,.3,1) var(--reveal-delay, 0ms) both;
  }
  .motion-ready .reveal:focus-within { animation: none; opacity: 1; transform: none; }
  .flower { transform-origin: left bottom; animation: sway 4.8s ease-in-out infinite alternate; }
}
@keyframes appear {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes sway {
  from { transform: rotate(-2deg) translateY(0); }
  to { transform: rotate(4deg) translateY(-3px); }
}

.photo-motion { position: absolute; overflow: hidden; pointer-events: none; }
.photo-motion img { width: 100%; height: 100%; object-fit: cover; }

.opening[open] {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 1.25rem;
  border: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: transparent;
  color: #f4efe5;
}
.opening::backdrop { background: transparent; }
html:has(.opening[open]) { overflow: hidden; }
.opening[open]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, #45513b, #242f23);
}
.opening-card {
  position: relative;
  width: min(100%, 27rem);
  text-align: center;
}
.opening-kicker {
  margin: 0 0 .6rem;
  color: #dfc69a;
  font: .68rem Arial, sans-serif;
  letter-spacing: .19em;
  text-transform: uppercase;
}
.opening-title {
  margin: 0 0 clamp(1rem, 4vh, 2rem);
  font: 400 clamp(1.8rem, 7vw, 3rem)/1.15 Georgia, serif;
}
.envelope {
  position: relative;
  isolation: isolate;
  perspective: 900px;
  height: clamp(8.5rem, 30vh, 14rem);
  margin-bottom: 1.45rem;
  border-radius: .35rem;
}
.envelope::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #cfb891;
  border-radius: inherit;
  box-shadow: 0 18px 44px #10180e88;
}
.envelope-window {
  position: absolute;
  z-index: 2;
  inset: 0;
  clip-path: inset(-100vh 0 0);
}
.envelope-preview {
  position: absolute;
  top: 100%;
  left: 19%;
  width: 62%;
  transform-origin: top left;
}
.envelope-preview > .artwork { box-shadow: 0 5px 18px #19241875;
}
.envelope-pocket, .envelope-flap {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.envelope-pocket { z-index: 3; }
.envelope-flap {
  z-index: 4;
  transform-origin: top;
  filter: drop-shadow(0 3px 3px #6b4f2c45);
}
.opening-seal {
  position: absolute;
  z-index: 5;
  top: 63%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-7deg);
  display: grid;
  grid-auto-flow: column;
  place-items: center;
  gap: .12em;
  width: clamp(3.15rem, 13vw, 4.15rem);
  aspect-ratio: 1;
  border: 1px solid #a46e45;
  border-radius: 48% 51% 46% 53% / 48% 46% 54% 51%;
  background: radial-gradient(circle at 34% 25%, #c18a5f, #895538 68%, #67412d);
  color: #f3d4a3;
  box-shadow: inset 0 1px 3px #f2c98d9c, inset 0 -2px 4px #542f26a0, 0 4px 8px #593a2855;
  font: italic 400 1.17rem Georgia, serif;
  padding: .42em;
}
.opening-seal::before {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid #efc68a8c;
  border-radius: 50%;
  pointer-events: none;
}
.opening-seal i { font-size: .72em; }
.opening-card button { width: min(100%, 17rem); font-size: .73rem; }
.opening-play { background: #e8d7b2; color: #293624; }
.opening-play:hover { background: #f6e8cd; }
.opening-silent { background: transparent; color: #f4efe5; }
.opening-silent:hover { background: #ffffff12; }

@media (prefers-reduced-motion: no-preference) {
  .opening.is-opening::before { animation: envelope-fade .45s ease 1.65s both; }
  .opening.is-opening .opening-seal { animation: envelope-fade .2s ease both; }
  .opening.is-opening .envelope-flap {
    animation: envelope-open .55s ease .1s both, flap-drop .55s ease-in 1.05s forwards;
  }
  .opening.is-opening .envelope::before,
  .opening.is-opening .envelope-pocket { animation: envelope-drop .55s ease-in 1.05s both; }
  .opening.is-opening .envelope-window { animation: clear-envelope-window .55s ease-in 1.05s both; }
  .opening.is-opening .envelope-preview {
    animation: lift-invitation .72s ease-out .32s both, zoom-invitation .95s cubic-bezier(.32,0,.24,1) 1.4s forwards;
  }
  .opening.is-opening .opening-title,
  .opening.is-opening .opening-kicker,
  .opening.is-opening button { animation: envelope-fade .25s ease both; pointer-events: none; }
  .motion-ready .reveal-slide.is-visible { animation-name: reveal-slide; --from-x: -16px; }
  .motion-ready .reveal-slide[src*="cover-layer-1"].is-visible { --from-x: 16px; }
  .motion-ready .reveal-unfold.is-visible { animation-name: reveal-unfold; }
  .motion-ready .reveal-bloom.is-visible { animation-name: reveal-bloom; }
  .photo-motion.is-visible img { animation: settle-photo 1.45s cubic-bezier(.2,.65,.3,1) both; }

}

@keyframes envelope-fade { to { opacity: 0; } }
@keyframes envelope-open {
  99% { z-index: 4; }
  to { z-index: 1; transform: rotateX(178deg); }
}
@keyframes envelope-drop { to { transform: translateY(115vh); } }
@keyframes flap-drop {
  from { transform: translateY(0) rotateX(178deg); }
  to { transform: translateY(115vh) rotateX(178deg); }
}
@keyframes clear-envelope-window { to { clip-path: inset(-100vh -100vw -100vh); } }
@keyframes lift-invitation { to { transform: translateY(var(--cover-lift)); } }
@keyframes zoom-invitation {
  from { transform: translateY(var(--cover-lift)); }
  to { transform: translate(var(--cover-x), var(--cover-y)) scale(var(--cover-scale)); }
}
@keyframes reveal-slide {
  from { opacity: 0; transform: translateX(var(--from-x)); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes reveal-unfold {
  from { opacity: 0; clip-path: inset(0 0 100%); transform: translateY(5px); }
  to { opacity: 1; clip-path: inset(0); transform: translateY(0); }
}
@keyframes reveal-bloom {
  from { opacity: 0; transform: scale(.86); }
  75% { opacity: 1; transform: scale(1.035); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes settle-photo { from { transform: scale(1.14); } to { transform: scale(1); } }
/* The original heart sits over the December 4 cell in the calendar artwork. */
.calendar-heart {
  position: absolute;
  left: 56.5%;
  top: 61.398%;
  width: 7%;
  height: 3.517%;
  pointer-events: none;
}
.calendar-heart img { position: relative; width: 100%; height: 100%; }

@media (prefers-reduced-motion: no-preference) {
  .calendar-heart.is-beating img { animation: heart-beat 1.8s ease-in-out infinite; }
  .calendar-heart.is-beating::before,
  .calendar-heart.is-beating::after {
    content: "";
    position: absolute;
    inset: 3%;
    border: 1px solid #a08450;
    border-radius: 50%;
    opacity: 0;
    animation: heart-wave 1.8s ease-out infinite;
  }
  .calendar-heart.is-beating::after { animation-delay: .324s; }
}
@keyframes heart-beat {
  0%, 18%, 44%, 100% { transform: scale(1); }
  10% { transform: scale(1.18); }
  28% { transform: scale(1.13); }
}
@keyframes heart-wave {
  0% { opacity: 0; transform: scale(.8); }
  10% { opacity: .66; }
  62%, 100% { opacity: 0; transform: scale(2.3); }
}

.music-toggle {
  position: fixed;
  z-index: 5;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: auto;
  min-height: 44px;
  padding-inline: .95rem;
  border: 1px solid #c9b48b;
  box-shadow: 0 2px 12px #26312530;
  font-size: .68rem;
}
.music-toggle[hidden] { display: none; }

.scroll-curtain { position: absolute; pointer-events: none; }
.calendar-curtain { inset: 36.5% 6% 10%; }
.schedule-curtain { inset: 59.5% 0 0; }
.signature-curtain { inset: 0 0 20%; }
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .scroll-curtain,
  .motion-ready .photo-motion::after {
    background: #f6f1e7;
    pointer-events: none;
  }
  .motion-ready .schedule-curtain { background: #3e472d; }
  .motion-ready .signature-curtain { background: #eae2d1; }
  .motion-ready .photo-motion::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  .motion-ready .photo-motion.is-visible::after {
    animation: uncover-right 1.15s cubic-bezier(.25,.65,.2,1) both;
  }
  .motion-ready .photo-motion + .photo-motion.is-visible::after { animation-name: uncover-left; }
  .motion-ready .scroll-curtain.is-visible {
    animation: uncover-down 1.2s cubic-bezier(.25,.65,.2,1) both;
  }
  .motion-ready .signature-curtain.is-visible { animation-duration: 1.4s; }
  .motion-ready #greeting .lettering.reveal.is-visible { animation-name: greeting-arrive; animation-duration: 1.05s; }
  .motion-ready .lettering[src*="story-layer-"].reveal-slide.is-visible {
    animation-duration: .95s;
    --from-x: -25px;
  }
}
@keyframes uncover-right { from { clip-path: inset(0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes uncover-left { from { clip-path: inset(0); } to { clip-path: inset(0 100% 0 0); } }
@keyframes uncover-down { from { clip-path: inset(0); } to { clip-path: inset(100% 0 0); } }
@keyframes greeting-arrive {
  from { opacity: 0; transform: translateY(17px); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

#rsvp input[type=radio] {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  accent-color: #647449;
  cursor: pointer;
}
#rsvp label:has(input[type=radio]:checked)::after {
  content: "♡";
  color: #647449;
  margin-inline-start: .25em;
  font: 28px/1 Georgia, serif;
}
#message:focus { background-color: #fff9eb; border-color: #a9834b; box-shadow: 0 0 16px #bc965943; }
.rsvp-thanks {
  position: fixed;
  z-index: 21;
  top: max(1rem, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 2rem);
  box-sizing: border-box;
  margin: 0;
  padding: .85rem 1.4rem;
  text-align: center;
  color: #fff3d7;
  background: #3c4b30;
  border: 1px solid #c7a86a;
  border-radius: 999px;
  box-shadow: 0 5px 25px #2d36284d;
  font: italic 1.25rem Georgia, serif;
  pointer-events: none;
}
.rsvp-thanks[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  #rsvp label:has(input[type=radio]:checked)::after { animation: guest-beat .85s ease-in-out infinite; }
  .rsvp-thanks:not([hidden]) { animation: thanks-arrive .45s cubic-bezier(.2,.75,.35,1.25) both; }
}
@keyframes thanks-arrive {
  from { opacity: 0; transform: translate(-50%, -28px) scale(.92); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.guest-decoration {
  position: fixed;
  z-index: 20;
  pointer-events: none;
  color: #8a9c65;
  font-size: 24px;
  animation: guest-float 2.6s ease-out both;
}
.guest-decoration > span { display: block; animation: guest-beat .65s ease-in-out infinite; }
.guest-decoration.heart { color: #55703b; font-size: clamp(30px, 7vw, 42px); }
.guest-decoration.sparkle { color: #bc9554; font-size: 19px; }
.guest-decoration.butterfly { color: #c7b47d; }
.guest-decoration.butterfly > span { animation: butterfly-flutter .32s ease-in-out infinite alternate; }
@keyframes guest-float {
  0% { opacity: 0; transform: translate(-50%, 0); }
  15% { opacity: .9; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--drift)), -130px); }
}
@keyframes guest-beat { 0%, 40%, 100% { transform: scale(1); } 15%, 60% { transform: scale(1.2); } }
@keyframes butterfly-flutter { from { transform: rotate(-12deg) scaleX(.5); } to { transform: rotate(12deg) scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .guest-decoration { display: none; } }

#rsvp label:has(input[value="К сожалению, не смогу"]:checked)::after { color: #757771; }
.guest-decoration.heart-click { font-size: 19px; }
.guest-decoration.heart-grey { color: #757771; }

@media (prefers-reduced-motion: no-preference) {
  html:has(.opening[open]).motion-ready .invitation > header .lettering {
    opacity: 0;
    animation: none;
  }
  .motion-ready .invitation > header .lettering.reveal.is-visible {
    animation-name: cover-letter-arrive;
    animation-duration: .85s;
  }
  .motion-ready .invitation > header [src*="cover-layer-3"].is-visible { animation-delay: .22s; }
  .motion-ready .invitation > header [src*="cover-layer-2"].is-visible { animation-delay: .39s; }
  .motion-ready .invitation > header [src*="cover-layer-1"].is-visible { animation-delay: .55s; }
  .motion-ready .invitation > header [src*="cover-layer-4"].is-visible { animation-delay: .72s; }
}
@keyframes cover-letter-arrive {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.floral-corner {
  position: absolute;
  display: block;
  aspect-ratio: 2 / 3;
  background: url("assets/calendar-layer-0.webp") center / contain no-repeat;
  pointer-events: none;
}
.envelope-flowers {
  z-index: 3;
  left: 2%;
  bottom: 1%;
  width: 17%;
  transform: rotate(-8deg);
  filter: drop-shadow(1px 2px 3px #7058374d);
}
#rsvp { position: relative; }
.rsvp-flowers {
  top: -.75rem;
  right: -.85rem;
  width: clamp(38px, 12vw, 76px);
  transform: scaleX(-1) rotate(-10deg);
}
.closing-flowers {
  z-index: 1;
  left: 0;
  top: 0;
  width: clamp(46px, 13%, 83px);
  transform: scaleY(-1);
  filter: drop-shadow(1px -1px 3px #29301f66);
}
@media (prefers-reduced-motion: no-preference) {
  .opening.is-opening .envelope-flowers {
    animation: envelope-drop .55s ease-in 1.05s both;
  }
  .rsvp-flowers {
    transform-origin: right top;
    animation: corner-flower-sway 5s ease-in-out infinite alternate;
  }
}
@keyframes corner-flower-sway {
  from { transform: scaleX(-1) rotate(-8deg); }
  to { transform: scaleX(-1) rotate(-13deg); }
}