/* Мир «Собор» — канон docs/IDENTIKA-SOBOR-2026-08-28.md.
   Механика взята из ЦЕХа (~/cehmedia/app/zhizn.css): движение без библиотек,
   всё гаснет при prefers-reduced-motion, тяжёлые ленты на content-visibility. */

:root{
  --ground:#232617; --ink:#14150E;
  --olive:#565932; --green:#374C33; --moss:#5A6F48; --lime:#99A75F;
  --glow:#DBE399; --gold:#DCD96F; --paper:#EDE6D2;
  --red:#C8102E; --cyan:#1FA3B8;

  --fon:var(--ground); --tekst:var(--glow); --tekst2:#A8AE7E;
  --sloy:#2B2F1D; --gran:#3D4229; --svinec:var(--gold);

  --display:"Cormorant Garamond",Georgia,serif;
  --korpus:"Golos Text","Inter",system-ui,-apple-system,sans-serif;
  --ruka:"Caveat","Cormorant Garamond",cursive;

  --pole:clamp(18px,4vw,32px);
  --shirina:1180px;
  --luch:linear-gradient(14deg,transparent 0%,rgba(219,227,153,.055) 34%,rgba(220,217,111,.09) 47%,transparent 62%);
}

/* Светлая тема — «дневник»: бумажный лист, вставленный в собор.
   Определяется тремя путями: системная, явная и обратная — иначе переключатель
   работал бы только в одну сторону. */
:root[data-theme="light"]{
  --fon:var(--paper); --tekst:var(--ink); --tekst2:#5A5B49;
  --sloy:#E3DAC2; --gran:#CFC4A6; --svinec:#8A7F3C;
  --luch:linear-gradient(14deg,transparent 0%,rgba(86,89,50,.05) 34%,rgba(138,127,60,.08) 47%,transparent 62%);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--fon); color:var(--tekst);
  font-family:var(--korpus); font-size:17px; line-height:1.62;
  letter-spacing:-.01em;
  overflow-x:hidden;
}

/* Луч света в фоне: один слой на всю страницу, медленно уезжает при прокрутке.
   Не радиальное свечение «просто так» — направленный луч, как в нефе. */
body::before{
  content:""; position:fixed; inset:-20vh -10vw; z-index:0; pointer-events:none;
  background:var(--luch); transform:translate3d(0,var(--luch-sdvig,0),0);
  transition:transform .1s linear;
}
body > *{position:relative;z-index:1}

.wrap{max-width:var(--shirina);margin:0 auto;padding:0 var(--pole)}
section{padding:clamp(64px,9vw,132px) 0}

h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.08;letter-spacing:-.02em}
h1{font-size:clamp(38px,6.4vw,76px)}
h2{font-size:clamp(28px,4vw,50px);margin-bottom:22px}
h3{font-size:clamp(20px,2vw,25px)}
p{max-width:62ch}
p + p{margin-top:14px}
.lede{font-size:clamp(18px,2vw,22px);color:var(--tekst);opacity:.92}
.dim{color:var(--tekst2)}
.ruka{font-family:var(--ruka);font-size:clamp(19px,2.2vw,26px);color:var(--gold);line-height:1.3}

/* Анаглиф: две несовпадающие копии одного заголовка. Приём, а не украшение —
   стоит только там, где речь о двух взглядах на одно. */
.anaglif{position:relative;color:var(--tekst)}
.anaglif::before,.anaglif::after{
  content:attr(data-tekst);position:absolute;inset:0;pointer-events:none;
}
.anaglif::before{color:var(--red);transform:translateX(-3px);mix-blend-mode:screen;opacity:.62}
.anaglif::after{color:var(--cyan);transform:translateX(3px);mix-blend-mode:screen;opacity:.62}
:root[data-theme="light"] .anaglif::before,
:root[data-theme="light"] .anaglif::after{mix-blend-mode:multiply;opacity:.42}

/* Свинцовый контур: рамка витражного поля. */
.polje{border:1.5px solid var(--svinec);border-radius:3px;overflow:hidden;background:var(--sloy)}
.polje img{display:block;width:100%;height:auto}
figure figcaption{margin-top:12px;font-size:15px;color:var(--tekst2)}

/* Кнопки: греются при наведении через @property, а не мигают. */
@property --teplo{syntax:'<number>';inherits:true;initial-value:0}
.knopka,.knopka-tih{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;border-radius:2px;font-size:17px;font-weight:500;
  text-decoration:none;cursor:pointer;border:1.5px solid var(--gold);
  transition:--teplo .35s ease,transform .16s ease,background .2s,color .2s;
}
.knopka{--teplo:0;background:var(--gold);color:#1A1A0C;
  box-shadow:0 0 calc(var(--teplo) * 22px) rgba(220,217,111,.5)}
.knopka:hover,.knopka:focus-visible{--teplo:1}
.knopka-tih{background:transparent;color:var(--tekst)}
.knopka-tih:hover,.knopka-tih:focus-visible{background:rgba(220,217,111,.09)}
.knopki{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Портал: первый экран во всю высоту — вход в неф. */
.portal{min-height:100svh;display:grid;align-content:center;padding-block:clamp(72px,10vh,120px);position:relative;overflow:hidden}
.portal-setka{display:grid;gap:clamp(28px,5vw,56px);align-items:center}
@media (min-width:980px){.portal-setka{grid-template-columns:1.04fr .96fr}}
.portal-fon{position:absolute;inset:0;z-index:-1;opacity:.3}
.portal-fon img{width:100%;height:100%;object-fit:cover}

/* Осколки витража: четыре узнавания, каждое — своё поле, смещённое по диагонали. */
.oskolki{display:grid;max-width:920px;margin-top:8px}
.oskolok{padding:28px 0;font-family:var(--display);font-size:clamp(21px,2.4vw,31px);line-height:1.26}
.oskolok + .oskolok{border-top:1.5px solid var(--gran)}
.oskolok:nth-child(even){margin-left:clamp(0px,6vw,84px)}

.para{display:grid;gap:clamp(26px,4vw,52px)}
@media (min-width:900px){
  .para{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
  .para.uzhe-kartinka{grid-template-columns:minmax(0,.74fr) minmax(0,1fr)}
  .para.kartinka-sprava > :first-child{order:-1}
}

/* Три шага прохода. Колонки не схлопываются в одно слово на строку:
   minmax(0,1fr) вместо 1fr — иначе длинное слово задаёт ширину. */
.shagi{display:grid;gap:clamp(24px,3vw,40px);margin-top:38px}
@media (min-width:860px){.shagi{grid-template-columns:repeat(3,minmax(0,1fr))}}
.shag-linija{height:1.5px;background:var(--gold);width:44px;margin-bottom:14px}

/* Придел продукта: цена и состав рядом, не в колонке шириной в слово. */
.pridel{display:grid;gap:clamp(24px,3vw,44px)}
@media (min-width:900px){.pridel{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:start}}
.spisok{list-style:none;display:grid;gap:14px}
.spisok li{padding-left:26px;position:relative;color:var(--tekst);max-width:56ch}
.spisok li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:1.5px;background:var(--gold)}
.cena{font-family:var(--display);font-size:clamp(34px,4.4vw,54px);line-height:1;margin:8px 0 6px}
.nedeli{display:grid;gap:18px}
.nedelja{border-left:1.5px solid var(--gran);padding-left:20px}
.nedelja b{display:block;font-family:var(--display);font-size:20px;font-weight:600;margin-bottom:4px}
.nedelja p{color:var(--tekst2);font-size:16px;max-width:52ch}

details.vopros{border-top:1.5px solid var(--gran);padding:18px 0}
details.vopros summary{cursor:pointer;font-family:var(--display);font-size:clamp(19px,2vw,23px);list-style:none;display:flex;justify-content:space-between;gap:16px}
details.vopros summary::-webkit-details-marker{display:none}
details.vopros summary::after{content:"+";color:var(--gold);font-size:24px;line-height:1}
details.vopros[open] summary::after{content:"–"}
details.vopros p{margin-top:12px;color:var(--tekst2)}

footer{border-top:1.5px solid var(--gran);padding:44px 0 60px;font-size:15px;color:var(--tekst2)}
footer a{color:var(--tekst2);text-decoration:none;border-bottom:1px solid transparent}
footer a:hover{color:var(--gold);border-color:var(--gran)}
.futer-ssylki{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:18px}

/* Переключатель темы — «зажечь свет»: тумблер собор/дневник. */
.tema-knopka{position:fixed;right:16px;top:16px;z-index:20;width:42px;height:42px;border-radius:50%;
  border:1.5px solid var(--gran);background:var(--sloy);color:var(--tekst);cursor:pointer;
  display:grid;place-items:center;font-size:17px;transition:border-color .2s,transform .16s}
.tema-knopka:hover{border-color:var(--gold);transform:scale(1.06)}

/* content-visibility здесь НЕ применяется намеренно: страница короткая, выигрыш
   нулевой, а блоки за экраном перестают отрисовываться — на снимке всей страницы
   осколки и шаги выходили пустыми. Вскрыто приёмкой 28.08. */

/* ── ЖИВОЙ ГЕРОЙ. Кадры взгляда лежат стопкой, показывается один; пыль летает
   поверх на canvas. Механика — ЦЕХ (~/cehmedia/app), там герой смотрел на курсор
   и моргал; здесь то же самое, только вместо угольков от огня — пыль в луче. */
.geroy{position:relative;overflow:hidden}
.geroy .kadr{display:block;width:100%;height:auto;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.geroy .kadr-zhiv{position:absolute;inset:0;opacity:0;transition:opacity .26s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.geroy .kadr-zhiv[data-on]{opacity:1}
.geroy .kadr-zhiv[data-k="blink"]{transition-duration:.09s}
.geroy .pylinki{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen}
:root[data-theme="light"] .geroy .pylinki{mix-blend-mode:multiply;opacity:.5}

/* ── СЦЕНЫ ПРОХОДА. У каждого раздела свой слой витража позади текста: он идёт
   медленнее страницы, поэтому колонны «проплывают» — ощущение движения по нефу.
   Работает на CSS-таймлайне прокрутки; где его нет, слой просто стоит. */
.scena{position:absolute;inset:-12% 0;z-index:-1;pointer-events:none;overflow:hidden}
.scena img{width:100%;height:100%;object-fit:cover;opacity:.16;filter:saturate(.85)}
:root[data-theme="light"] .scena img{opacity:.1}
/* Вуаль поверх сцены: без неё текст спорит с витражом — на калейдоскопе это
   видно сразу. Плотнее к центру, где идёт колонка текста. */
.scena::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 70% at 50% 50%, color-mix(in srgb, var(--fon) 82%, transparent) 0%, color-mix(in srgb, var(--fon) 55%, transparent) 100%)}
section{position:relative}
@supports (animation-timeline: view()){
  .scena img{animation:proplyt linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes proplyt{from{transform:translateY(-7%) scale(1.08)} to{transform:translateY(7%) scale(1.08)}}
}

/* Неф: тонкая золотая линия слева, растёт по мере прохода страницы.
   Показывает, сколько собора уже пройдено — без процентов и без цифр. */
.nef{position:fixed;left:0;top:0;bottom:0;width:2px;z-index:15;pointer-events:none;background:var(--gran)}
.nef i{display:block;width:100%;height:100%;background:var(--gold);transform-origin:top;transform:scaleY(0)}
@supports (animation-timeline: scroll()){
  .nef i{animation:prohod linear both;animation-timeline:scroll(root)}
  @keyframes prohod{from{transform:scaleY(0)} to{transform:scaleY(1)}}
}
@media (prefers-reduced-motion:reduce){
  .scena img{animation:none}
  .nef i{animation:none;transform:scaleY(1);opacity:.4}
  .geroy .kadr,.geroy .kadr-zhiv{transition:none}
}