/* ═══════════════════════════════════════════════════════════════════
   ПОЛИНА · ОДИН ГОД ВМЕСТЕ
   Стиль: Coquette / Pink Diary
   Плотный коллаж: наклейки, билеты, марки, обложки дисков, фото
   внахлёст. Регулируется одним параметром — CONFIG.COLLAGE.density
   в scripts/main.js (1 = плотно, 0.6 = спокойнее, 0 = без коллажа).
   ─────────────────────────────────────────────────────────────────
   Содержание:
   1. Токены (цвета, шрифты, тени, отступы)
   2. База и типографика
   3. Слои-эффекты (зерно, блёстки, лепестки)
   4. Общие элементы (декор, скотч, плейсхолдеры фото, кнопки)
   5. Навигация-точки
   6. Экран 1 — Обложка
   7. Экран 2 — Письмо
   8. Экран 3 — Наши моменты
   9. Экран 4 — Место
   10. Экран 5 — Финал
   11. Брейкпоинты 480 / 768 / 1024 / 1440
   12. prefers-reduced-motion
   ═══════════════════════════════════════════════════════════════════ */

/* ══ 1. ТОКЕНЫ ══════════════════════════════════════════════════ */
:root{
  /* палитра */
  --cream:#FDF7F4;
  --blush:#F7DDE2;
  --rose:#E9A6B8;
  --raspberry:#C05A76;
  /* Тот же розовый, но глубже — только для мелкого текста (капсы, подписи),
     чтобы контраст проходил норму 4.5:1. На вид почти не отличается. */
  --raspberry-deep:#A94A63;
  --wine:#4A2230;
  --lavender:#E6DAF2;
  --champagne:#D9BFA0;
  --glass:rgba(255,255,255,.55);
  --wine-70:rgba(74,34,48,.72);
  --wine-45:rgba(74,34,48,.48);

  /* шрифты */
  --serif:'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --hand:'Caveat', 'Segoe Script', cursive;
  --sans:'Manrope', 'Helvetica Neue', system-ui, sans-serif;

  /* мягкие розовые тени (никогда не серо-чёрные) */
  --sh-s:0 2px 10px rgba(200,120,140,.14);
  --sh-m:0 14px 34px -14px rgba(200,120,140,.34), 0 2px 8px rgba(74,34,48,.05);
  --sh-l:0 32px 70px -26px rgba(200,120,140,.45), 0 4px 14px rgba(74,34,48,.06);

  /* движение */
  --ease:cubic-bezier(.22,1,.36,1);
  --t-fast:400ms;
  --t-mid:650ms;
  --t-slow:900ms;

  /* сетка */
  --gut:18px;              /* боковые поля: плотная вёрстка */
  --maxw:1180px;
  --radius:18px;

  /* z-слои */
  --z-photo:0; --z-veil:1; --z-deco:2; --z-fx:3; --z-content:4; --z-nav:80; --z-grain:100;
}

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

/* ══ 2. БАЗА И ТИПОГРАФИКА ═════════════════════════════════════ */
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
html,body{max-width:100%;overflow-x:hidden}   /* никакого горизонтального скролла */
body{
  margin:0;
  background:var(--cream);
  color:var(--wine);
  font:400 1rem/1.65 var(--sans);
  letter-spacing:.005em;
  /* мягкая розово-лавандовая заливка как основа */
  background-image:
    radial-gradient(120% 80% at 20% -10%, #FBEDF1 0%, rgba(253,247,244,0) 60%),
    radial-gradient(90% 70% at 100% 20%, rgba(230,218,242,.5) 0%, rgba(253,247,244,0) 55%);
  background-attachment:fixed;
}
img{max-width:100%;display:block;border:0}
a{color:inherit;text-decoration:none}
b,strong{font-weight:600}
code{font:500 .85em/1 ui-monospace,SFMono-Regular,Menlo,monospace;background:rgba(247,221,226,.7);padding:.18em .45em;border-radius:5px;color:var(--raspberry-deep)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* аккуратный фокус вместо системного — но фокус всегда виден */
:focus-visible{outline:2px solid var(--raspberry);outline-offset:4px;border-radius:6px}

/* каркас экрана */
.screen{
  position:relative;
  min-height:100vh;
  min-height:100svh;                     /* svh — чтобы не прыгало под адресной строкой */
  padding:clamp(48px,7vh,88px) var(--gut);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;                       /* декор не создаёт скролл */
  isolation:isolate;
}

/* заголовки */
.title{
  font:500 clamp(2.1rem,8.5vw,3.6rem)/1.05 var(--serif);
  font-style:italic;letter-spacing:-.015em;margin:.1em 0 0;
}
.hand{
  font:600 clamp(2.3rem,11vw,4rem)/1 var(--hand);
  color:var(--raspberry);margin:0 0 clamp(16px,3vw,28px);
  transform:rotate(-2deg);text-align:center;
}
.eyebrow{
  font:500 .7rem/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;
  color:var(--raspberry-deep);margin:0;
}
.lead{
  max-width:44ch;margin:1em auto 0;color:var(--wine-70);
  font-size:.94rem;text-align:center;
}
.head{text-align:center;position:relative;z-index:var(--z-content);margin-bottom:clamp(18px,3vw,32px)}

/* появление по скроллу */
.reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease);
  transition-delay:var(--d,0ms);
}
.reveal.is-in{opacity:1;transform:none}

/* ══ 3. СЛОИ-ЭФФЕКТЫ ══════════════════════════════════════════ */

/* плёночное зерно поверх всего — 4% */
.grain{
  position:fixed;inset:-50%;z-index:var(--z-grain);pointer-events:none;
  opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* контейнер частиц внутри секции */
.fx{position:absolute;inset:0;z-index:var(--z-fx);pointer-events:none;overflow:hidden}

/* блёстки — как на флаконе Miss Dior */
.spark{
  position:absolute;width:var(--s,10px);height:var(--s,10px);
  background:url("../assets/stickers/sparkle.svg") center/contain no-repeat;
  opacity:0;transform:scale(.3);
  animation:twinkle var(--dur,3.2s) var(--ease) var(--delay,0s) infinite;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.9));
}
@keyframes twinkle{
  0%,100%{opacity:0;transform:scale(.3) rotate(0)}
  45%{opacity:.95;transform:scale(1) rotate(35deg)}
  70%{opacity:.25;transform:scale(.7) rotate(60deg)}
}

/* падающие лепестки */
.petal{
  position:absolute;top:-12%;left:var(--x,50%);
  width:var(--s,22px);
  opacity:0;
  animation:fall var(--dur,15s) linear var(--delay,0s) infinite;
  will-change:transform;
}
@keyframes fall{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}
  8%{opacity:var(--o,.75)}
  50%{transform:translate3d(var(--drift,30px),52vh,0) rotate(180deg)}
  90%{opacity:var(--o,.75)}
  100%{opacity:0;transform:translate3d(calc(var(--drift,30px) * -.6),108vh,0) rotate(400deg)}
}

/* бледный паттерн поцелуев (референс) */
.pattern-kiss{
  position:absolute;inset:0;z-index:var(--z-photo);pointer-events:none;
  background:url("../assets/stickers/kiss.svg") 0 0/88px repeat;
  opacity:.07;
  mask-image:radial-gradient(120% 80% at 50% 40%,transparent 30%,#000 100%);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 40%,transparent 30%,#000 100%);
}

/* ══ 4. ОБЩИЕ ЭЛЕМЕНТЫ ════════════════════════════════════════ */

/* декоративные стикеры-слои */
.deco{position:absolute;z-index:var(--z-deco);pointer-events:none;user-select:none}
.deco--bow-tl{width:clamp(58px,14vw,104px);top:clamp(14px,4vw,40px);left:calc(var(--gut) * -.35);transform:rotate(-16deg);opacity:.9}
.deco--bow-br{width:clamp(46px,11vw,84px);bottom:clamp(70px,12vh,120px);right:calc(var(--gut) * -.2);transform:rotate(13deg);opacity:.75}
.deco--record{width:clamp(64px,17vw,132px);top:18%;right:-28px;opacity:.5;filter:blur(.3px)}
/* В «Моментах» секция очень высокая, поэтому декор привязан не к процентам,
   а к краям — иначе он прячется за полароидами и выглядит обрезком. */
.deco--record-2{width:clamp(70px,16vw,124px);bottom:clamp(56px,8vh,120px);left:-34px;opacity:.42}
.deco--heart-1{width:clamp(26px,6vw,44px);top:clamp(92px,13vh,170px);right:clamp(10px,5vw,44px);opacity:.7;transform:rotate(12deg)}
.deco--heart-2{width:clamp(24px,5vw,38px);top:16%;left:8%;opacity:.6;transform:rotate(-14deg)}
.deco--bow-f1{width:clamp(50px,12vw,88px);bottom:8%;right:4%;transform:rotate(9deg);opacity:.7}
.deco--petal-1{width:clamp(22px,5vw,34px);top:9%;left:7%;transform:rotate(28deg);opacity:.85}
.deco--petal-2{width:clamp(18px,4vw,28px);top:24%;right:9%;transform:rotate(-42deg);opacity:.7}
.deco--petal-3{width:clamp(20px,5vw,32px);bottom:14%;left:11%;transform:rotate(112deg);opacity:.6}

/* полоски скотча */
.tape{
  position:absolute;width:clamp(66px,16vw,96px);height:clamp(20px,5vw,28px);
  background:linear-gradient(170deg,rgba(255,255,255,.62),rgba(233,166,184,.42));
  box-shadow:0 2px 8px rgba(192,90,118,.16);
  border-left:1px dashed rgba(255,255,255,.75);border-right:1px dashed rgba(255,255,255,.75);
  backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);
}
.tape--tl{top:-13px;left:16px;transform:rotate(-8deg)}
.tape--tr{top:-13px;right:16px;transform:rotate(7deg)}
.tape--tc{top:-14px;left:50%;transform:translateX(-50%) rotate(-3deg)}

/* плейсхолдер фото: розовый градиент + бант (не битая картинка) */
.ph{
  position:absolute;inset:0;
  display:grid;place-items:center;align-content:center;gap:10px;
  background:
    radial-gradient(circle at 32% 22%,rgba(255,255,255,.85),rgba(0,0,0,0) 45%),
    linear-gradient(148deg,#FBE6EB 0%,#F2C6D0 42%,#E6DAF2 100%);
}
.ph::after{                            /* мягкий блик-глянец */
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 38%);
}
.ph__bow{width:min(38%,86px);opacity:.92;position:relative;z-index:1}
.ph__label{
  position:relative;z-index:1;
  font:500 .62rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;
  color:var(--raspberry-deep);opacity:.85;
}
/* Широкий плейсхолдер (обложка и место): бант становится еле заметным
   водяным знаком, подпись уходит в угол — чтобы не мешать тексту поверх. */
.ph--wide .ph__bow{width:min(34%,240px);opacity:.16;filter:blur(.4px)}
.ph--wide .ph__label{
  position:absolute;right:16px;bottom:14px;
  opacity:.5;font-size:.55rem;
}

/* Настоящее фото (класс .photo) лежит поверх плейсхолдера и плавно
   проявляется, когда загрузится. Если файла нет — остаётся плейсхолдер.
   Важно: правила именно для .photo, а не для любого img, — иначе они
   задевают бант внутри плейсхолдера. */
.photo{
  position:relative;z-index:1;display:block;
  width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity var(--t-slow) var(--ease);
}
.photo.is-loaded{opacity:1}

/* явные пометки «здесь твой текст» */
.is-ph{
  position:relative;
  border:1px dashed rgba(192,90,118,.5);border-radius:12px;
  background:rgba(247,221,226,.3);
  color:var(--wine-70);font-style:italic;
  padding:20px 18px 16px;
}
.is-ph::before{
  content:"заменить · " attr(data-ph);
  position:absolute;top:-10px;left:14px;
  background:var(--raspberry-deep);color:#fff;
  font:600 .56rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;font-style:normal;
  padding:5px 9px;border-radius:999px;white-space:nowrap;
  box-shadow:var(--sh-s);
}
.is-ph--inline{display:inline-block;padding:6px 12px 4px;border-radius:8px}
.is-ph--inline::before{top:-9px;left:8px;font-size:.5rem;padding:4px 7px}

/* эмодзи в тексте — своим шрифтом и без курсива: иначе браузер лепит
   искажённый глиф из антиквы и строка едет */
.emo{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-style:normal;font-variant:normal;
}

/* кнопка «дальше» */
.next{
  position:relative;z-index:var(--z-content);
  margin-top:clamp(22px,4vh,44px);
  display:inline-flex;align-items:center;gap:10px;
  min-height:48px;padding:0 26px;
  border:1px solid var(--champagne);border-radius:999px;
  font:500 .74rem/48px var(--sans);letter-spacing:.24em;text-transform:uppercase;
  color:var(--wine);background:rgba(255,255,255,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.next span{transition:transform var(--t-fast) var(--ease)}
.next:hover{background:var(--blush);box-shadow:var(--sh-m)}
.next:hover span{transform:translateY(3px)}
.next:active{transform:scale(.98)}
.next--light{color:var(--wine);background:rgba(255,255,255,.66);border-color:rgba(255,255,255,.8)}

/* ══ 4b. ЗАМОК ПРИ ВХОДЕ — КАЛЕНДАРЬ ══════════════════════════
   Пока на <html> висит класс is-locked, сайт скрыт и виден календарь.
   ───────────────────────────────────────────────────────────── */
.gate{display:none}
html.is-locked{overflow:hidden}
html.is-locked body{overflow:hidden}
html.is-locked main{visibility:hidden}
html.is-locked .dots,html.is-locked .music{display:none}
html.is-locked .gate{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  padding:clamp(16px,4vw,32px) clamp(14px,4vw,28px);
  overflow-y:auto;
}

.gate__bg{
  position:fixed;inset:0;
  background:
    radial-gradient(115% 80% at 50% 12%,#FDF7F4 0%,#FBE9EE 45%,#F3D3DC 100%),
    linear-gradient(180deg,rgba(230,218,242,.4),rgba(0,0,0,0) 60%);
}
.gate__bg::after{                      /* бледный паттерн поцелуев */
  content:"";position:absolute;inset:0;
  background:url("../assets/stickers/kiss.svg") center/84px repeat;
  opacity:.05;
  mask-image:radial-gradient(80% 60% at 50% 45%,transparent 20%,#000 100%);
  -webkit-mask-image:radial-gradient(80% 60% at 50% 45%,transparent 20%,#000 100%);
}

/* лист календаря */
.gate__card{
  position:relative;z-index:1;
  width:100%;max-width:392px;
  margin:auto;
  padding:clamp(30px,7vw,40px) clamp(16px,5vw,28px) clamp(24px,6vw,32px);
  background:linear-gradient(168deg,#FFFDFC 0%,#FFF7F5 100%);
  border-radius:6px;text-align:center;
  box-shadow:var(--sh-l),inset 0 0 40px rgba(233,166,184,.1);
  transform:rotate(-.6deg);
  animation:gate-in var(--t-slow) var(--ease) both;
}
@keyframes gate-in{
  from{opacity:0;transform:rotate(-.6deg) translateY(22px) scale(.98)}
  to{opacity:1;transform:rotate(-.6deg) translateY(0) scale(1)}
}
/* пружинка календаря сверху */
.gate__rings{
  /* ширина кратна 26px, чтобы крайние кольца не обрезались */
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  width:260px;max-width:76%;height:18px;
  background-image:radial-gradient(circle at 50% 50%,
    rgba(0,0,0,0) 33%,rgba(217,191,160,.95) 35%,rgba(217,191,160,.95) 50%,rgba(0,0,0,0) 52%);
  background-size:26px 18px;background-repeat:repeat-x;
}

.gate__eyebrow{
  margin:0;font:500 .6rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;
  color:var(--raspberry-deep);
}
.gate__title{
  margin:.45em 0 .2em;
  font:600 clamp(1.9rem,9vw,2.5rem)/1 var(--hand);
  color:var(--wine);transform:rotate(-1.2deg);
}
.gate__lead{
  margin:0 auto clamp(20px,5vw,26px);max-width:26ch;
  font-size:.85rem;line-height:1.55;color:var(--wine-70);
}

/* ── сам календарь ── */
.cal{text-align:center}
.cal__head{
  display:flex;align-items:center;justify-content:center;gap:2px;
  margin-bottom:12px;
}
.cal__nav{
  width:38px;height:44px;flex:none;
  display:grid;place-items:center;
  border:0;background:none;cursor:pointer;border-radius:10px;
  font:400 1.15rem/1 var(--serif);color:var(--raspberry-deep);
  transition:background var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease);
}
.cal__nav:hover{background:rgba(247,221,226,.8)}
.cal__nav:active{transform:scale(.94)}
.cal__nav:disabled{opacity:.25;cursor:default}
.cal__label{
  flex:1;min-width:0;
  font:500 .8rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--wine);
}

.cal__week{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;
  padding-bottom:8px;margin-bottom:6px;
  border-bottom:1px solid rgba(217,191,160,.55);
}
.cal__week span{
  font:500 .56rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--raspberry-deep);opacity:.75;
}

.cal__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.cal__day{
  position:relative;
  min-height:44px;border:0;border-radius:12px;
  background:none;cursor:pointer;
  font:400 .95rem/1 var(--sans);color:var(--wine);
  font-variant-numeric:tabular-nums;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.cal__day--empty{pointer-events:none}
.cal__day:hover{background:rgba(247,221,226,.75)}
.cal__day.is-sel{color:var(--raspberry-deep);font-weight:600}
.cal__day.is-sel::after{         /* кружок «от руки» вокруг выбранного дня */
  content:"";position:absolute;inset:-2px;
  background:url("../assets/stickers/circle.svg") center/contain no-repeat;
  animation:circle-in var(--t-fast) var(--ease) both;
}
@keyframes circle-in{from{opacity:0;transform:scale(.75) rotate(-8deg)}to{opacity:1;transform:none}}

/* сообщения и кнопка */
.gate__msg{
  min-height:2.4em;margin:14px 0 0;
  font:400 1.15rem/1.25 var(--hand);color:var(--raspberry-deep);
}
.gate__msg.is-ok{color:var(--raspberry)}
.gate__btn{
  margin-top:6px;min-height:50px;padding:0 34px;
  border:1px solid var(--rose);border-radius:999px;
  background:rgba(255,255,255,.7);color:var(--wine);
  font:500 .72rem/50px var(--sans);letter-spacing:.24em;text-transform:uppercase;
  cursor:pointer;
  transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease);
}
.gate__btn:hover:not(:disabled){background:var(--blush);box-shadow:var(--sh-m)}
.gate__btn:active:not(:disabled){transform:scale(.98)}
.gate__btn:disabled{opacity:.4;cursor:default}

/* неверная дата — мягкое покачивание, без резкости */
.gate__card.is-wrong{animation:gate-shake 480ms var(--ease)}
@keyframes gate-shake{
  0%,100%{transform:rotate(-.6deg) translateX(0)}
  20%{transform:rotate(-.6deg) translateX(-7px)}
  45%{transform:rotate(-.6deg) translateX(6px)}
  70%{transform:rotate(-.6deg) translateX(-3px)}
}

/* верная дата — лист уплывает, открывается сайт */
.gate.is-out{
  opacity:0;pointer-events:none;
  transition:opacity var(--t-slow) var(--ease);
}
.gate.is-out .gate__card{
  transform:rotate(-.6deg) translateY(-16px) scale(.97);
  transition:transform var(--t-slow) var(--ease);
}

/* ══ 5. НАВИГАЦИЯ-ТОЧКИ ═══════════════════════════════════════ */
.dots{
  position:fixed;right:14px;top:50%;transform:translateY(-50%);
  z-index:var(--z-nav);display:none;flex-direction:column;
}
.dots__i{
  width:44px;height:40px;display:grid;place-items:center;position:relative;
}
.dots__i::after{
  content:"";width:9px;height:9px;border-radius:50%;
  border:1.5px solid var(--rose);background:transparent;
  transition:all var(--t-fast) var(--ease);
}
.dots__i:hover::after{background:var(--rose)}
.dots__i.is-active::after{background:var(--raspberry);border-color:var(--raspberry);transform:scale(1.45)}
.dots__i::before{                       /* подпись при наведении */
  content:attr(data-label);
  position:absolute;right:46px;top:50%;transform:translateY(-50%) translateX(6px);
  font:500 .6rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--raspberry-deep);background:rgba(255,255,255,.8);
  padding:6px 10px;border-radius:999px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:all var(--t-fast) var(--ease);
  box-shadow:var(--sh-s);
}
.dots__i:hover::before,.dots__i:focus-visible::before{opacity:1;transform:translateY(-50%)}

/* ══ 6. ЭКРАН 1 — ОБЛОЖКА ═════════════════════════════════════ */
.cover{text-align:center;justify-content:center}
.cover__photo{position:absolute;inset:0;z-index:var(--z-photo)}
.cover__veil{
  position:absolute;inset:0;z-index:var(--z-veil);
  background:
    radial-gradient(115% 85% at 50% 38%,rgba(253,247,244,.42) 0%,rgba(247,221,226,.72) 52%,rgba(253,247,244,.94) 100%),
    linear-gradient(180deg,rgba(230,218,242,.28) 0%,rgba(0,0,0,0) 40%);
}
.cover__inner{position:relative;z-index:var(--z-content);width:100%;max-width:760px}

/* дата в тонкой золотой рамке */
.date-frame{display:inline-flex;margin:0 auto}
.date-frame span{
  display:block;padding:11px 20px 9px;
  border:1px solid var(--champagne);border-radius:2px;
  font:400 .72rem/1 var(--sans);letter-spacing:.42em;text-transform:uppercase;
  color:var(--wine);background:rgba(255,255,255,.34);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.35);
}

.cover__name{
  font:500 clamp(4rem,25vw,10.5rem)/.86 var(--serif);
  font-style:italic;letter-spacing:-.03em;
  margin:clamp(8px,2vw,16px) 0 clamp(8px,1.6vw,14px);
  color:var(--wine);
  text-shadow:0 2px 26px rgba(255,255,255,.6);
}

.cover__sub{
  display:flex;align-items:center;justify-content:center;gap:.7em;flex-wrap:wrap;
  margin:0;
  font:400 clamp(.86rem,3.6vw,1.05rem)/1 var(--sans);
  letter-spacing:.2em;text-transform:lowercase;color:var(--wine-70);
}

/* буквы-вырезки из журналов — только одно слово на всём сайте */
.ransom{display:inline-flex;gap:2px;vertical-align:middle}
.ransom span{
  display:inline-block;padding:5px 8px 4px;
  font:700 clamp(1.05rem,4.8vw,1.45rem)/1 var(--serif);
  letter-spacing:0;text-transform:uppercase;   /* не наследуем lowercase у строки */
  box-shadow:1px 2px 5px rgba(192,90,118,.28);
}
.ransom span:nth-child(1){
  background:var(--raspberry-deep);color:var(--cream);transform:rotate(-5deg);
  clip-path:polygon(3% 4%,97% 0,100% 92%,88% 100%,10% 97%,0 88%);
}
.ransom span:nth-child(2){
  background:var(--blush);color:var(--wine);transform:rotate(4deg) translateY(-1px);
  font-family:var(--sans);font-weight:600;
  clip-path:polygon(0 6%,92% 0,100% 88%,84% 100%,6% 94%,2% 40%);
}
.ransom span:nth-child(3){
  background:var(--rose);color:var(--wine);transform:rotate(-2deg);
  font-style:italic;
  clip-path:polygon(4% 0,96% 6%,100% 90%,90% 100%,8% 96%,0 80%);
}

/* живой счётчик */
.counter{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;margin:clamp(18px,3.5vw,30px) auto 0;max-width:420px;
}
.counter__u{
  padding:14px 8px 12px;border-radius:14px;
  background:var(--glass);border:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:var(--sh-s);
}
@supports not (backdrop-filter:blur(2px)){ .counter__u{background:rgba(255,255,255,.82)} }
.counter__n{
  font:500 clamp(1.6rem,8vw,2.4rem)/1 var(--serif);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
  color:var(--wine);
}
.counter__u i{
  display:block;margin-top:6px;font-style:normal;
  font:500 .58rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;
  color:var(--raspberry-deep);
}
.counter__note{
  margin:11px 0 0;font:400 1.4rem/1 var(--hand);color:var(--raspberry-deep);
  transform:rotate(-1.5deg);
}

/* приглашение листать */
.cue{
  position:absolute;left:50%;bottom:clamp(22px,5vh,44px);transform:translateX(-50%);
  z-index:var(--z-content);
  display:grid;place-items:center;gap:6px;min-width:64px;min-height:64px;padding:6px;
}
.cue__txt{font:500 .62rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--raspberry-deep)}
.cue img{width:34px;animation:breathe 3.4s var(--ease) infinite}
@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(5px) scale(1.05)}}
.cue:hover img{animation-play-state:paused}

/* ══ 7. ЭКРАН 2 — ПИСЬМО ══════════════════════════════════════ */
.letter{background:linear-gradient(180deg,var(--cream) 0%,#FCF1F1 100%)}

.paper{
  position:relative;z-index:var(--z-content);
  width:100%;max-width:62ch;
  padding:clamp(30px,7vw,54px) clamp(22px,6vw,46px) clamp(38px,8vw,58px);
  background:linear-gradient(168deg,#FFFDFC 0%,#FFF8F6 100%);
  border-radius:4px;
  transform:rotate(-1.2deg);
  box-shadow:var(--sh-l),inset 0 0 40px rgba(233,166,184,.1);
}
.paper::after{                        /* тончайшая рамка-паспарту */
  content:"";position:absolute;inset:8px;border:1px solid rgba(217,191,160,.35);
  border-radius:2px;pointer-events:none;
}
.para{
  position:relative;margin:0 0 18px;
  font-size:clamp(.96rem,3.7vw,1.04rem);line-height:1.85;color:var(--wine);
}
.para:not(.is-ph)::first-letter{font-size:1.05em}
.paper__sign{
  margin:clamp(26px,5vw,38px) 0 0;text-align:right;
  font:500 1.75rem/1.2 var(--hand);color:var(--raspberry);
}
.paper__kiss{
  position:absolute;right:clamp(10px,4vw,26px);bottom:clamp(-14px,-2vw,-6px);
  width:clamp(42px,10vw,64px);opacity:.5;transform:rotate(14deg);
  pointer-events:none;
}

/* построчное появление абзацев */
.paper .para,.paper__sign{
  opacity:0;transform:translateY(14px);
  transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease);
  transition-delay:var(--d,0ms);
}
.paper.is-in .para,.paper.is-in .paper__sign{opacity:1;transform:none}

/* ══ 8. ЭКРАН 3 — НАШИ МОМЕНТЫ ════════════════════════════════ */
.grid{
  position:relative;z-index:var(--z-content);
  width:100%;max-width:var(--maxw);
  display:grid;grid-template-columns:1fr;gap:clamp(12px,3.5vw,22px);
}
/* ── НАСТОЯЩАЯ ПОЛАРОИДНАЯ РАМКА ──────────────────────────────
   Картинки вырезаны из references/Polaroid.png: 4 варианта с разными
   украшениями на нижней кромке (звёзды / букет / бант / сердечки).
   --fa — пропорции рамки, --wl/--wt/--ww/--wh — окно под фото
   в процентах от рамки. Фото ложится точно в это окно.
   ───────────────────────────────────────────────────────────── */
[data-frame="1"]{--fa:.8197;--wl:7.20%;--wt:6.56%;--ww:86.00%;--wh:72.79%}
[data-frame="2"]{--fa:.8185;--wl:7.26%;--wt:6.60%;--ww:86.29%;--wh:72.61%}
[data-frame="3"]{--fa:.8241;--wl:7.51%;--wt:6.51%;--ww:85.77%;--wh:72.96%}
[data-frame="4"]{--fa:.8224;--wl:7.20%;--wt:6.58%;--ww:86.00%;--wh:73.03%}

.polaroid{margin:0;position:relative;cursor:default}
.polaroid__card{
  position:relative;
  aspect-ratio:var(--fa,.82);
  /* тень по форме бумаги с неровным краем, а не по прямоугольнику */
  filter:drop-shadow(0 12px 22px rgba(200,120,140,.32));
  transition:filter var(--t-mid) var(--ease);
}
.polaroid__paper{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.polaroid__win{
  /* окно на волосок больше, чем чёрная область рамки, — чтобы по краям
     никогда не проглядывала чёрная полоска при округлении пикселей */
  position:absolute;
  left:calc(var(--wl) - .4%);top:calc(var(--wt) - .3%);
  width:calc(var(--ww) + .8%);height:calc(var(--wh) + .6%);
  z-index:1;overflow:hidden;background:var(--blush);
}
/* подпись — под рамкой: нижняя кромка занята украшениями */
.polaroid__cap{padding:12px 6px 0;text-align:center}
.polaroid__cap b{
  display:block;font:500 1.3rem/1.25 var(--hand);font-weight:600;color:var(--wine);
}
/* если подпись пустая (caption: ''), месяц остаётся один — без отбивки сверху */
.polaroid__cap i:first-child{margin-top:0}
.polaroid__cap i{
  display:block;margin-top:7px;font-style:normal;
  font:500 .56rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--raspberry-deep);opacity:.9;
}
/* при наведении/тапе — выпрямляется, тень глубже (сам наклон в разделе 14) */
.polaroid:hover .polaroid__card,
.polaroid:focus-within .polaroid__card,
.polaroid.is-touch .polaroid__card{filter:drop-shadow(0 24px 40px rgba(200,120,140,.45))}
/* коллажный зигзаг: карточки сдвинуты в стороны и слегка наезжают друг на друга */
.polaroid{z-index:1}
.polaroid:nth-child(even){margin-left:clamp(16px,7vw,30px);z-index:2}
.polaroid:nth-child(odd){margin-right:clamp(16px,7vw,30px)}
.polaroid:hover,.polaroid:focus-within,.polaroid.is-touch{z-index:5}

/* мелкий декор рядом с фото */
.polaroid:nth-child(3n+1)::after{
  content:"";position:absolute;right:-14px;top:-16px;width:34px;height:34px;
  background:url("../assets/stickers/heart.svg") center/contain no-repeat;
  opacity:.7;transform:rotate(14deg);pointer-events:none;
}
.polaroid:nth-child(4n+3)::after{
  content:"";position:absolute;left:-30px;bottom:52px;
  width:clamp(52px,7vw,66px);aspect-ratio:1;
  background:url("../assets/stickers/record.svg") center/contain no-repeat;
  opacity:.62;pointer-events:none;
  filter:drop-shadow(0 6px 12px rgba(200,120,140,.28));
}

/* ══ 9. ЭКРАН 4 — МЕСТО ═══════════════════════════════════════ */
.place{justify-content:flex-end;padding-bottom:clamp(48px,9vh,96px)}
.place__photo{position:absolute;inset:0;z-index:var(--z-photo)}
.place__veil{
  position:absolute;inset:0;z-index:var(--z-veil);
  background:
    linear-gradient(180deg,rgba(74,34,48,.16) 0%,rgba(0,0,0,0) 30%,rgba(74,34,48,.3) 100%),
    radial-gradient(100% 70% at 50% 100%,rgba(247,221,226,.35),rgba(0,0,0,0) 70%);
}
.glass{
  position:relative;z-index:var(--z-content);
  width:100%;max-width:520px;
  padding:clamp(26px,6vw,40px);
  border-radius:var(--radius);
  background:var(--glass);
  border:1px solid rgba(255,255,255,.72);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:var(--sh-l),inset 0 1px 0 rgba(255,255,255,.9);
  text-align:center;
}
@supports not (backdrop-filter:blur(2px)){ .glass{background:rgba(255,255,255,.88)} }
.glass__eyebrow{
  margin:0;font:500 .62rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;
  color:var(--raspberry-deep);
}
.glass__title{
  margin:.5em 0 .3em;
  font:500 clamp(1.7rem,7vw,2.5rem)/1.1 var(--serif);font-style:italic;color:var(--wine);
}
/* в названии места эмодзи вдобавок мельче кегля,
   иначе спорит по весу с антиквой и тянет строку вниз */
.glass__title .emo{
  font-size:.66em;line-height:1;
  margin-left:.14em;vertical-align:.04em;
}
.glass__date{
  margin:0 auto;display:inline-block;padding:7px 14px 6px;
  border-top:1px solid var(--champagne);border-bottom:1px solid var(--champagne);
  font:400 .68rem/1 var(--sans);letter-spacing:.34em;color:var(--wine);
}
.glass__text{margin:1.4em 0 0;font-size:.96rem;line-height:1.8;color:var(--wine)}

/* приклеенный полароид со вторым фото места.
   Лежит НИЖЕ стеклянной панели (z-index 3 против 4): если они
   пересекаются, край фото красиво размывается сквозь стекло. */
.place__shot{
  --pt:translateY(0);
  position:absolute;z-index:3;margin:0;
  width:min(46vw,178px);
  top:clamp(58px,11vh,120px);right:var(--gut);
  /* появление здесь своё — чтобы не потерять поворот и центрирование */
  opacity:0;filter:blur(7px);
  transform:var(--pt) rotate(var(--pr,4.5deg)) scale(.97);
  transition:opacity var(--t-slow) var(--ease),filter var(--t-slow) var(--ease),
             transform var(--t-slow) var(--ease);
}
.place__shot.is-in{opacity:1;filter:blur(0);transform:var(--pt) rotate(var(--pr,4.5deg))}
.place__shot:hover{--pr:0deg}
.place__shot .polaroid__card{
  filter:drop-shadow(0 14px 24px rgba(74,34,48,.28));
}

/* ══ 10. ЭКРАН 5 — ФИНАЛ ══════════════════════════════════════ */
.final{
  text-align:center;
  background:
    radial-gradient(90% 60% at 50% 0%,rgba(230,218,242,.5) 0%,rgba(253,247,244,0) 60%),
    linear-gradient(180deg,#FCF1F1 0%,var(--cream) 55%);
}
.final__phrase{
  position:relative;z-index:var(--z-content);
  margin:0 0 clamp(34px,6vw,54px);max-width:15ch;
  font:400 clamp(2.2rem,11vw,4.6rem)/1.02 var(--serif);
  letter-spacing:-.02em;color:var(--wine);
}
.final__phrase em{display:block;font-style:italic;color:var(--raspberry)}
.final__shot{
  position:relative;z-index:var(--z-content);margin:0;
  width:min(80vw,330px);
  transform:rotate(1.6deg);
  transition:transform var(--t-mid) var(--ease);
}
.final__shot:hover{transform:rotate(0)}

/* конверт-подарок */
.gift{position:relative;z-index:var(--z-content);margin-top:clamp(34px,6vw,52px);width:100%;max-width:440px}
.gift__btn{
  display:inline-flex;align-items:center;gap:10px;
  min-height:52px;padding:0 28px;
  border:1px solid var(--rose);border-radius:999px;
  background:rgba(255,255,255,.6);color:var(--wine);
  font:500 .72rem/52px var(--sans);letter-spacing:.22em;text-transform:uppercase;
  cursor:pointer;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.gift__btn img{width:17px}
.gift__btn:hover{background:var(--blush);box-shadow:var(--sh-m)}
.gift__btn:active{transform:scale(.98)}
.gift__btn[aria-expanded="true"]{background:var(--blush);border-color:var(--raspberry)}
.gift__note{
  overflow:hidden;
  max-height:0;opacity:0;
  transition:max-height var(--t-slow) var(--ease),opacity var(--t-mid) var(--ease),margin var(--t-slow) var(--ease);
}
.gift__note.is-open{max-height:420px;opacity:1;margin-top:22px}
.gift__note p{
  margin:0;padding:26px 22px;
  background:linear-gradient(168deg,#FFFDFC,#FFF6F4);
  border-radius:6px;box-shadow:var(--sh-m);
  font:400 1.5rem/1.5 var(--hand);color:var(--wine);
  transform:rotate(-.8deg);
}
.gift__note p.is-ph{font-family:var(--sans);font-size:.95rem;line-height:1.7}

.final__mark{
  position:relative;z-index:var(--z-content);
  margin:clamp(46px,9vh,84px) 0 0;
  font:400 .7rem/1 var(--sans);letter-spacing:.4em;color:var(--wine-45);
}

/* кнопка музыки (появляется только если в конфиге указан файл) */
.music{
  position:fixed;left:14px;bottom:14px;z-index:var(--z-nav);
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--rose);background:rgba(255,255,255,.7);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:var(--sh-s);transition:all var(--t-fast) var(--ease);
}
.music:hover{background:var(--blush)}
.music svg{width:20px;height:20px;fill:none;stroke:var(--raspberry);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.music.is-on{background:var(--blush);border-color:var(--raspberry)}

/* ══════════════════════════════════════════════════════════════
   13. ФАКТУРА И ФОН СЕКЦИЙ
   Задача: убрать «пустой фон», не превращая экраны в кашу.
   Всё здесь — материал (бумага, ткань, свет, плёнка), а не декор.
   Все слои pointer-events:none и лежат ПОД контентом.
   ══════════════════════════════════════════════════════════════ */

/* ── тонкая издательская рамка окна (только большие экраны) ── */
.rule{display:none}
@media (min-width:1024px){
  .rule{
    display:block;position:fixed;inset:18px;z-index:70;pointer-events:none;
    border:1px solid rgba(217,191,160,.4);
  }
  .rule span{position:absolute;width:10px;height:10px;border:1px solid rgba(192,90,118,.45)}
  .rule span:nth-child(1){top:-5px;left:-5px;border-right:0;border-bottom:0}
  .rule span:nth-child(2){top:-5px;right:-5px;border-left:0;border-bottom:0}
  .rule span:nth-child(3){bottom:-5px;left:-5px;border-right:0;border-top:0}
  .rule span:nth-child(4){bottom:-5px;right:-5px;border-left:0;border-top:0}
}
html.is-locked .rule{display:none}

/* ── ОБЛОЖКА: свет, кружевной край, монограмма ── */
.cover__veil::before{                  /* мягкие световые пятна, как блики на флаконе */
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(38% 26% at 17% 20%,rgba(255,255,255,.55),rgba(0,0,0,0) 70%),
    radial-gradient(32% 22% at 84% 33%,rgba(230,218,242,.5),rgba(0,0,0,0) 72%),
    radial-gradient(48% 30% at 60% 86%,rgba(247,221,226,.55),rgba(0,0,0,0) 70%);
}
.cover__veil::after{                   /* кружевной фестончатый край внизу */
  content:"";position:absolute;left:0;right:0;bottom:0;height:20px;
  background:radial-gradient(circle at 50% 0,rgba(0,0,0,0) 9px,var(--cream) 10px) 0 0/20px 20px repeat-x;
  opacity:.9;
}
.cover__mono{                          /* огромная призрачная «П» за именем */
  position:absolute;top:50%;left:50%;transform:translate(-50%,-56%);
  z-index:1;pointer-events:none;user-select:none;
  font:500 min(62vw,40rem)/.8 var(--serif);font-style:italic;
  color:rgba(192,90,118,.05);
}

/* ── ПИСЬМО: бумага толще, поле как в тетради, загнутый угол ── */
.letter::before{                       /* тёплое световое пятно сверху */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 36% at 50% 0%,rgba(255,255,255,.75),rgba(0,0,0,0) 70%);
}
.paper{--pad:clamp(22px,6vw,46px)}
.paper{
  /* поле-линия слева + сама бумага */
  background-image:
    linear-gradient(90deg,
      rgba(0,0,0,0) calc(var(--pad) - 15px),
      rgba(192,90,118,.15) calc(var(--pad) - 15px),
      rgba(192,90,118,.15) calc(var(--pad) - 14px),
      rgba(0,0,0,0) calc(var(--pad) - 14px)),
    linear-gradient(168deg,#FFFDFC 0%,#FFF8F6 100%);
  /* два листа под верхним — бумага получает толщину */
  box-shadow:
    var(--sh-l),
    inset 0 0 40px rgba(233,166,184,.1),
    7px 9px 0 -2px #FFF7F4,
    13px 17px 0 -4px #FCEDEA;
}
.paper::before{                        /* загнутый уголок, раскрывается по наведению */
  content:"";position:absolute;right:0;bottom:0;width:0;height:0;
  background:linear-gradient(135deg,rgba(0,0,0,0) 48%,rgba(233,166,184,.5) 50%,#FFF9F7 54%);
  box-shadow:-4px -4px 10px rgba(200,120,140,.16);
  border-bottom-right-radius:4px;
  transition:width var(--t-mid) var(--ease),height var(--t-mid) var(--ease);
}
.paper:hover::before{width:52px;height:52px}

/* ── МОМЕНТЫ: льняная доска вместо пустого фона ── */
.moments{background:linear-gradient(180deg,var(--cream) 0%,#FBF2EE 100%)}
.moments::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    /* обойная полоска, как на стене в розовой комнате */
    repeating-linear-gradient(90deg,rgba(233,166,184,.13) 0 2px,rgba(0,0,0,0) 2px 28px),
    repeating-linear-gradient(45deg,rgba(192,90,118,.05) 0 1px,rgba(0,0,0,0) 1px 7px),
    repeating-linear-gradient(-45deg,rgba(217,191,160,.06) 0 1px,rgba(0,0,0,0) 1px 7px);
}
/* часть фото держится не скотчем, а кнопкой */
.polaroid:nth-child(3n+2) .tape{display:none}
.polaroid:nth-child(3n+2)::before{
  content:"";position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  width:24px;height:28px;z-index:3;
  background:url("../assets/stickers/pin.svg") center/contain no-repeat;
  filter:drop-shadow(0 4px 6px rgba(192,90,118,.3));
}
/* ── МЕСТО: плёнка, световой засвет, год-призрак ── */
.place__veil::after{                   /* тёплый засвет как на настоящей плёнке */
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(44% 32% at 88% 5%,rgba(255,198,152,.32),rgba(0,0,0,0) 70%),
    radial-gradient(32% 22% at 3% 97%,rgba(230,218,242,.42),rgba(0,0,0,0) 72%);
}
.place::before,.place::after{          /* перфорация 35-мм плёнки по краям кадра */
  content:"";position:absolute;left:0;right:0;height:24px;z-index:2;pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='24'%3E%3Crect x='5' y='7' width='16' height='11' rx='3' fill='%23FDF7F4' fill-opacity='.85'/%3E%3C/svg%3E") 0 0/26px 24px repeat-x,
    linear-gradient(180deg,rgba(74,34,48,.26),rgba(74,34,48,.16));
  opacity:.5;
}
.place::before{top:0}
.place::after{bottom:0;transform:scaleY(-1)}
.place__year{                          /* «2025» контуром за стеклянной панелью */
  position:absolute;right:-2%;bottom:6%;z-index:1;pointer-events:none;user-select:none;
  font:500 min(34vw,17rem)/.8 var(--serif);font-style:italic;
  color:rgba(0,0,0,0);
  -webkit-text-stroke:1px rgba(255,255,255,.5);
}

/* ── ФИНАЛ: лента сверху, свет, печать ── */
.final::before{                        /* лента-ниточка, с которой «свисает» экран */
  content:"";position:absolute;top:0;left:50%;width:1px;height:clamp(40px,8vh,84px);
  background:linear-gradient(180deg,rgba(217,191,160,.9),rgba(217,191,160,0));
  z-index:1;pointer-events:none;
}
.final__shot .polaroid__card{
  filter:drop-shadow(0 18px 30px rgba(200,120,140,.4))
         drop-shadow(0 40px 70px rgba(192,90,118,.28));
}
.final__seal{
  display:block;width:clamp(52px,13vw,72px);margin:clamp(30px,6vw,44px) auto 0;
  opacity:.92;transform:rotate(-7deg);
  filter:drop-shadow(0 8px 16px rgba(142,58,82,.3));
}

/* ══════════════════════════════════════════════════════════════
   14. МИКРОВЗАИМОДЕЙСТВИЯ
   Ни одного «просто fade-up»: у каждого экрана своё движение.
   ══════════════════════════════════════════════════════════════ */

/* ── заголовки проявляются по словам, слегка «падая на место» ── */
.w{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding:.08em .04em .18em;margin:-.08em -.04em -.18em;   /* чтобы не срезало хвосты букв */
}
.w i{
  display:inline-block;font-style:inherit;
  transform:translateY(108%) rotate(3deg);opacity:0;
  transition:transform 820ms var(--ease),opacity 620ms var(--ease);
  transition-delay:var(--wd,0ms);
}
.is-in .w i{transform:none;opacity:1}

/* ── счётчик: цифры не мигают, а перекатываются ── */
.counter__n{position:relative;display:block;height:1.06em;overflow:hidden}
.counter__n span{position:absolute;left:0;right:0;text-align:center}
.counter__n .roll-out{animation:roll-out 620ms var(--ease) forwards}
.counter__n .roll-in{animation:roll-in 620ms var(--ease) forwards}
@keyframes roll-out{from{transform:translateY(0);opacity:1}to{transform:translateY(-92%);opacity:0}}
@keyframes roll-in{from{transform:translateY(92%);opacity:0}to{transform:translateY(0);opacity:1}}

/* ── полароид: наклоняется за курсором и «проявляется» как настоящий ── */
.polaroid{
  transform:rotate(var(--rot-live,var(--rot,0deg))) scale(var(--sc,1))
            perspective(760px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform 320ms var(--ease),box-shadow var(--t-mid) var(--ease);
}
.polaroid:hover,.polaroid:focus-within,.polaroid.is-touch{--rot-live:0deg;--sc:1.03}
.polaroid:hover .tape,.polaroid.is-touch .tape{transform:rotate(-3deg) translateY(-3px) scale(1.04)}
.polaroid .tape{transition:transform var(--t-mid) var(--ease)}

/* фото/плейсхолдер «проявляется»: сначала выцветший, потом наливается цветом */
.polaroid__win .ph,.polaroid__win .photo{
  filter:saturate(.28) contrast(.9) brightness(1.12);
}
/* сброс «проявки» — для любой рамки: и в моментах, и на месте, и в финале */
[data-frame].is-in .ph,[data-frame].is-in .photo{
  filter:none;
  transition:filter 1500ms var(--ease) 260ms,opacity var(--t-slow) var(--ease);
}

/* ── искры за курсором на обложке ── */
.trail{
  position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;
  background:url("../assets/stickers/sparkle.svg") center/contain no-repeat;
  pointer-events:none;opacity:0;
  animation:trail 900ms var(--ease) forwards;
}
@keyframes trail{
  0%{opacity:0;transform:scale(.2) rotate(0)}
  30%{opacity:.9;transform:scale(1) rotate(30deg)}
  100%{opacity:0;transform:scale(.5) rotate(70deg) translateY(14px)}
}

/* ── нить прогресса по левому краю (большие экраны) ── */
.thread{display:none}
@media (min-width:1024px){
  .thread{
    /* внутри издательской рамки, а не поверх её линии */
    display:block;position:fixed;left:34px;top:16vh;bottom:16vh;width:1px;z-index:70;
    background:rgba(217,191,160,.35);pointer-events:none;
  }
  .thread::before{
    content:"";position:absolute;left:0;top:0;width:1px;
    height:calc(var(--progress,0) * 100%);
    background:linear-gradient(180deg,var(--rose),var(--raspberry));
  }
  .thread::after{                     /* бантик-бегунок */
    content:"";position:absolute;left:-7px;top:calc(var(--progress,0) * 100%);
    width:15px;height:13px;margin-top:-7px;
    background:url("../assets/stickers/bow.svg") center/contain no-repeat;
  }
}

/* ── точка навигации превращается в бантик ── */
.dots__i.is-active::after{
  width:20px;height:17px;border:0;border-radius:0;transform:none;
  background:url("../assets/stickers/bow.svg") center/contain no-repeat;
}
.dots__i.is-active:hover::after{background:url("../assets/stickers/bow.svg") center/contain no-repeat}

/* ── кружок в календаре рисуется, а не появляется ── */
.cal__day.is-sel::after{content:none}
.cal__circle{
  position:absolute;inset:-3px;overflow:visible;pointer-events:none;
  fill:none;stroke:var(--raspberry);stroke-width:2.1;stroke-linecap:round;
}
.cal__circle path{stroke-dasharray:190;stroke-dashoffset:190;animation:draw 700ms var(--ease) forwards}
.cal__circle path:last-child{animation-delay:180ms;opacity:.5}
@keyframes draw{to{stroke-dashoffset:0}}

/* ── записка раскрывается как клапан конверта ── */
.gift__note{perspective:900px}
.gift__note p{
  transform-origin:top center;
  transform:rotateX(-88deg) rotate(-.8deg);
  transition:transform var(--t-slow) var(--ease);
}
.gift__note.is-open p{transform:rotateX(0) rotate(-.8deg)}

/* ── кнопки чуть «вжимаются», а не просто меняют цвет ── */
.cue:active img{transform:translateY(4px) scale(.94)}
.cal__day:active{transform:scale(.9)}

/* ── у каждого экрана своё появление, а не один и тот же fade-up ──
   обложка: проявляется на месте · письмо: поднимается снизу
   моменты: «оседают» с лёгким уменьшением · место: выходит из расфокуса
   финал: чуть приближается                                          */
.cover .reveal{transform:translateY(10px) scale(.99)}
.moments .reveal{transform:translateY(16px) scale(.985)}
/* :not(.place__shot) — у полароида свой transform (поворот + центрирование),
   общее правило появления его бы затёрло */
.place .reveal:not(.place__shot){
  transform:translateY(12px);filter:blur(7px);
  transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease),
             filter var(--t-slow) var(--ease);
  transition-delay:var(--d,0ms);
}
.place .reveal:not(.place__shot).is-in{filter:blur(0)}
.final .reveal{transform:translateY(18px) scale(.965)}
.reveal:not(.place__shot).is-in{transform:none}

/* ── позиции новых коллажных мелочей ── */
.deco--flower-c{width:clamp(34px,9vw,62px);top:16%;left:6%;transform:rotate(-18deg);opacity:.75}
.deco--flower-l{width:clamp(40px,10vw,70px);bottom:9%;right:7%;transform:rotate(22deg);opacity:.7}

/* ══════════════════════════════════════════════════════════════
   15. КОЛЛАЖНЫЙ СЛОЙ
   Наклейки раскладывает JS из списка COLLAGE в scripts/main.js.
   Лежат под текстом, клики не перехватывают.
   Размер: --w (из конфига) × --cscale (брейкпоинт) × --cs-user (конфиг).
   ══════════════════════════════════════════════════════════════ */
:root{--cscale:.58}
.collage{position:absolute;inset:0;z-index:var(--z-deco);pointer-events:none;overflow:hidden}
.co{
  position:absolute;
  width:calc(var(--w,60px) * var(--cscale) * var(--cs-user,1));
  transform:translate(-50%,-50%) rotate(var(--r,0deg));
  filter:drop-shadow(0 5px 11px rgba(200,120,140,.22));
  user-select:none;
}
@media (min-width:768px){ :root{--cscale:.8} }
@media (min-width:1024px){ :root{--cscale:1} }

/* ══ 11. БРЕЙКПОИНТЫ ══════════════════════════════════════════ */
@media (min-width:480px){
  .counter{gap:12px}
}

@media (min-width:768px){
  :root{--gut:56px}
  .dots{display:flex}
  .counter{grid-template-columns:repeat(4,minmax(0,1fr));max-width:560px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,26px)}
  /* коллажный разброс: чётные ниже и заезжают на соседнюю колонку */
  .polaroid:nth-child(odd){margin-right:0}
  .polaroid:nth-child(even){margin-left:-36px;margin-top:clamp(20px,3.5vw,44px)}
  .polaroid__cap{padding-left:40px;padding-right:40px}
  .glass{max-width:560px;text-align:left}
  .glass__date{display:inline-block}
  .place{justify-content:center;align-items:flex-start;padding-left:clamp(56px,10vw,120px)}
  /* на большом экране панель слева, поэтому полароид уходит вправо, крупнее.
     28vw держит зазор до панели на узких ноутбуках, 420px — предел на маках */
  .place__shot{
    --pt:translateY(-50%);--pr:-3.5deg;
    width:min(28vw,420px);
    top:50%;right:clamp(36px,7vw,120px);
  }
  .final__shot{width:min(46vw,360px)}
  .paper{transform:rotate(-1deg)}
}

@media (min-width:1024px){
  :root{--gut:80px}
  .dots{right:30px}                 /* тоже внутрь рамки */
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .polaroid:nth-child(even){margin-left:0}
  .polaroid:nth-child(3n+2){margin-top:clamp(34px,4.5vw,64px);margin-left:-46px;z-index:3}
  .polaroid:nth-child(3n+3){margin-top:clamp(12px,1.8vw,24px);margin-left:-34px;z-index:2}
  /* подпись уже карточки — наезд соседней рамки идёт по пустому полю */
  .polaroid__cap{padding-left:52px;padding-right:52px}
  .cover__inner{max-width:840px}
  .lead{font-size:1rem}
}

@media (min-width:1440px){
  :root{--gut:120px;--maxw:1280px}
  .cover__name{font-size:clamp(8rem,14vw,12rem)}
  .paper{max-width:66ch}
}

/* очень низкие экраны (телефон в горизонтали) */
@media (max-height:520px) and (orientation:landscape){
  .screen{min-height:auto;padding-top:72px;padding-bottom:72px}
  .cover__name{font-size:clamp(3rem,12vw,5rem)}
  .cue{position:static;transform:none;margin:26px auto 0}
}

/* ══ 12. УВАЖАЕМ prefers-reduced-motion ═══════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  /* полароид на «месте» исключён: transform держит его поворот и центрирование */
  .reveal:not(.place__shot),.paper .para,.paper__sign{opacity:1 !important;transform:none !important}
  .place__shot{opacity:1 !important;filter:none !important}
  .w i{opacity:1 !important;transform:none !important}
  .w{overflow:visible}
  .spark,.petal,.trail{display:none}   /* блёстки, лепестки, искры за курсором — убираем совсем */
  .thread::after{transition:none}
  .cal__circle path{stroke-dashoffset:0 !important}
  .polaroid{--rx:0deg !important;--ry:0deg !important}
  .polaroid__win .ph,.polaroid__win .photo{filter:none !important}
  .gift__note p{transform:rotate(-.8deg) !important}
  .polaroid{transform:none}
  .paper{transform:none}
  .gift__note.is-open{max-height:none}
}