/* ============================================================
   Baytix Toy Invite — вёрстка v2 «арка». Mobile-first от 360px.
   Сигнатура: арочное окно. Появляется дважды — на первом экране
   и на блоке подтверждения. Между ними — тишина и золотая линия.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* Атрибут hidden обязан скрывать. Браузерное display:none легко перебивается
   любым авторским правилом вроде .form{display:grid} или .btn{display:flex},
   и элемент остаётся на экране. Это правило закрывает вопрос раз и навсегда. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--espresso);
  color: var(--espresso);
  font-family: var(--body);
  font-size: 1.02rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }

.sheet {
  max-width: 460px;
  margin: 0 auto;
  position: relative;
  background: var(--cream);
  overflow: hidden;
  /* тканевая подложка: шёлк, а не плоская заливка */
  background-image:
    radial-gradient(120% 60% at 15% 0%, rgba(235,214,156,.28), transparent 60%),
    radial-gradient(90% 50% at 92% 22%, rgba(232,217,190,.34), transparent 62%),
    radial-gradient(100% 44% at 50% 100%, rgba(199,155,62,.12), transparent 70%);
}

/* ---------- Языки ------------------------------------------- */
.lang {
  position: absolute;
  top: 14px; right: var(--gutter);
  z-index: 30;
  display: flex;
  gap: 4px;
}
.lang button {
  appearance: none;
  min-width: 40px;
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid rgba(168,121,31,.42);
  border-radius: 999px;
  background: rgba(251,246,236,.72);
  backdrop-filter: blur(6px);
  color: var(--espresso-2);
  font-family: var(--body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .1em;
  cursor: pointer;
}
.lang button[aria-pressed="true"] {
  background: var(--gold-grad);
  border-color: var(--gold-dark);
  color: #FFF9EC;
}

/* ---------- Общие ------------------------------------------- */
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; }

.label {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--gold-dark);
}

section { padding: var(--section) var(--gutter); position: relative; }

.section-head { text-align: center; margin-bottom: 30px; }
.section-head h2 { font-size: var(--fs-h2); margin-top: 9px; line-height: 1.24; }

/* Золотая линия-разделитель */
.rule { height: 1px; width: 100%; max-width: 220px; margin: 0 auto; background: var(--gold-line); }

.orn { display: block; margin: 0 auto; color: var(--gold-dark); }

/* ---------- HERO -------------------------------------------- */
.hero {
  position: relative;
  min-height: 100dvh;                /* dvh: иначе прыгает в iOS Safari */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 62px var(--gutter) 42px;
  overflow: hidden;
}

/* Фон: фото пары либо шёлк с золотым отблеском (режим ornament) */
.hero-bg {
  position: absolute;
  inset: 0;
  background-color: var(--cream-deep);
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.hero-bg::before {                   /* затемнение под своё фото, если текст плохо читается */
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(46,36,26,var(--bg-dim, 0));
  z-index: 1;
}
.hero-bg::after {                    /* мягкая вуаль, чтобы текст читался поверх фото */
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(74% 50% at 50% 44%, rgba(251,246,236,.34), rgba(251,246,236,.06) 58%, rgba(120,92,48,.16) 100%);
}
.hero-bg--rings {
  /* --bg-rings-url задаётся из JS: путь зависит от того, в корне сайт или в подпапке */
  background-image:
    var(--bg-rings-url),
    radial-gradient(44% 26% at 18% 12%, rgba(255,253,247,.9), transparent 62%),
    radial-gradient(60% 34% at 74% 82%, rgba(186,140,52,.5), transparent 68%),
    linear-gradient(162deg, #FDF9F0 0%, #F1E1C0 32%, #E3CA9C 60%, #D2B17C 100%);
  background-size: cover, auto, auto, auto;
  background-repeat: no-repeat;
}
.hero-bg--silk {
  background-image:
    radial-gradient(46% 26% at 20% 10%, rgba(255,253,247,.98), transparent 62%),
    radial-gradient(44% 26% at 86% 20%, rgba(240,214,150,.9), transparent 64%),
    radial-gradient(56% 32% at 72% 84%, rgba(186,140,52,.55), transparent 66%),
    radial-gradient(38% 24% at 8% 70%, rgba(255,251,240,.9), transparent 60%),
    radial-gradient(70% 44% at 50% 50%, rgba(214,178,108,.3), transparent 72%),
    linear-gradient(162deg, #FDF9F0 0%, #F0DFBC 30%, #E2C99A 58%, #D3B37F 82%, #C9A76F 100%);
}
.grain {                             /* зерно: убирает пластиковость градиентов */
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .58;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* --- Арка: сигнатурный элемент --- */
.arch {
  position: relative;
  z-index: 2;
  width: var(--arch-w);
  border-radius: var(--arch-r) var(--arch-r) var(--radius) var(--radius);
  padding: 38px 24px 28px;
  text-align: center;
  background: rgba(252,247,238,.78);
  backdrop-filter: blur(9px) saturate(1.12);
  -webkit-backdrop-filter: blur(9px) saturate(1.12);
  box-shadow: 0 22px 54px -22px rgba(46,36,26,.45);
}
.arch::before {                      /* золотой кант */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--gold-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.arch::after {                       /* внутренняя волосяная линия */
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(168,121,31,.3);
  border-radius: calc(var(--arch-r) - 9px) calc(var(--arch-r) - 9px) 2px 2px;
  pointer-events: none;
}

.hero-eyebrow { font-size: var(--fs-label); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-dark); margin: 13px 0 11px; }

.names { font-family: var(--display); font-size: var(--fs-names); line-height: 1.06; color: var(--espresso); }
.names span { display: block; }
.amp {
  font-family: var(--accent);
  font-style: italic;
  font-size: .62em;
  line-height: 1;
  margin: 2px 0;
  background: var(--gold-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Дата: сетка «день | число | время», как в печатном приглашении */
.datebox {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid rgba(168,121,31,.28);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--espresso-2);
}
.datebox .big {
  font-family: var(--display);
  font-size: 2.15rem;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  color: var(--espresso);
}
.datebox .my { display: block; font-size: .68rem; margin-top: 5px; letter-spacing: .16em; color: var(--muted); }
.datebox .side { position: relative; }
.datebox .side:first-child::after,
.datebox .side:last-child::before {
  content: '';
  position: absolute;
  top: 50%;
  width: 1px; height: 30px;
  margin-top: -15px;
  background: rgba(168,121,31,.32);
}
.datebox .side:first-child::after { right: -7px; }
.datebox .side:last-child::before { left: -7px; }

/* Фон-фотография: стекло плотнее, тень глубже.
   На однотонном шёлке прозрачность красива, на букетах — мешает читать. */
.hero.has-photo .arch {
  background: rgba(253,249,242,.93);
  box-shadow: 0 26px 60px -22px rgba(46,36,26,.6);
}
.hero.has-photo .cd-cell {
  background: rgba(253,249,242,.86);
  border-color: rgba(168,121,31,.45);
}
.hero.has-photo .countdown-cap,
.hero.has-photo .scroll-cue { color: #8A6318; }

/* ---------- Счётчик ----------------------------------------- */
.countdown-wrap { position: relative; z-index: 2; margin-top: 20px; text-align: center; }
.countdown-cap { font-size: var(--fs-label); letter-spacing: var(--tracking); text-transform: uppercase; color: var(--gold-dark); margin-bottom: 12px; }
.countdown { display: flex; justify-content: center; gap: 8px; }
.cd-cell {
  min-width: 58px;
  padding: 8px 5px;
  border: 1px solid rgba(168,121,31,.34);
  border-radius: var(--radius);
  background: rgba(252,247,238,.6);
  backdrop-filter: blur(5px);
}
.cd-num { font-family: var(--display); font-size: 1.42rem; line-height: 1; color: var(--espresso); font-variant-numeric: tabular-nums; }
.cd-cap { font-size: .63rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }

/* ---------- Приглашение -------------------------------------- */
.invite { text-align: center; }
/* Имена хозяев работают заголовком блока — так строка читается как фраза,
   а не как три отдельные надписи подряд */
.invite-head--hosts {
  font-family: var(--accent);
  font-style: italic;
  font-size: clamp(1.6rem, 7vw, 2.1rem);
  line-height: 1.2;
}
.invite-text { font-size: var(--fs-lead); line-height: 1.74; color: var(--espresso-2); max-width: 32ch; margin: 0 auto; }
.invite-text p { margin: 0 0 .9em; }

/* ---------- Программа ---------------------------------------- */
.program { background: var(--cream-deep); }
.timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 320px; }
.timeline li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(168,121,31,.2);
}
.timeline li:last-child { border-bottom: 0; }
.tl-time { font-family: var(--display); font-size: 1.06rem; color: var(--gold-dark); font-variant-numeric: tabular-nums; }
.tl-title { font-size: 1.02rem; color: var(--espresso-2); }

/* ---------- Место -------------------------------------------- */
.venue { text-align: center; }
.venue-name { font-family: var(--display); font-size: 1.42rem; margin: 12px 0 6px; }
.venue-addr { color: var(--muted); font-size: .98rem; line-height: 1.62; max-width: 29ch; margin: 0 auto 22px; }
.map-btns { display: grid; gap: 10px; max-width: 296px; margin: 0 auto; }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;                  /* палец, а не курсор */
  padding: 0 18px;
  border: 1px solid var(--gold-dark);
  border-radius: 999px;
  background: transparent;
  color: var(--espresso);
  font-family: var(--body);
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { background: rgba(199,155,62,.14); }
.btn--gold { background: var(--gold-grad); border-color: var(--gold-dark); color: #FFFAF0; }
.btn--gold:hover { filter: brightness(1.06); }

/* ---------- RSVP --------------------------------------------- */
.rsvp {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 42%, var(--champagne) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rsvp .arch {
  --arch-r: 118px;
  width: min(384px, 90vw);
  padding: 30px 22px 26px;
  background: rgba(253,249,241,.9);
}
.rsvp-hint { font-size: .93rem; line-height: 1.62; color: var(--muted); max-width: 30ch; margin: 12px auto 0; }

.form { display: grid; gap: 13px; margin-top: 22px; text-align: left; }
.field label {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.field input, .field textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  background: rgba(255,253,248,.9);
  border: 1px solid rgba(168,121,31,.34);
  border-radius: var(--radius);
  color: var(--espresso);
  font-family: var(--body);
  font-size: 16px;                   /* <16px → iOS зумит форму при фокусе */
}
.field textarea { min-height: 74px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--gold-mid); outline-offset: 1px; }

.choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52px;
  padding: 7px 3px;
  border: 1px solid rgba(168,121,31,.34);
  border-radius: var(--radius);
  background: rgba(255,253,248,.7);
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--espresso-2);
  cursor: pointer;
  margin: 0;
}
.choice input:checked + label { background: var(--gold-grad); border-color: var(--gold-dark); color: #FFFAF0; }
.choice input:focus-visible + label { outline: 2px solid var(--espresso); outline-offset: 2px; }

.form-msg { font-size: .86rem; text-align: center; min-height: 1.1em; margin: 0; }
.form-msg[data-state="error"] { color: #9A3B2B; }

.rsvp-done { text-align: center; max-width: 30ch; margin: 0 auto; padding: 8px 0 4px; }
.rsvp-done .tick { font-family: var(--display); font-size: 2rem; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Контакты, подвал --------------------------------- */
.contacts { background: var(--champagne); text-align: center; }
.contact-list { display: grid; gap: 9px; max-width: 296px; margin: 0 auto; }

.footer {
  background: var(--espresso);
  color: rgba(251,246,236,.56);
  text-align: center;
  font-size: .82rem;
  line-height: 1.7;
  padding: 30px var(--gutter) 116px;  /* запас под sticky-кнопку */
}
.footer a { color: var(--gold-light); text-decoration: none; border-bottom: 1px solid rgba(235,214,156,.35); }

/* ---------- Sticky CTA --------------------------------------- */
.cta-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(46,36,26,.9) 55%, rgba(46,36,26,0));
  transform: translateY(130%);
  transition: transform .32s ease;
}
.cta-bar.is-visible { transform: translateY(0); }
.cta-bar .btn { width: 100%; max-width: 416px; }

/* ---------- Появление первого экрана -------------------------
   Ступенчато: фон, потом арка, потом её содержимое сверху вниз.
   Скорость задаётся одной переменной --rise ниже.
   Двигаем только opacity и transform — эти два свойства браузер
   считает на видеокарте и не пересчитывает вёрстку. На дешёвом
   Android остальное подтормаживает. */
:root { --rise: 1.4s; --ease-rise: cubic-bezier(.16,.72,.24,1); }

.hero-bg { animation: fade-in 1.1s ease both; }

.hero .arch {
  animation: rise-arch var(--rise) .15s var(--ease-rise) both;
}
/* Каждому элементу — полное правило целиком. Сокращённая запись
   в общем селекторе с переопределением задержки ниже вела себя
   непредсказуемо: часть элементов стартовала не в свой момент. */
.hero .arch > .orn          { animation: rise-soft 1s  .60s var(--ease-rise) both; }
.hero .arch > .hero-eyebrow { animation: rise-soft 1s  .75s var(--ease-rise) both; }
.hero .arch > .names        { animation: rise-soft 1s  .90s var(--ease-rise) both; }
.hero .arch > .datebox      { animation: rise-soft 1s 1.10s var(--ease-rise) both; }
.hero .countdown-wrap       { animation: rise-soft 1s 1.30s var(--ease-rise) both; }

@keyframes fade-in  { from { opacity: 0 } to { opacity: 1 } }
@keyframes rise-arch{ from { opacity: 0; transform: translateY(30px) scale(.965) } to { opacity: 1; transform: none } }
@keyframes rise-soft{ from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }

/* ---------- Появление остальных секций ----------------------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .hero-bg, .hero .arch, .hero .arch > *, .hero .countdown-wrap {
    opacity: 1; transform: none; transition: none; animation: none;
  }
  .cta-bar { transition: none; }
}

/* ---------- Кошумча ------------------------------------------
   Главная традиция тоя — конверт с деньгами. Гость из другого
   города или из-за границы не может его вручить лично. Этот блок
   закрывает ровно этот случай, поэтому стоит после подтверждения:
   сначала «приду / не приду», и только потом про перевод. */
.gift { background: var(--cream-deep); text-align: center; }
.gift-note { font-size: .93rem; color: var(--muted); max-width: 30ch; margin: 12px auto 0; line-height: 1.62; }

.gift-card {
  max-width: 340px;
  margin: 0 auto;
  padding: 24px 22px;
  background: rgba(253,249,241,.92);
  border: 1px solid rgba(168,121,31,.34);
  border-radius: var(--radius);
}
.gift-qr {
  width: min(200px, 62%);
  aspect-ratio: 1;
  object-fit: contain;
  margin: 0 auto 18px;
  padding: 10px;
  background: #fff;
  border: 1px solid rgba(168,121,31,.24);
  border-radius: var(--radius);
}
.gift-owner { font-family: var(--display); font-size: 1.12rem; margin: 0 0 14px; }
.gift-copy { width: 100%; font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.gift-copied { font-size: .84rem; color: var(--gold-dark); margin: 10px 0 0; font-weight: 600; }

.gift-banks { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-top: 14px; }
.gift-banks a {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid rgba(168,121,31,.3);
  border-radius: var(--radius);
  background: rgba(255,253,248,.8);
  color: var(--espresso-2);
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none;
}
.gift-banks a:hover { border-color: var(--gold-dark); }

/* ---------- Поделиться и календарь --------------------------- */
.tools { background: var(--cream-deep); padding-top: 0; }
.tool-btns { display: grid; gap: 10px; max-width: 340px; margin: 0 auto; }
@media (min-width: 420px) { .tool-btns { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   КОНВЕРТ. Первое, что видит гость.
   Строится как настоящий: корпус, боковые сгибы, нижний клапан,
   верхний клапан и сургуч. Плоские фигуры сразу выдают подделку,
   поэтому каждая грань имеет свою подсветку и тень.
   ============================================================ */

.intro {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  cursor: pointer;
  overflow: hidden;
  /* тот же шёлк, что на первом экране: конверт лежит на той же ткани */
  background-image:
    radial-gradient(46% 26% at 20% 10%, rgba(255,253,247,.98), transparent 62%),
    radial-gradient(44% 26% at 86% 20%, rgba(240,214,150,.85), transparent 64%),
    radial-gradient(56% 32% at 72% 84%, rgba(186,140,52,.45), transparent 66%),
    linear-gradient(162deg, #FDF9F0 0%, #F1E1C0 34%, #E4CDA2 64%, #D5B685 100%);
  transition: opacity .8s ease, visibility .8s;
}
.intro.is-open { opacity: 0; visibility: hidden; pointer-events: none; }

.envelope {
  position: relative;
  width: min(330px, 84vw);
  aspect-ratio: 1.46;
  perspective: 1100px;
}
/* мягкая тень на ткани под конвертом */
.envelope::after {
  content: '';
  position: absolute;
  left: 6%; right: 6%;
  bottom: -22px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(50% 50%, rgba(92,66,22,.34), transparent 72%);
  filter: blur(7px);
}

/* Карточка, выезжающая изнутри. Форма арки — как на самом сайте. */
.env-card {
  position: absolute;
  left: 9%; right: 9%;
  top: 33%;                 /* ниже верхней кромки корпуса — в закрытом виде не видна */
  height: 67%;              /* низ вровень с конвертом, иначе торчит из-под него */
  border-radius: 90px 90px 4px 4px;
  background: linear-gradient(180deg, #FFFDF8 0%, #FCF6EA 100%);
  box-shadow: inset 0 0 0 1px rgba(168,121,31,.34), 0 2px 6px rgba(92,66,22,.14);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 18px;
  transform: translateY(0);
  transition: transform .95s cubic-bezier(.28,.84,.3,1);
  z-index: 1;
}
.is-open .env-card { transform: translateY(-78%); }
.env-card span {
  font-family: var(--accent);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--gold-dark);
  opacity: 0;
  transition: opacity .5s .5s ease;
}
.is-open .env-card span { opacity: 1; }

/* Корпус: нижняя часть конверта */
.env-body {
  position: absolute;
  inset: 30% 0 0 0;
  border-radius: 2px 2px 4px 4px;
  background: linear-gradient(168deg, #FBF4E4 0%, #F4E9D0 52%, #EADBB9 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 0 0 1px rgba(168,121,31,.18),
    0 14px 30px -14px rgba(92,66,22,.5);
  z-index: 3;
  overflow: hidden;
}
/* боковые сгибы: не белые треугольники, а едва заметные грани */
.env-body::before, .env-body::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 54%;
}
.env-body::before {
  left: 0;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  background: linear-gradient(112deg, rgba(255,252,244,.62), rgba(214,190,146,.24) 78%);
}
.env-body::after {
  right: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background: linear-gradient(248deg, rgba(255,252,244,.55), rgba(214,190,146,.28) 78%);
}
/* тонкая золотая кромка по низу */
.env-edge {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold-line);
  opacity: .5;
  z-index: 4;
}

/* Верхний клапан */
.env-flap {
  position: absolute;
  left: 0; right: 0;
  top: 30%;                 /* ровно верхняя кромка корпуса */
  height: 42%;
  transform-origin: top center;
  transform: rotateX(0deg);
  transition: transform .9s cubic-bezier(.52,0,.28,1);
  z-index: 4;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(178deg, #FDF8EC 0%, #F6ECD8 58%, #EEDFC0 100%);
  filter: drop-shadow(0 3px 3px rgba(92,66,22,.18));
}
.is-open .env-flap { transform: rotateX(-176deg); z-index: 2; }
/* изнанка клапана темнее — так бумага и выглядит */
.env-flap::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: inherit;
  background: linear-gradient(178deg, rgba(196,166,112,.34), rgba(230,208,166,.1));
  opacity: 0;
  transition: opacity .45s .4s ease;
}
.is-open .env-flap::after { opacity: 1; }

/* Сургучная печать */
.env-seal {
  position: absolute;
  left: 50%;
  top: 68%;                 /* у острия клапана, как на настоящем письме */
  width: 72px; height: 72px;
  margin: -36px 0 0 -36px;
  z-index: 5;
  display: grid;
  place-items: center;
  /* края у сургуча неровные — идеальный круг выглядит пуговицей */
  border-radius: 47% 53% 45% 55% / 52% 46% 54% 48%;
  /* сургуч матовый: сильный блик превращает его в стеклянную пуговицу */
  background:
    radial-gradient(52% 46% at 38% 32%, rgba(255,244,206,.24), transparent 70%),
    radial-gradient(74% 74% at 64% 78%, rgba(112,74,10,.42), transparent 64%),
    linear-gradient(142deg, #BE9130 0%, #D9BB72 34%, #B07F26 66%, #8A5E14 100%);
  box-shadow:
    inset 0 -3px 8px rgba(78,50,8,.5),
    inset 0 1px 3px rgba(255,244,208,.16),
    0 6px 13px -5px rgba(78,50,8,.55);
  transition: transform .55s ease, opacity .55s ease;
}
.env-seal::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: inherit;
  border: 1px solid rgba(255,248,222,.42);
}
.env-seal span {
  font-family: var(--accent);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1;
  color: #FFF6DE;
  text-shadow: 0 1px 2px rgba(70,46,10,.65), 0 -1px 0 rgba(255,250,226,.3);
}
.is-open .env-seal { transform: scale(.5) rotate(-16deg) translateY(-26px); opacity: 0; }

.intro-hint {
  position: relative;
  font-size: .7rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-dark);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: .5 } 50% { opacity: 1 } }

body.intro-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .env-card, .env-flap, .env-flap::after, .env-seal, .intro { transition: none; }
  .intro-hint { animation: none; }
}

/* ============================================================
   ЧТОБЫ ЛИСТАЛИ ДАЛЬШЕ И НЕ БОЯЛИСЬ НАЖИМАТЬ
   ============================================================ */

/* Первый экран чуть ниже высоты телефона: снизу видно край
   следующей секции. Это самый надёжный намёк, что дальше есть
   продолжение — сильнее любой стрелки. */
.hero { min-height: 92dvh; }

/* Стрелка вниз. Не иконка из набора, а две линии — так же
   уместно в свадебном приглашении, как и остальная графика. */
.scroll-cue {
  position: relative;
  z-index: 2;
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 0;
  background: transparent;
  color: var(--gold-dark);
  font-family: var(--body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  /* поверх фотографии золото по золоту не читается */
  text-shadow: 0 1px 3px rgba(255,252,244,.9), 0 0 10px rgba(255,252,244,.7);
  animation: cue-in 1s 1.7s var(--ease-rise) both;
}
.scroll-cue svg {
  width: 20px;
  animation: nudge 2.4s ease-in-out infinite;
  filter: drop-shadow(0 1px 2px rgba(255,252,244,.95));
}
@keyframes cue-in { from { opacity: 0 } to { opacity: .85 } }
@keyframes nudge {
  0%, 100% { transform: translateY(0);   opacity: .55 }
  50%      { transform: translateY(5px); opacity: 1 }
}

/* Тонкая полоса сверху: видно, сколько страницы пройдено.
   Гость понимает, что она конечна, и доходит до формы. */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  z-index: 60;
  background: var(--gold-grad);
  transition: width .12s linear;
  pointer-events: none;
}

/* ---------- Кнопки: понятнее и заметнее ---------- */
.btn {
  min-height: 54px;
  font-size: 1rem;
  letter-spacing: .01em;
}
/* Отклик на нажатие. Палец видит, что кнопка сработала —
   именно этого не хватает, когда человек боится нажимать. */
.btn:active { transform: scale(.975); }
.btn { transition: background .2s ease, color .2s ease, border-color .2s ease, transform .08s ease; }

/* Второстепенная кнопка не должна выглядеть отключённой */
.btn:not(.btn--gold) {
  border-width: 1.5px;
  background: rgba(255,253,248,.72);
}
.btn--gold { box-shadow: 0 8px 20px -10px rgba(120,86,20,.7); }

/* ---------- Выбор ответа: заметная реакция ---------- */
.choice label { transition: background .18s ease, border-color .18s ease, transform .12s ease; }
.choice input:checked + label { transform: scale(1.03); }

/* ---------- Сколько гостей уже подтвердило ---------- */
.social {
  margin: 16px auto 0;
  padding: 9px 16px;
  max-width: max-content;
  border: 1px solid rgba(168,121,31,.34);
  border-radius: 999px;
  background: rgba(255,253,248,.78);
  font-size: .88rem;
  font-weight: 600;
  color: var(--espresso-2);
}
.social b { color: var(--gold-dark); }

/* ---------- Заголовки секций заметнее ---------- */
.label { font-size: .74rem; letter-spacing: .24em; }
.section-head h2 { margin-top: 11px; }

@media (prefers-reduced-motion: reduce) {
  .scroll-cue, .scroll-cue svg { animation: none; opacity: .85; }
  .progress { transition: none; }
  .btn:active { transform: none; }
}