/* Евусикус — монохромный «фильм» с цветом, который проявляется в фото */
:root{
  --bg:#0a0a0a; --ink:#f2efe9; --mute:#8a8780; --line:rgba(242,239,233,.14);
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace; --hand:'Caveat',cursive;
  --ease:cubic-bezier(.22,1,.36,1);
  --rose:#f4b6c9; --rose-d:#d97a9b; --rose-soft:rgba(244,182,201,.35);
  --lf:rgba(244,182,201,.16); --lf2:rgba(242,239,233,.04);
}
*{box-sizing:border-box;margin:0;padding:0}
/* обрезка по ширине — на html (уходит в окно браузера): иначе на телефоне страница чуть шире экрана,
   её можно сдвинуть вбок/отдалить, и при листании всё «плывёт». На body нельзя — там ломаются липкие кадры глав. */
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%;overflow-x:hidden;overscroll-behavior-y:none}
body{font:300 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
::selection{background:var(--rose);color:#1a1012}
body.locked{overflow:hidden;height:100svh}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.serif{font-family:var(--serif);font-weight:300;letter-spacing:-.01em}
.serif-i{font-family:var(--serif);font-style:italic;font-weight:300}
.mono{font-family:var(--mono);font-weight:300;letter-spacing:.12em;text-transform:uppercase}
.small{font-size:11px;color:var(--mute)}
.hand{font-family:var(--hand)}

/* плёночное зерно поверх всего */
.grain{position:fixed;inset:-12%;z-index:90;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,1%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}
@media (pointer:coarse){.grain{animation:none}}   /* на телефоне зерно статичное — меньше нагрузки */

/* ───── 00. Предисловие ───── */
.preface{position:fixed;inset:0;z-index:85;background:radial-gradient(ellipse at 50% 30%,#171614 0%,#0a0a0a 70%);
  transition:opacity 1.1s var(--ease),visibility 1.1s}
.preface.gone{opacity:0;visibility:hidden}
.pf-scroll{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.pf-in{max-width:620px;margin:0 auto;padding:calc(max(14px, env(safe-area-inset-top)) + 14vh) 8vw 14vh}
.pf-kick{text-align:center;margin-bottom:9vh;animation:fade 1.4s var(--ease) .3s both}
.pf-p{font:300 clamp(20px,5.2vw,27px)/1.55 var(--serif);color:#e4e0d8;margin-bottom:1.15em;
  opacity:0;transform:translateY(22px);filter:blur(5px);transition:opacity 1.3s var(--ease),transform 1.3s var(--ease),filter 1.3s var(--ease)}
.pf-p.in{opacity:1;transform:none;filter:none}
.pf-greet{font-style:italic;font-size:clamp(34px,9vw,48px);line-height:1.1;color:var(--rose);margin-bottom:.8em}
.pf-sign{font-size:clamp(28px,7vw,36px);line-height:1.2;text-align:right;margin:2.2em 0 3em;color:var(--rose);
  opacity:0;transition:opacity 1.6s var(--ease)}
.pf-sign.in{opacity:1}
.pf-go-wrap{display:flex;justify-content:center;opacity:0;transform:translateY(16px);transition:opacity 1.2s var(--ease) .3s,transform 1.2s var(--ease) .3s}
.pf-go-wrap.in{opacity:1;transform:none}
.pf-hint{position:fixed;left:0;right:0;bottom:0;z-index:86;text-align:center;font-size:10px;color:var(--mute);
  padding:28px 0 max(18px, env(safe-area-inset-bottom));background:linear-gradient(transparent,#0a0a0a 60%);
  pointer-events:none;transition:opacity .6s;animation:pulse 2.4s ease-in-out infinite}
.pf-hint.off{opacity:0;animation:none}
.preface.gone .pf-hint{display:none}

/* ───── 0. Конверт ───── */
.gate{position:fixed;inset:0;z-index:80;display:grid;place-items:center;align-content:center;gap:42px;
  background:radial-gradient(ellipse at 50% 45%,#1b1a18 0%,#0a0a0a 65%);transition:opacity 1.1s var(--ease),visibility 1.1s}
.gate.gone{opacity:0;visibility:hidden}
.gate-top,.gate-hint{color:var(--mute);font-size:11px}
.gate-hint{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.envelope{position:relative;width:min(78vw,340px);aspect-ratio:1.45;perspective:900px;
  animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
.envelope>span{position:absolute;inset:0}
.env-back{background:#1c1b19;border:1px solid var(--line);border-radius:4px}
.env-card{inset:8% 7% 10%!important;background:var(--ink);color:#111;border-radius:3px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transition:transform 1.1s var(--ease) .45s;z-index:1}
.env-card .serif-i{font-size:15px;color:var(--rose-d)}
.env-card b{font-size:clamp(26px,8vw,36px);font-weight:500}
.env-front{z-index:2;border-radius:0 0 4px 4px;
  background:linear-gradient(160deg,#2a2926,#1d1c1a);
  clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%)}
.env-flap{z-index:3;height:56%;transform-origin:top;
  background:linear-gradient(to bottom,#34322e,#262522);clip-path:polygon(0 0,100% 0,50% 100%);
  transition:transform .8s var(--ease),z-index 0s .4s}
.env-seal{z-index:4;width:46px;height:46px;inset:auto!important;left:calc(50% - 23px)!important;top:calc(56% - 28px)!important;
  border-radius:50%;background:radial-gradient(circle at 35% 30%,#f9cfdc,#d97a9b 75%);color:#5a2236;display:grid;place-items:center;
  font:500 22px var(--serif);box-shadow:0 6px 22px rgba(217,122,155,.45),inset 0 -2px 4px rgba(90,34,54,.3);transition:transform .5s var(--ease),opacity .4s}
.envelope.open{animation:none}
.envelope.open .env-seal{transform:scale(0);opacity:0}
.envelope.open .env-flap{transform:rotateX(180deg);z-index:0}
.envelope.open .env-card{transform:translateY(-62%);z-index:3}

/* ───── рельса таймлайна ───── */
.rail{position:fixed;left:max(14px,env(safe-area-inset-left));top:18vh;bottom:18vh;z-index:40;width:24px;
  opacity:0;transition:opacity .6s}
.rail.on{opacity:1}
.rail-line{position:absolute;left:11px;top:0;bottom:0;width:1px;background:var(--line)}
.rail-line i{position:absolute;inset:0;background:var(--rose);transform-origin:top;transform:scaleY(0);will-change:transform}
.rail-dots{position:absolute;inset:0}
.rail-dots b{position:absolute;left:8px;width:7px;height:7px;border-radius:50%;
  border:1px solid var(--mute);background:var(--bg);transform:translateY(-50%);transition:.4s var(--ease)}
.rail-dots b.on{background:var(--rose);border-color:var(--rose);transform:translateY(-50%) scale(1.3)}
.rail-label{position:absolute;left:24px;font-size:10px;white-space:nowrap;color:var(--ink);
  transform:translateY(-50%);transition:top .3s var(--ease)}
@media (max-width:700px){.rail{left:4px}.rail-label,.rail-dots{display:none}}  /* на телефоне — только тонкая линия прогресса */

.topbar{position:fixed;right:max(14px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));z-index:60;
  display:flex;gap:8px;opacity:0;pointer-events:none;transition:opacity .8s var(--ease) 1s}
.ready .topbar{opacity:1;pointer-events:auto}
.map-open .topbar{opacity:0;pointer-events:none;transition-delay:0s}
.pill{font-size:10px;padding:9px 14px;border:1px solid var(--line);border-radius:99px;
  background:rgba(10,10,10,.82);transition:border-color .3s}
.pill:active{border-color:var(--ink)}
#sound.playing span{text-decoration:line-through}
.cta{font-size:11px;padding:15px 24px;border-radius:99px;background:var(--ink);color:#0a0a0a;transition:transform .3s var(--ease)}
.cta:active{transform:scale(.96)}

/* ───── 1. Герой ───── */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;text-align:center;padding:0 6vw;position:relative}
.hero-kicker{font-size:11px;color:var(--mute)}
.hero-title{font-size:clamp(64px,19vw,230px);line-height:.9;font-weight:300;text-shadow:0 0 60px rgba(244,182,201,.22);position:relative}
.hero-title span{display:inline-block;opacity:0;transform:translateY(60%) rotate(6deg);filter:blur(12px)}
.ready .hero-title span{animation:letter 1.4s var(--ease) forwards}
@keyframes letter{to{opacity:1;transform:none;filter:none}}
.hero-sub{display:flex;align-items:center;gap:16px;font-size:clamp(20px,5vw,32px);opacity:0}
.ready .hero-sub{animation:fade 1.4s var(--ease) 1.3s forwards}
.hero-sub .line{width:48px;height:1px;background:var(--rose-soft)}
.hero-sub .serif-i{color:var(--rose)}
.hero-kicker{opacity:0}.ready .hero-kicker{animation:fade 1.2s var(--ease) .2s forwards}
@keyframes fade{to{opacity:1}}
.scroll-cue{position:absolute;bottom:max(28px,env(safe-area-inset-bottom));display:flex;flex-direction:column;
  align-items:center;gap:10px;font-size:10px;color:var(--mute);opacity:0}
.ready .scroll-cue{animation:fade 1s 2.4s forwards}
.scroll-cue i{width:1px;height:46px;background:linear-gradient(var(--ink),transparent);animation:drip 2s ease-in-out infinite;transform-origin:top}
@keyframes drip{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ───── 2. Вместе ───── */
.together{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5vh;text-align:center;padding:10vh 8vw}
.tg-col{display:flex;flex-direction:column;align-items:center;gap:4px}
.tg-sep{width:1px;height:8vh;background:linear-gradient(transparent,var(--rose),transparent)}
.tg-foot{line-height:1.9}
.big-n{font-size:clamp(88px,25vw,240px);line-height:1.25;font-variant-numeric:lining-nums tabular-nums}
.stat b{font-variant-numeric:lining-nums}
@media (min-width:900px){.together{flex-direction:row;flex-wrap:wrap;gap:6vw}.tg-sep{height:30vh}.tg-foot{flex-basis:100%}}

.reveal-up{opacity:0;transform:translateY(40px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.reveal-up.in{opacity:1;transform:none}

/* ───── 3. Глава ───── */
.ch{position:relative;height:260svh;--r:0;--t:0;--o:0;--c:0;--p:0}
/* слои для GPU — только у глав рядом с экраном; дальние вообще не рисуем (класс .near ставит app.js) */
.ch:not(.near) .ch-sticky{visibility:hidden}
.ch.near :is(.ch-media,.zoom,.film-track,.stack-wrap figure){will-change:transform}
.ch.near :is(.bw,.ch-text){will-change:opacity}
.ch-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:grid}
.ch-media{position:absolute;inset:0;overflow:hidden;
  /* окно с фото «вырастает» через transform — без перерисовки картинки на каждом кадре */
  transform:scale(calc(.8 + var(--r) * .2))}
.ch-media .zoom{position:absolute;inset:0;transform:scale(calc(1.25 - var(--r) * .15 - var(--p) * .06))}
.ch-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ch-media .col{filter:brightness(.8) contrast(1.05)}
/* ч/б копия поверх цветной и плавно исчезает: меняется только opacity — это дёшево для телефона */
.ch-media .bw{filter:grayscale(1) brightness(.55) contrast(1.05);opacity:calc(1 - var(--c))}
.ch-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,10,10,.92) 0%,rgba(10,10,10,.25) 45%,rgba(10,10,10,.1) 70%,rgba(10,10,10,.5) 100%)}
.ch-num{position:absolute;right:5vw;top:calc(max(14px, env(safe-area-inset-top)) + 58px);font:300 clamp(80px,22vw,220px)/1.2 var(--serif);font-variant-numeric:lining-nums;
  color:transparent;-webkit-text-stroke:1px rgba(244,182,201,.45);opacity:calc(var(--t));
  transform:translateY(calc((1 - var(--t)) * 40px))}
.ch-text{position:absolute;left:0;right:0;bottom:0;padding:0 7vw max(9vh,60px) max(10vw,46px);
  max-width:760px;opacity:calc(1 - var(--o))}
.ch-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:11px;margin-bottom:16px;color:var(--ink)}
.ch-meta .tw{border-right:1px solid var(--rose);color:var(--rose);padding-right:2px;animation:caret .8s steps(1) infinite}
.ch-meta .tw.done{border-color:transparent;animation:none}
@keyframes caret{50%{border-color:transparent}}
.ch-meta .place{color:var(--mute);opacity:0;transition:opacity .8s .2s}
.ch.on .ch-meta .place{opacity:1}
.ch-title{font:300 clamp(40px,10vw,92px)/.95 var(--serif);margin-bottom:18px}
.ch-title .w,.ch-body .w{display:inline-block;opacity:0;transform:translateY(.5em);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.ch.on .w{opacity:1;transform:none}
.ch.settled .w{display:inline;transition:none}
.ch-body{font-size:clamp(16px,2.2vw,19px);color:#d6d2ca;max-width:34em;
  opacity:0;transform:translateY(14px);transition:opacity 1.1s var(--ease) .45s,transform 1.1s var(--ease) .45s}
.ch.on .ch-body{opacity:1;transform:none}

/* вариант «плёнка»: несколько фото уезжают по горизонтали */
.ch.film .ch-media{display:none}
.film-track{position:absolute;top:12svh;left:0;display:flex;gap:4vw;padding-left:12vw;
  transform:translateX(calc(var(--p) * -1 * var(--shift, 0px)))}
.film-track figure{flex:0 0 auto;width:min(62vw,420px);aspect-ratio:3/4;position:relative}
.film-track img{width:100%;height:100%;object-fit:cover;border-radius:3px;
  filter:brightness(.88)}
.film-track figcaption{position:absolute;left:0;top:-22px;font:300 10px var(--mono);letter-spacing:.14em;color:var(--mute)}
.film-track figure::before,.film-track figure::after{content:"";position:absolute;left:-10px;right:-10px;height:8px;
  background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 18px)}
.film-track figure::before{top:-12px}.film-track figure::after{bottom:-12px}
.ch.film .ch-text{bottom:0}

/* вариант «полароиды»: веер из фото */
.ch.stack .ch-media{display:none}
.stack-wrap{position:absolute;inset:6svh 0 auto;height:56svh;display:grid;place-items:center}
.stack-wrap figure{position:absolute;width:min(56vw,300px);background:var(--ink);padding:10px 10px 38px;
  box-shadow:0 18px 36px rgba(0,0,0,.55);border-radius:2px;
  transform:translate(calc(var(--dx) * var(--r) * var(--spread, 1)),calc(var(--dy) * var(--r))) rotate(calc(var(--rot) * var(--r)))}

/* вариант «текст»: глава без фото — огромная дата, которая медленно выплывает */
.ch.text{height:200svh}
.ch-bigdate{position:absolute;inset:0;display:grid;place-items:center;padding-bottom:22svh;
  font-size:clamp(120px,38vw,420px);line-height:1;letter-spacing:-.04em;color:transparent;
  -webkit-text-stroke:1px rgba(242,239,233,.5);
  opacity:var(--r);transform:translateY(calc((1 - var(--r)) * 12vh)) scale(calc(.92 + var(--r) * .08));
  background:radial-gradient(ellipse at 50% 40%,rgba(242,239,233,calc(var(--c) * .07)),transparent 60%)}
.ch.text .ch-num{display:none}
/* текст сверху — когда главное на фото внизу */
.ch.txt-top .ch-text{bottom:auto;top:0;padding-top:max(12vh,84px);padding-bottom:0}
.ch.txt-top .ch-media::after{background:linear-gradient(to bottom,rgba(10,10,10,.92) 0%,rgba(10,10,10,.78) 38%,rgba(10,10,10,.45) 58%,rgba(10,10,10,.08) 78%,rgba(10,10,10,.35) 100%)}
.ch.txt-top .ch-num{top:auto;bottom:6vh}
.ch-bigdate.word{font-size:clamp(60px,17vw,190px);font-style:italic;line-height:.95;letter-spacing:-.02em;
  text-align:center;padding:0 6vw 30svh;-webkit-text-stroke:0;color:rgba(242,239,233,calc(.15 + var(--c) * .75))}

/* вариант «переписка»: она печатает… и приходит сообщение */
.ch.chat{height:230svh}
.ch.chat .ch-num{display:none}
.chatbox{position:absolute;left:50%;top:14svh;width:min(84vw,360px);transform:translateX(-50%) translateY(calc((1 - var(--r)) * 6vh));
  opacity:var(--r);display:flex;flex-direction:column;gap:14px}
.chat-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.chat-ava{width:42px;height:42px;border-radius:50%;background:var(--rose);color:#4a1a2c;display:grid;place-items:center;font-size:20px;font-weight:500}
.chat-head span{display:flex;flex-direction:column;line-height:1.25}
.chat-head b{font-weight:500}
.chat-head small{font-size:9px;color:var(--mute)}
.chat-typing{align-self:flex-start;display:flex;gap:5px;padding:14px 16px;background:#1f1f1e;border-radius:18px 18px 18px 6px;
  opacity:calc(min(var(--r) * 2, 1) - var(--c) * 4);height:calc(42px * (1 - min(var(--c) * 4, 1)));overflow:hidden;
  padding-top:calc(14px * (1 - min(var(--c) * 4, 1)));padding-bottom:calc(14px * (1 - min(var(--c) * 4, 1)))}
.chat-typing i{width:7px;height:7px;border-radius:50%;background:var(--mute);animation:dot 1.2s infinite}
.chat-typing i:nth-child(2){animation-delay:.15s}.chat-typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.chat-msg{align-self:flex-start;max-width:85%;padding:14px 18px 10px;background:#3a2430;border-radius:20px 20px 20px 6px;
  font:400 clamp(24px,6.5vw,32px)/1.2 var(--serif);
  opacity:min(calc(var(--c) * 3), 1);transform-origin:left bottom;
  transform:scale(calc(.7 + min(var(--c) * 3, 1) * .3)) translateY(calc((1 - min(var(--c) * 3, 1)) * 12px))}
.chat-msg small{display:block;text-align:right;font:300 10px var(--mono);color:var(--mute);margin-top:4px}
.chat-heart{align-self:center;font-size:clamp(70px,20vw,120px);line-height:1;color:var(--rose);text-shadow:0 0 30px rgba(244,182,201,.5);
  opacity:clamp(0, calc((var(--c) - .55) * 3), 1);transform:scale(clamp(.4, calc((var(--c) - .4) * 2), 1))}

.ch-pin{margin-top:18px;font-size:10px;padding:8px 14px;border:1px solid var(--rose-soft);border-radius:99px;
  opacity:0;transition:opacity .8s 1.2s}
.ch.on .ch-pin{opacity:1}

/* приглашение на карту */
.map-teaser{min-height:90svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  text-align:center;padding:0 8vw;
  background:radial-gradient(ellipse at 50% 55%,rgba(242,239,233,.06),transparent 60%)}
.map-teaser h2{font-size:clamp(50px,13vw,120px);line-height:.95}
.map-teaser h2 i{color:var(--rose)}
.map-teaser p{color:#bdb8af;max-width:22em}
.finale-btns{display:flex;flex-direction:column;align-items:center;gap:14px}
.stack-wrap img{aspect-ratio:1;object-fit:cover;width:100%}
.stack-wrap figcaption{position:absolute;bottom:8px;left:0;right:0;text-align:center;color:#333;font:500 20px var(--hand)}

/* ───── 4. Места ───── */
.places{height:220svh;position:relative;--p:0}
.places-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:0 6vw}
.sec-head{text-align:center;margin-bottom:3vh}
.sec-head h2{font-size:clamp(44px,10vw,96px);line-height:1}
.places-svg{width:100%;max-height:62svh}
.places-svg .route{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.places-svg .ghost{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:3 9}
.places-svg .pt circle{fill:var(--bg);stroke:var(--ink);stroke-width:2;transition:fill .5s}
.places-svg .pt.on circle{fill:var(--ink)}
.places-svg .pt text{fill:var(--ink);font:300 15px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  opacity:0;transition:opacity .6s}
.places-svg .pt.on text{opacity:1}
.places-svg .pt .d{fill:var(--mute);font-size:11px}
@media (max-width:700px){
  .places-svg{max-height:none;overflow:visible}
  .places-svg .route,.places-svg .pt circle{stroke-width:3.5}
  .places-svg .pt text{font-size:30px}
  .places-svg .pt .d{font-size:22px}
}

/* ───── Раскладка глав без полноэкранного фото: картинка сверху, текст снизу — ничего не накладывается ───── */
.ch.text .ch-sticky,.ch.chat .ch-sticky,.ch.film .ch-sticky,.ch.stack .ch-sticky{
  display:flex;flex-direction:column;padding-top:calc(max(14px, env(safe-area-inset-top)) + 52px)}
.ch.text .ch-text,.ch.chat .ch-text,.ch.film .ch-text,.ch.stack .ch-text{position:relative;bottom:auto;flex:none;
  padding-bottom:max(6vh,40px,env(safe-area-inset-bottom))}
.ch.film .ch-num,.ch.stack .ch-num{display:none}
/* длинный текст — компактнее, чтобы картинке/дате всегда оставалось место */
.ch.long .ch-title{font-size:clamp(30px,7.5vw,64px);margin-bottom:12px}
.ch.long .ch-body{font-size:clamp(14.5px,1.6vw,17px);line-height:1.5}
.ch.long .ch-meta{margin-bottom:10px}
.ch.long .ch-pin{margin-top:12px}
.ch.long .ch-bigdate{font-size:min(30vw,15svh,300px)}
.ch.long .stack-wrap figure{width:min(36vw,19svh,240px)}
.ch.long .stack-wrap{--spread:1.15}   /* полароиды меньше — раздвигаем, чтобы подписи не перекрывались */
@media (max-height:700px){.ch.long .stack-wrap figure{width:min(32vw,16svh)}}
.ch.long .film-track figure{max-height:34svh}
.ch.long .ch-bigdate.word{font-size:min(13vw,8svh,150px)}
.ch.text .ch-bigdate,.ch.chat .chatbox,.ch.film .film-track,.ch.stack .stack-wrap{min-height:min(20svh,160px)}

.ch-bigdate{position:relative;inset:auto;flex:1 1 0;min-height:0;padding:0 6vw;overflow:hidden;
  font-size:min(36vw,24svh,400px)}
.ch-bigdate.word{padding:0 6vw;font-size:min(16vw,11svh,180px)}

.chatbox{position:relative;left:auto;top:auto;flex:1 1 0;min-height:0;margin:0 auto;justify-content:center;
  transform:translateY(calc((1 - var(--r)) * 6vh))}
.chat-heart{font-size:min(20vw,9svh,110px)}

.film-track{position:relative;top:auto;flex:1 1 0;min-height:0;align-items:stretch;padding-top:30px;padding-bottom:18px}
.film-track figure{width:auto;height:100%;max-width:62vw}

.stack-wrap{position:relative;inset:auto;height:auto;flex:1 1 0;min-height:0}
.stack-wrap figure{width:min(40vw,300px,26svh)}
@media (max-height:700px){.stack-wrap figure{width:min(40vw,22svh);padding:8px 8px 30px}.stack-wrap figcaption{font-size:16px;bottom:5px}}

/* ───── 5. Цифры ───── */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);margin:12vh 6vw;border:1px solid var(--line)}
.stat{background:var(--bg);padding:7vh 4vw;display:flex;flex-direction:column;align-items:center;gap:6px}
.stat b{font-size:clamp(64px,14vw,140px);line-height:1;font-weight:300}
@media (min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}

/* ───── 6. Письмо ───── */
.letter-wrap{padding:14vh 6vw;display:grid;place-items:center}
.paper{width:min(100%,620px);background:var(--ink);color:#1a1918;padding:clamp(28px,6vw,56px);border-radius:2px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);transform:rotate(-1deg);position:relative;
  background-image:repeating-linear-gradient(transparent 0 37px,rgba(0,0,0,.06) 37px 38px)}
.paper-head{color:var(--rose-d);margin-bottom:22px}
.paper .hand{font-size:clamp(24px,5.4vw,31px);line-height:38px;white-space:pre-wrap;min-height:8em}
.paper-sign{text-align:right;margin-top:18px;opacity:0;transition:opacity 1.2s;color:#b0547a}
.paper-sign.on,.paper-sign.in{opacity:1}
#letter .lp{display:block;margin-bottom:38px;opacity:0;transform:translateY(10px);filter:blur(3px);
  transition:opacity 1.2s var(--ease),transform 1.2s var(--ease),filter 1.2s var(--ease)}
#letter .lp:last-child{margin-bottom:0}
#letter .lp.in{opacity:1;transform:none;filter:none}
#letter .caret{display:inline-block;width:2px;height:.9em;background:#1a1918;margin-left:2px;vertical-align:-2px;animation:caret .8s steps(1) infinite}

/* ───── 7. Финал ───── */
.finale{min-height:100svh;position:relative;display:grid;place-items:center;text-align:center;overflow:hidden}
#petals{position:absolute;inset:0;width:100%;height:100%}
.finale-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px}
.finale-title{font-size:clamp(56px,15vw,170px);line-height:.92}
.finale-title i{font-style:italic;color:var(--rose)}
.ghost{font-size:10px;padding:12px 20px;border:1px solid var(--line);border-radius:99px;transition:.3s}
.ghost:hover{border-color:var(--ink)}

/* ───── 8. Последний вопрос ───── */
.ask{min-height:100svh;display:grid;place-items:center;text-align:center;padding:12vh 8vw;
  background:radial-gradient(ellipse at 50% 50%,rgba(242,239,233,.05),transparent 60%)}
.ask-in{max-width:640px;display:flex;flex-direction:column;align-items:center;gap:28px}
.ask-q{font-size:clamp(26px,6.4vw,44px);line-height:1.25}
.ask-q .w{display:inline-block;opacity:0;transform:translateY(.5em);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.ask.on .ask-q .w{opacity:1;transform:none}
.ask-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;opacity:0;transform:translateY(14px);
  transition:opacity 1s var(--ease) 2s,transform 1s var(--ease) 2s}
.ask.on .ask-btns{opacity:1;transform:none}
.ask-btns.done{opacity:0!important;pointer-events:none;height:0;overflow:hidden;transition:opacity .5s}
.ask-res{font-size:clamp(22px,5vw,32px);font-style:italic;color:var(--rose);opacity:0;transform:scale(.96);
  transition:opacity 1.2s var(--ease) .3s,transform 1.2s var(--ease) .3s}
.ask.answered .ask-res{opacity:1;transform:none}

.ask .cta{background:var(--rose);color:#3d1424}
.stat:last-child b{color:var(--rose)}

/* ───── Лилии: рисуются линией, потом наливаются розовым и тихо покачиваются ───── */
/* при скролле — только opacity/transform (дёшево, не перерисовывается); «рисование» линией — где экран стоит: предисловие и конверт */
.lily{display:block;color:var(--rose);overflow:visible;pointer-events:none;opacity:0;
  transform:translateY(14px) scale(.94);transition:opacity 1.6s ease,transform 1.8s var(--ease)}
.lily.in,.in>.lily,.lily-div.in .lily{opacity:var(--lo,.9);transform:none}
.lily-pf,.gate .lily{stroke-dasharray:420;stroke-dashoffset:420;fill-opacity:0;transform:none;transition:none}
@keyframes lilyDraw{to{stroke-dashoffset:0;fill-opacity:1;opacity:var(--lo,.9)}}
@keyframes lilyIn{to{opacity:var(--lo,.9)}}
@keyframes sway{0%,100%{transform:scaleX(var(--sx,1)) rotate(-2.5deg)}50%{transform:scaleX(var(--sx,1)) rotate(2deg)}}
.lily-pf{width:74px;height:72px;margin:0 auto 22px;animation:lilyDraw 3.4s var(--ease) .4s forwards}
.lily-sm{width:64px;height:62px;margin:0 auto}
.lily-corner{position:absolute;bottom:0;width:min(28vw,220px);height:auto;aspect-ratio:240/360;--lo:.5;
  transform-origin:50% 100%;animation:sway 9s ease-in-out infinite;will-change:transform;transition:opacity 2s ease}
.gate.gone .lily-corner,.lily-corner.off{animation-play-state:paused}   /* за экраном не качаем — не тратим кадры */
.lily-corner.l{left:0}
.lily-corner.r{right:0;--sx:-1;animation-delay:-4.5s}
.gate,.hero{overflow:hidden}   /* лилии у краёв не должны расширять страницу (иначе на телефоне она ездит вбок) */
.hero{background:radial-gradient(ellipse 70% 45% at 50% 48%,rgba(244,182,201,.08),transparent 70%)}
.finale{background:radial-gradient(ellipse 70% 50% at 50% 50%,rgba(244,182,201,.07),transparent 70%)}
.gate .lily-corner{z-index:0;--lo:.62;animation:lilyDraw 3.4s var(--ease) .6s forwards,sway 9s ease-in-out infinite}
.gate .lily-corner.r{animation-delay:1s,-4.5s}
.hero .lily-corner{--lo:.6}
.lily-corner{--lf:rgba(244,182,201,.22)}
.ready .hero .lily-corner{animation:lilyIn 2.4s ease 1.2s forwards,sway 9s ease-in-out infinite}
.ready .hero .lily-corner.r{animation-delay:1.6s,-4.5s}
.finale .lily-corner{--lo:.7;width:min(30vw,250px)}
.lily-div{display:flex;align-items:center;justify-content:center;gap:18px;padding:2vh 0 8vh}
.lily-div i{flex:0 1 90px;height:1px;background:linear-gradient(90deg,transparent,var(--rose-soft))}
.lily-div i:last-child{background:linear-gradient(270deg,transparent,var(--rose-soft))}
.lily-div .lily{width:58px;height:56px}
.lily-paper{position:absolute;top:-46px;right:-10px;width:70px;height:105px;color:var(--rose-d);--lo:1;
  --lf:rgba(217,122,155,.2);--lf2:rgba(217,122,155,.1);transform:rotate(26deg) translateY(10px)}
.lily-paper.in{transform:rotate(16deg)}
.map-teaser .lily-sm{margin-bottom:6px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .lily{opacity:var(--lo,.9)!important;stroke-dashoffset:0!important;fill-opacity:1!important}
  .hero-title span,.hero-sub,.hero-kicker,.scroll-cue,.reveal-up,.w{opacity:1!important;transform:none!important;filter:none!important}
}