/* ============================================================
   Катя & Дима — 10 сентября 2026
   ============================================================ */

:root {
  --ink: #2b2a24;
  --parchment: #f4eee0;
  --parchment-deep: #eadfc7;
  --moss: #46583a;
  --moss-deep: #2f3d27;
  --rust: #a1522e;
  --rust-soft: #c98a5e;
  --bloom: #c9827c;
  --bloom-pale: #e3b7ac;
  --line: #d3c4a0;
  --paper-shadow: rgba(43, 42, 36, 0.16);

  --font-display: "Fraunces", "Iowan Old Style", serif;
  --font-body: "Instrument Sans", "Segoe UI", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--parchment);
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ---------- shared flourish ---------- */
.flourish {
  display: block;
  overflow: visible;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 88vh;
  min-height: 88svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 5vw;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, #3d4d32 0%, var(--moss-deep) 55%, #232c1c 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.hero__vines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero__vines .flourish {
  position: absolute;
  color: var(--parchment-deep);
}

.hero__corner {
  width: clamp(130px, 20vw, 260px);
  height: auto;
  opacity: 0.85;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.3));
}

.hero__corner--tl {
  top: 0;
  left: 0;
}

.hero__corner--tr {
  top: 0;
  right: 0;
  transform: scaleX(-1);
}

.hero__corner--bl {
  bottom: 0;
  left: 0;
  transform: scaleY(-1);
}

.hero__corner--br {
  bottom: 0;
  right: 0;
  transform: scale(-1, -1);
}

.hero__photo {
  position: relative;
  z-index: 1;
  height: 100%;
  width: auto;
  aspect-ratio: 853 / 1280;
  max-width: min(94vw, 620px);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 60px -16px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(18px);
  animation: rise 1.1s 0.15s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(20, 22, 14, 0.88) 0%,
    rgba(20, 22, 14, 0.55) 26%,
    rgba(20, 22, 14, 0.12) 48%,
    rgba(20, 22, 14, 0) 62%
  );
}

.hero__caption {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding: 11% 6% 0;
  color: var(--parchment);
  text-align: center;
}

.hero__date {
  color: var(--rust-soft);
  font-size: clamp(0.85rem, 2.3vw, 1.2rem);
}

.hero__divider {
  display: block;
  width: clamp(64px, 9vw, 120px);
  height: auto;
  margin: 1rem auto 0.5rem;
  color: var(--parchment-deep);
  opacity: 0.8;
}

.hero__names {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  white-space: nowrap;
  gap: 0.35em;
  font-family: var(--font-display);
  font-weight: 480;
  font-style: normal;
  font-size: clamp(2.1rem, 10vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.01em;
}

.hero__amp {
  display: flex;
  align-items: center;
  gap: 0.16em;
}

.hero__amp span {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.42em;
  color: var(--rust-soft);
}

/* ============================================================
   INVITATION
   ============================================================ */
.invite {
  position: relative;
  background: var(--parchment);
  padding: clamp(4.5rem, 10vh, 7rem) 6vw clamp(5rem, 12vh, 8rem);
}

.invite::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.invite__inner {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.invite__media {
  position: relative;
  justify-self: center;
  width: min(100%, 380px);
}

.arch-decor {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.arch-decor__connector {
  position: absolute;
  top: -15%;
  left: 50%;
  width: 76%;
  color: var(--moss);
  transform: translateX(-50%);
  filter: drop-shadow(0 4px 6px rgba(43, 42, 36, 0.25));
}

.arch-decor__corner {
  position: absolute;
  bottom: -6%;
  right: -8%;
  width: 30%;
  color: var(--moss);
  transform: scale(-1, 1);
  opacity: 0.9;
  filter: drop-shadow(0 4px 6px rgba(43, 42, 36, 0.25));
}

.arch-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4.3;
  border-radius: 46% 46% 6% 6% / 22% 22% 4% 4%;
  overflow: hidden;
  box-shadow: 0 28px 60px -18px var(--paper-shadow);
  border: 10px solid var(--parchment);
  outline: 1px solid var(--line);
}

.arch-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  transform: scale(1.6);
  transform-origin: 50% 42%;
}

.polaroid {
  position: absolute;
  left: -13%;
  bottom: -8%;
  width: 46%;
  aspect-ratio: 4 / 5;
  padding: 10px 10px 26px;
  background: var(--parchment);
  box-shadow: 0 18px 34px -12px var(--paper-shadow);
  transform: rotate(-7deg);
}

.polaroid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  filter: contrast(1.05) saturate(1.05);
}

.invite__text {
  position: relative;
  text-align: center;
}

.envelope-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.envelope {
  position: relative;
  display: block;
  width: min(100%, 460px);
  aspect-ratio: 4 / 3.6;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
  perspective: 1400px;
  overflow: hidden;
}

/* bottom layer: the backing card with the invitation text, static */
.envelope__backing {
  position: absolute;
  inset: 3%;
  z-index: 1;
  background: var(--parchment-deep);
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(43, 42, 36, 0.18);
  overflow: hidden;
}

.envelope__backing::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.6;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.envelope__base {
  position: absolute;
  inset: 7%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--parchment);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 28px rgba(43, 42, 36, 0.22);
  padding: clamp(1.1rem, 3.6vw, 1.7rem);
  text-align: center;
}

.envelope__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.3rem, 2.8vw, 1.75rem);
  color: var(--rust);
}

.envelope__body-text {
  font-family: var(--font-display);
  font-size: clamp(0.92rem, 1.8vw, 1.08rem);
  line-height: 1.55;
  color: var(--moss-deep);
  max-width: 32ch;
}

.envelope__flourish {
  width: clamp(80px, 13vw, 120px);
  height: auto;
  color: var(--moss);
  opacity: 0.8;
  align-self: center;
  margin-top: 0.1rem;
}

/* top layer: four triangular flaps forming the closed envelope face,
   each hinged on its own outer edge and folding away on open */
.envelope__flap {
  position: absolute;
  inset: 3%;
  z-index: 3;
  backface-visibility: hidden;
  filter: drop-shadow(0 8px 10px rgba(43, 42, 36, 0.28));
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1),
    filter 0.4s ease;
}

.envelope__flap--top {
  clip-path: polygon(0 0, 100% 0, 50% 50%);
  background: linear-gradient(180deg, #ddcfa8, var(--parchment-deep));
  transform-origin: 50% 0%;
  transition-delay: 0s;
}

.envelope__flap--right {
  clip-path: polygon(100% 0, 100% 100%, 50% 50%);
  background: linear-gradient(270deg, #d9caa0, var(--parchment-deep));
  transform-origin: 100% 50%;
  transition-delay: 0.05s;
}

.envelope__flap--bottom {
  clip-path: polygon(100% 100%, 0 100%, 50% 50%);
  background: linear-gradient(0deg, #ddcfa8, var(--parchment-deep));
  transform-origin: 50% 100%;
  transition-delay: 0.1s;
}

.envelope__flap--left {
  clip-path: polygon(0 100%, 0 0, 50% 50%);
  background: linear-gradient(90deg, #d9caa0, var(--parchment-deep));
  transform-origin: 0% 50%;
  transition-delay: 0.15s;
}

.envelope__seal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38px;
  height: 38px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--rust);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--parchment);
  box-shadow: 0 3px 7px rgba(43, 42, 36, 0.35);
  z-index: 4;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.envelope__hint {
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--moss);
  opacity: 0.7;
  transition: opacity 0.4s ease;
}

.envelope:hover .envelope__flap,
.envelope:focus-visible .envelope__flap {
  filter: drop-shadow(0 11px 14px rgba(43, 42, 36, 0.34));
}

.envelope:focus-visible {
  outline: 2px solid var(--rust-soft);
  outline-offset: 6px;
  border-radius: 10px;
}

.envelope.is-open .envelope__flap--top {
  transform: rotateX(-160deg);
}

.envelope.is-open .envelope__flap--right {
  transform: rotateY(160deg);
}

.envelope.is-open .envelope__flap--bottom {
  transform: rotateX(160deg);
}

.envelope.is-open .envelope__flap--left {
  transform: rotateY(-160deg);
}

.envelope.is-open .envelope__seal {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.3);
}

.envelope-wrap.is-open .envelope__hint {
  opacity: 0;
}

.confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

/* ============================================================
   VENUE / MAP
   ============================================================ */
.venue {
  position: relative;
  background: var(--moss-deep);
  color: var(--parchment);
  padding: clamp(4.5rem, 10vh, 7rem) 6vw clamp(3.5rem, 8vh, 5rem);
  text-align: center;
  overflow: hidden;
}

.venue__inner {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.venue__decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.venue__decor .flourish {
  position: absolute;
  color: var(--parchment-deep);
}

.venue__corner {
  width: clamp(110px, 16vw, 200px);
  height: auto;
  opacity: 0.8;
}

.venue__corner--tl {
  top: -2%;
  left: -2%;
}

.venue__corner--br {
  bottom: -2%;
  right: -2%;
  transform: scale(-1, -1);
}

.venue__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 3rem);
  color: #e2823f;
  margin-bottom: 0.7rem;
}

.venue__address {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 2.6rem;
}

.map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 28px 28px 10px 10px;
  overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(244, 238, 224, 0.18);
}

.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: sepia(0.15) saturate(0.9);
}

.venue__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2.2rem;
  padding: 0.95rem 2.1rem;
  border: 1px solid var(--rust-soft);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--parchment);
  transition: background 0.3s ease, color 0.3s ease;
}

.venue__cta:hover {
  background: var(--rust-soft);
  color: var(--moss-deep);
}

.venue__footer {
  margin-top: clamp(3.5rem, 8vh, 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  opacity: 0.75;
}

.venue__footer .flourish {
  width: 90px;
  height: auto;
  color: var(--rust-soft);
}

.venue__footer p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.02em;
}

/* ============================================================
   Reveal-on-scroll
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.19, 1, 0.22, 1),
    transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px) {
  .invite__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .invite__media {
    margin: 0 auto 1rem;
  }

  .polaroid {
    left: -8%;
    bottom: -10%;
  }
}

@media (max-width: 520px) {
  .invite__media .arch-frame {
    border-radius: 50% 50% 8% 8% / 26% 26% 5% 5%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero__photo {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .envelope__flap,
  .envelope__letter,
  .envelope__hint {
    transition: none;
  }
}