/* ============================================================
   Свадебное приглашение · Алишер & Нодира · Шерзод & Ширин
   Палитра и типографика — по референсу inviteyou.uz
   ============================================================ */

/* Шрифты подключены в 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);
  --gold:#c9a24a;
  --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);
  --w:320px;
}

*,*::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}
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(201,162,74,.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(201,162,74,.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(201,162,74,.42),transparent 62%);
  animation:glow 2.8s ease-in-out infinite;
}
.seal__ripple{
  position:absolute;inset:6%;border-radius:50%;border:1px solid rgba(201,162,74,.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;
  font-size:11px;line-height:1.55;text-transform:uppercase;letter-spacing:.06em;
  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(201,162,74,.95),rgba(201,162,74,0) 70%);
  animation:twinkle var(--dur,4s) ease-in-out infinite;
}
@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),#e5c884,var(--gold))}

.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}

.s{
  position:relative;width:100%;max-width:520px;margin:0 auto;
  padding:88px 20px;text-align:center;overflow:visible;
}
.eyebrow{font-weight:700;font-size:11px;letter-spacing:.28em;text-transform:uppercase;opacity:.7;margin-bottom:14px}
.ttl{font-weight:600;font-size:39px;line-height:1.5;letter-spacing:.01em}
.ttl--sm{font-size:34px}
.ttl--venue{font-size:clamp(34px,11.5vw,51px);line-height:1.5;letter-spacing:.02em;white-space:nowrap}
.small{font-weight:700;font-size:10px;line-height:2.2;letter-spacing:.08em}
.lead{font-weight:700;font-size:10.5px;line-height:2.1;letter-spacing:.04em;margin-top:12px}

.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)}

/* --- Декор --- */
.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)}}

.deco--orchid-1{width:96px;top:150px;left:-30px;scale:-1 1}
.deco--protea-1{width:86px;bottom:120px;right:-22px}
.deco--bud-1{width:150px;bottom:-40px;right:-46px}
.deco--peony-red-1{width:210px;top:-70px;left:-84px}
.deco--bud-2{width:140px;bottom:-30px;right:-52px}
.deco--peony-white-1{width:230px;top:-60px;right:-96px}
.deco--orchid-2{width:96px;bottom:60px;left:-34px}
.deco--protea-2{width:92px;top:40px;right:-26px}
.deco--peony-red-2{width:200px;bottom:-50px;left:-88px}
.deco--bud-3{width:130px;top:-20px;right:-46px}
.deco--peony-white-2{width:240px;top:-40px;left:-100px;scale:-1 1}
.deco--orchid-3{width:92px;top:-140px;right:-38px}
.deco--peony-red-3{width:220px;bottom:-96px;left:-104px}

/* ============================================================
   1. ДОРОГОЙ ГОСТЬ
   ============================================================ */
.s--guest{padding-top:96px}
.couples{margin-top:22px;position:relative;z-index:2}
.couple{
  font-family:var(--cal);font-weight:800;font-size:40px;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%,#c9a24a 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}}

.couple-sep{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px auto;width:180px}
.couple-sep i{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(81,57,43,.4),transparent);transform:scaleX(0);transition:transform .9s var(--ease)}
.couple-sep.is-in i{transform:scaleX(1)}
.couple-sep b{color:var(--gold);font-size:10px;animation:beat 1.8s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}30%{transform:scale(1.35)}45%{transform:scale(1.1)}}

.hint{margin-top:40px;font-weight:700;font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.7}
.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:11px;line-height:1;letter-spacing:.34em;text-indent:.34em;
  text-transform:uppercase;opacity:.62;
}
.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(--gold);font-size:11px;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:11px;letter-spacing:.3em;text-transform:uppercase;opacity:.65}

/* ============================================================
   3. РЕСТОРАН
   ============================================================ */
.city{font-weight:700;font-size:11px;letter-spacing:.26em;text-transform:uppercase;opacity:.7;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)}
.tl__item h3{font-weight:600;font-size:38px;line-height:1.55;letter-spacing:.01em}
.tl__item b{display:block;font-weight:700;font-size:28px;line-height:1.55;opacity:.85}

/* ============================================================
   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}
.card__ph{
  position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:180px 180px 6px 6px;
  background:linear-gradient(160deg,#e6dcc6,#ded1b6);
  display:grid;place-items:center;
  box-shadow:0 8px 22px rgba(81,57,43,.10);
}
.card__ph--img{box-shadow:0 10px 28px rgba(81,57,43,.18)}
/* запасной вариант пропорций для браузеров без aspect-ratio (iOS < 15) */
@supports not (aspect-ratio:3/4){
  .card__ph{height:0;padding-bottom:133.33%}
  .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(201,162,74,.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:7px;border:1px solid rgba(238,230,211,.6);
  border-radius:174px 174px 3px 3px;pointer-events:none;
}
.card figcaption{margin-top:12px}
.card figcaption h3{font-weight:600;font-size:19px;line-height:1.4}
.card figcaption p{font-weight:700;font-size:9px;letter-spacing:.24em;text-transform:uppercase;opacity:.6;margin-top:3px}

/* ============================================================
   7. ПОЖЕЛАНИЯ
   ============================================================ */
.wish{position:relative;z-index:2;margin-top:18px;font-weight:700;font-size:10.5px;line-height:2.05;letter-spacing:.04em}

/* ============================================================
   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: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}}
.cd__cell span{display:block;font-weight:600;font-size:19px;line-height:1.5;opacity:.7;text-transform:uppercase;letter-spacing:.04em}

.await{
  position:relative;z-index:2;font-weight:600;font-size: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:.85;
}
.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}
.foot__copy{position:relative;z-index:3;margin-top:24px;font-weight:700;font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}

/* ============================================================
   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);
}

/* ============================================================
   ПЛАНШЕТ / ДЕСКТОП
   ============================================================ */
@media (min-width:600px){
  .s{max-width:640px;padding:110px 32px}
  .ttl{font-size:52px}
  .ttl--sm{font-size:44px}
  .lead,.wish{font-size:13px}
  .couple{font-size:56px}
  .date{max-width:420px}
  .date__lbl{font-size:13px}
  .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-1{width:150px;left:-50px}
  .deco--peony-red-1,.deco--peony-red-2,.deco--peony-red-3{width:330px}
  .deco--peony-white-1,.deco--peony-white-2{width:350px}
  .deco--bud-1,.deco--bud-2,.deco--bud-3{width:220px}
  .deco--orchid-2,.deco--orchid-3{width:150px}
  .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:12px;letter-spacing:.3em}
  .ttl{font-size:58px}
  .ttl--sm{font-size:48px}
  .ttl--venue{font-size:86px}
  .lead,.wish{font-size:15px;line-height:2.2}
  .small{font-size:12px}
  .couple{font-size:70px}
  .couple-sep{width:230px}
  .date{max-width:520px}
  .date__val{font-size:120px}
  .date__lbl{font-size:14px}
  .date__sep{width:280px;margin:46px auto}
  .weekday{font-size:13px;margin-top:52px}
  .city{font-size:13px}
  .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-1{width:170px;top:130px;left:-10.5vw}
  .deco--protea-1{width:150px;bottom:130px;right:-9.5vw}
  .deco--bud-1{width:230px;bottom:-50px;right:-13vw}
  .deco--peony-red-1{width:340px;top:-80px;left:-18vw}
  .deco--bud-2{width:220px;bottom:-40px;right:-12.5vw}
  .deco--peony-white-1{width:360px;top:-60px;right:-18.5vw}
  .deco--orchid-2{width:170px;bottom:70px;left:-10.5vw}
  .deco--protea-2{width:150px;top:50px;right:-9.5vw}
  .deco--peony-red-2{width:330px;bottom:-40px;left:-17.5vw}
  .deco--bud-3{width:210px;top:-10px;right:-12vw}
  .deco--peony-white-2{width:360px;top:-30px;left:-18.5vw}
  .deco--orchid-3{width:170px;top:-150px;right:-10.5vw}
  .deco--peony-red-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}
}