/* =========================================================================
   JEWCATALOG · общая основа: токены, шрифт, типографика, шторка до/после
   Один материал на оба файла (index.html и mobile.html).
   ========================================================================= */

@font-face{
  font-family:'Manrope';
  src:url('../font/manrope-cyrillic.woff2') format('woff2');
  font-weight:200 800; font-style:normal; font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Manrope';
  src:url('../font/manrope-latin.woff2') format('woff2');
  font-weight:200 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- токены ------------------------------------------------------ */
:root{
  /* тёмная студия */
  --ink:#0A0B0D;
  --ink-1:#0E1013;
  --ink-2:#14171B;
  --ink-3:#1C2026;

  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.17);

  --tx:#F1F3F5;
  --tx-2:#A9AEB6;
  --mut:#868C95;                 /* 5.4:1 на --ink-2: мелкий серый обязан
                                    оставаться читаемым, а не быть намёком */

  /* единственный акцент на весь сайт: холодная сталь */
  --acc:#A8C8E4;
  --acc-dim:rgba(168,200,228,.14);

  /* светлая каталожная плита: это содержимое, а не вторая тема */
  --plate:#FFFFFF;

  /* один радиус-масштаб: плиты 20, мелочь 12, интерактив — пилюля */
  --r-lg:20px;
  --r-md:12px;
  --r-pill:999px;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.4,0,.2,1);

  --shadow:0 1px 2px rgba(0,0,0,.5), 0 24px 60px -20px rgba(0,0,0,.75);
  --shadow-lift:0 2px 4px rgba(0,0,0,.5), 0 40px 90px -24px rgba(0,0,0,.85);

  --pad:40px;
  --maxw:1320px;

  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}          /* держит скрытое скрытым при любом display */

/* overflow-x держим на html, а НЕ на body. Заданный на body overflow
   всплывает на область просмотра, сам корень перестаёт быть прокручиваемым
   контейнером, и CSS-таймлайны `scroll(root)` намертво встают на нуле:
   страница едет, а привязанная к прокрутке анимация не двигается вовсе.
   `clip` вместо `hidden` — чтобы по вертикали осталось `visible`. */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--ink);
  color:var(--tx);
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* height:auto обязателен: у картинок проставлены width/height в разметке
   (это держит CLS), и без сброса высоты max-width ужимает только ширину —
   картинка остаётся 1000px в высоту, а aspect-ratio молча не применяется */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

::selection{background:var(--acc);color:#0A0B0D}

:focus-visible{
  outline:2px solid var(--acc);
  outline-offset:3px;
  border-radius:4px;
}

/* плёнка зерна — ровная заливка на большом экране читается как пустой слой */
body::after{
  content:'';
  position:fixed; inset:0; z-index:90;
  pointer-events:none;
  opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- типографика ------------------------------------------------- */
.h1{
  margin:0;
  /* потолок 57px выбран замером: выше «Каталог, который продаёт» не влезает
     в колонку и заголовок уходит на третью строку */
  font-size:clamp(36px,3.95vw,57px);
  font-weight:300;
  line-height:1.06;
  letter-spacing:-.038em;
  text-wrap:balance;
}
.h2{
  margin:0;
  font-size:clamp(32px,3.5vw,58px);
  font-weight:300;
  line-height:1.06;
  letter-spacing:-.032em;
  text-wrap:balance;
}
.h3{
  margin:0;
  font-size:clamp(19px,1.5vw,24px);
  font-weight:500;
  line-height:1.25;
  letter-spacing:-.02em;
  text-wrap:balance;
}
/* последняя строка абзаца не остаётся одним коротким словом.
   Неразрывные пробелы держат предлоги, а это добирает всё остальное */
p{ text-wrap:pretty }
.lead{
  margin:0;
  font-size:clamp(16px,1.15vw,18.5px);
  line-height:1.55;
  color:var(--tx-2);
  font-weight:300;
  max-width:46ch;
}
.small{
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:var(--mut);
  font-weight:300;
  max-width:52ch;
}
.eyebrow{
  display:block;
  font-size:11px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--mut);
}

/* ---------- одна кнопка на весь сайт ------------------------------------ */
.cta{
  --cta-bg:#F1F3F5;
  --cta-fg:#0A0B0D;
  position:relative;
  display:inline-flex; align-items:center; gap:12px;
  min-height:52px;
  padding:0 28px;
  border-radius:var(--r-pill);
  background:var(--cta-bg);
  color:var(--cta-fg);                       /* контраст 16:1 */
  font-size:15px; font-weight:600; letter-spacing:-.01em;
  text-decoration:none; white-space:nowrap;
  overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 34px -14px rgba(168,200,228,.5);
}
.cta__arrow{
  width:16px;height:16px;flex:none;
  transition:transform .45s var(--ease);
}
.cta:hover{ transform:translateY(-2px); box-shadow:0 2px 6px rgba(0,0,0,.4), 0 22px 48px -16px rgba(168,200,228,.7) }
.cta:hover .cta__arrow{ transform:translateX(4px) }
.cta:active{ transform:translateY(0) scale(.985) }
/* блик проходит по кнопке при наведении: подтверждает, что она живая */
.cta::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.75) 48%,transparent 66%);
  transform:translateX(-120%);
}
.cta:hover::after{ transform:translateX(120%); transition:transform .8s var(--ease) }

.cta-note{
  margin:14px 0 0;
  font-size:13.5px;
  color:var(--mut);
  font-weight:300;
}

/* ---------- каркас ------------------------------------------------------ */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.sec{ position:relative; padding-block:clamp(92px,10.5vh,164px) }
.sec--tight{ padding-block:clamp(72px,8vh,116px) }
.rule{ height:1px; background:var(--line); border:0; margin:0 }

/* =========================================================================
   ШТОРКА ДО / ПОСЛЕ  — главная деталь сайта
   Правила, о которые уже спотыкались:
   1. --p и --pn обязаны наследоваться (inherits:true): значение ставится на
      .cmp, а пользуются им дети. При inherits:false все шторки встают
      по центру намертво.
   2. Двигаем clip-path, а не width: ширина пересобирает раскладку каждый кадр.
   3. Слева всегда «до»: .top висит на кадре _before, линии нужен z-index выше.
   ========================================================================= */
@property --p{ syntax:'<percentage>'; inherits:true; initial-value:50% }
@property --pn{ syntax:'<number>';    inherits:true; initial-value:.5 }

/* прогресс прохода блока по экрану (0…1) и удалённость карточки от центра
   ленты (0 — по центру). Пишет скрипт, пользуется CSS. Наследуются, чтобы
   значение с раздела доставалось вложенным кадрам */
@property --sp{ syntax:'<number>'; inherits:true; initial-value:0 }
@property --dc{ syntax:'<number>'; inherits:true; initial-value:0 }

.cmp{
  --p:50%; --pn:.5;
  position:relative;
  overflow:hidden;
  border-radius:var(--r-lg);
  background:var(--plate);
  touch-action:pan-y;                 /* палец ведёт шторку, страница листается */
  cursor:ew-resize;
  isolation:isolate;
  user-select:none;
  -webkit-user-select:none;
}
.cmp img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
  -webkit-user-drag:none;
}
.cmp__after{ position:relative; z-index:0 }
.cmp__before{
  position:absolute; inset:0; z-index:1;
  clip-path:inset(0 calc(100% - var(--p)) 0 0);
}
/* линия и ползунок поверх кадра */
.cmp__line{
  position:absolute; top:0; bottom:0; z-index:3;
  left:var(--p);
  width:1px; margin-left:-.5px;
  background:linear-gradient(180deg,
    rgba(255,255,255,.15) 0%, rgba(255,255,255,.95) 12%,
    rgba(255,255,255,.95) 88%, rgba(255,255,255,.15) 100%);
  box-shadow:0 0 0 1px rgba(10,11,13,.16), 0 0 22px rgba(168,200,228,.55);
  pointer-events:none;
}
.cmp__grip{
  position:absolute; z-index:4;
  top:50%; left:var(--p);
  width:46px; height:46px; margin:-23px 0 0 -23px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px) saturate(160%);
  -webkit-backdrop-filter:blur(8px) saturate(160%);
  box-shadow:0 2px 6px rgba(10,11,13,.28), 0 12px 30px -10px rgba(10,11,13,.5);
  display:grid; place-items:center;
  pointer-events:none;
  transition:transform .35s var(--ease);
}
.cmp__grip svg{ width:20px; height:20px; color:#0A0B0D }
.cmp:hover .cmp__grip{ transform:scale(1.08) }
.cmp.is-held .cmp__grip{ transform:scale(.94) }

/* дыхание ползунка: на телефоне курсора нет, подсказать больше нечем */
@media (prefers-reduced-motion:no-preference){
  .cmp__grip::before{
    content:''; position:absolute; inset:-6px;
    border-radius:inherit;
    border:1px solid rgba(255,255,255,.5);
    animation:breathe 3.4s var(--ease-io) infinite;
  }
  .cmp.is-held .cmp__grip::before,
  .cmp:hover .cmp__grip::before{ animation:none; opacity:0 }
}
@keyframes breathe{
  0%,100%{ transform:scale(1);   opacity:.5 }
  50%    { transform:scale(1.22); opacity:0 }
}

/* метки: «до» гаснет по мере ухода шторки, «после» разгорается */
.cmp__tag{
  position:absolute; z-index:3; top:16px;
  font-size:10.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  padding:7px 12px;
  border-radius:var(--r-pill);
  background:rgba(10,11,13,.8);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#F1F3F5;
  pointer-events:none;
}
.cmp__tag--b{ left:16px;  opacity:calc(var(--pn) * 1.4) }
.cmp__tag--a{ right:16px; opacity:calc((1 - var(--pn)) * 1.4) }

/* автопрогон, пока блок на экране: человек должен успеть увидеть проблему
   до того, как её уберут, поэтому старт от «до», а не от середины */
@media (prefers-reduced-motion:no-preference){
  .cmp.is-live:not(.is-took){ animation:sweep 9s var(--ease-io) infinite }
}
@keyframes sweep{
  0%   { --p:86%; --pn:.86 }
  8%   { --p:86%; --pn:.86 }
  46%  { --p:14%; --pn:.14 }
  54%  { --p:14%; --pn:.14 }
  92%  { --p:86%; --pn:.86 }
  100% { --p:86%; --pn:.86 }
}

/* ---------- появление по скроллу ---------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .rv{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .85s var(--ease), transform .85s var(--ease);
    transition-delay:var(--d,0ms);
  }
  .rv.in{ opacity:1; transform:none }
}
.no-js .rv{ opacity:1 !important; transform:none !important }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}