/* Декоративный слой: то, что делает страницу похожей на Linear.
 *
 * ⚠️ ВСЁ ЗДЕСЬ — ТОЛЬКО `transform`, `opacity`, `mask` И ГРАДИЕНТЫ. Ни WebGL,
 * ни картинок, ни библиотек: страницу открывают с телефона в потоке работы, и
 * вес важнее эффектов. Каждый приём ниже стоит ноль байт трафика.
 *
 * ⚠️ ВСЁ ОБЯЗАНО ВЫКЛЮЧАТЬСЯ по `prefers-reduced-motion` и НЕ НЕСТИ СМЫСЛА:
 * если приём убрать, страница должна остаться читаемой и полной.
 */

/* ── Свечение под макетом ──────────────────────────────────────────── */
.glow { position: relative; }
.glow::before {
  content: ''; position: absolute; z-index: -1;
  left: 50%; top: -8%; width: min(1100px, 108%); height: 76%;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 60% 60% at 30% 40%, var(--glow), transparent 70%),
    radial-gradient(ellipse 55% 55% at 75% 30%, var(--glow-2, transparent), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

/* ── Сетка и зерно: фактура, а не рисунок ──────────────────────────── */
.grid-bg { position: relative; isolation: isolate; }
.grid-bg::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 76px 76px;
  /* Срез к краям — иначе сетка выглядит обоями, а не фактурой. */
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 78%);
  opacity: .55;
}
.dots-bg::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--line-2) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 60% 55% at 50% 45%, #000 20%, transparent 75%);
  opacity: .6;
}

/* Зерно поверх контрастных полос: снимает «пластиковость» плоской заливки. */
.section--alt::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ── Срез макета по краям: он «продолжается» за экран ──────────────── */
.bleed {
  --fade: 60px;
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
@media (min-width: 1100px) {
  .bleed-x {
    width: calc(100% + 120px); margin-left: -60px;
    mask-image:
      linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  }
}

/* ── Лёгкий наклон: объект в пространстве, а не наклейка ───────────── */
.tilt { perspective: 1800px; }
.tilt > * {
  transform: rotateX(2.6deg) translateZ(0);
  transform-origin: 50% 0%;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.tilt:hover > * { transform: rotateX(0deg); }
@media (prefers-reduced-motion: reduce) { .tilt > * { transform: none; } }

/* ── Плавающая карточка поверх макета ──────────────────────────────── */
.float {
  position: absolute; z-index: 12; pointer-events: none;
  background: var(--bg-2); color: var(--fg);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-pop);
  padding: 11px 13px; font-size: 12.5px; line-height: 1.35;
  max-width: 250px;
  animation: floatIn .8s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes floatIn { from { opacity: 0; transform: translateY(12px) scale(.96); } }
.float b { display: block; font-size: 13px; margin-bottom: 3px; }
.float .muted { font-size: 11.5px; }
.float--tr { top: -30px; right: -26px; }
.float--bl { bottom: -20px; left: -16px; }
@media (max-width: 900px) { .float { display: none; } }

/* ── Подпись-иллюстрация в духе технического отчёта ────────────────── */
.fig {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-3); margin: 0 0 14px;
}
.fig::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ── Бегущая строка фактов ─────────────────────────────────────────── */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 14px 0; position: relative; }
.marquee::before, .marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.marquee::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.marquee-track { display: flex; width: max-content; animation: slide 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee-item {
  display: flex; align-items: baseline; gap: 9px; padding: 0 26px;
  white-space: nowrap; font-size: 14px; color: var(--fg-2);
}
.marquee-item b { font-size: 15px; color: var(--fg); font-variant-numeric: tabular-nums; }
.marquee-item::after { content: ''; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ── Прокрутка: величины ставит JS, здесь только как их применить ──── */
.par { will-change: transform; transform: translate3d(0, var(--par, 0px), 0); }
.scale-in { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
  .par { transform: none !important; }
}