/* ============================================================
   Свадебное приглашение · Шохрух & Мунаввара
   База — вёрстка из ../double, но одна пара вместо двух и
   лилово-сливовая цветочная гамма вместо розово-малиновой.
   ============================================================ */

/* Шрифты подключены в css/fonts.css (base64), см. комментарий там:
   600 — Custodia Deco, 700 — Fashion Fetish Light, 800 — Gabriola.   */

:root{
  --cream:#eee6d3;
  --brown:#51392b;
  --brown-soft:rgba(81,57,43,.55);
  /* золото чуть приглушённее, чем в double: рядом со сливовыми пионами
     яркий #c9a24a начинал спорить с цветами */
  --gold:#c1a15f;
  /* второй акцент — сливовый, из новой гаммы цветов */
  --plum:#7e5470;
  --paper:#fff;
  --deco:'Invite',Arial,sans-serif;   /* 600 — Custodia Deco */
  --ff:'Invite',Arial,sans-serif;     /* 700 — Fashion Fetish */
  --cal:'Invite',Arial,sans-serif;    /* 800 — Gabriola       */
  --ease:cubic-bezier(.22,.85,.28,1);
  /* ширина колонки конверта: на экранах уже 372px упирается в vw,
     иначе текст письма выходил за края без единого поля по бокам */
  --w:min(320px,86vw);
  /* кремовое «гало» под текстом. Декор лежит НИЖЕ текста (z-index),
     но лепестки и цветы всё равно создают пёстрый фон — ореол цвета
     фона гарантирует читаемость любой строки на любом экране.       */
  --halo:0 0 12px rgba(238,230,211,.95),0 0 4px rgba(238,230,211,.9);
}

*,*::before,*::after{box-sizing:border-box}
/* overflow-x прячем ТОЛЬКО на html. Если поставить его ещё и на body,
   body становится отдельным скролл-контейнером, и колесо/свайп над
   контентом уходят в него, а не в страницу — сайт «залипает» и не
   скроллится вниз (программный scrollTo при этом работает).           */
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
/* clip обрезает вылезающий декор, но НЕ делает html скролл-контейнером —
   это надёжнее hidden, в т.ч. против горизонтального «резинового» сдвига
   в iOS Safari. Для старых браузеров выше остаётся hidden.            */
@supports (overflow:clip){html{overflow-x:clip}}
body{
  margin:0;background:var(--cream);color:var(--brown);
  font-family:var(--ff);font-weight:700;
  -webkit-font-smoothing:antialiased;
}
/* скролл-контейнер — html, поэтому блокировать нужно и его тоже */
html.is-locked,body.is-locked{overflow:hidden;height:100vh;height:100dvh}
img{max-width:100%;display:block}
/* ни одна строка не должна вылезать за экран и обрезаться */
h1,h2,h3,p,li,span,b,a{overflow-wrap:break-word}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a{color:inherit;text-decoration:none}
ol,ul{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}

/* ============================================================
   ПРЕЛОАДЕР
   ============================================================ */
.preloader{
  position:fixed;inset:0;z-index:999;background:var(--cream);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:opacity .7s var(--ease),visibility .7s;
}
.preloader.is-done{opacity:0;visibility:hidden}
.preloader__ring{
  position:absolute;width:220px;height:220px;border-radius:50%;
  border:1px solid rgba(81,57,43,.18);border-top-color:var(--gold);
  animation:spin 2.4s linear infinite;
}
.preloader__ring::after{
  content:'';position:absolute;inset:14px;border-radius:50%;
  border:1px solid rgba(81,57,43,.10);border-bottom-color:rgba(193,161,95,.5);
  animation:spin 3.6s linear infinite reverse;
}
.preloader__mono{
  font-family:var(--cal);font-weight:800;font-size:40px;line-height:1.05;
  text-align:center;letter-spacing:.02em;
  animation:breathe 2.6s ease-in-out infinite;
}
.preloader__mono span{color:var(--gold);font-size:.8em;padding:0 .12em}
.preloader__mono i{font-style:normal}
.preloader__bar{width:150px;height:1px;background:rgba(81,57,43,.16);overflow:hidden}
.preloader__bar span{display:block;height:100%;width:0;background:var(--gold);transition:width .25s linear}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}

/* ============================================================
   КОНВЕРТ
   ============================================================ */
.envelope{
  position:fixed;inset:0;z-index:900;background:var(--cream);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;perspective:1400px;
}
.envelope__paper{
  position:absolute;inset:0;transform-style:preserve-3d;
  display:flex;align-items:center;justify-content:center;
}

/* белые клапаны конверта: сверху ∇, снизу ∧ — между ними видны
   кремовые треугольники фона (как в референсе) */
.env-flap{
  position:absolute;left:0;width:100%;background:var(--paper);pointer-events:none;
  filter:drop-shadow(0 5px 26px rgba(81,57,43,.10));
}
.env-flap--top{
  top:0;height:34%;
  clip-path:polygon(0 0,100% 0,100% 54%,50% 100%,0 54%);
  transform-origin:50% 0;animation:flapIn .9s var(--ease) both;
}
.env-flap--bottom{
  bottom:0;height:66%;
  clip-path:polygon(50% 0,100% 51%,100% 100%,0 100%,0 51%);
  transform-origin:50% 100%;animation:flapIn .9s .08s var(--ease) both;
}
@keyframes flapIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}

/* На широком экране конверт — карточка по центру, а не треугольники
   во весь монитор: клапаны шириной 100% растягивались на всю ширину,
   и «уголки» превращались в гигантские косые клинья.                 */
@media (min-width:760px){
  .envelope__paper{
    position:relative;inset:auto;
    width:min(720px,88vw);height:min(520px,84vh);
    border-radius:3px;
    box-shadow:0 34px 90px rgba(81,57,43,.20),0 2px 8px rgba(81,57,43,.10);
  }
  .env-flap--top{filter:drop-shadow(0 4px 14px rgba(81,57,43,.10))}
  .env-flap--bottom{filter:none}
  /* тонкая золотая рамка внутри карточки */
  .envelope__paper::after{
    content:'';position:absolute;inset:14px;z-index:4;pointer-events:none;
    border:1px solid rgba(193,161,95,.35);
  }
  /* при открытии гасим и рамку, и тень: иначе после вылета клапанов
     на секунду остаётся висеть пустой прямоугольник карточки */
  .envelope.is-open .envelope__paper::after{opacity:0;transition:opacity .35s}
  .envelope.is-open .envelope__paper{box-shadow:none;transition:box-shadow .55s var(--ease)}
}

.envelope__inner{
  position:relative;z-index:3;width:var(--w);text-align:center;
  display:flex;flex-direction:column;align-items:center;
  margin-top:-3vh;
}

.env-kicker{
  font-family:Arial,Helvetica,sans-serif;font-weight:400;
  font-size:20px;line-height:1.5;text-transform:uppercase;
  letter-spacing:.12em;margin-bottom:6px;
}
.env-kicker span{display:inline-block;opacity:0;animation:letterIn .6s var(--ease) forwards}
.env-kicker span:nth-child(1){animation-delay:.30s}
.env-kicker span:nth-child(2){animation-delay:.35s}
.env-kicker span:nth-child(3){animation-delay:.44s}
.env-kicker span:nth-child(4){animation-delay:.49s}
.env-kicker span:nth-child(5){animation-delay:.54s}
.env-kicker span:nth-child(6){animation-delay:.59s}
.env-kicker span:nth-child(7){animation-delay:.64s}
.env-kicker span:nth-child(8){animation-delay:.69s}
.env-kicker span:nth-child(9){animation-delay:.74s}
.env-kicker span:nth-child(10){animation-delay:.79s}
.env-kicker span:nth-child(11){animation-delay:.84s}
.env-kicker span:nth-child(12){animation-delay:.89s}
@keyframes letterIn{from{opacity:0;transform:translateY(14px) rotate(6deg)}to{opacity:1;transform:none}}

.env-title{
  font-weight:600;font-size:50px;line-height:1.25;letter-spacing:.02em;
  animation:titleIn 1.1s .55s var(--ease) both;
}
@keyframes titleIn{from{opacity:0;transform:translateY(26px) scale(.92);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}

.seal{
  position:relative;width:142px;height:142px;margin:36px 0 30px;
  animation:sealIn 1s .9s var(--ease) both;
}
.seal img{width:100%;animation:sealPulse 2.8s ease-in-out infinite;transition:transform .3s var(--ease)}
.seal:active img{transform:scale(.93)}
.seal__glow{
  position:absolute;inset:-24%;border-radius:50%;
  background:radial-gradient(circle,rgba(193,161,95,.42),transparent 62%);
  animation:glow 2.8s ease-in-out infinite;
}
.seal__ripple{
  position:absolute;inset:6%;border-radius:50%;border:1px solid rgba(193,161,95,.65);
  animation:ripple 2.4s var(--ease) infinite;
}
@keyframes sealIn{from{opacity:0;transform:scale(.4) rotate(-25deg)}to{opacity:1;transform:none}}
@keyframes sealPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes glow{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes ripple{0%{transform:scale(1);opacity:.8}80%,100%{transform:scale(1.55);opacity:0}}

.env-note{
  font-family:Arial,Helvetica,sans-serif;font-weight:400;
  /* разрядка чуть меньше, чем в double: при читаемых 12px строка
     «Вы не просто так получили это письмо!» иначе не влезала в 320px */
  font-size:12px;line-height:1.6;text-transform:uppercase;letter-spacing:.03em;
  animation:noteIn 1s 1.3s var(--ease) both;
}
@keyframes noteIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* --- открытие --- */
.envelope.is-open .env-flap--top{animation:flapOpenTop 1.35s var(--ease) forwards;transform-origin:50% 0}
.envelope.is-open .env-flap--bottom{animation:flapOpenBottom 1.35s var(--ease) forwards;transform-origin:50% 100%}
.envelope.is-open .envelope__inner{animation:letterOut 1s var(--ease) forwards}
.envelope.is-open{animation:envFade .5s .95s linear forwards}
@keyframes flapOpenTop{
  35%{transform:rotateX(-14deg)}
  100%{transform:translateY(-52vh) rotateX(115deg);opacity:0}
}
@keyframes flapOpenBottom{
  35%{transform:rotateX(10deg)}
  100%{transform:translateY(58vh) rotateX(-95deg);opacity:0}
}
@keyframes letterOut{
  30%{transform:translateY(-14px) scale(1.02)}
  100%{transform:translateY(-70vh) scale(.86);opacity:0;filter:blur(6px)}
}
@keyframes envFade{to{opacity:0;visibility:hidden}}

/* ============================================================
   ФОН: лепестки, искры, прогресс, музыка
   ============================================================ */
.petals,.sparkles{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.petal{
  position:absolute;top:-8vh;will-change:transform,opacity;
  border-radius:60% 10% 60% 10%;
  animation:fall linear infinite;
}
@keyframes fall{
  0%{transform:translate3d(0,-10vh,0) rotate(0deg);opacity:0}
  8%{opacity:.85}
  90%{opacity:.6}
  100%{transform:translate3d(var(--dx,40px),108vh,0) rotate(var(--rot,540deg));opacity:0}
}
.spark{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:radial-gradient(circle,rgba(193,161,95,.95),rgba(193,161,95,0) 70%);
  animation:twinkle var(--dur,4s) ease-in-out infinite;
}
/* часть искр — сливовые, чтобы фон перекликался с цветами */
.spark--plum{background:radial-gradient(circle,rgba(147,104,136,.9),rgba(147,104,136,0) 70%)}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1.9)}}

.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:rgba(81,57,43,.08)}
.scroll-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),#e0cfa2,var(--plum))}

.music{
  position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:70;
  width:46px;height:46px;border-radius:50%;
  background:rgba(81,57,43,.92);display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(81,57,43,.28);
  opacity:0;transform:scale(.5);transition:opacity .5s,transform .5s var(--ease);
}
.music.is-ready{opacity:1;transform:none}
.music__eq{display:flex;gap:3px;align-items:flex-end;height:16px}
.music__eq i{width:3px;height:5px;background:#f2e9d8;border-radius:2px;transition:height .2s}
.music.is-playing .music__eq i{animation:eq .9s ease-in-out infinite}
.music.is-playing .music__eq i:nth-child(2){animation-delay:.15s}
.music.is-playing .music__eq i:nth-child(3){animation-delay:.3s}
.music.is-playing .music__eq i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{height:4px}50%{height:16px}}

/* ============================================================
   ОБЩЕЕ
   ============================================================ */
.page{position:relative;z-index:10;opacity:0;transition:opacity .8s var(--ease)}
.page.is-in{opacity:1}
/* Декор специально свисает за края колонки. На широких экранах он попадает в
   боковые поля и никуда не выезжает, а на мобильных упирается в край экрана и
   раздувал scrollWidth (браузер считал, что есть куда скроллить вбок).
   Обрезаем на уровне страницы. Именно clip, а не hidden: hidden сделал бы
   .page скролл-контейнером — та же ловушка, что описана про body ниже. */
@supports (overflow:clip){.page{overflow-x:clip}}

.s{
  position:relative;width:100%;max-width:520px;margin:0 auto;
  padding:88px 20px;text-align:center;overflow:visible;
}
/* ------------------------------------------------------------
   Читаемость мелкого текста.
   В double кегли повторяли референс: основной текст 10.5px, подписи 9px
   при opacity .6. На кремовом фоне #eee6d3 коричневый #51392b даёт 8.6:1,
   но opacity .6 роняет контраст до 3.1:1, а .7 — до 4.0:1, то есть ниже
   порога WCAG AA (4.5:1). Поэтому ниже: прозрачность мелких строк не ниже
   .8 (это ≥5.1:1), а сами кегли подняты до читаемых на телефоне.
   ------------------------------------------------------------ */
.eyebrow{font-weight:700;font-size:12px;letter-spacing:.26em;text-transform:uppercase;opacity:.82;margin-bottom:14px}
/* Кегль заголовков привязан к vw: на 390px он равен прежним 39/34px, а на
   320–360px сам сбавляет, иначе строка упиралась в края колонки и в декор.
   Медиазапросы 600px/1000px ниже перебивают clamp фиксированными размерами. */
.ttl{font-weight:600;font-size:clamp(30px,10vw,39px);line-height:1.5;letter-spacing:.01em}
.ttl--sm{font-size:clamp(27px,8.7vw,34px)}
.ttl--venue{font-size:clamp(28px,10.5vw,51px);line-height:1.5;letter-spacing:.02em;white-space:nowrap}
.small{font-weight:700;font-size:12px;line-height:2.2;letter-spacing:.08em}
/* max-width в em, а не в px: мера строки (~30 знаков) держится одинаковой
   на любом кегле — и на телефоне, и в широкой десктопной колонке */
.lead{font-weight:700;font-size:15px;line-height:1.9;letter-spacing:.03em;margin:12px auto 0;max-width:17em}
.lead + .lead{margin-top:1.5em}

.rule{margin:16px auto 6px;width:120px}
.rule i{display:block;height:1px;background:linear-gradient(90deg,transparent,rgba(81,57,43,.45),transparent);transform:scaleX(0);transform-origin:50%;transition:transform 1s var(--ease)}
.rule.is-in i{transform:scaleX(1)}

/* Весь текст секции обязан лежать НАД декором. В double z-index стоял
   точечно (.couples, .date, .tl, .cards, .wish, .cd), а заголовки, абзацы и
   подписи остались без него — и цветок, будучи position:absolute z-index:1,
   закрашивал их сверху. На узкой колонке с читаемым кеглем это стало видно
   сразу. Плюс кремовый ореол --halo там, где строка всё же идёт по лепестку. */
.s > .ttl,.s > .lead,.s > .small,.s > .eyebrow,.s > .hint,
.s > .city,.s > .weekday,.s > .rule{position:relative;z-index:2}
.lead,.wish,.small,.eyebrow,.hint,.city,.weekday{text-shadow:var(--halo)}

/* --- Декор --- */
.deco{position:absolute;pointer-events:none;user-select:none;z-index:1;opacity:0;transition:opacity 1.2s var(--ease)}
.deco.is-in{opacity:1}
.float-a{animation:floatA 9s ease-in-out infinite}
.float-b{animation:floatB 11s ease-in-out infinite}
@keyframes floatA{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(2.2deg)}}
@keyframes floatB{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(12px) rotate(-2.6deg)}}

/* Раскладка отличается от double: букеты стоят по другим углам, а в
   секции с датой к бутону добавлена вторая ветка орхидеи слева. */
.deco--orchid-lilac-1{width:100px;top:132px;left:-32px;scale:-1 1}
.deco--protea-1{width:88px;bottom:132px;right:-20px}
.deco--orchid-cream-1{width:92px;top:64px;left:-36px}
.deco--bud-1{width:148px;bottom:-40px;right:-48px}
.deco--peony-plum-1{width:215px;top:-64px;left:-86px}
.deco--bud-2{width:136px;bottom:-26px;right:-50px}
.deco--peony-cream-1{width:225px;top:-56px;right:-92px}
.deco--orchid-lilac-2{width:98px;bottom:52px;left:-34px}
.deco--protea-2{width:96px;top:34px;right:-28px}
.deco--peony-plum-2{width:205px;bottom:-46px;left:-86px}
.deco--bud-3{width:126px;top:-16px;right:-44px;scale:-1 1}
.deco--peony-cream-2{width:235px;top:-44px;left:-98px;scale:-1 1}
.deco--orchid-lilac-3{width:96px;top:-136px;right:-36px;scale:-1 1}
/* пион в футере уведён левее, чем в double: там он наползал на строку
   с именами и датой, и тонкие капсовые буквы на тёмных листьях терялись */
.deco--peony-plum-3{width:200px;bottom:-88px;left:-140px}

/* ============================================================
   1. ДОРОГОЙ ГОСТЬ
   ============================================================ */
.s--guest{padding-top:96px}
.couples{margin-top:26px;position:relative;z-index:2}
/* пара одна, поэтому имена крупнее, чем в double; кегль привязан к vw —
   «Мунаввара» длиннее прежних имён и на узком экране обязана уместиться */
.couple{
  font-family:var(--cal);font-weight:800;font-size:clamp(34px,8.6vw,44px);line-height:1.18;
  display:flex;align-items:baseline;justify-content:center;gap:.18em;flex-wrap:wrap;
}
.couple__amp{color:var(--gold);font-size:.86em}
.couple__name{
  /* блик по именам идёт не золотом, а сливовым — в тон новым цветам */
  background:linear-gradient(100deg,var(--brown) 20%,#8a6a4e 42%,#a5779a 50%,#8a6a4e 58%,var(--brown) 80%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 6s linear infinite;
}
@keyframes shimmer{0%{background-position:180% 0}100%{background-position:-80% 0}}

.hint{margin-top:40px;font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.82}
.hint__arrow{display:block;width:1px;height:38px;margin:12px auto 0;background:linear-gradient(180deg,rgba(81,57,43,.5),transparent);animation:arrow 2s ease-in-out infinite}
@keyframes arrow{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(9px);opacity:1}}

/* ============================================================
   2. ДАТА
   ============================================================ */
.s--date{padding:80px 20px 96px}

/* шёлк — самостоятельная лента, ничего собой не перекрывает */
/* центрируем отступами, а не transform: transform занят reveal-анимацией */
.silk{position:relative;z-index:1;width:146%;margin:10px 0 26px -23%;pointer-events:none}
.silk img{
  width:100%;animation:silkWave 14s ease-in-out infinite;
  /* растушёвываем прямые края кадра, чтобы ткань растворялась в фоне */
  -webkit-mask-image:radial-gradient(ellipse 54% 62% at 50% 50%,#000 30%,transparent 88%);
  mask-image:radial-gradient(ellipse 54% 62% at 50% 50%,#000 30%,transparent 88%);
}
@keyframes silkWave{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.045) rotate(-1.1deg)}}

/* каждый разряд даты — отдельный блок с воздухом вокруг */
.date{position:relative;z-index:2;width:100%;max-width:300px;margin:0 auto}
.date__cell{display:flex;flex-direction:column;align-items:center;padding:6px 0}
.date__lbl{
  font-weight:700;font-size:12px;line-height:1;letter-spacing:.3em;text-indent:.3em;
  text-transform:uppercase;opacity:.82;
}
.date__val{font-weight:600;font-size:66px;line-height:1.18;letter-spacing:.04em;margin-top:14px}

.date__sep{display:flex;align-items:center;justify-content:center;gap:12px;margin:30px auto;width:170px}
.date__sep i{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(81,57,43,.34),transparent);transform:scaleX(0);transition:transform 1s var(--ease)}
.date__sep.is-in i{transform:scaleX(1)}
.date__sep b{color:var(--plum);font-size:13px;font-weight:400;animation:gemPulse 3.4s ease-in-out infinite}
@keyframes gemPulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.28)}}

.weekday{position:relative;z-index:2;margin-top:44px;font-weight:700;font-size:12px;letter-spacing:.28em;text-transform:uppercase;opacity:.82}

/* ============================================================
   3. РЕСТОРАН
   ============================================================ */
.city{font-weight:700;font-size:12px;letter-spacing:.24em;text-transform:uppercase;opacity:.82;margin-top:2px}

.photo{position:relative;margin:26px auto 0;width:100%;max-width:340px;overflow:hidden;border-radius:2px;z-index:2}
.photo img{width:100%;height:auto;transform:scale(1.06);transition:transform 1.4s var(--ease)}
.photo.is-in img{transform:scale(1)}
.photo::after{
  content:'';position:absolute;inset:0;border:1px solid rgba(238,230,211,.35);
  box-shadow:inset 0 0 0 6px rgba(238,230,211,.18);pointer-events:none;
}
.photo__shine{
  position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);
}
.photo.is-in .photo__shine{animation:shine 2.6s 1s var(--ease)}
@keyframes shine{to{left:130%}}

.btn{
  position:relative;display:inline-block;margin-top:24px;z-index:2;
  padding:13px 42px;background:var(--brown);color:#fff;
  font-weight:700;font-size:14px;letter-spacing:.22em;text-transform:uppercase;
  border-radius:40px;overflow:hidden;
  box-shadow:0 8px 24px rgba(81,57,43,.24);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.btn:active{transform:scale(.96)}
.btn span{position:relative;z-index:2}
.btn__shine{
  position:absolute;top:0;left:-70%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);animation:shine 3.4s 1.4s var(--ease) infinite;
}

/* ============================================================
   4. ПРОГРАММА
   ============================================================ */
.tl{position:relative;z-index:2;margin-top:26px}
.tl::before{
  content:'';position:absolute;left:50%;top:0;width:1px;height:100%;
  background:linear-gradient(180deg,transparent,rgba(81,57,43,.28),transparent);
  transform:translateX(-50%) scaleY(0);transform-origin:50% 0;
  transition:transform 1.6s var(--ease);
}
.tl.is-lit::before{transform:translateX(-50%) scaleY(1)}
.tl__item{position:relative;padding:22px 0}
.tl__item::before{
  content:'';position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  border-radius:50%;background:var(--gold);opacity:0;transform:scale(0);
  transition:opacity .5s,transform .6s var(--ease);
}
.tl__item.is-in::before{opacity:1;transform:scale(1)}
/* «Выступление Артистов» — самая длинная строка программы: на 320px при
   фиксированных 38px она доставала до краёв и до декора, поэтому кегль
   тоже привязан к vw (на 390px = прежние 38/28px) */
.tl__item h3{font-weight:600;font-size:clamp(29px,9.7vw,38px);line-height:1.55;letter-spacing:.01em}
.tl__item b{display:block;font-weight:700;font-size:clamp(23px,7.2vw,28px);line-height:1.55;opacity:.9}

/* ============================================================
   5–6. КАРТОЧКИ (диктор / артисты)
   ============================================================ */
.cards{position:relative;z-index:2;display:grid;gap:26px;margin-top:28px}
.cards--2{grid-template-columns:repeat(2,1fr)}
/* артисты — колонкой, друг над другом */
.cards--stack{grid-template-columns:1fr;gap:38px;max-width:260px;margin-left:auto;margin-right:auto}

.card{margin:0}
/* В double карточка — «дверная арка» со скруглённым верхом. Здесь вместо неё
   овальный медальон в золотом паспарту: тонкий золотой контур снаружи
   (outline не режется собственным overflow:hidden и повторяет border-radius)
   и кремовый волосок внутри. Пропорция 4:5 — овал полнее, чем при 3:4,
   и меньше срезает плечи. */
.card__ph{
  position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:50%;
  background:linear-gradient(160deg,#e9e0cd,#ddd0bd);
  display:grid;place-items:center;
  box-shadow:0 8px 22px rgba(81,57,43,.10);
  outline:1px solid rgba(193,161,95,.5);outline-offset:7px;
}
.card__ph--img{box-shadow:0 12px 30px rgba(81,57,43,.20)}
/* запасной вариант пропорций для браузеров без aspect-ratio (iOS < 15) */
@supports not (aspect-ratio:4/5){
  .card__ph{height:0;padding-bottom:125%}
  .card__ph::before{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%)}
}
.card__ph::before{
  content:attr(data-mono);font-family:var(--cal);font-weight:800;font-size:44px;
  color:rgba(81,57,43,.42);
}
.card__ph--img::before{content:none}
/* декоративный «ромб» под монограммой у карточек без фото */
.card__ph:not(.card__ph--img)::after{
  content:'';position:absolute;left:50%;top:calc(50% + 34px);
  width:9px;height:9px;margin-left:-4.5px;
  border:1px solid rgba(193,161,95,.75);transform:rotate(45deg);
  animation:gem 3.2s ease-in-out infinite;
}
@keyframes gem{0%,100%{transform:rotate(45deg) scale(1);opacity:.7}50%{transform:rotate(45deg) scale(1.3);opacity:1}}
.card__ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.4s var(--ease)}
.card.is-in .card__ph img{transform:scale(1)}
.card__ring{
  position:absolute;inset:6px;border:1px solid rgba(238,230,211,.5);
  border-radius:50%;pointer-events:none;
}
/* на карточке без фото кремовая рамка сливалась бы с кремовой подложкой —
   там она золотая */
.card__ph:not(.card__ph--img) .card__ring{border-color:rgba(193,161,95,.4)}
/* отступ больше, чем в double: под овалом ещё лежит золотой контур */
.card figcaption{margin-top:22px}
/* золотой ромбик между портретом и именем */
.card figcaption::before{
  content:'';display:block;width:7px;height:7px;margin:0 auto 9px;
  border:1px solid rgba(193,161,95,.8);transform:rotate(45deg);
}
.card figcaption h3{font-weight:600;font-size:19px;line-height:1.4}
.card figcaption p{font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.8;margin-top:4px}

/* ============================================================
   7. ПОЖЕЛАНИЯ
   ============================================================ */
.wish{position:relative;z-index:2;margin:18px auto 0;font-weight:700;font-size:15px;line-height:1.9;letter-spacing:.03em;max-width:17em}
.wish + .wish{margin-top:1.5em}

/* ============================================================
   8. ТАЙМЕР
   ============================================================ */
.cd{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:34px}
.cd__cell b{
  display:block;font-weight:600;font-size:clamp(32px,10.2vw,40px);line-height:1.5;
  font-variant-numeric:tabular-nums;
}
.cd__cell b.tick{animation:tick .45s var(--ease)}
@keyframes tick{0%{transform:translateY(-40%) scale(.86);opacity:0;filter:blur(3px)}100%{transform:none;opacity:1;filter:none}}
/* «СЕКУНД» в колонке шириной 1/4 экрана — самая узкая ячейка таймера */
.cd__cell span{display:block;font-weight:600;font-size:clamp(15px,4.9vw,19px);line-height:1.5;opacity:.82;text-transform:uppercase;letter-spacing:.04em}

.await{
  position:relative;z-index:2;font-weight:600;font-size:clamp(18px,5.6vw,22px);line-height:1.55;
  text-transform:uppercase;letter-spacing:.03em;
}

/* ============================================================
   ФУТЕР
   ============================================================ */
.foot{position:relative;padding:40px 20px calc(88px + env(safe-area-inset-bottom));text-align:center;overflow:hidden}
.foot__logo{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:7px}
.foot__mark{width:38px;height:38px;color:var(--brown);opacity:.85}
.foot__name{
  font-weight:700;font-size:13px;letter-spacing:.42em;text-indent:.42em;
  text-transform:lowercase;opacity:.9;
}
.foot__soc{position:relative;z-index:2;display:flex;justify-content:center;gap:14px;margin-top:26px}
.foot__soc a{
  width:44px;height:44px;border-radius:50%;background:var(--brown);
  display:grid;place-items:center;
  transition:transform .3s var(--ease),box-shadow .3s;
  box-shadow:0 6px 18px rgba(81,57,43,.22);
}
.foot__soc a:active{transform:scale(.9)}
.foot__soc svg{width:20px;height:20px;fill:#f2e9d8}
/* строка с именами лежит поверх пиона (z-index выше), но тонкие буквы
   на тёмных листьях терялись — подкладываем кремовый ореол из :root */
.foot__copy{position:relative;z-index:3;margin-top:24px;font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.85;text-shadow:var(--halo)}

/* ============================================================
   SCROLL-REVEAL
   ============================================================ */
.reveal{opacity:0;will-change:transform,opacity}
.reveal[data-anim="up"]{transform:translateY(38px)}
.reveal[data-anim="left"]{transform:translateX(-46px)}
.reveal[data-anim="zoom"]{transform:scale(.88)}
.reveal[data-anim="clip"]{transform:translateY(26px)}
/* clip-path вешаем на дочернюю картинку: если задать его на сам элемент,
   IntersectionObserver перестаёт видеть его пересечение и reveal не сработает */
.reveal[data-anim="clip"] img{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--ease)}
.reveal[data-anim="clip"].is-in img{clip-path:inset(0 0 0 0)}
.reveal[data-anim="split"]{transform:translateY(24px);filter:blur(9px)}
.reveal.is-in{
  opacity:1;transform:none;filter:none;
  transition:opacity .95s var(--ease),transform 1.05s var(--ease),filter .9s var(--ease);
}
.reveal[data-anim="rule"]{opacity:1}

/* побуквенное появление заголовков */
.ttl .ch,.await .ch{display:inline-block;opacity:0;transform:translateY(24px) rotateX(-60deg)}
.ttl.is-in .ch,.await.is-in .ch{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--i) * 38ms);
}

/* ============================================================
   УЗКИЕ ЭКРАНЫ (320–389: iPhone SE, старые Android)
   Колонка текста почти не сжимается — поля фиксированные, кегль уже на
   минимуме clamp. При базовых размерах декора цветы наезжали на заголовки
   («Дорогой Гость», «LIFE GARDEN», «Сбор Гостей»). Поэтому здесь цветы
   меньше и уведены дальше за край: видимая часть каждого — 30–55px,
   ровно настолько, чтобы читаться как букет в углу, а не как фон.
   ============================================================ */
@media (max-width:389px){
  .s{padding-left:16px;padding-right:16px}
  /* колонке письма нужно чуть больше ширины: при читаемых 12px строка
     «Вы не просто так получили это письмо!» в 86vw не помещалась */
  :root{--w:min(320px,92vw)}

  .deco--orchid-lilac-1{width:82px;left:-48px}
  .deco--protea-1{width:74px;right:-36px}
  .deco--orchid-cream-1{width:76px;left:-48px}
  .deco--bud-1{width:118px;right:-80px}
  .deco--peony-plum-1{width:170px;left:-118px}
  .deco--bud-2{width:110px;right:-70px}
  .deco--peony-cream-1{width:180px;right:-124px}
  .deco--orchid-lilac-2{width:82px;left:-50px}
  .deco--protea-2{width:80px;right:-44px}
  .deco--peony-plum-2{width:165px;left:-116px}
  .deco--bud-3{width:104px;right:-64px}
  .deco--peony-cream-2{width:188px;left:-132px}
  .deco--orchid-lilac-3{width:80px;right:-50px}
  .deco--peony-plum-3{width:165px;left:-124px}

  /* Кегль мелкого текста здесь НЕ уменьшаем — он и так на нижней границе
     читаемости. Ужимаем только то, что влияет на раскладку. */
  .lead,.wish{font-size:14px}
  .eyebrow{letter-spacing:.2em}

  /* «Алижон Рустамович» в колонке шириной ~125px не помещался в строку */
  .cards{gap:20px}
  .card figcaption h3{font-size:15px}
  .card figcaption p{letter-spacing:.14em}   /* кегль не трогаем — только разрядку */
  .cards--stack{max-width:220px}
}

/* ============================================================
   ПЛАНШЕТ / ДЕСКТОП
   ============================================================ */
@media (min-width:600px){
  .s{max-width:640px;padding:110px 32px}
  .ttl{font-size:52px}
  .ttl--sm{font-size:44px}
  /* места по бокам больше — мера строки шире, декор всё равно не задевается */
  .lead,.wish{font-size:16px;max-width:22em}
  .couple{font-size:58px}
  .date{max-width:420px}
  .date__lbl{font-size:13px}
  .small{font-size:13px}
  .city,.weekday{font-size:13px}
  .card figcaption p{font-size:11px}
  .date__val{font-size:98px;margin-top:18px}
  .date__sep{width:230px;margin:40px auto}
  .tl__item h3{font-size:48px}
  .tl__item b{font-size:34px}
  .photo{max-width:520px}
  .cd__cell b{font-size:56px}
  .cd__cell span{font-size:22px}
  .await{font-size:28px}
  .cards--stack{max-width:340px;gap:48px}
  .cards--2{max-width:440px;margin-left:auto;margin-right:auto;gap:34px}
  .envelope__inner{width:min(86vw,440px);margin-top:0}
  .env-title{font-size:68px}
  .env-kicker{font-size:22px}
  .env-note{font-size:12px}
  .seal{width:158px;height:158px;margin:28px 0 24px}
  .card figcaption h3{font-size:24px}
  .deco--orchid-lilac-1{width:150px;left:-50px}
  .deco--peony-plum-1,.deco--peony-plum-2,.deco--peony-plum-3{width:330px}
  .deco--peony-plum-3{left:-166px}   /* см. комментарий выше — не задеть .foot__copy */
  .deco--peony-cream-1,.deco--peony-cream-2{width:350px}
  .deco--bud-1,.deco--bud-2,.deco--bud-3{width:220px}
  .deco--orchid-lilac-2,.deco--orchid-lilac-3{width:150px}
  .deco--orchid-cream-1{width:140px;left:-52px}
  .deco--protea-1,.deco--protea-2{width:130px}
  .silk{width:104%;margin:12px 0 30px -2%}
  .music{width:54px;height:54px;right:24px;bottom:24px}
}

/* ============================================================
   ДЕСКТОП
   Колонку не растягиваем на всю ширину, а увеличиваем кегль —
   иначе мобильная вёрстка выглядит «потерянной» в пустоте.
   Ширина завязана на vw, чтобы по бокам всегда оставались поля
   под цветочный декор и он не наезжал на текст.
   ============================================================ */
@media (min-width:1000px){
  .s{max-width:min(880px,62vw);padding:120px 40px}
  .eyebrow{font-size:13px;letter-spacing:.28em}
  .ttl{font-size:58px}
  .ttl--sm{font-size:48px}
  .ttl--venue{font-size:86px}
  /* декор здесь уведён в боковые поля, колонка свободна целиком */
  .lead,.wish{font-size:17px;line-height:2;max-width:26em}
  .small{font-size:14px}
  .couple{font-size:68px}
  .date{max-width:520px}
  .date__val{font-size:120px}
  .date__lbl{font-size:14px}
  .date__sep{width:280px;margin:46px auto}
  .weekday{font-size:14px;margin-top:52px}
  .city{font-size:14px}
  .foot__copy{font-size:12px}
  .card figcaption p{font-size:12px}
  .tl__item{padding:26px 0}
  .tl__item h3{font-size:56px}
  .tl__item b{font-size:38px}
  .photo{max-width:620px}
  .cd__cell b{font-size:66px}
  .cd__cell span{font-size:24px}
  .await{font-size:34px}
  .card figcaption h3{font-size:27px}
  .cards--2{max-width:560px;gap:44px}
  .cards--stack{max-width:380px;gap:56px}

  /* Декор уводим в боковые поля: на мобиле он подпирает текст с краёв,
     а в широкой вёрстке при тех же отступах ложился прямо на буквы.
     Отступы в vw, а не в px: поле сбоку равно (100vw - 62vw)/2 = 19vw,
     поэтому при любой ширине экрана цветок остаётся в поле и не создаёт
     горизонтального выезда. */
  .deco--orchid-lilac-1{width:170px;top:120px;left:-10.5vw}
  .deco--protea-1{width:150px;bottom:140px;right:-9.5vw}
  .deco--orchid-cream-1{width:160px;top:60px;left:-10vw}
  .deco--bud-1{width:230px;bottom:-50px;right:-13vw}
  .deco--peony-plum-1{width:340px;top:-80px;left:-18vw}
  .deco--bud-2{width:215px;bottom:-40px;right:-12.5vw}
  .deco--peony-cream-1{width:355px;top:-60px;right:-18.5vw}
  .deco--orchid-lilac-2{width:170px;bottom:60px;left:-10.5vw}
  .deco--protea-2{width:155px;top:44px;right:-9.5vw}
  .deco--peony-plum-2{width:330px;bottom:-40px;left:-17.5vw}
  .deco--bud-3{width:205px;top:-10px;right:-12vw}
  .deco--peony-cream-2{width:360px;top:-30px;left:-18.5vw}
  .deco--orchid-lilac-3{width:170px;top:-146px;right:-10.5vw}
  .deco--peony-plum-3{width:340px;bottom:-90px;left:-18vw}

  /* лёгкий hover для кликабельного на десктопе */
  .btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(81,57,43,.3)}
  .foot__soc a:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(81,57,43,.3)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.2s!important}
  .petals,.sparkles{display:none}
}