/* ЛЕС — концепция клипа. Тема слайда = состояние клипа: ночь (холодный монохром) → белое → день (райский зелёный).
   Акцент ночи — чистый белый (линии), дня — зелёный. Сигнатура — живые белые линии (js/lines.js), на экране «Белое» заливают всё. */
@font-face{font-family:PM;src:url(../fonts/PM-400-cyrillic.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:PM;src:url(../fonts/PM-400-latin.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}

:root{--bg:#050608;--ink:#e6e9ec;--mute:rgba(230,233,236,.5);--line:rgba(230,233,236,.14);--accent:#fff}
.slide{background:var(--bg);color:var(--ink)}
.t-white{--bg:#fbfbfa;--ink:#0c0d0e;--mute:rgba(12,13,14,.5);--line:rgba(12,13,14,.14);--accent:#0c0d0e}
.t-day{--bg:#e4efd6;--ink:#0f2a15;--mute:rgba(15,42,21,.58);--line:rgba(15,42,21,.18);--accent:#2e8a3a}
.t-photo-day{--accent:#c9f2a6}
.progress{background:#fff;mix-blend-mode:difference}
.bar{position:fixed;top:calc(var(--pad)*.5 - 6px);left:50%;translate:-50% 0;z-index:12}
.lang{display:flex;gap:2px;border:1px solid rgba(255,255,255,.28);padding:2px;background:rgba(8,9,11,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lang button{all:unset;cursor:pointer;font:700 11px/1 M;letter-spacing:.14em;padding:7px 10px;color:#fff}
.lang button[aria-pressed="true"]{background:#fff;color:#000}
.lang button:focus-visible{outline:2px solid #fff;outline-offset:2px}

.mono{font:400 clamp(10px,.72vw,13px)/1.3 PM,monospace;letter-spacing:.06em;text-transform:uppercase}
.h{font:700 clamp(28px,3.6vw,72px)/1.22 U;letter-spacing:-.02em;text-transform:uppercase;max-width:16ch}
.txt{max-width:40ch;color:var(--ink);opacity:.86}
.todo{border-radius:0}
.tag{position:absolute;right:var(--pad);bottom:calc(var(--pad)*1.4);z-index:4;color:rgba(255,255,255,.55)}
.chap .tag{display:none}
.bgimg{position:absolute;inset:0;z-index:-2;margin:0}
.bgimg img{width:100%;height:100%;object-fit:cover}
.shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(3,4,6,.88) 0%,rgba(3,4,6,.25) 46%,rgba(3,4,6,0) 70%)}
.shade.l{background:linear-gradient(90deg,rgba(3,4,6,.85) 0%,rgba(3,4,6,.3) 45%,rgba(3,4,6,0) 70%)}

/* огромное слово: половина букв — контур, кадр виден сквозь контур */
.word{font:900 clamp(80px,19vw,380px)/.78 U9,U;letter-spacing:-.012em;text-transform:uppercase;white-space:nowrap}
.word .o{color:transparent;-webkit-text-stroke:clamp(1px,.12vw,2px) var(--wc,#fff)}

/* 01 обложка */
.cover{align-content:end;gap:calc(var(--pad)*.45)}
.cover .word{font-size:clamp(110px,30vw,560px);margin-left:-.04em;color:#fff}
.cover .line1{font:400 clamp(18px,1.9vw,36px)/1.25 M;max-width:26ch}
.cover .meta{display:flex;gap:clamp(18px,3.2vw,64px);flex-wrap:wrap;color:var(--mute);border-top:1px solid var(--line);padding-top:16px}
.cover .meta b{display:block;color:var(--ink);font-weight:700}
.cover .meta .todo{margin-top:4px}

/* 02 идея: путь из пяти состояний */
.idea{grid-template-rows:auto 1fr;gap:calc(var(--pad)*.6);align-content:center}
.idea .top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:var(--pad);align-items:end}
.path{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-self:center;position:relative}
.path::before{content:"";position:absolute;left:0;right:0;top:calc(var(--th) + 22px);height:1px;background:linear-gradient(90deg,#3a3f45,#fff 50%,#fff 60%,#7fcf6a)}
.path{--th:clamp(90px,13vw,240px)}
.st{padding-right:clamp(8px,1.2vw,20px)}
.st figure{height:var(--th);overflow:hidden;margin:0}
.st img{width:100%;height:100%;object-fit:cover}
.st i{display:block;width:9px;height:9px;background:var(--ink);margin:18px 0 14px;rotate:45deg}
.st b{display:block;font:700 clamp(14px,1.25vw,24px)/1 U;text-transform:uppercase}
.st span{display:block;margin-top:.4em;color:var(--mute);font-size:.9em}
.st:nth-child(3) figure{outline:1px solid rgba(255,255,255,.25)}

/* 03 герой */
.hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--pad);align-items:center}
.hero figure{margin:0;height:min(72svh,760px);overflow:hidden}
.hero figure img{width:100%;height:100%;object-fit:cover;object-position:50% 0%}
.hero .copy{display:grid;gap:1.1em;align-content:center}

/* разделы с огромным словом на кадре */
.chap{align-content:end;gap:calc(var(--pad)*.4)}
.chap .word{color:#fff;margin-left:-.05em;margin-bottom:-.06em}
.chap .h{max-width:22ch}
.chap .cap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,3vw,60px);align-items:end;border-top:1px solid rgba(255,255,255,.2);padding-top:18px;color:#fff}
.chap .cap .txt{color:#fff}

/* ночь, подробно: кадр крупно + кадр мелко */
.pair{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);grid-template-rows:1fr auto;gap:clamp(14px,2vw,36px) var(--pad);align-items:end}
.pair .big{grid-row:1/3;margin:0;height:100%;max-height:78svh;overflow:hidden;align-self:center}
.pair .big img,.pair .small img{width:100%;height:100%;object-fit:cover}
.pair .small{margin:0;aspect-ratio:3/2;overflow:hidden}
.pair .copy{display:grid;gap:.9em;align-self:start;padding-top:calc(var(--pad)*.4)}

/* 04 белое: кадр линий → линии заливают экран (js) → белый лист с текстом */
.white{align-content:center;justify-items:start;gap:1em;transition:background-color 1.2s}
.white .bgimg{transition:opacity 1.4s}
.white.done .cut{transition-duration:.8s}
.white .copy{display:grid;gap:1em;opacity:0;transition:opacity 1s .2s;color:#0c0d0e}
.white.done{--bg:#fff;--ink:#0c0d0e;--mute:rgba(12,13,14,.5);--line:rgba(12,13,14,.14);--accent:#0c0d0e}
.white.done .bgimg{opacity:0}
.white.done .copy{opacity:1}
.white .word{--wc:#0c0d0e;font-size:clamp(90px,24vw,460px);color:#0c0d0e;opacity:.06;position:absolute;right:-.04em;bottom:-.12em;z-index:-1}
html.rm .white,html.print .white{--bg:#fff;--ink:#0c0d0e;--mute:rgba(12,13,14,.5);--accent:#0c0d0e}
html.rm .white .bgimg,html.print .white .bgimg{opacity:0}
html.rm .white .copy,html.print .white .copy{opacity:1;transition:none}
/* после заливки проявляется тот же лес, только белый (Umid 11.11); слева подложка — текст читается */
.white .word{display:none}
.white .wfor{opacity:0;transition:opacity 2.2s .3s}
.white .wfor::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.88) 32%,rgba(255,255,255,0) 68%)}
.white.done .wfor,html.rm .white .wfor,html.print .white .wfor{opacity:1}
@media (max-aspect-ratio:1/1){.white .wfor::after{background:linear-gradient(0deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.9) 40%,rgba(255,255,255,.9) 62%,rgba(255,255,255,0) 85%)}}

/* 05 очищение: три кадра разной величины на белом */
.clean{grid-template-rows:auto 1fr;gap:calc(var(--pad)*.6);align-content:center}
.clean .top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--pad);align-items:end}
.trio{display:grid;grid-template-columns:1.5fr 1fr .72fr;gap:clamp(10px,1.4vw,26px);align-items:end}
.trio figure{margin:0;overflow:hidden}
.trio figure:nth-child(1){aspect-ratio:3/2}
.trio figure:nth-child(2){aspect-ratio:4/5}
.trio figure:nth-child(3){aspect-ratio:3/4}
.trio img{width:100%;height:100%;object-fit:cover}

/* 06 день */
.t-photo-day .shade{background:linear-gradient(0deg,rgba(8,30,12,.78) 0%,rgba(8,30,12,.2) 45%,rgba(8,30,12,0) 70%)}
.day2{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:var(--pad);align-items:center}
.day2 figure{margin:0;height:min(76svh,820px);overflow:hidden}
.day2 img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.day2 .copy{display:grid;gap:1em}
.day2 .copy .h{color:#0f2a15}

/* свет: четыре состояния полосами */
.arc{grid-template-rows:auto 1fr;gap:calc(var(--pad)*.6);align-content:center}
.bands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.band{padding:0 clamp(10px,1.4vw,28px) 0 0}
.band+.band{padding-left:clamp(10px,1.4vw,28px);border-left:1px solid var(--line)}
.band figure{margin:clamp(14px,1.6vw,28px) 0 1em;height:clamp(120px,30svh,340px);overflow:hidden}
.band img{width:100%;height:100%;object-fit:cover}
.band b{display:block;font:700 clamp(14px,1.2vw,22px)/1 U;text-transform:uppercase;margin-bottom:.5em}
.band p{color:var(--mute)}

/* как снимаем */
.how{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:var(--pad);align-items:center}
.how figure{margin:0;position:relative;aspect-ratio:3/2;overflow:hidden}
.how img{width:100%;height:100%;object-fit:cover}
.how figcaption{position:absolute;left:12px;bottom:10px;color:rgba(255,255,255,.7)}
.how .copy{display:grid;gap:1em}

/* вертикали */
.reels{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:var(--pad);align-items:center}
.phones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.2vw,22px);align-items:center}
.phones figure{margin:0;aspect-ratio:9/16;overflow:hidden;outline:1px solid var(--line);outline-offset:4px}
.phones figure:nth-child(even){translate:0 8%}
.phones img{width:100%;height:100%;object-fit:cover}
.reels .copy{display:grid;gap:1em}

/* дальше: открытые вопросы */
.open{grid-template-rows:auto 1fr;gap:calc(var(--pad)*.6);align-content:center}
.open ol{align-content:start;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--pad);counter-reset:q;border-top:1px solid var(--line)}
.open li{counter-increment:q;display:flex;gap:1.2em;padding:1em 0;border-bottom:1px solid var(--line);font-size:clamp(16px,1.4vw,26px)}
.open li::before{content:counter(q,decimal-leading-zero);font:400 .7em/2 PM,monospace;color:var(--mute)}

/* финал — дневной зелёный */
.final{background:var(--bg);color:var(--ink)}
.chrome{text-align:left}
.final .display{font-size:clamp(44px,10vw,210px)}
.final .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:.6em}
.btn{display:inline-block;padding:14px 22px;background:var(--ink);color:var(--bg);text-decoration:none;font:700 15px/1 M}
.btn.ghost{background:transparent;color:var(--ink);outline:1px solid var(--ink)}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* холст линий поверх всего: не ловит касания */
#lines{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.cut{z-index:-1}
.cut img{width:100%;height:100%;object-fit:cover}
html.print #lines,html.rm #lines{display:none}

/* телефон: одна мысль на экран */
@media (max-aspect-ratio:1/1){
  .idea .top,.clean .top{grid-template-columns:minmax(0,1fr);gap:.8em}
  .path{grid-template-columns:minmax(0,1fr);--th:64px;gap:8px}
  .path::before{display:none}
  .st{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:14px;align-items:center;padding:0}
  .st figure{grid-row:1/3;height:64px}
  .st i{display:none}
  .hero,.day2,.how,.reels{grid-template-columns:minmax(0,1fr);align-content:center;gap:calc(var(--pad)*.8)}
  .hero figure{height:38svh}
  .day2 figure{height:42svh;order:-1}
  .pair{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;align-content:center}
  .pair .big{grid-row:auto;height:36svh}
  .pair .small{display:none}
  .chap .cap{grid-template-columns:minmax(0,1fr);gap:.6em}
  .trio{grid-template-columns:1fr 1fr}
  .trio figure:nth-child(1){grid-column:1/3}
  .trio figure:nth-child(2),.trio figure:nth-child(3){aspect-ratio:1}
  .bands{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}
  .band:nth-child(3){border-left:0;padding-left:0}
  .band figure{height:14svh}
  .phones{grid-template-columns:repeat(4,minmax(0,1fr))}
  .open ol{grid-template-columns:minmax(0,1fr)}
  .open li{padding:.7em 0}
  .tag{display:none}
  .chrome>span:first-child{visibility:hidden}
  .chrome .sign>span:last-child{display:none}
  .slide{padding-bottom:calc(var(--pad)*2.6)}
  .chap .word{font-size:16.5vw}
  .cover .word{font-size:34vw}
  .trio figure:nth-child(1){aspect-ratio:16/10}
}
/* V2: глава на белом кадре (финал «Свобода») — тёмный текст на белой подложке */
.t-photo-white{--accent:#0c0d0e}
.t-photo-white .shade{background:linear-gradient(0deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.4) 46%,rgba(255,255,255,0) 70%)}
.t-photo-white .word{color:#0c0d0e;--wc:#0c0d0e}
.t-photo-white .cap{color:#0c0d0e;border-top-color:rgba(12,13,14,.2)}
.t-photo-white .cap .txt{color:#0c0d0e}
.t-photo-white .kicker{color:rgba(12,13,14,.6)}
.t-photo-white .chrome,.t-photo-white .chrome .num{color:rgba(12,13,14,.66)}
.t-photo-white .chrome .num b{color:#0c0d0e}