/* =========================================================
   СВАДЕБНОЕ ПРИГЛАШЕНИЕ — мобильная вёрстка (375–430px)
   Шрифты: Oranienbaum (заголовки) + Manrope (текст)
   ========================================================= */

/* ---------- Палитра и токены (взяты из макета Figma) ---------- */
:root{
  --dark:      #1b1b1b;   /* основной тёмный текст */
  --ink:       #1a1a1a;   /* календарь / цифры */
  --olive:     #545f3d;   /* акцентный оливковый */
  --olive-soft:#a9b399;   /* нижний край градиента «сбор гостей» */
  --brown:     #322d11;   /* подтекст под заголовками */
  --line:      rgba(0,0,0,.12);  /* тонкие линии / рамки */
  --paper:     #fbfaf6;   /* фон страницы */

  --serif: 'Oranienbaum', 'Times New Roman', serif;
  --sans:  'Manrope', -apple-system, 'Segoe UI', sans-serif;

  --pad: 20px;            /* боковые отступы контента */
}

/* ---------- Базовый сброс ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; }

body{
  font-family: var(--sans);
  color: var(--dark);
  background: var(--paper);
  line-height: 1.5;
  overflow-x: hidden;                 /* нет горизонтального скролла */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Атрибут hidden должен побеждать display:flex/block у форм-блоков */
[hidden]{ display:none !important; }

/* Контейнер страницы: центрируем на широких телефонах */
.page{
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--paper);
  position: relative;
  overflow: hidden;
}

/* =========================================================
   Переиспользуемые декоративные элементы
   ========================================================= */

/* Надпись с линиями по бокам: — приглашение — */
.eyebrow{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-family: var(--sans);
  font-weight:300;
  font-size:14px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: var(--dark);
}
.eyebrow::before,.eyebrow::after{
  content:""; width:30px; height:1px; background: var(--dark); opacity:.55;
}

/* Крупный номер с линиями: — 01 — */
.numline{
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-family: var(--serif);
  font-size:40px;
  line-height:1;
  color: var(--dark);
}
.numline::before,.numline::after{
  content:""; width:30px; height:1px; background: var(--dark); opacity:.5;
}

/* =========================================================
   1. ГЕРОЙ
   ========================================================= */
.hero{
  position: relative;
  min-height: 640px;
  height: 100svh;                     /* на весь экран (Safari-safe) */
  max-height: 820px;
  padding: calc(env(safe-area-inset-top) + 46px) var(--pad)
           calc(env(safe-area-inset-bottom) + 60px);
  display:flex;
  flex-direction:column;
  color:#fff;
  text-align:center;
  overflow:hidden;
  background:#20241c;                  /* запасной фон, пока грузится фото */
}
/* Фото пары вынесено в ::before — это позволяет мягкий parallax (--py)
   и медленное «дыхание» (Ken Burns) без влияния на текст поверх. */
.hero::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  /* ЗАМЕНИТЕ: фото пары */
  background: url('assets/hero.jpg') no-repeat;
  background-size: cover;
  background-position: center calc(50% + var(--py, 0px));
  transform: scale(1.03);
  will-change: transform, background-position;
}
.hero__overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,.30);        /* затемнение поверх фото */
  z-index:0;
}
.hero > *:not(.hero__overlay){ position:relative; z-index:1; }

.hero__names{
  display:flex; align-items:center; justify-content:center; gap:15px;
  font-family: var(--serif);
  line-height:1.1;
}
.hero__name{ font-size:32px; }
.hero__amp{  font-size:48px; }

.hero__title{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--serif);
  font-weight:400;
  font-size:54px;
  line-height:1.1;
  letter-spacing:.01em;
  text-transform:uppercase;
}

.hero__date{
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-family: var(--serif);
  font-size:40px;
}
.hero__sep{ width:1px; height:28px; background: rgba(255,255,255,.7); }

/* =========================================================
   2. ПРИГЛАШЕНИЕ (тиснёная панель)
   ========================================================= */
/* Панель показывается целиком (через <img>), контент центрируется поверх неё —
   декоративная рамка больше не обрезается снизу. */
.invite{ position:relative; background:#fff; }
.invite__bg{ display:block; width:100%; height:auto; }
.invite__inner{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 0 42px;
}
.invite__title{
  font-family: var(--serif);
  font-weight:400;
  color: var(--dark);
  margin-top: 36px;
  line-height:1.05;
}
.invite__greet{ display:block; font-size:32px; }
.invite__guest{ display:block; font-size:32px; }
.invite__text{
  max-width: 284px;
  margin: 22px auto 0;
  font-family: var(--serif);
  font-size:18px;
  line-height:1.25;
  color: var(--brown);
}

/* =========================================================
   3. ДАТА + КАЛЕНДАРЬ
   ========================================================= */
.date{
  padding: 40px var(--pad) 0;
  background:#fff;
}
.date__stage{
  position:relative;
  height: 360px;
}
.date__flower{
  position:absolute;
  top:-6px; left:-110px;   /* сдвинут левее */
  width: 300px;
  transform: rotate(15.3deg);
  opacity:.95;
  z-index:0;
  pointer-events:none;
}
.date__day{
  position:absolute; top:-14px; left:-4px;
  z-index:1;
  font-family: var(--serif);
  font-size:160px;
  line-height:1;
  color: var(--olive);
  mix-blend-mode: multiply;
}
.date__month{
  position:absolute; top:150px; right:0;
  z-index:2;
  font-family: var(--serif);
  font-size:64px;
  line-height:1;
  text-transform:uppercase;
  color: var(--olive);
}
.date__year{
  position:absolute; top:200px; left:-6px;
  z-index:1;
  font-family: var(--serif);
  font-size:170px;
  line-height:1;
  color: var(--ink);
}

.calendar{ padding-top: 6px; }
.calendar__head{
  display:grid; grid-template-columns:repeat(7,1fr);
  gap:6px; margin-bottom:12px;
}
.calendar__head span{
  text-align:center;
  font-size:14px;
  text-transform:uppercase;
  color: var(--ink);
}
.calendar__row{
  display:grid; grid-template-columns:repeat(7,1fr);
  gap:5px;
}
.cal-cell{
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line);
  border-radius:50%;
  font-family: var(--serif);
  font-size:22px;
  color: var(--ink);
}
.cal-cell.is-empty{ border-color: var(--line); }
.cal-cell.is-active{
  background: var(--olive);
  border-color: var(--olive);
  color:#fff;
}

/* =========================================================
   4. СБОР ГОСТЕЙ + ВРЕМЯ
   ========================================================= */
.gather{
  /* без margin — иначе между белым календарём и блоком просвечивает фон
     страницы и появляется тонкая полоса. Переход бесшовный: белый → оливковый. */
  padding: 40px var(--pad) 74px;
  background: linear-gradient(180deg, #ffffff 0%, var(--olive-soft) 100%);
}
.gather__title{
  font-family: var(--serif);
  font-weight:400;
  font-size:64px;
  line-height:.9;
  text-transform:uppercase;
  color:#000;
}
.gather__time{
  margin-top: 34px;
  text-align:right;
  font-family: var(--serif);
  font-size:64px;
  line-height:.9;
  color:#000;
}

/* =========================================================
   5. МЕСТО ПРОВЕДЕНИЯ
   ========================================================= */
.venue{
  padding: 56px var(--pad) 40px;
  text-align:center;
  background:#fff;
}
.venue__body{ margin-top: 40px; }
.venue__name{
  font-family: var(--serif);
  font-weight:400;
  font-size:32px;
  line-height:1.1;
  color: var(--dark);
}
.venue__title{
  margin-top: 8px;
  font-family: var(--serif);
  font-size:48px;
  line-height:1;
  color: var(--olive);
}
.venue__addr{
  margin-top: 20px;
  font-family: var(--serif);
  font-size:18px;
  line-height:1.3;
  color: var(--brown);
}

/* =========================================================
   6. ГРАВЮРА ЗДАНИЯ
   ========================================================= */
.engraving{ background:#fff; }
.engraving img{ width:100%; height:auto; }

/* =========================================================
   6.1 КАРТА ПРОЕЗДА
   ========================================================= */
.map{
  padding: 20px var(--pad) 44px;
  text-align:center;
  background:#fff;
}
.map__frame{
  position:relative;               /* база для пульса маркера */
  margin-top: 26px;
  border:1px solid var(--line);
  overflow:hidden;                 /* острые углы */
  line-height:0;
}
/* Пульсирующий акцент над маркером (маркер в центре видимой области) */
.map__pulse{
  position:absolute; top:50%; left:50%;
  width:20px; height:20px;
  margin:0; border-radius:50%;
  border:2px solid var(--olive);
  transform: translate(-50%,-50%) scale(.4);
  pointer-events:none;
  opacity:0;
  z-index:2;
}
.map__frame iframe{
  display:block;
  width:100%;
  height:300px;
  border:0;
  filter: grayscale(0.25);         /* мягче вписывается в палитру */
}
.map__btn{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top: 18px;
  min-height:54px;
  padding: 0 32px;
  background: var(--olive);
  color:#fff;
  font-family: var(--serif);
  font-size:20px;
  text-decoration:none;
  transition: background .2s, transform .1s;
}
.map__btn:hover{ background:#4a5436; }
.map__btn:active{ transform: scale(.99); }

/* =========================================================
   7. ДРЕСС-КОД
   ========================================================= */
.dress{
  padding: 20px var(--pad) 40px;
  text-align:center;
  background:#fff;
}
.dress__text{
  margin-top: 40px;
  font-family: var(--serif);
  font-size:18px;
  line-height:1.35;
  color: var(--dark);
}
.dress__palette{
  margin-top: 28px;
  display:flex; flex-direction:column; gap:14px;
}
/* Соотношение сторон = viewBox SVG (335×63), чтобы круги палитры
   не растягивались в овалы (в файле preserveAspectRatio="none"). */
.dress__palette img{ width:100%; height:auto; aspect-ratio:335/63; }
.dress__guests{
  margin-top: 22px;
  width:100%; height:auto;
}

/* =========================================================
   8. ВАЖНАЯ ИНФОРМАЦИЯ
   ========================================================= */
.info{
  padding: 20px var(--pad) 56px;
  text-align:center;
  background:#fff;
}
.info__title{
  font-family: var(--serif);
  font-weight:400;
  font-size:32px;
  line-height:1.1;
  color: var(--dark);
}
.info__item{ margin-top: 52px; }
.info__item .numline{ margin-bottom: 20px; }
.info__item p{
  font-family: var(--sans);
  font-size:18px;
  line-height:1.25;
  color: var(--dark);
}

/* =========================================================
   8.1 ТАЙМЕР ОБРАТНОГО ОТСЧЁТА
   ========================================================= */
.countdown{
  padding: 8px var(--pad) 44px;
  text-align:center;
  background:#fff;
}
.countdown__grid{
  margin-top: 28px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.cd-cell{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding: 16px 4px;
  border:1px solid var(--line);   /* острые углы, в тон формы */
  background:#fff;
}
.cd-num{
  font-family: var(--serif);
  font-size:40px;
  line-height:1;
  color: var(--olive);
  font-variant-numeric: tabular-nums;
}
.cd-label{
  font-family: var(--sans);
  font-weight:300;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color: var(--brown);
}

/* =========================================================
   9. ФОРМА RSVP
   ========================================================= */
.rsvp{
  padding: 44px var(--pad) 56px;
  text-align:center;
  background: linear-gradient(180deg, #ffffff 0%, #f2f3ec 100%);
}
.rsvp__title{
  margin-top: 22px;
  font-family: var(--serif);
  font-weight:400;
  font-size:40px;
  line-height:1.05;
  color: var(--dark);
}
.rsvp__lead{
  margin-top: 8px;
  font-family: var(--serif);
  font-size:18px;
  color: var(--brown);
}

.form{
  margin-top: 30px;
  text-align:left;
  display:flex; flex-direction:column; gap:16px;
}

/* Подсказка «подтвердите присутствие каждого гостя» */
.rsvp__hint{
  margin-top: 10px;
  font-family: var(--sans);
  font-size:14px;
  color: var(--brown);
}

/* Список гостей: пары полей «имя + фамилия» */
.guest-list{ display:flex; flex-direction:column; gap:18px; }

.guest-row{ display:flex; flex-direction:column; gap:8px; }
.guest-row__caption{
  font-family: var(--sans);
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--brown);
}
.guest-row__optional{
  margin-left:8px;
  letter-spacing:.04em;
  text-transform:none;
  opacity:.6;
}
/* На узких экранах имя и фамилия встают друг под друга */
.guest-row__pair{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width: 520px){
  .guest-row__pair{ grid-template-columns:1fr; }
}
/* Мягкая подсветка общего выбора без ответа (без грубого красного) */
.segmented.has-error{ border-color:#c08a5a; box-shadow:0 0 0 3px rgba(192,138,90,.12); }

/* Сегментированные кнопки выбора [ Будем ] [ Не сможем ] */
.segmented{
  display:grid; grid-template-columns:1fr 1fr;
  border:1px solid var(--line);
  overflow:hidden;                          /* острые углы, общий контур */
}
.seg{ position:relative; display:block; cursor:pointer; margin:0; }
.seg + .seg{ border-left:1px solid var(--line); }
.seg input{ position:absolute; opacity:0; pointer-events:none; }
.seg span{
  display:flex; align-items:center; justify-content:center;
  min-height:50px; padding:0 10px;
  font-family: var(--serif);
  font-size:18px;
  color: var(--dark);
  background:#fff;
  transition: background .2s, color .2s;
}
.seg input:checked + span{ background: var(--olive); color:#fff; }
.seg input:focus-visible + span{ outline:2px solid var(--olive); outline-offset:-2px; }

/* Комментарий */
.field{ position:relative; }
.field__area{
  width:100%;
  min-height:88px;
  padding:14px 18px;
  border:1px solid var(--line);
  border-radius:0;
  background:#fff;
  font-family: var(--sans);
  font-size:16px;
  line-height:1.4;
  color: var(--dark);
  resize:vertical;
  transition: border-color .2s, box-shadow .2s;
}
.field__area::placeholder{ color:#a9a9a3; }
.field__area:focus{
  outline:none;
  border-color: var(--olive);
  box-shadow: 0 0 0 3px rgba(84,95,61,.12);
}

.field input{
  width:100%;
  min-height:54px;
  padding: 0 18px;
  border:1px solid var(--line);
  border-radius:0;   /* острые углы */
  background:#fff;
  font-family: var(--sans);
  font-size:16px;                     /* 16px — iOS не зумит при фокусе */
  color: var(--dark);
  transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder{ color:#a9a9a3; }
.field input:focus{
  outline:none;
  border-color: var(--olive);
  box-shadow: 0 0 0 3px rgba(84,95,61,.12);
}
.field.has-error input{
  border-color:#b4462f;
  box-shadow: 0 0 0 3px rgba(180,70,47,.10);
}
.field__error{
  display:none;
  margin: 6px 4px 0;
  font-family: var(--sans);
  font-size:13px;
  color:#b4462f;
}
.field.has-error .field__error{ display:block; }

/* Кнопка отправки */
.btn{
  position:relative;
  margin-top: 6px;
  min-height:56px;
  border:none;
  border-radius:0;   /* острые углы */
  background: var(--olive);
  color:#fff;
  font-family: var(--serif);
  font-size:20px;
  letter-spacing:.01em;
  cursor:pointer;
  overflow:hidden;
  transition: background .2s, transform .1s, opacity .2s;
}
.btn:hover{ background:#4a5436; }
.btn:active{ transform: scale(.99); }
.btn[disabled]{ opacity:.75; cursor:default; }

.btn__loader{
  position:absolute; top:50%; left:50%;
  width:22px; height:22px; margin:-11px 0 0 -11px;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  border-radius:50%;
  opacity:0;
}
.btn.is-loading .btn__label{ opacity:0; }
.btn.is-loading .btn__loader{
  opacity:1;
  animation: spin .7s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* Итоговое сообщение (ошибка отправки) */
.form__note{
  margin-top: 4px;
  padding: 12px 14px;
  border-radius:0;   /* острые углы */
  font-family: var(--sans);
  font-size:14px;
  text-align:center;
}
.form__note.is-error{ background:#f7e9e5; color:#a23b26; }

/* Экран благодарности */
.thankyou{
  margin-top: 24px;
  padding: 40px 24px;
  text-align:center;
  border:1px solid var(--line);
  border-radius:0;   /* острые углы */
  background:#fff;
  animation: fadeUp .6s ease both;
}
.thankyou__mark{
  width:64px; height:64px; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background: var(--olive);
  color:#fff;
  font-size:30px;
}
.thankyou__title{
  font-family: var(--serif);
  font-weight:400;
  font-size:36px;
  color: var(--dark);
}
.thankyou__text{
  margin-top: 10px;
  font-family: var(--serif);
  font-size:18px;
  line-height:1.35;
  color: var(--brown);
}

/* =========================================================
   Подвал
   ========================================================= */
.foot{
  padding: 30px var(--pad) calc(env(safe-area-inset-bottom) + 34px);
  text-align:center;
  background:#fff;
  border-top:1px solid var(--line);
}
.foot__names{
  display:block;
  font-family: var(--serif);
  font-size:26px;
  color: var(--dark);
}
.foot__date{
  display:block;
  margin-top: 6px;
  font-family: var(--sans);
  font-size:13px;
  letter-spacing:.14em;
  color: var(--brown);
}

/* =========================================================
   АНИМАЦИИ — премиальный слой
   Всё на transform/opacity (GPU-friendly). Стартовые «скрытые»
   состояния объявлены ТОЛЬКО внутри (prefers-reduced-motion: no-preference),
   поэтому при отключённой анимации контент виден сразу и сайт удобен.
   Классы .anim-child и .is-in проставляет script.js.
   ========================================================= */

/* База (в т.ч. для reduced-motion): всё видимо */
.reveal,[data-reveal],.anim-child{ opacity:1; }

/* Форма «с парой»: сворачивание включаем только при работающем JS
   (иначе, без скриптов, поля второго гостя просто видны). */
.js .form__group--partner{
  overflow:hidden;
  max-height:0; opacity:0; visibility:hidden;
}
.form__group--partner.is-open{
  max-height:360px; opacity:1; visibility:visible;
}

@media (prefers-reduced-motion: no-preference){

  /* --- 2. Появление блоков при скролле (стаггер детей) --- */
  .js .anim-child{
    opacity:0;
    transform: translateY(18px);
    transition: opacity .85s cubic-bezier(.22,.61,.36,1),
                transform .85s cubic-bezier(.22,.61,.36,1);
    transition-delay: var(--rd, 0ms);       /* задержка = порядковый номер */
    will-change: opacity, transform;
  }
  .js .is-in .anim-child{ opacity:1; transform:none; }

  /* Декоративные линии (— приглашение —, — 01 —) прочерчиваются */
  .js .eyebrow::before,.js .eyebrow::after,
  .js .numline::before,.js .numline::after{
    transform: scaleX(0);
    transition: transform .9s cubic-bezier(.22,.61,.36,1) .2s;
  }
  .js .eyebrow::before,.js .numline::before{ transform-origin:right; }
  .js .eyebrow::after, .js .numline::after { transform-origin:left; }
  .js .is-in .eyebrow::before,.js .is-in .eyebrow::after,
  .js .is-in .numline::before,.js .is-in .numline::after{ transform: scaleX(1); }

  /* --- 1. ГЕРОЙ: последовательное, мягкое проявление --- */
  .js .hero .reveal{
    opacity:0;
    transform: translateY(16px);
    transition: opacity 1.15s cubic-bezier(.22,.61,.36,1),
                transform 1.15s cubic-bezier(.22,.61,.36,1);
  }
  /* Заголовок «Wedding day» — проступает из лёгкого блюра, буквы сходятся */
  .js .hero__title{
    letter-spacing:.30em; filter: blur(7px);
    transition: opacity 1.3s ease, transform 1.3s ease,
                filter 1.3s ease, letter-spacing 1.6s cubic-bezier(.22,.61,.36,1);
  }
  .js .hero .reveal.is-in{ opacity:1; transform:none; }
  .js .hero__title.is-in{ letter-spacing:.01em; filter:none; }

  /* Разделители в дате героя мягко «прорастают» */
  .js .hero__sep{ transform: scaleY(0); transform-origin:center; transition: transform .8s ease .35s; }
  .js .hero__date.is-in .hero__sep{ transform: scaleY(1); }

  /* Медленное «дыхание» фото пары (Ken Burns) */
  .hero::before{ animation: heroKen 26s ease-in-out 1.4s infinite alternate; }
  @keyframes heroKen{
    from{ transform: scale(1.03); }
    to  { transform: scale(1.10); }
  }

  /* --- 3/4. БЛОК ДАТЫ: цветок «дышит» (subtle) --- */
  .date__flower{ animation: flowerBreath 15s ease-in-out infinite alternate; }
  @keyframes flowerBreath{
    from{ transform: rotate(15.3deg) scale(1);    opacity:.92; }
    to  { transform: rotate(13.4deg) scale(1.05);  opacity:1; }
  }

  /* --- 5. ДРЕСС-КОД: подсветка/увеличение при наведении и тапе --- */
  .dress__palette img{ transition: transform .5s cubic-bezier(.22,.61,.36,1), filter .5s ease; }
  .dress__palette img:hover,
  .dress__palette img:active{ transform: scale(1.03); filter: saturate(1.08) contrast(1.03); }
  .dress__guests{ transition: transform .6s cubic-bezier(.22,.61,.36,1); }
  .dress__guests:active{ transform: scale(1.01); }

  /* --- 4. КАРТА: мягкий пульс маркера + «дыхание» кнопки --- */
  .map__pulse{ animation: mapPulse 2.8s ease-out infinite; }
  @keyframes mapPulse{
    0%  { transform: translate(-50%,-50%) scale(.4);  opacity:.6; }
    70% { opacity:0; }
    100%{ transform: translate(-50%,-50%) scale(2.2);  opacity:0; }
  }
  .map__btn{ animation: btnBreath 3.6s ease-in-out infinite; }
  @keyframes btnBreath{
    0%,100%{ box-shadow: 0 6px 16px rgba(84,95,61,0); }
    50%    { box-shadow: 0 10px 26px rgba(84,95,61,.22); }
  }

  /* --- 6. ФОРМА: плавное раскрытие полей «с парой» --- */
  .form__group--partner{
    transform: translateY(-6px);
    transition: max-height .55s cubic-bezier(.22,.61,.36,1),
                opacity .4s ease, transform .45s ease,
                visibility 0s linear .55s;             /* прячем только после схлопывания */
  }
  .form__group--partner.is-open{
    transform:none;
    transition: max-height .55s cubic-bezier(.22,.61,.36,1),
                opacity .45s ease .05s, transform .45s ease, visibility 0s;
  }

  /* Мягкий focus-state поля */
  .field input{ transition: border-color .3s ease, box-shadow .3s ease, transform .25s ease; }
  .field input:focus{ transform: translateY(-1px); }

  /* Кнопка: лёгкий «блик» при наведении, мягкое нажатие */
  .btn::after{
    content:""; position:absolute; top:0; left:-45%;
    width:45%; height:100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
    transform: skewX(-18deg); opacity:0; pointer-events:none;
  }
  .btn:hover::after{ animation: sheen 1.1s ease; }
  @keyframes sheen{ 0%{ left:-45%; opacity:0; } 12%{ opacity:1; } 100%{ left:130%; opacity:0; } }

  /* Ошибки — деликатно: мягкое проявление + микро-подсказка (без резких блоков) */
  .field.has-error .field__error{ animation: errIn .45s ease both; }
  @keyframes errIn{ from{ opacity:0; transform: translateY(-4px); } to{ opacity:1; transform:none; } }
  .field.has-error input{ animation: errNudge .4s ease; }
  @keyframes errNudge{ 0%,100%{ transform: translateX(0); } 25%{ transform: translateX(-3px); } 75%{ transform: translateX(3px); } }

  /* Экран благодарности: печать-галочка мягко «впечатывается» */
  .thankyou__mark{ animation: markIn .65s cubic-bezier(.34,1.5,.64,1) .05s both; }
  @keyframes markIn{ from{ transform: scale(.4) rotate(-14deg); opacity:0; } to{ transform:none; opacity:1; } }

}

/* Пользователь отключил анимации — статично и удобно */
@media (prefers-reduced-motion: reduce){
  .reveal,[data-reveal],.anim-child{ opacity:1 !important; transform:none !important; }
  .thankyou{ animation:none; }
  .btn.is-loading .btn__loader{ animation-duration: 1.2s; }
}

/* =========================================================
   INTRO — АНИМАЦИЯ ОТКРЫТИЯ КОНВЕРТА (первый экран)
   Слои складываются в цельную обложку; позиции — в переменных ниже.
   Всё на transform/opacity, порядок сцены задаёт script.js классами.
   ========================================================= */
.wedding-intro{
  position:fixed; inset:0; z-index:70;    /* оверлей поверх сайта — под ним герой */
  width:100%; max-width:480px;            /* та же колонка, что и .page */
  margin-left:auto; margin-right:auto;    /* центрируем на широких экранах */
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;                        /* клипаем 3D-поворот клапана */
  background:#efe9dd;                      /* тёплый кремовый — «конверт лежит на бумаге» */
}
/* Финал: конверт открылся → оверлей растворяется, проявляется главный экран */
.wedding-intro.intro-outro{ pointer-events:none; }
@media (prefers-reduced-motion: no-preference){
  .wedding-intro{ transition: opacity 1.1s ease, transform 1.1s ease; }
  .wedding-intro.intro-outro{ opacity:0; transform: scale(1.05); }
}

.envelope-scene{
  position:absolute; inset:0;             /* сцена на весь экран */
  perspective: 1400px;                    /* объём для поворота клапана */

  /* База закрывает весь экран (object-fit:cover, стык-V на ~48% = центр);
     клапан ложится сверху остриём к центру; печать строго по центру на стыке. */
  --base-w: 100%;   --base-top: 0%;     /* основа — на весь экран */
  --flap-w: 100%;   --flap-top: 0%;     /* клапан (петля сверху) */
  --card-w: 100%;   --card-top: 0%;     /* внутренняя карточка */
  --seal-w: 42%;    --seal-top: 40%;    /* печать — по центру, на стыке половинок */
  --flap-open: -152deg;                 /* угол открытия клапана */
}

/* Общие свойства слоёв: центрируем через margin (transform свободен для анимации) */
.envelope-scene img{
  position:absolute; left:0; right:0; margin-inline:auto;
  height:auto; max-width:none;
  pointer-events:none; user-select:none; -webkit-user-drag:none;
  will-change: transform, opacity;
}
.invitation-bg { width:var(--card-w); top:var(--card-top); z-index:1; }
/* База заполняет весь экран (cover): её стык-V оказывается по центру.
   Повышенная специфичность — чтобы перебить общее .envelope-scene img{height:auto}. */
.envelope-scene .envelope-base{ z-index:2;
                 left:0; right:0; top:0; margin:0;
                 width:100%; height:100%;
                 object-fit:cover; object-position:center; }
/* Клапан + печать — одна группа: открываются как единое целое, петля сверху */
.flap-group{
  position:absolute; inset:0; z-index:3;
  transform-origin: top center;
  transform-style: preserve-3d;
  backface-visibility:visible;
  will-change: transform;
}
.envelope-flap { width:var(--flap-w); top:var(--flap-top); z-index:1; }
.wax-seal      { width:var(--seal-w); top:var(--seal-top); z-index:2;
                 filter: drop-shadow(0 2px 4px rgba(60,55,30,.20)); }
/* После завершения intro освобождаем GPU-слои */
.wedding-intro.intro-complete .envelope-scene img,
.wedding-intro.intro-complete .flap-group{ will-change:auto; }

/* Текст на карточке */
.intro-content{
  position:absolute; left:0; right:0; margin-inline:auto;
  top:26%; width:72%; z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-align:center; pointer-events:none;
}
.intro-eyebrow{ font-family:var(--sans); font-weight:300; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brown); }
.intro-names{ font-family:var(--serif); font-weight:400; font-size:30px;
  line-height:1.1; color:var(--dark); }
.intro-names span{ color:var(--olive); }
.intro-date{ font-family:var(--sans); font-size:14px; letter-spacing:.22em; color:var(--brown); }
.intro-hint{ margin-top:14px; font-family:var(--sans); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--olive); opacity:.85; }
.intro-hint::after{ content:"⌄"; display:block; margin-top:2px; font-size:16px; line-height:1; }

/* ---------- СТАРТОВОЕ (закрытое) состояние — только при работающем JS ---------- */
.js .envelope-scene{ opacity:0; transform: scale(1.03); }
.js .invitation-bg{ opacity:0; transform: translateY(46%) scale(1); } /* карточка спрятана в конверте */
.js .intro-content > *{ opacity:0; transform: translateY(18px); }

@media (prefers-reduced-motion: no-preference){
  /* Плавности переходов */
  .envelope-scene{ transition: opacity 1s cubic-bezier(.22,1,.36,1),
                               transform 1s cubic-bezier(.22,1,.36,1); }
  /* opacity быстрее слайда — видно, как карточка выезжает */
  .invitation-bg{ transition: opacity .6s ease, transform 1.4s cubic-bezier(.22,1,.36,1); }
  /* Плавное, «дорогое» открытие клапана — медленный старт и мягкое затухание, без bounce */
  .flap-group{ transition: transform 2.2s cubic-bezier(.30,0,.15,1); }
  .intro-content > *{ transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1); }

  /* 1. Сцена мягко проявляется */
  .wedding-intro.is-visible .envelope-scene{ opacity:1; transform:none; }

  /* 2. Печать «оживает»: лёгкое дыхание + золотой блик */
  .wedding-intro.seal-alive .wax-seal{ animation: sealAlive 2.4s ease-in-out infinite; }
  @keyframes sealAlive{
    0%,100%{ transform: scale(1) rotate(0deg);
             filter: drop-shadow(0 2px 4px rgba(60,55,30,.20)) brightness(1); }
    50%    { transform: scale(1.02) rotate(1deg);
             filter: drop-shadow(0 3px 6px rgba(60,55,30,.26)) brightness(1.08); }
  }

  /* 3. Клапан открывается вверх ВМЕСТЕ с печатью (печать остаётся на клапане) */
  .wedding-intro.flap-open .flap-group{ transform: rotateX(var(--flap-open)); }
  .wedding-intro.flap-open .wax-seal{ animation:none; }   /* стоп «дыхание» печати */

  /* 4. Карточка приглашения выезжает вверх и заполняет экран */
  .wedding-intro.card-in .invitation-bg{ opacity:1; transform: translateY(-4%) scale(1); }

  /* 5. Текст появляется по очереди */
  .wedding-intro.text-in .intro-content > *{ opacity:1; transform:none; }
  .wedding-intro.text-in .intro-content > *:nth-child(1){ transition-delay:.00s; }
  .wedding-intro.text-in .intro-content > *:nth-child(2){ transition-delay:.14s; }
  .wedding-intro.text-in .intro-content > *:nth-child(3){ transition-delay:.28s; }
  .wedding-intro.text-in .intro-content > *:nth-child(4){ transition-delay:.46s; }

  /* лёгкое «дыхание» подсказки скролла */
  .wedding-intro.text-in .intro-hint{ animation: hintFloat 1.8s ease-in-out .8s infinite; }
  @keyframes hintFloat{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(4px);} }

  /* Пропуск тапом — мгновенно к финалу */
  .wedding-intro.ff *{ transition:none !important; animation:none !important; }
}

/* Reduced-motion: сразу показываем открытый конверт с выехавшим приглашением */
@media (prefers-reduced-motion: reduce){
  .envelope-scene{ opacity:1 !important; transform:none !important; }
  .invitation-bg{ opacity:1 !important; transform: translateY(-4%) !important; }
  .flap-group{ transform: rotateX(var(--flap-open)); }
  .intro-content > *{ opacity:1 !important; transform:none !important; }
}

/* =========================================================
   Мелкая адаптация под самые узкие экраны (≈360px)
   ========================================================= */
@media (max-width: 360px){
  .hero__title{ font-size:48px; }
  .date__day{ font-size:140px; }
  .date__year{ font-size:150px; }
  .date__month{ font-size:56px; }
  .gather__title,.gather__time{ font-size:56px; }
  .venue__title{ font-size:42px; }
  .intro-names{ font-size:26px; }
}