/* ============================================================
   Eclipse content-hub — общий каркас.
   Токены и визуал синхронны с landing-prototype/index.html.
   Пути корне-абсолютные (/assets/...) — работают на любой глубине
   (/gallery/, /vidy/<slug>/) и на деплое eclipse-a.ru.
   ============================================================ */
:root{
  --bg:#14100F;
  --surface-1:#1E1B1A;
  --surface-2:#2A2624;
  --text:#E0E0E0;
  --text-dim:#A8A09D;
  --pink:#FF9EA5;
  --btn-text:#1A1A1A;
  --radius:24px;
  --font-display:'Unbounded',sans-serif;
  --font-body:'Onest',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-weight:300;line-height:1.7;
  overflow-x:hidden;overflow-wrap:break-word;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.25;color:#fff}
a{color:var(--pink)}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px}

/* ====== SHIMMER-WORD: перелив на ключевых словах заголовков (канон проекта, HARD) ====== */
.shimmer-word{
  background:linear-gradient(90deg, rgba(255,158,165,.55), #FFFFFF 45%, #FFC9CD 55%, rgba(255,158,165,.55));
  background-size:200% 100%;background-position:100% center;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:shimmer-text 4s ease-in-out infinite;
}
@keyframes shimmer-text{0%,100%{background-position:100% center}50%{background-position:0% center}}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px;position:relative;z-index:2}
.label{font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--pink);margin-bottom:16px;font-weight:600}
.pink{color:var(--pink)}

/* ====== КНОПКИ (как на лендинге) ====== */
.btn{display:inline-block;background:var(--pink);color:var(--btn-text);
  font-family:var(--font-body);font-weight:600;font-size:17px;
  padding:16px 34px;border-radius:999px;text-decoration:none;border:none;cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease}
.btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 40px rgba(255,158,165,.35)}
.btn-ghost{display:inline-block;background:transparent;color:var(--pink);
  border:1px solid rgba(255,158,165,.4);font-family:var(--font-body);font-weight:600;font-size:15px;
  padding:12px 26px;border-radius:999px;text-decoration:none;transition:background .25s,border-color .25s}
.btn-ghost:hover{background:rgba(255,158,165,.1);border-color:var(--pink)}

/* ====== ШАПКА-РЕЛЬСА (адаптирована с лендинга) ====== */
.hub-topbar{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:60;
  width:min(1180px,calc(100% - 28px));display:flex;align-items:center;gap:18px;
  background:rgba(20,16,15,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:7px 12px 7px 18px}
.hub-topbar img.tb-logo{height:38px;width:auto;display:block;flex:0 0 auto}
.tb-logo-link{display:inline-flex;align-items:center;flex:0 0 auto;padding:0 9px;margin:0 -3px;
  border-radius:11px;text-decoration:none;transition:background .25s,box-shadow .25s}
.tb-logo-link:hover{background:rgba(255,158,165,.09);box-shadow:0 0 18px rgba(255,158,165,.16)}
.tb-nav{display:flex;gap:2px;margin:0 auto;align-items:center}
.tb-nav a{padding:8px 13px;color:var(--text-dim);font-weight:500;font-size:14px;
  text-decoration:none;border-radius:8px;transition:color .25s;white-space:nowrap}
.tb-nav a:hover,.tb-nav a[aria-current="page"]{color:var(--pink)}
/* CTA в шапке = канонический shimmer-btn лендинга (index.html .shim-btn, PROJECT_RULES §🅷, HARD).
   Тёмное стекло + бегущий розовый блик сквозь крышку 85% — НЕ плоская розовая заливка. */
.shim-btn{
  --spread:90deg; --shimmer:#FF9EA5; --sradius:999px; --speed:2.5s; --cut:2px; --sbg:#1E1B1A;
  position:relative;z-index:0;display:inline-flex;align-items:center;justify-content:center;
  overflow:hidden;white-space:nowrap;cursor:pointer;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.1);border-radius:var(--sradius);
  background:var(--sbg);color:var(--pink);
  font-family:var(--font-body);font-weight:600;font-size:14px;
  padding:7px 20px;text-decoration:none;
  transform:translateZ(0);transition:transform .3s ease;
}
.shim-btn:active{transform:translateY(1px)}
.shim-track{position:absolute;inset:0;overflow:visible;filter:blur(2px);z-index:-30;container-type:size}
.shim-slide{position:absolute;inset:0;height:100cqh;aspect-ratio:1;border-radius:0;
  animation:shimmer-slide var(--speed) ease-in-out infinite alternate}
.shim-spin{position:absolute;inset:-100%;width:auto;
  background:conic-gradient(from calc(270deg - (var(--spread) * .5)), transparent 0, var(--shimmer) var(--spread), transparent var(--spread));
  animation:spin-around calc(var(--speed) * 2) infinite linear}
.shim-gloss{position:absolute;inset:0;border-radius:var(--sradius);pointer-events:none;
  box-shadow:inset 0 -8px 10px rgba(255,158,165,.12);transition:box-shadow .3s ease}
.shim-btn:hover .shim-gloss{box-shadow:inset 0 -6px 10px rgba(255,158,165,.28)}
.shim-cap{position:absolute;inset:var(--cut);border-radius:var(--sradius);background:rgba(30,27,26,.85);z-index:-20}
@keyframes shimmer-slide{100%{transform:translate(calc(-100% + 100cqw))}}
@keyframes spin-around{
  0%{transform:translateZ(0) rotate(0)}
  15%,35%{transform:translateZ(0) rotate(90deg)}
  65%,85%{transform:translateZ(0) rotate(270deg)}
  100%{transform:translateZ(0) rotate(1turn)}
}
.tb-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;flex:0 0 auto}
.tb-burger span{width:24px;height:2px;background:var(--text);border-radius:2px;transition:.3s}
@media (max-width:880px){
  .tb-nav{position:fixed;top:70px;left:14px;right:14px;flex-direction:column;align-items:stretch;
    background:rgba(20,16,15,.97);border:1px solid rgba(255,255,255,.1);border-radius:14px;
    padding:10px;gap:4px;margin:0;display:none;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .tb-nav.open{display:flex}
  .tb-nav a{padding:12px 14px;font-size:16px}
  .tb-burger{display:flex;margin-left:6px}
  /* кнопка «Записаться» ОСТАЁТСЯ в шапке на мобиле (канон §🅷, как на лендинге) — не прятать */
  .shim-btn{margin-left:auto}
}

/* ====== HERO контент-страниц ====== */
.hub-hero{padding:128px 20px 48px;text-align:center;position:relative;overflow:hidden}
.hub-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 480px at 50% -20%, rgba(255,158,165,.16), transparent 62%);mix-blend-mode:screen}
.hub-hero h1{font-size:clamp(30px,5.4vw,52px);margin:0 auto 18px;max-width:780px}
.hub-hero .sub{color:var(--text-dim);font-size:clamp(16px,2.4vw,19px);max-width:620px;margin:0 auto}
.crumbs{font-size:13px;color:var(--text-dim);margin-bottom:22px}
.crumbs a{color:var(--text-dim);text-decoration:none}
.crumbs a:hover{color:var(--pink)}

section{position:relative;padding:56px 20px}

/* ====== КАРТОЧКИ ====== */
.card{background:var(--surface-1);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);
  overflow:hidden;transition:transform .3s ease,border-color .3s ease}
.card:hover{transform:translateY(-4px);border-color:rgba(255,158,165,.3)}

/* ====== ПРОЗА статей ====== */
.prose{max-width:720px;margin:0 auto;font-size:17px;line-height:1.8;color:var(--text)}
.prose h2{font-size:clamp(23px,3.6vw,32px);margin:46px 0 16px}
.prose h3{font-size:clamp(19px,2.8vw,24px);margin:34px 0 12px;color:var(--pink)}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:24px}
.prose li{margin:0 0 9px}
.prose img,.prose figure{border-radius:var(--radius);margin:26px 0}
.prose figcaption{font-size:14px;color:var(--text-dim);margin-top:8px;text-align:center}
.prose blockquote{border-left:3px solid var(--pink);padding:6px 0 6px 20px;margin:24px 0;color:var(--text-dim);font-style:italic}
.callout{background:var(--surface-2);border:1px solid rgba(255,158,165,.18);border-radius:18px;
  padding:20px 24px;margin:26px 0;font-size:16px}
.callout b{color:var(--pink)}

/* ====== CTA-блок ====== */
.cta-band{text-align:center;background:linear-gradient(180deg,var(--surface-1),var(--bg));
  border:1px solid rgba(255,158,165,.16);border-radius:var(--radius);padding:44px 24px;margin:48px auto;max-width:820px}
.cta-band h2{font-size:clamp(24px,4vw,34px);margin-bottom:14px}
.cta-band p{color:var(--text-dim);margin-bottom:24px;max-width:520px;margin-left:auto;margin-right:auto}

/* ====== ФУТЕР (как на лендинге) ====== */
footer{background:var(--surface-1);padding:56px 20px 40px;margin-top:64px;border-top:1px solid rgba(255,255,255,.05)}
.foot-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.7fr 1fr 1.1fr 1.3fr;gap:32px;align-items:start}
.foot-logo{height:54px;width:auto;opacity:.92;margin-bottom:14px;display:block}
.foot-brand p{color:var(--text-dim);font-size:14px;line-height:1.6;max-width:300px;margin:0}
.foot-h{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-dim);margin-bottom:14px;opacity:.7}
.foot-col a{display:block;color:var(--text-dim);text-decoration:none;font-size:14.5px;padding:5px 0;transition:color .25s}
.foot-col a:hover{color:var(--pink)}
.foot-legal{max-width:1100px;margin:34px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.05);
  color:var(--text-dim);font-size:12.5px;opacity:.9;line-height:1.6}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media (max-width:460px){.foot-grid{grid-template-columns:1fr}}

/* ====== ЖИВОСТЬ (hub.js) — парность с лендингом ====== */
/* пылинки в луче hero (как на лендинге; инъекция через hub.js, RM — не создаются) */
.hub-dust{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.hub-dust i{position:absolute;bottom:-8px;width:4px;height:4px;border-radius:50%;
  background:rgba(255,158,165,.8);filter:blur(1px);animation:hub-dust linear infinite}
@keyframes hub-dust{
  0%{transform:translateY(0);opacity:0}
  18%{opacity:.85}80%{opacity:.35}
  100%{transform:translateY(-300px);opacity:0}}

/* дышащее свечение сцены (постановочные фото энциклопедии/герой; парность с лендингом) */
@keyframes breathe{0%,100%{opacity:.8}50%{opacity:1.15}}

/* compact-шапка: чуть плотнее и темнее при прокрутке */
.hub-topbar{transition:padding .25s ease,background .25s ease,box-shadow .25s ease}
.hub-topbar.compact{padding-top:4px;padding-bottom:4px;
  background:rgba(20,16,15,.94);box-shadow:0 8px 30px rgba(0,0,0,.32)}
.hub-topbar.compact img.tb-logo{height:32px;transition:height .25s ease}

/* полоса прогресса чтения статьи */
.read-prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;
  background:linear-gradient(90deg,var(--pink),#FFC9CD);
  transform:scaleX(0);transform-origin:0 50%;will-change:transform}

/* sticky-оглавление статьи (десктоп) */
.toc{position:fixed;top:120px;left:max(16px,calc(50% - 580px));width:200px;z-index:40;
  font-size:13.5px;line-height:1.4}
.toc-h{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-dim);opacity:.7;margin-bottom:12px}
.toc a{display:block;color:var(--text-dim);text-decoration:none;padding:7px 0 7px 13px;
  border-left:2px solid rgba(255,158,165,.16);transition:color .25s,border-color .25s}
.toc a:hover{color:var(--text)}
.toc a.on{color:var(--pink);border-left-color:var(--pink)}
@media (max-width:1279px){.toc{display:none}}

/* видео-карточка под лучом на таче (десктоп даёт :hover из своего CSS) */
.vv-card.lit{border-color:rgba(255,158,165,.3)}

/* stagger-reveal сеток — пред-скрытие под .js (без FOUC), показ по классу .in от hub.js */
.js .g-grid>*,.js .vh-grid>*,.js .bl-hub>*,.js .vv-grid>*,.js [data-stagger]>*{
  opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.js .g-grid>.in,.js .vh-grid>.in,.js .bl-hub>.in,.js .vv-grid>.in,.js [data-stagger]>.in{
  opacity:1;transform:none}

/* IO-reveal — прячем ТОЛЬКО при работающем JS (html.js); без JS контент виден (SEO/no-JS) */
.js .r{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .r.in{opacity:1;transform:none}
/* глобальный гаситель движения (канон проекта 🅸) — покрывает shimmer-word/reveal/любую будущую анимацию */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .r{opacity:1;transform:none}
  /* сетки видны сразу (hub.js под RM не добавляет .in) */
  .js .g-grid>*,.js .vh-grid>*,.js .bl-hub>*,.js .vv-grid>*,.js [data-stagger]>*{opacity:1!important;transform:none!important}
  .shimmer-word{-webkit-text-fill-color:var(--pink);color:var(--pink);background:none}
  html{scroll-behavior:auto}
}

/* ====== Брендовый видеоплеер Eclipse — общая панель управления для всех .vx-vid ======
   Строится в hub.js §8. Появляется при .playing (десктоп — по hover/focus, тач — всегда).
   Канон: тач-таргеты ≥44px (🅸), без тяжёлого blur (L-063) — сплошной градиент, дёшево для GPU. */
.vx-vid .vx-ctrl{position:absolute;left:0;right:0;bottom:0;z-index:5;
  display:flex;align-items:center;gap:8px;padding:8px 10px env(safe-area-inset-bottom,8px);box-sizing:border-box;
  background:linear-gradient(transparent,rgba(12,9,8,.5) 35%,rgba(12,9,8,.86));
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s ease;pointer-events:none}
.vx-vid.playing .vx-ctrl{pointer-events:auto}
.vx-vid.playing:hover .vx-ctrl,.vx-vid.playing:focus-within .vx-ctrl{opacity:1;visibility:visible;transform:none}
@media (hover:none){.vx-vid.playing .vx-ctrl{opacity:1;visibility:visible;transform:none}}
.vx-ctrl button{flex:0 0 auto;width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.13);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s ease}
.vx-ctrl button:hover{background:rgba(255,158,165,.34)}
.vx-ctrl svg{width:19px;height:19px;fill:currentColor;display:block;pointer-events:none}
.vx-seek{flex:1 1 auto;min-width:36px;height:34px;cursor:pointer;position:relative;
  display:flex;align-items:center;touch-action:none}
.vx-seek-track{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:6px;border-radius:3px;background:rgba(255,255,255,.22)}
.vx-seek-fill{position:absolute;left:0;top:50%;transform:translateY(-50%);height:6px;width:0;border-radius:3px;background:rgba(255,255,255,.5)}
.vx-seek-knob{position:absolute;top:50%;left:0;width:13px;height:13px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(0,0,0,.5)}
.vx-time{flex:0 0 auto;font-size:12px;color:#fff;font-variant-numeric:tabular-nums;
  min-width:80px;text-align:center;white-space:nowrap}
/* узкие портретные карточки энциклопедии — прячем время, оставляем кнопки + шкалу */
.vx-vid--port .vx-time{display:none}
@media (max-width:480px){.vx-time{display:none}}
@media (prefers-reduced-motion:reduce){
  .vx-vid .vx-ctrl{transition:none}
  .vx-vid.playing:hover .vx-ctrl,.vx-vid.playing:focus-within .vx-ctrl{opacity:1;visibility:visible;transform:none}
}