/* ===================================================================
   Стили сайта. Цвета/шрифты НЕ меняйте здесь — они задаются в config.js.
   Ниже только значения по умолчанию.
   =================================================================== */
:root {
  --color-background: #fff9e9;
  --color-background-soft: #fdf0d8;
  --color-page-outside: #efe6cf;
  --color-primary: #656b49;
  --color-primary-dark: #323627;
  --color-text: #323627;
  --color-text-soft: #6a7550;
  --color-accent: #c2a15f;
  --color-petals: #c9cfae;
  --color-rsvp-background: #656b49;
  --color-rsvp-text: #ffffff;
  --color-button-text: #ffffff;

  --font-script: 'Great Vibes', cursive;
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Cormorant Garamond', Georgia, serif;
  --font-ui: 'Philosopher', Arial, sans-serif;

  --font-scale: 1;
  --page-width: 480px;
  --border-radius: 14px;
  --anim-duration: 1000ms;
  --anim-distance: 40px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  touch-action: manipulation;   /* без задержки и зума по двойному тапу */
  color-scheme: light only;     /* не даём телефону «затемнять» сайт */
}
body {
  margin: 0;
  background: var(--color-page-outside);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: calc(20px * var(--font-scale));
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
a, button, label, [role="button"] { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.config-error {
  max-width: 480px; margin: 40px auto; padding: 20px; background: #fff; color: #a11;
  font: 16px/1.5 Arial, sans-serif; border: 1px solid #e3b4b4; border-radius: 10px;
}

.page {
  position: relative;
  max-width: var(--page-width);
  min-height: 100vh;
  margin: 0 auto;
  background: var(--color-background);
  overflow: hidden;
}
@media (min-width: 560px) {
  .page { box-shadow: 0 0 60px rgba(0, 0, 0, .08); }
}

/* ---------- анимации появления ---------- */
.anim {
  opacity: 0;
  transition: opacity var(--anim-duration) ease, transform var(--anim-duration) var(--ease);
  transition-delay: var(--delay, 0ms);
}
.anim[data-anim="up"]    { transform: translate3d(0, var(--anim-distance), 0); }
.anim[data-anim="left"]  { transform: translate3d(calc(-1 * var(--anim-distance)), 0, 0); }
.anim[data-anim="right"] { transform: translate3d(var(--anim-distance), 0, 0); }
.anim[data-anim="zoom"]  { transform: scale(.8); }
.anim.is-visible { opacity: 1; transform: none; }
.no-anim .anim { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---------- общие ---------- */
.section { position: relative; padding: 64px 24px; text-align: center; }
.section-title {
  margin: 0 0 28px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: calc(27px * var(--font-scale));
  letter-spacing: .06em;
  color: var(--color-primary);
}
.divider { width: 200px; height: auto; margin: 0 auto; color: var(--color-primary); }
.divider__heart { fill: var(--color-accent); }
.icon { width: 56px; height: 56px; color: var(--color-primary); }
.icon--big { width: 84px; height: 84px; margin: 0 auto; }

.btn {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 14px 30px;
  border: 0;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-button-text);
  font-family: var(--font-ui);
  font-size: calc(15px * var(--font-scale));
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .45);
}
.btn::after { /* блик */
  content: "";
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg);
  animation: shine 4s ease-in-out infinite;
}
.no-anim .btn::after { display: none; }
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .5); }
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .6; cursor: default; }
@keyframes shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }

/* ---------- музыка ---------- */
.music {
  position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); left: 14px; z-index: 50;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 110px;
}
.music--fixed {
  position: fixed;
  left: max(calc(14px + env(safe-area-inset-left, 0px)), calc(50% - var(--page-width) / 2 + 14px));
}
.music__btn {
  position: relative;
  display: grid; place-items: center;
  width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  background: var(--color-background);
  color: var(--color-primary);
  cursor: pointer;
  transition: transform .25s ease;
}
.music__btn svg { width: 26px; height: 26px; }
.music__waves { display: none; }
.music.is-playing .music__waves { display: inline; animation: waves 1.4s ease-in-out infinite; }
.music.is-playing .music__off { display: none; }
.music.is-playing .music__btn::before {
  content: ""; position: absolute; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--color-primary); animation: ripple 2s ease-out infinite; pointer-events: none;
}
.music__label {
  font-family: var(--font-ui);
  font-size: calc(12px * var(--font-scale));
  line-height: 1.2;
  text-align: center;
  color: var(--color-text-soft);
  transition: opacity .4s;
}
.music--scrolled .music__label { opacity: 0; pointer-events: none; }
@keyframes waves { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes ripple { from { transform: scale(1); opacity: .6; } to { transform: scale(1.7); opacity: 0; } }

/* ---------- первый экран ---------- */
.hero {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; min-height: 100svh;
  padding: 110px 16px 60px;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(120% 70% at 50% 0%, var(--color-background-soft), transparent 70%),
    radial-gradient(90% 60% at 50% 100%, var(--color-background-soft), transparent 70%),
    var(--color-background);
}
.hero__media {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; max-width: none;
}
.hero__veil { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.hero--media .hero__veil {
  background-color: rgba(255, 249, 233, .45);
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--color-background) 70%, transparent),
    color-mix(in srgb, var(--color-background) 25%, transparent) 45%, color-mix(in srgb, var(--color-background) 85%, transparent));
}
.hero__content { position: relative; z-index: 2; width: 100%; will-change: transform, opacity; }
.hero__pretitle {
  margin: 0 0 6px;
  font-family: var(--font-ui);
  font-size: calc(14px * var(--font-scale));
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--color-text-soft);
  opacity: 0;
}
.hero__scroll {
  position: absolute; top: 18px; right: 16px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-ui);
  font-size: calc(13px * var(--font-scale));
  color: var(--color-text-soft);
  text-decoration: none;
}
.hero__scroll-line {
  position: relative; width: 1px; height: 46px;
  background: var(--color-primary); overflow: hidden;
}
.hero__scroll-line::after {
  content: ""; position: absolute; left: -1px; top: -12px; width: 3px; height: 12px;
  border-radius: 2px; background: var(--color-primary);
  animation: scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot { 0% { top: -12px; } 100% { top: 46px; } }

.monogram {
  display: flex; align-items: center; justify-content: center;
  margin: 0; font-weight: 400;
}
.mono { position: relative; display: grid; place-items: center; }
.mono__letter {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: min(calc(150px * var(--font-scale)), 36vw, 26vh);
  line-height: 1;
  color: var(--color-primary);
  opacity: 0;
}
.mono__name {
  position: absolute; left: 50%; top: 52%;
  transform: translate(-50%, -50%);
  font-family: var(--font-script);
  font-size: min(calc(36px * var(--font-scale)), 9vw, 6.5vh);
  line-height: 1.2;
  white-space: nowrap;
  color: var(--color-primary-dark);
  text-shadow: 0 0 10px var(--color-background), 0 0 22px var(--color-background);
  clip-path: inset(-20% 100% -20% 0);
  padding: 0 .1em;
}
.mono__amp {
  margin: 0 6px;
  font-family: var(--font-script);
  font-size: min(calc(46px * var(--font-scale)), 11vw, 8vh);
  color: var(--color-accent);
  opacity: 0;
}
.rings {
  width: min(150px, 24vh); margin: 16px auto 0;
  opacity: 0;
}
.rings__a { animation: floatA 6s ease-in-out infinite; transform-origin: 78px 80px; }
.rings__b { animation: floatB 6s ease-in-out infinite; transform-origin: 122px 80px; }
.rings__stone { animation: floatB 6s ease-in-out infinite; }
.rings__spark path { animation: twinkle 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.rings__spark path + path { animation-delay: 1.3s; }
.hero__date {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 22px 0 0;
  font-family: var(--font-heading);
  font-size: calc(24px * var(--font-scale));
  letter-spacing: .12em;
  color: var(--color-primary-dark);
  opacity: 0;
}
.hero__date span { width: 42px; height: 1px; background: var(--color-primary); opacity: .5; }

/* лепестки */
.petals { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.petals i {
  position: absolute; top: -30px;
  border-radius: 80% 0 80% 0;
  background: var(--color-petals);
  animation-name: fall; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes fall {
  0%   { transform: translate3d(0, -5vh, 0) rotate(0); }
  50%  { transform: translate3d(var(--sway), 50vh, 0) rotate(calc(var(--spin) / 2)); }
  100% { transform: translate3d(0, 110vh, 0) rotate(var(--spin)); }
}

@keyframes fadeIn { to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes letterIn { from { opacity: 0; transform: scale(.85); filter: blur(6px); } to { opacity: .9; transform: none; filter: none; } }
@keyframes write { to { clip-path: inset(-20% -5% -20% 0); } }
@keyframes floatA { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
@keyframes floatB { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes twinkle { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.1); } }

/* запуск анимаций первого экрана (класс .is-live ставится сразу или после открытия конверта) */
.hero.is-live .hero__pretitle { animation: fadeUp 1.2s var(--ease) .2s forwards; }
.hero.is-live .mono__letter { animation: letterIn 1.6s var(--ease) .3s forwards; }
.hero.is-live .mono--r .mono__letter { animation-delay: .55s; }
.hero.is-live .mono__name { animation: write 1.8s ease-in-out 1.1s forwards; }
.hero.is-live .mono--r .mono__name { animation-delay: 1.9s; }
.hero.is-live .mono__amp { animation: fadeIn 1s ease 1.6s forwards; }
.hero.is-live .rings { animation: fadeUp 1.4s var(--ease) 2.4s forwards; }
.hero.is-live .hero__date { animation: fadeUp 1.4s var(--ease) 2.7s forwards; }

html.no-anim .hero .hero__pretitle, html.no-anim .hero .mono__letter, html.no-anim .hero .mono__amp,
html.no-anim .hero .rings, html.no-anim .hero .hero__date { animation: none !important; opacity: 1; }
html.no-anim .hero .mono__name { animation: none !important; clip-path: none; }
html.no-anim .rings * { animation: none !important; }

/* ---------- приглашение ---------- */
.invite__divider { margin-bottom: 26px; }
.invite__title {
  margin: 0 0 18px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: calc(30px * var(--font-scale));
  line-height: 1.2;
  color: var(--color-primary-dark);
}
.invite__text { margin: 0 auto; max-width: 380px; font-size: calc(22px * var(--font-scale)); }
.invite__heart { margin: 34px 0; }
.invite__heart .icon { color: var(--color-accent); }
.invite__photo {
  margin: 34px auto;
  max-width: 360px;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .45);
}
.invite__photo img { width: 100%; height: auto; }

/* ---------- календарь ---------- */
.cal { padding-top: 110px; }
.cal__head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0 6px 10px;
  border-bottom: 1px solid var(--color-primary);
  font-family: var(--font-heading);
  font-size: calc(30px * var(--font-scale));
  letter-spacing: .05em;
  color: var(--color-primary-dark);
}
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__wd {
  padding: 8px 0;
  border-bottom: 1px solid var(--color-primary);
  font-family: var(--font-heading);
  font-size: calc(19px * var(--font-scale));
  color: var(--color-text-soft);
}
.cal__days { padding-top: 10px; row-gap: 8px; }
.cal__day {
  position: relative; display: grid; place-items: center; height: 42px;
  font-family: var(--font-heading);
  font-size: calc(22px * var(--font-scale));
  color: var(--color-primary-dark);
}
.cal__day--event svg {
  position: absolute; width: min(48px, 12.5vw); height: min(44px, 11.5vw); max-width: none;
  fill: var(--color-primary);
  animation: beat 1.6s ease-in-out infinite;
}
.cal__day--event b { position: relative; color: var(--color-button-text); font-weight: 600; }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(1); } 45% { transform: scale(1.08); } }
.no-anim .cal__day--event svg { animation: none; }

/* ---------- таймер ---------- */
.cd__row { display: flex; justify-content: center; align-items: flex-start; gap: 4px; }
.cd__unit { display: flex; flex-direction: column; align-items: center; min-width: 66px; }
.cd__num {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: calc(46px * var(--font-scale));
  line-height: 1;
  color: var(--color-primary-dark);
  font-variant-numeric: tabular-nums;
}
.cd__label {
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: calc(13px * var(--font-scale));
  color: var(--color-text-soft);
}
.cd__sep {
  font-family: var(--font-heading);
  font-size: calc(38px * var(--font-scale));
  line-height: 1.1;
  color: var(--color-accent);
}
.cd__done {
  margin: 0;
  font-family: var(--font-script);
  font-size: calc(42px * var(--font-scale));
  color: var(--color-primary);
}

/* ---------- план дня ---------- */
.tl__wrap { position: relative; margin-top: 10px; }
.tl__line {
  position: absolute; left: 50%; top: 0;
  width: 60px; height: 100%;
  transform: translateX(-50%);
  overflow: visible;
}
.tl__line path {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 1.3;
  stroke-dasharray: 4 5;
  opacity: .7;
}
.tl__list {
  position: relative;
  display: grid; grid-auto-rows: 1fr;
  margin: 0; padding: 0; list-style: none;
}
.tl__row {
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  grid-template-areas: "text dot icon";
  align-items: center;
  min-height: 130px;
}
.tl__row--even { grid-template-areas: "icon dot text"; }
.tl__text { grid-area: text; display: flex; flex-direction: column; text-align: right; padding-right: 6px; }
.tl__row--even .tl__text { text-align: left; padding: 0 0 0 6px; }
.tl__dot {
  grid-area: dot; justify-self: center;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--color-background);
  border: 2px solid var(--color-primary);
  box-shadow: 0 0 0 5px var(--color-background);
}
.tl__icon { grid-area: icon; display: flex; justify-content: flex-start; padding-left: 14px; }
.tl__row--even .tl__icon { justify-content: flex-end; padding: 0 14px 0 0; }
.tl__icon .icon { width: 58px; height: 58px; color: var(--color-accent); }
.tl__time {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: calc(32px * var(--font-scale));
  line-height: 1.1;
  color: var(--color-primary);
}
.tl__title { font-size: calc(21px * var(--font-scale)); line-height: 1.2; color: var(--color-primary-dark); }
.tl__desc { margin-top: 4px; font-size: calc(16px * var(--font-scale)); color: var(--color-text-soft); }

/* ---------- место ---------- */
.venue { padding-top: 40px; }
.venue__icon { margin-bottom: 14px; }
.venue__name {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: calc(30px * var(--font-scale));
  line-height: 1.2;
  color: var(--color-primary-dark);
}
.venue__addr { margin: 0 0 26px; font-size: calc(21px * var(--font-scale)); color: var(--color-text-soft); }
.venue__btns { display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* ---------- финальная фраза ---------- */
.closing { padding-top: 30px; }
.closing__text {
  margin: 0 0 24px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: calc(26px * var(--font-scale));
  line-height: 1.3;
  letter-spacing: .04em;
  color: var(--color-primary);
}

/* ---------- анкета ---------- */
.rsvp {
  position: relative;
  padding: 70px 24px 80px;
  background: var(--color-rsvp-background);
  color: var(--color-rsvp-text);
  text-align: center;
}
.rsvp::before { /* мягкая волна сверху */
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 36px;
  background: var(--color-background);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.rsvp__inner { position: relative; max-width: 380px; margin: 0 auto; }
.rsvp__divider .divider { color: var(--color-rsvp-text); }
.rsvp__title {
  margin: 18px 0 14px;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: calc(52px * var(--font-scale));
  line-height: 1.1;
}
.rsvp__text { margin: 0 0 10px; font-size: calc(22px * var(--font-scale)); }
.rsvp__note { margin: 0 0 30px; font-size: calc(18px * var(--font-scale)); opacity: .85; }
.rsvp__form { text-align: left; }
.field { display: block; margin: 0 0 30px; padding: 0; border: 0; }
.field input[type="text"], .field textarea {
  width: 100%;
  padding: 10px 2px;
  border: 0;
  border-bottom: 1px solid var(--color-rsvp-text);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: var(--font-body);
  font-size: max(16px, calc(21px * var(--font-scale)));
  outline: none;
  resize: vertical;
  transition: border-color .25s;
  -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 52px; }
.field input::placeholder, .field textarea::placeholder { color: inherit; opacity: .7; }
.field input:focus, .field textarea:focus { border-bottom-color: var(--color-rsvp-text); border-bottom-width: 2px; }
.field--radio legend {
  padding: 0 0 12px;
  font-size: calc(22px * var(--font-scale));
  line-height: 1.3;
}
.radio {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 0;
  font-size: calc(21px * var(--font-scale));
  cursor: pointer;
}
.radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio i {
  flex: none; position: relative;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--color-rsvp-text);
}
.radio i::after {
  content: ""; position: absolute; top: 3px; right: 3px; bottom: 3px; left: 3px; border-radius: 50%;
  background: var(--color-rsvp-text);
  transform: scale(0); transition: transform .2s var(--ease);
}
.radio input:checked + i::after { transform: scale(1); }
.radio input:focus-visible + i { outline: 2px solid var(--color-rsvp-text); outline-offset: 3px; }
.rsvp__error {
  margin: -10px 0 20px; padding: 10px 14px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .18);
  font-family: var(--font-ui);
  font-size: calc(15px * var(--font-scale));
}
.btn--light {
  display: block; width: 100%;
  background: var(--color-rsvp-text);
  color: var(--color-rsvp-background);
}
.rsvp__success { padding: 20px 0; animation: fadeUp .8s var(--ease); }
.rsvp__success .icon { color: var(--color-rsvp-text); animation: beat 1.6s ease-in-out infinite; }
.rsvp__success h3 {
  margin: 16px 0 8px;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: calc(50px * var(--font-scale));
}
.rsvp__success p { margin: 0 0 20px; font-size: calc(22px * var(--font-scale)); }
.rsvp__again {
  padding: 12px 16px; margin-top: 4px; border: 0; background: none; color: inherit;
  font-family: var(--font-ui); font-size: calc(14px * var(--font-scale));
  text-decoration: underline; opacity: .8; cursor: pointer;
}

/* ---------- подвал ---------- */
.footer {
  padding: 28px 24px 36px;
  background: var(--color-rsvp-background);
  color: var(--color-rsvp-text);
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, .2);
  padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px));
}
.footer p { margin: 0; font-family: var(--font-script); font-size: calc(30px * var(--font-scale)); }

/* ---------- узкие экраны ---------- */
@media (max-width: 360px) {
  .cd__unit { min-width: 56px; }
  .cd__num { font-size: calc(38px * var(--font-scale)); }
  .tl__time { font-size: calc(27px * var(--font-scale)); }
}

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

/* ===================================================================
   КОНВЕРТ НА ВХОДЕ
   =================================================================== */
html.env-lock, html.env-lock body { overflow: hidden; }
.music { transition: opacity .6s ease; }
.env-lock .music { opacity: 0; pointer-events: none; }

.env {
  position: fixed; top: 0; bottom: 0; left: 50%; z-index: 1000;
  width: 100%; max-width: var(--page-width);
  transform: translateX(-50%);
  cursor: pointer;
  outline: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
}
.env__top, .env__bottom {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  will-change: transform;
  transition: transform 1.7s cubic-bezier(.65, 0, .35, 1) .45s;
}
.env__bottom {
  background-color: var(--color-envelope);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .1));
  clip-path: polygon(0 28%, 50% 50%, 100% 28%, 100% 100%, 0 100%);
}
.env__folds { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; max-width: none; }
.env__folds path { fill: none; stroke: rgba(0, 0, 0, .16); stroke-width: 1.2; }
.env__top { z-index: 2; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .32)); }
.env__top-shape {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background-color: var(--color-envelope);
  background-image: radial-gradient(130% 70% at 50% 0%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%);
  clip-path: polygon(0 0, 100% 0, 100% 34%, 50% 56%, 0 34%);
}
.env__bottom::after, .env__top-shape::after { /* фактура бумаги */
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .22;
  mix-blend-mode: multiply;
}
.env__label {
  position: absolute; left: 0; right: 0; top: 14%;
  margin: 0; padding: 0 24px;
  text-align: center;
  font-family: var(--font-script);
  font-size: calc(42px * var(--font-scale));
  line-height: 1.2;
  color: var(--color-seal);
}
.env__glow {
  position: absolute; left: 50%; top: 56%; z-index: 3;
  width: 240px; height: 240px; margin: -120px 0 0 -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 251, 238, .95), rgba(255, 251, 238, 0) 70%);
  opacity: 0; transform: scale(.2);
  pointer-events: none;
}

.seal {
  position: absolute; left: 50%; top: 56%; z-index: 4;
  width: 124px; height: 116px;
  margin: -76px 0 0 -62px;
  animation: sealPulse 2.6s ease-in-out infinite;
}
.seal::before { /* пульсирующее кольцо — подсказка «нажми» */
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 150px; height: 150px; margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 1px solid var(--color-seal);
  opacity: 0;
  animation: sealRing 2.6s ease-out infinite;
  pointer-events: none;
}
.env:focus-visible .seal::after {
  content: ""; position: absolute; top: -12px; right: -12px; bottom: -12px; left: -12px; border-radius: 50%;
  outline: 2px solid var(--color-seal); outline-offset: 2px;
}
.seal__half {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  transition: transform .9s cubic-bezier(.5, 0, .75, .3), opacity .8s ease .15s;
}
.seal__half svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .35)); }
.seal__half--l { clip-path: polygon(-20% -20%, 55% -20%, 50% 22%, 58% 45%, 49% 68%, 56% 120%, -20% 120%); } /* чуть заходит под правую — без шва */
.seal__half--r { clip-path: polygon(52% -20%, 120% -20%, 120% 120%, 53% 120%, 46% 68%, 55% 45%, 47% 22%); }
.seal__wax { fill: var(--color-seal); }
.seal__rim { fill: none; stroke: rgba(90, 70, 30, .3); stroke-width: 2.4; }
.seal__rim-light { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 2; }
.seal__text {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: .5px;
  fill: var(--color-seal-text);
}
.seal__text--light { fill: rgba(255, 255, 255, .75); }
.env__hint {
  position: absolute; left: 0; right: 0; top: calc(56% + 62px); z-index: 4;
  margin: 0;
  text-align: center;
  font-family: var(--font-ui);
  font-size: calc(14px * var(--font-scale));
  letter-spacing: .14em;
  color: var(--color-seal);
  animation: hintPulse 2.6s ease-in-out infinite;
  transition: opacity .4s ease;
}

/* открытие: печать раскалывается, конверт расходится вверх и вниз */
.env--open { cursor: default; pointer-events: none; }
.env--open .seal { animation: none; }
.env--open .seal::before { display: none; }
.env--open .seal__half--l { transform: translate(-48px, 120px) rotate(-38deg); opacity: 0; }
.env--open .seal__half--r { transform: translate(48px, 130px) rotate(34deg); opacity: 0; }
.env--open .env__hint { opacity: 0; animation: none; }
.env--open .env__top { transform: translate3d(0, -100%, 0); }
.env--open .env__bottom { transform: translate3d(0, 100%, 0); }
.env--open .env__glow { animation: envGlow 1.5s ease-out .3s forwards; }

@keyframes sealPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes sealRing { 0% { transform: scale(.7); opacity: .7; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes hintPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes envGlow { 0% { opacity: 0; transform: scale(.2); } 35% { opacity: .9; } 100% { opacity: 0; transform: scale(4); } }

html.no-anim .env * { animation: none !important; transition: none !important; }
html.no-anim .env--open { opacity: 0; transition: opacity .35s ease; }

/* ===================================================================
   ПТИЧКИ
   =================================================================== */
.bird {
  --b: var(--color-bird);
  position: absolute; z-index: 3;
  width: 62px;
  pointer-events: none;
}
.bird--alt { --b: var(--color-bird-alt); }
.bird__svg { width: 100%; height: auto; overflow: visible; }
.bird--flip .bird__svg { transform: scaleX(-1); }
.bird__body, .bird__head, .bird__tail { fill: var(--b); }
.bird__belly { fill: var(--color-bird-belly); opacity: .9; }
.bird__shine { fill: rgba(255, 255, 255, .35); }
.bird__beak { fill: var(--color-primary-dark); }
.bird__eye { fill: #1d1d1b; }
.bird__glint { fill: #fff; }
.bird__wing { fill: var(--b); transform-box: view-box; transform-origin: 58px 38px; }
.bird__wing--front { opacity: .75; animation: flap .13s ease-in-out infinite alternate; }
.bird__wing--back { opacity: .45; animation: flap .13s ease-in-out -.065s infinite alternate; }

.bird__fly {
  opacity: 0;
  transform: translate3d(var(--fx, -160px), var(--fy, 60px), 0) scale(.35) rotate(-10deg);
}
.hero.is-live .bird__fly, .bird.is-visible .bird__fly {
  opacity: 1;
  transform: none;
  transition: transform 2.6s cubic-bezier(.22, .61, .36, 1) var(--bd, 0s), opacity .8s ease var(--bd, 0s);
}
.bird__wander { animation: birdWander 16s ease-in-out var(--wd, 0s) infinite; }
.bird__bob { animation: birdBob 2.4s ease-in-out infinite; }

@keyframes flap { from { transform: rotate(-28deg); } to { transform: rotate(26deg) scaleY(.55); } }
@keyframes birdBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(-3deg); } }
@keyframes birdWander {
  0%, 100% { transform: translate(0, 0); }
  16% { transform: translate(-18px, -10px); }
  28% { transform: translate(-18px, -10px); }
  48% { transform: translate(14px, 6px); }
  62% { transform: translate(14px, 6px); }
  82% { transform: translate(4px, -14px); }
}
html.no-anim .bird__fly { opacity: 1; transform: none; }
html.no-anim .bird__wander, html.no-anim .bird__bob, html.no-anim .bird__wing { animation: none; }

/* ===================================================================
   КОНТУРНЫЕ ЦВЕТЫ (прорисовываются при прокрутке)
   =================================================================== */
.section > :not(.flower):not(.bird) { position: relative; z-index: 1; }
.flower {
  position: absolute; z-index: 0;
  height: auto;
  color: var(--color-line-art);
  pointer-events: none;
  overflow: visible;
  opacity: 0;
  transform: scale(.6) rotate(-8deg);
}
.flower.is-visible {
  opacity: .85;
  transform: none;
  transition: opacity 1.6s ease, transform 4s cubic-bezier(.2, .7, .2, 1);
}
.flower path { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.flower.is-visible path { stroke-dashoffset: 0; transition: stroke-dashoffset 3.8s ease-in-out .2s; }
html.no-anim .flower { opacity: .85; transform: none; }
html.no-anim .flower path { stroke-dashoffset: 0; }

/* ===================================================================
   АРКА С ТЕКСТОМ ПРИГЛАШЕНИЯ
   =================================================================== */
.invite--arch { padding-top: 84px; }
.invite__card {
  max-width: 360px;
  margin: 0 auto;
  padding: 92px 26px 40px;
  background-color: var(--color-card-background);
  color: var(--color-card-text);
  border-radius: 50% 50% 26px 26px / min(180px, calc(50vw - 24px)) min(180px, calc(50vw - 24px)) 26px 26px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5);
}
.invite__card::before {
  content: ""; position: absolute; top: 9px; right: 9px; bottom: 9px; left: 9px;
  border: 1px solid currentColor;
  border-radius: 50% 50% 19px 19px / min(171px, calc(50vw - 33px)) min(171px, calc(50vw - 33px)) 19px 19px;
  opacity: .35;
  pointer-events: none;
}
.invite__card .divider { width: 170px; color: var(--color-card-text); }
.invite__card .invite__title { color: var(--color-card-text); font-size: calc(29px * var(--font-scale)); }
.invite__card .invite__text { max-width: none; font-size: calc(21px * var(--font-scale)); }
.invite__sign {
  margin: 24px 0 0;
  font-family: var(--font-script);
  font-size: calc(40px * var(--font-scale));
  line-height: 1.2;
}
.invite__sign-wrap .invite__sign { clip-path: inset(-40% 100% -40% 0); }
.invite__sign-wrap.is-visible .invite__sign { clip-path: inset(-40% -6% -40% 0); transition: clip-path 2.6s ease-in-out .5s; }
html.no-anim .invite__sign-wrap .invite__sign { clip-path: none; }

/* ===================================================================
   МЕЛКИЕ ЭФФЕКТЫ
   =================================================================== */
/* линия плана дня «прорисовывается» при прокрутке (--p задаётся из JS) */
.tl__line { clip-path: inset(0 0 calc((1 - var(--p, 1)) * 100%) 0); }
/* цифры таймера мягко «перелистываются» */
.cd__num.tick { animation: tick .5s var(--ease); }
@keyframes tick { from { transform: translateY(-30%); opacity: .2; } to { transform: none; opacity: 1; } }

/* ===================================================================
   ТЕЛЕФОНЫ И ПЛАНШЕТЫ
   =================================================================== */
/* на узких экранах фон под страницей совпадает с её фоном (виден при «оттягивании») */
@media (max-width: 560px) {
  body { background: var(--color-background); }
}
/* пока конверт закрыт — страница не прокручивается и не «пружинит» */
html.env-lock { overscroll-behavior: none; }

/* птички первого экрана: позиция считается от высоты экрана, чтобы не задевать тексты */
.bird--h1 { top: max(12px, calc(50% - 205px)); left: 42%; }
.bird--h2 { top: 57%; right: 4%; }

/* кнопка музыки: при прокрутке чуть уменьшается, отзывается на нажатие */
.music--scrolled .music__btn { transform: scale(.86); }
@media (hover: hover) {
  .music__btn:hover { transform: scale(1.06); }
}
.music__btn:active, .music--scrolled .music__btn:active { transform: scale(.8); }

/* телефон горизонтально (низкий экран) */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding-top: 70px; padding-bottom: 36px; }
  .rings { margin-top: 8px; }
  .hero__date { margin-top: 12px; }
  .music__label { display: none; }
  .seal { width: 96px; height: 90px; margin: -59px 0 0 -48px; }
  .seal::before { width: 120px; height: 120px; margin: -60px 0 0 -60px; }
  .env__label { top: 6%; font-size: calc(32px * var(--font-scale)); }
  .env__hint { top: calc(56% + 44px); }
}

/* анимации в невидимых сейчас секциях ставятся на паузу (экономия батареи) */
.is-off, .is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }

/* современные браузеры: мягкие полупрозрачные оттенки цветов темы */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .music__btn {
    border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
    background: color-mix(in srgb, var(--color-background) 88%, transparent);
  }
  .hero__scroll-line { background: color-mix(in srgb, var(--color-primary) 30%, transparent); }
  .cal__head, .cal__wd { border-bottom-color: color-mix(in srgb, var(--color-primary) 60%, transparent); }
  .field input[type="text"]:not(:focus), .field textarea:not(:focus) {
    border-bottom-color: color-mix(in srgb, var(--color-rsvp-text) 70%, transparent);
  }
  .footer { border-top-color: color-mix(in srgb, var(--color-rsvp-text) 20%, transparent); }
}