/* ============================================================
   dan-ai — визуальная основа
   Палитра, шрифты, фон из размытых пятен. Секций сайта пока нет.
   ============================================================ */

/* ---------- Шрифты (локальные, ничего не тянется извне) ---------- */

@font-face {
  font-family: 'Trochut';
  src: url('fonts/Trochut-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Trochut';
  src: url('fonts/Trochut-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Machina';
  src: url('fonts/PPNeueMachina-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Machina';
  src: url('fonts/PPNeueMachina-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Machina';
  src: url('fonts/PPNeueMachina-Ultrabold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sauce';
  src: url('fonts/OpenSauceSans-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sauce';
  src: url('fonts/OpenSauceSans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sauce';
  src: url('fonts/OpenSauceSans-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sauce';
  src: url('fonts/OpenSauceSans-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* В Open Sauce нет кириллицы. Русские буквы отдаёт Onest — у него
   почти тот же рост строчных, стык незаметен. Латиница остаётся Open Sauce. */
@font-face {
  font-family: 'Open Sauce';
  src: url('fonts/Onest-cyr-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Open Sauce';
  src: url('fonts/Onest-cyr-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Open Sauce';
  src: url('fonts/Onest-cyr-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ---------- Палитра ---------- */

:root {
  --bg: #e9e6c8;
  --cream: #f2edce;
  --yellow: #f3e7b4;
  --peach: #f3c6a5;
  --mint: #d6ecd4;
  --cool-mint: #cdede2;
  --gray: #7e8178;
  --text: #292929;
  /* личный акцент: только точечно — активные состояния, действия, огонёк */
  --accent-orange: #f28c28;

  /* свечения по ролям: мята — общий воздух, персик — переходы,
     оранжевый — только акценты рядом с действиями */
  --glow-mint: radial-gradient(circle at 50% 50%, rgba(205, 237, 226, 0.55) 0%, rgba(214, 236, 212, 0.26) 44%, rgba(214, 236, 212, 0) 72%);
  --glow-peach: radial-gradient(circle at 50% 50%, rgba(243, 198, 165, 0.42) 0%, rgba(243, 231, 180, 0.2) 46%, rgba(243, 231, 180, 0) 74%);
  --glow-orange: radial-gradient(circle at 50% 50%, rgba(242, 140, 40, 0.22) 0%, rgba(242, 140, 40, 0.1) 40%, rgba(243, 198, 165, 0) 72%);

  --font-display: 'Trochut', Georgia, serif;
  --font-mono: 'Neue Machina', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Open Sauce', 'Helvetica Neue', Arial, sans-serif;

  /* размер логотипа: ai = 90% от DAN, как в исходном макете (230 / 207 pt) */
  --dan-size: clamp(170px, 14vw, 230px);
  --ai-size: calc(var(--dan-size) * 0.9);

  /* тот же знак в хедере, только мелкий */
  --logo-size: 1.15rem;

  /* поля страницы — на десктопе широкие, воздуха много */
  --pad-x: clamp(1.5rem, 6vw, 7rem);
  --pad-y: clamp(1.5rem, 4vh, 3rem);
}

/* ---------- База ---------- */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

html {
  scroll-behavior: smooth;
  /* clip, а не hidden: hidden создаёт контейнер прокрутки и ломает залипание */
  overflow-x: clip;
}

body {
  position: relative;
  -webkit-tap-highlight-color: transparent;
  min-height: 100svh;
  background: var(--cream);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* ============================================================
   ФОН — локальные пятна света, а не сплошной градиент
   У каждого есть ясный центр и очень размытый край.
   ============================================================ */

/* пятна живут в зоне первого экрана и уезжают вместе со страницей:
   раньше фон был приклеен к окну и висел цветным яйцом посреди текста */
.bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 165svh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
}

.blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

/* pale yellow — сверху, широкой дугой */
.blob--yellow {
  width: 78vmax;
  height: 60vmax;
  top: -26%;
  left: 12%;
  background: radial-gradient(circle at 50% 50%, var(--yellow) 0%, rgba(243, 231, 180, 0.55) 42%, rgba(243, 231, 180, 0) 72%);
  filter: blur(32px);
  opacity: 0.95;
  animation: drift-a 26s ease-in-out infinite alternate;
}

/* персиковое — прямо за центром логотипа, самое тёплое место */
.blob--peach {
  width: 46vmax;
  height: 46vmax;
  top: 20%;
  left: 34%;
  background: radial-gradient(circle at 50% 50%, var(--peach) 0%, rgba(243, 198, 165, 0.6) 34%, rgba(243, 198, 165, 0) 70%);
  filter: blur(28px);
  opacity: 0.9;
  animation: drift-b 21s ease-in-out infinite alternate;
}

/* mint — справа, холодный край кадра */
.blob--mint {
  width: 56vmax;
  height: 70vmax;
  top: -8%;
  left: 62%;
  background: radial-gradient(circle at 45% 45%, var(--cool-mint) 0%, var(--mint) 30%, rgba(214, 236, 212, 0) 70%);
  filter: blur(34px);
  opacity: 0.8;
  animation: drift-c 31s ease-in-out infinite alternate;
}

/* серо-графитовое — слева снизу от логотипа, как тень на референсе */
.blob--gray {
  width: 26vmax;
  height: 34vmax;
  top: 40%;
  left: 9%;
  background: radial-gradient(circle at 55% 45%, var(--gray) 0%, rgba(126, 129, 120, 0.32) 34%, rgba(126, 129, 120, 0) 66%);
  filter: blur(26px);
  opacity: 0.32;
  animation: drift-e 24s ease-in-out infinite alternate;
}

/* Пятна не просто едут, а медленно меняют форму, размер и яркость.
   Форму задаёт border-radius с четырьмя парами значений — круг
   перетекает в неправильную каплю и обратно. */
@keyframes drift-a {
  0% {
    border-radius: 52% 48% 44% 56% / 46% 52% 48% 54%;
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.95;
  }
  35% {
    border-radius: 44% 56% 60% 40% / 58% 42% 56% 44%;
    transform: translate3d(-26px, 20px, 0) scale(1.07);
    opacity: 1;
  }
  70% {
    border-radius: 60% 40% 46% 54% / 42% 60% 40% 58%;
    transform: translate3d(14px, -16px, 0) scale(0.95);
    opacity: 0.88;
  }
  100% {
    border-radius: 48% 52% 52% 48% / 52% 48% 54% 46%;
    transform: translate3d(-10px, 26px, 0) scale(1.03);
    opacity: 0.95;
  }
}

@keyframes drift-b {
  0% {
    border-radius: 46% 54% 58% 42% / 52% 46% 54% 48%;
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.9;
  }
  40% {
    border-radius: 58% 42% 44% 56% / 44% 58% 42% 56%;
    transform: translate3d(24px, -18px, 0) scale(1.09);
    opacity: 1;
  }
  75% {
    border-radius: 42% 58% 56% 44% / 58% 40% 60% 42%;
    transform: translate3d(-16px, 14px, 0) scale(0.94);
    opacity: 0.82;
  }
  100% {
    border-radius: 52% 48% 46% 54% / 48% 54% 46% 52%;
    transform: translate3d(18px, -22px, 0) scale(1.04);
    opacity: 0.9;
  }
}

@keyframes drift-c {
  0% {
    border-radius: 54% 46% 48% 52% / 44% 56% 44% 56%;
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.8;
  }
  38% {
    border-radius: 42% 58% 56% 44% / 60% 40% 58% 42%;
    transform: translate3d(-20px, 26px, 0) scale(1.06);
    opacity: 0.92;
  }
  72% {
    border-radius: 60% 40% 42% 58% / 44% 58% 42% 56%;
    transform: translate3d(12px, -20px, 0) scale(0.93);
    opacity: 0.72;
  }
  100% {
    border-radius: 48% 52% 54% 46% / 52% 48% 52% 48%;
    transform: translate3d(-24px, 30px, 0) scale(1.02);
    opacity: 0.8;
  }
}

@keyframes drift-e {
  0% {
    border-radius: 50% 50% 46% 54% / 48% 52% 48% 52%;
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.32;
  }
  45% {
    border-radius: 58% 42% 54% 46% / 56% 44% 56% 44%;
    transform: translate3d(16px, 24px, 0) scale(1.08);
    opacity: 0.4;
  }
  100% {
    border-radius: 44% 56% 48% 52% / 46% 54% 46% 54%;
    transform: translate3d(-12px, 18px, 0) scale(0.96);
    opacity: 0.28;
  }
}

/* Едва заметное зерно поверх пятен — убирает полосы на градиентах.
   Если не нужно — удалить этот блок. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: multiply;
  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='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E");
}

/* ============================================================
   СТРАНИЦА
   ============================================================ */

.page {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: var(--pad-y) var(--pad-x);
}

/* ============================================================
   ПОЯВЛЕНИЕ — очень спокойное, без масштаба и отскоков
   ============================================================ */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* backwards, а не both: после анимации свойства возвращаются
   к обычным значениям — иначе hover у ссылок перестаёт работать */
.wordmark__dan,
.wordmark__ai,
.hero__line,
.hero__label,
.header {
  animation: rise 900ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.wordmark__dan {
  animation-delay: 1950ms;
}

.wordmark__ai {
  animation-delay: 2150ms;
}

.hero__line {
  animation-delay: 2400ms;
}

.hero__label {
  animation-delay: 2500ms;
}

.header {
  animation-duration: 900ms;
  animation-delay: 2650ms;
}

/* ============================================================
   HEADER — почти незаметный: маленький знак и компактная группа ссылок
   ============================================================ */

/* хедер остаётся на экране: с любого места можно вернуться наверх */
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  padding-block: clamp(0.5rem, 1.5vh, 1.25rem);
  /* поля страницы уводим внутрь, чтобы подложка шла от края до края */
  margin-inline: calc(var(--pad-x) * -1);
  padding-inline: var(--pad-x);
}

/* подложка появляется только когда страницу прокрутили —
   на первом экране хедер лежит прямо на фоне */
.header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cream);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.header::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 100%;
  height: 2.5rem;
  background: linear-gradient(to bottom, var(--cream), rgba(242, 237, 206, 0));
  opacity: 0;
  transition: opacity 0.4s ease;
}

.header.is-stuck::before,
.header.is-stuck::after {
  opacity: 0.92;
}

.logo {
  display: inline-block;
  color: var(--text);
  text-decoration: none;
  font-weight: 400;
  line-height: 0.86;
}

.logo__dan {
  display: block;
  font-family: var(--font-display);
  font-size: var(--logo-size);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* те же 1.4em и -0.17em, что и в большом знаке */
.logo__ai {
  display: block;
  margin-top: -0.17em;
  margin-left: 1.4em;
  font-family: var(--font-mono);
  font-size: calc(var(--logo-size) * 0.9);
  letter-spacing: 0.005em;
}

/* пункты с номерами: не обычный навбар, а указатель по секциям */
.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem 1.15rem;
  max-width: 46rem;
}

.nav a {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
  transition: opacity 0.35s ease;
}

.nav__num {
  opacity: 0.5;
}

/* кнопка меню — только на узких экранах */
.menu-btn {
  display: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.7;
}

.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.4em;
  width: 100%;
  height: 1px;
  background: var(--accent-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav a:hover {
  opacity: 0.9;
}

.nav a:hover::after {
  transform: scaleX(1);
}

/* пункт секции, которая сейчас на экране */
.nav a.is-current {
  opacity: 0.95;
}

.nav a.is-current::after {
  transform: scaleX(1);
}

.menu__nav a.is-current .menu__num {
  color: var(--accent-orange);
  opacity: 1;
}

/* ============================================================
   HERO — композиция по референсу логотипа
   Группа стоит в центральной части экрана, чуть левее середины.
   Ширину группы задаёт само слово DAN, подписи живут под ним.
   ============================================================ */

.hero {
  flex: 1;
  min-height: 84svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(2rem, 7vh, 5rem);
}

.hero__group {
  width: fit-content;
  margin-inline: auto;
  /* композиция стоит по центру, как на референсе */
}

/* DAN и ai — единый знак: ai сразу под словом, под буквами a/n */
.wordmark {
  margin: 0;
  font-weight: 400;
  line-height: 0.86;
}

.wordmark__dan {
  display: block;
  font-family: var(--font-display);
  font-size: var(--dan-size);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* отступ в em самого ai: точка над i встаёт сразу за последней буквой DAN */
.wordmark__ai {
  display: block;
  margin-top: -0.17em;
  margin-left: 1.4em;
  font-family: var(--font-mono);
  font-size: var(--ai-size);
  letter-spacing: 0.005em;
}

/* подписи под логотипом, на одной линии, рядом друг с другом */
.hero__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: calc(var(--dan-size) * 0.56);
  font-size: clamp(0.88rem, 0.95vw, 0.95rem);
  line-height: 1.55;
}

.hero__line {
  margin: 0;
  font-weight: 300;
}

.hero__label {
  margin: 0;
  font-weight: 300;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.55;
}

/* строки заданы жёстко: BUILD / CONNECT / и AUTOMATE, других переносов нет */
.hero__label {
  text-align: right;
}

.hero__label span {
  display: block;
  white-space: nowrap;
}

/* ============================================================
   ВХОД — огонёк дышит пару секунд и расплывается в пятна фона
   Три слоя: .ember гасит целиком, __dissolve размывает и растит,
   __flame дышит. Так анимации не перебивают друг другу transform.
   ============================================================ */

/* пока идёт вступление — ни текста, ни хедера, ни секций */
.intro-playing .page {
  visibility: hidden;
}


.ember {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  overflow: hidden; /* широкий ореол не должен давать полосу прокрутки */
  pointer-events: none;
  animation: ember-hold 3s linear forwards;
}

.ember__dissolve {
  position: relative;
  display: grid;
  place-items: center;
  animation: ember-dissolve 1s cubic-bezier(0.4, 0, 0.6, 1) 1.8s forwards;
}

/* широкий тёплый ореол вокруг знака: жёлтый снаружи, персик в центре,
   мятная дымка по краю — те же цвета, что потом станут фоном */
.ember__aura {
  position: absolute;
  width: 190%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(242, 140, 40, 0.42) 0%,
    rgba(243, 198, 165, 0.55) 16%,
    rgba(243, 231, 180, 0.6) 34%,
    rgba(243, 231, 180, 0.32) 46%,
    rgba(205, 237, 226, 0.22) 64%,
    rgba(214, 236, 212, 0) 80%
  );
  filter: blur(50px);
  animation: aura-appear 900ms ease-out backwards, aura-breathe 1.4s ease-in-out 900ms infinite;
}

.ember__flame {
  display: block;
  position: relative;
  width: min(78vmin, 700px);
  height: auto;
  /* края картинки растворяются, квадрата не видно */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 34%, rgba(0, 0, 0, 0.55) 52%, transparent 71%);
  mask-image: radial-gradient(circle at 50% 50%, #000 34%, rgba(0, 0, 0, 0.55) 52%, transparent 71%);
  animation: ember-appear 600ms ease-out backwards, ember-breathe 1.4s ease-in-out 600ms infinite;
}

@keyframes ember-appear {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* дыхание: чуть меняется размер и внутренний свет, без мигания */
@keyframes ember-breathe {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1) saturate(1);
  }
  50% {
    transform: scale(1.035);
    filter: brightness(1.07) saturate(1.08);
  }
}

@keyframes aura-appear {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes aura-breathe {
  0%,
  100% {
    opacity: 0.85;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

/* растворение: теряет форму, растекается и уходит в фон */
@keyframes ember-dissolve {
  from {
    filter: blur(0px);
    transform: scale(1);
    opacity: 1;
  }
  to {
    filter: blur(70px);
    transform: scale(1.75);
    opacity: 0;
  }
}

/* убираем слой со сцены, когда всё закончилось */
@keyframes ember-hold {
  0%,
  94% {
    visibility: visible;
  }
  100% {
    visibility: hidden;
  }
}

/* пятна фона разгораются ровно тогда, когда огонёк расплывается */
.bg {
  animation: bg-in 1.4s ease 1.9s backwards;
}

@keyframes bg-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============================================================
   СЕКЦИИ — тот же воздух, что в hero: текст и линии, без карточек
   ============================================================ */

.section {
  max-width: 64rem;
  padding-block: clamp(6rem, 17vh, 11rem);
  scroll-margin-top: 4.5rem;
}

/* появление при скролле; без JS секции просто видны */
.js .section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.section__num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.45;
}

.section__kicker {
  margin: 0.9rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.section__lead {
  margin: clamp(2.5rem, 7vh, 4.5rem) 0 0;
  font-family: inherit;
  font-weight: 300;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  max-width: 32ch;
}

.section__body {
  margin: clamp(2rem, 5vh, 3.25rem) 0 0;
  font-weight: 300;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.75;
  max-width: 42ch;
}

.section__note {
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  opacity: 0.5;
}

/* мелкая техническая строка внизу секции */
.section__tech {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* WHY читается за несколько секунд: заголовок, короткое описание, подпись.
   Промежутки плотнее общих, описание не шире 640px. */
#intro .section__lead {
  margin-top: clamp(1.75rem, 4vh, 2.75rem);
}

#intro .section__body {
  margin-top: clamp(1.5rem, 3.5vh, 2.25rem);
  max-width: 40rem;
}

#intro .section__tech {
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
}

/* три направления работы: линия сверху и текст, никаких плашек */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  margin: clamp(3rem, 8vh, 5rem) 0 0;
  padding: 0;
  list-style: none;
}

.card {
  position: relative;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(41, 41, 41, 0.22);
}

/* при наведении линия сверху прорастает слева направо */
.card::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.card:hover::after {
  transform: scaleX(1);
}

.card__index {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  opacity: 0.32;
  transition: opacity 0.4s ease;
}

.card:hover .card__index {
  opacity: 0.6;
}

.card__name {
  margin: 0.85rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.card:hover .card__name {
  transform: translateX(5px);
}

.card__text {
  margin: 0.9rem 0 0;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.65;
  opacity: 0.82;
}

/* маленькая схема направления — тот же язык, что в кейсах.
   Селектор с .card обязателен: правило .flow идёт ниже по файлу
   и иначе сбрасывает верхний отступ обратно в ноль. */
.card .flow--card {
  margin: clamp(2.25rem, 4vh, 3rem) 0 0;
  font-size: 0.72rem;
  opacity: 0.55;
  transition: opacity 0.45s ease;
}

.card:hover .flow--card {
  opacity: 0.95;
}

/* ---------- 03 / AUTOMATION: по одной задаче за раз ---------- */

/* область прокрутки задаёт длину сцены, внутри неё экран залипает */
#automation {
  padding-block: 0;
}

/* сдвиг при появлении ломает залипание — эта секция открывается сразу */
.js #automation {
  opacity: 1;
  transform: none;
  transition: none;
}

.auto__scroll {
  position: relative;
  height: 380svh;
}


.auto__stage {
  position: sticky;
  top: 0;
  /* с учётом закреплённого хедера */
  padding-top: 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding-block: clamp(3rem, 10vh, 7rem);
}


/* все задачи лежат в одной ячейке — видна активная */
.rows {
  display: grid;
  margin: clamp(3.5rem, 9.5vh, 5.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.row {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  grid-template-areas:
    'task status'
    'verdict diagram'
    'meta diagram';
  align-items: start;
  gap: 0 clamp(2rem, 5vw, 5rem);
  padding-block: 0;
}

.row__task {
  grid-area: task;
}

.row__verdict {
  grid-area: verdict;
}

.row__meta {
  grid-area: meta;
}

/* короткий технический статус над схемой */
.row__status {
  grid-area: status;
  justify-self: end;
  margin: 0.4rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray);
}

/* ---------- Крупная схема задачи ---------- */

.diagram {
  grid-area: diagram;
  align-self: center;
  width: 100%;
  max-width: 21rem;
  height: auto;
  margin-top: clamp(0.5rem, 2vh, 1.5rem);
}

.dg-box,
.dg-ring,
.dg-dot {
  fill: none;
  stroke: rgba(41, 41, 41, 0.3);
  stroke-width: 1;
}

.dg-line {
  stroke: rgba(41, 41, 41, 0.3);
  stroke-width: 1;
}

.dg-line--b {
  stroke: rgba(41, 41, 41, 0.22);
}

.dg-line--dash {
  stroke-dasharray: 4 5;
}

.dg-dot--full {
  fill: var(--accent-orange);
  stroke: var(--accent-orange);
}

.dg-pulse,
.dg-orbit {
  fill: var(--text);
  opacity: 0;
}

/* человек в конце цепочки — тёплое пятно, отзвук огонька */
.dg-human {
  fill: rgba(242, 140, 40, 0.28);
  stroke: none;
}

.dg-mark {
  font-family: var(--font-mono);
  font-size: 14px;
  fill: var(--gray);
}

/* линии прорисовываются, когда задача становится активной */
.js .row .dg-line,
.js .row .dg-ring {
  stroke-dasharray: 460;
  stroke-dashoffset: 460;
}

.js .row.is-active .dg-line,
.js .row.is-active .dg-ring {
  animation: dg-draw 900ms cubic-bezier(0.22, 1, 0.36, 1) 200ms forwards;
}

.js .row .dg-box,
.js .row .dg-dot,
.js .row .dg-human,
.js .row .dg-mark {
  opacity: 0;
}

.js .row.is-active .dg-box,
.js .row.is-active .dg-dot,
.js .row.is-active .dg-human,
.js .row.is-active .dg-mark {
  animation: dg-in 700ms ease forwards 500ms;
}

/* по линии бежит точка, по кольцу — по кругу */
.row.is-active .dg-pulse {
  animation: dg-run 2.8s cubic-bezier(0.4, 0, 0.4, 1) 1s infinite;
}

.row.is-active .dg-orbit {
  transform-origin: 160px 100px;
  animation: dg-orbit 7s linear 1s infinite;
}

.row.is-active .dg-human {
  animation: dg-in 700ms ease forwards 500ms, dg-breathe 3.4s ease-in-out 1.2s infinite;
}

@keyframes dg-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes dg-in {
  to {
    opacity: 1;
  }
}

@keyframes dg-run {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  86% {
    opacity: 1;
  }
  100% {
    transform: translateX(118px);
    opacity: 0;
  }
}

@keyframes dg-orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dg-breathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

.js .row {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.js .row.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.row__task {
  margin: 0;
  font-weight: 300;
  font-size: clamp(1.2rem, 2.45vw, 1.95rem);
  line-height: 1.38;
  letter-spacing: -0.005em;
  max-width: 26ch;
}

.row__verdict {
  margin: 1rem 0 0;
  font-size: clamp(0.88rem, 0.95vw, 0.95rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.45;
}

/* схема слева, счётчик справа — тонкой серой строкой */
.row__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  max-width: 26rem;
  margin: clamp(1.75rem, 4vh, 2.5rem) 0 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  color: var(--gray);
}

/* полоски: сколько всего задач и на какой ты сейчас */
.steps {
  display: flex;
  gap: 8px;
  margin-top: clamp(1.5rem, 3vh, 2.25rem);
}

.step {
  width: 28px;
  height: 2px;
  background: rgba(41, 41, 41, 0.18);
  transition: background 0.45s ease, width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.step.is-on {
  width: 44px;
  background: var(--accent-orange);
}

/* последняя строка — перелом: крупнее, с тёплым свечением за ней */
.row--human {
  position: relative;
  z-index: 0;
}

.row--human::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -18% -14% -14% -10%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 32% 50%,
    rgba(242, 140, 40, 0.26) 0%,
    rgba(243, 198, 165, 0.3) 40%,
    rgba(243, 231, 180, 0) 72%
  );
  filter: blur(45px);
}

.row--human .row__task {
  font-size: clamp(1.35rem, 2.75vw, 2.2rem);
}

.row--human .row__verdict {
  /* вывод отделён от задачи: он читается как отдельная мысль */
  margin-top: 2rem;
  opacity: 1;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* ---------- 04 / CASES: было → стало, без карточек ---------- */

.cases {
  margin: clamp(3rem, 8vh, 5rem) 0 0;
  padding: 0;
  list-style: none;
}

.case {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
  grid-template-areas:
    'num marker'
    'num scheme'
    'num states';
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(3rem, 7vh, 5rem);
}

/* линия разделяет кейсы, но над первым её нет:
   там она перечёркивала фоновое слово */
.case + .case {
  border-top: 1px solid rgba(41, 41, 41, 0.16);
}

/* тёплое свечение под кейсом — очень слабое, для глубины */
.case::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 18%;
  left: 4%;
  width: 30vmax;
  height: 30vmax;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(243, 198, 165, 0.3) 0%, rgba(243, 231, 180, 0.14) 44%, rgba(243, 231, 180, 0) 72%);
  pointer-events: none;
}

/* большое число — часть композиции, а не подпись */
.case__num {
  grid-area: num;
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
  opacity: 0.28;
}

.case__scheme {
  grid-area: scheme;
  display: grid;
  margin-bottom: clamp(1.75rem, 4vh, 2.5rem);
}

/* обе схемы лежат друг на друге: сначала ручная, потом собранная */
.case__scheme .flow {
  grid-area: 1 / 1;
  margin: 0;
}

.flow--auto {
  opacity: 0;
}

/* человек в ручной цепочке — тёплый узел, который потом исчезает */
.flow__node--hand .flow__dot {
  background: rgba(243, 198, 165, 0.85);
  border-color: rgba(41, 41, 41, 0.4);
}

.js .case.is-shown .flow--manual {
  animation: scheme-out 900ms cubic-bezier(0.22, 1, 0.36, 1) 2.2s forwards;
}

.js .case.is-shown .flow--auto {
  animation: scheme-in 900ms cubic-bezier(0.22, 1, 0.36, 1) 2.6s forwards;
}

@keyframes scheme-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes scheme-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* схема процесса: узлы-точки, между ними тонкая линия.
   Один и тот же язык для кейсов и всего остального. */
.flow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 clamp(1.75rem, 4vh, 2.5rem);
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: clamp(0.78rem, 0.95vw, 0.88rem);
  letter-spacing: 0.06em;
}

.flow__node {
  display: flex;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
}

.flow__dot {
  width: 6px;
  height: 6px;
  border: 1px solid rgba(41, 41, 41, 0.55);
  border-radius: 50%;
}

/* последний узел цепочки — закрашенный: здесь всё заканчивается */
.flow__node:last-child .flow__dot {
  background: var(--accent-orange);
  border-color: var(--accent-orange);
}

.flow__link {
  position: relative;
  flex: 1 1 auto;
  min-width: 1rem;
  height: 1px;
  overflow: hidden;
  background: rgba(41, 41, 41, 0.24);
}

/* по нарисованной линии один раз пробегает мягкий свет */
.flow__link::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(41, 41, 41, 0.6), transparent);
  transform: translateX(-130%);
}

/* ---------- Схема собирается при появлении секции ---------- */

/* узел появляется, от него прорисовывается линия, дальше следующий узел */
.js .section .flow__node {
  opacity: 0;
  transform: translateY(6px);
}

.js .section .flow__link {
  transform: scaleX(0);
  transform-origin: left;
}

.js .section.is-visible .flow__node {
  animation: node-in 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.js .section.is-visible .flow__link {
  animation: link-draw 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.js .section.is-visible .flow__link::after {
  animation: light-run 1.5s cubic-bezier(0.4, 0, 0.3, 1) forwards;
}

/* порядок: узел, линия, узел, линия… — задержка растёт по цепочке */
.flow > *:nth-child(1) {
  animation-delay: 140ms;
}

.flow > *:nth-child(2) {
  animation-delay: 340ms;
}

.flow > *:nth-child(3) {
  animation-delay: 520ms;
}

.flow > *:nth-child(4) {
  animation-delay: 720ms;
}

.flow > *:nth-child(5) {
  animation-delay: 900ms;
}

.flow > *:nth-child(6) {
  animation-delay: 1100ms;
}

.flow > *:nth-child(7) {
  animation-delay: 1280ms;
}

/* свет идёт после того, как схема нарисована */
.flow > *:nth-child(2)::after {
  animation-delay: 1600ms;
}

.flow > *:nth-child(4)::after {
  animation-delay: 1800ms;
}

.flow > *:nth-child(6)::after {
  animation-delay: 2000ms;
}

@keyframes node-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes link-draw {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes light-run {
  from {
    transform: translateX(-130%);
  }
  to {
    transform: translateX(260%);
  }
}

.case__states {
  grid-area: states;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.case__state {
  min-width: 0;
}

.case__label {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.42;
}

.case__text {
  margin: 0.6rem 0 0;
  font-weight: 300;
  font-size: clamp(0.98rem, 1.15vw, 1.1rem);
  line-height: 1.55;
}

.case__marker {
  grid-area: marker;
  margin: 0 0 clamp(1.25rem, 3vh, 2rem);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--gray);
}

/* ---------- 05 / PROCESS: этапы, крупные светлые цифры ---------- */

.stages {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2.5rem, 6vh, 4.5rem) clamp(2.5rem, 6vw, 5rem);
  margin: clamp(3rem, 8vh, 5rem) 0 0;
  padding: 0;
  list-style: none;
}

.stage {
  position: relative;
  max-width: 34ch;
  padding-top: 2rem;
}

/* дорожка: точка этапа и линия к следующему */
.stage__mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(41, 41, 41, 0.5);
  border-radius: 50%;
  background: var(--cream);
}

.stage::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 7px;
  width: calc(100% + clamp(2.5rem, 6vw, 5rem) - 7px);
  height: 1px;
  background: rgba(41, 41, 41, 0.2);
}

/* у последнего в строке линия никуда не ведёт */
.stage:nth-child(2n)::before,
.stage:last-child::before {
  display: none;
}

.stage:last-child .stage__mark {
  background: var(--accent-orange);
  border-color: var(--accent-orange);
}

.stage__num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  opacity: 0.22;
}

.stage__name {
  margin: clamp(0.75rem, 2vh, 1.25rem) 0 0;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  letter-spacing: -0.005em;
}

.stage__text {
  margin: 0.7rem 0 0;
  font-weight: 300;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.6;
  opacity: 0.8;
}

/* ---------- 06 / DAN: короткая заметка между техническими секциями ---------- */

.section--note {
  padding-block: clamp(4.5rem, 12vh, 8rem);
}

.section--note .section__lead {
  font-size: clamp(1.75rem, 3.4vw, 2.7rem);
}

.note {
  margin-top: clamp(2rem, 5vh, 3rem);
  max-width: 46ch;
}

.note p {
  margin: 0 0 1.4rem;
  font-weight: 300;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.7;
}

.note p:last-child {
  margin-bottom: 0;
}

/* ---------- Карточка-ссылка на телеграм ---------- */

.note-card {
  position: relative;
  isolation: isolate;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: clamp(2.5rem, 6vh, 3.5rem);
  padding: clamp(1.5rem, 3vh, 2rem) clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 2.5vh, 1.75rem);
  border: 1px solid rgba(41, 41, 41, 0.22);
  border-radius: 2px;
  color: var(--text);
  text-decoration: none;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.45s ease;
}

/* мягкое свечение под карточкой — тот же огонёк, только маленький */
.note-card::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -14% -10%;
  border-radius: 50%;
  inset: -30% -18%;
  background: var(--glow-orange);
  opacity: 0.36;
  filter: blur(22px);
  transition: opacity 0.5s ease;
}

.note-card:hover {
  transform: translateY(-3px);
  border-color: rgba(41, 41, 41, 0.4);
}

.note-card:hover::before {
  opacity: 0.7;
}

/* маленький живой огонёк рядом с заголовком карточки */
.note-card__ember {
  position: absolute;
  top: clamp(1.5rem, 3vh, 2rem);
  right: clamp(1.25rem, 3vw, 2rem);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(255, 248, 220, 0.95) 0%, rgba(242, 140, 40, 0.7) 30%, rgba(243, 198, 165, 0.5) 52%, rgba(214, 236, 212, 0.22) 72%, rgba(214, 236, 212, 0) 84%);
  animation: card-ember 3.6s ease-in-out infinite;
}

@keyframes card-ember {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

.note-card__title {
  display: block;
  padding-right: 2.5rem;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 400;
}

/* нижняя строка и есть действие: подпись слева, стрелка справа */
.note-card__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-width: 15rem;
  margin-top: clamp(1.5rem, 3.5vh, 2rem);
  padding-top: clamp(0.9rem, 2vh, 1.1rem);
  border-top: 1px solid rgba(41, 41, 41, 0.16);
}

.note-card__arrow {
  display: block;
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--text);
  opacity: 0.75;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}

.note-card:hover .note-card__arrow {
  opacity: 1;
  color: var(--accent-orange);
}

.note-card:hover .note-card__arrow {
  transform: translateX(5px);
}

.note-card__tags {
  display: block;
  margin-top: 0.7rem;
  font-weight: 300;
  font-size: 0.95rem;
  opacity: 0.75;
}

.note-card__hint {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
}

/* ---------- Локальные пятна в секциях ---------- */

/* по одному слабому тёплому пятну на секцию — привязано к самой секции,
   поэтому уезжает вместе с ней и не висит поверх чужого текста */
.section {
  position: relative;
  isolation: isolate;
}

.section::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  transform: translateY(var(--depth, 0px));
}

#work::before {
  top: 8%;
  right: -12%;
  width: 46vmax;
  height: 46vmax;
  background: var(--glow-mint);
}

#cases::before {
  top: 22%;
  left: -18%;
  width: 52vmax;
  height: 52vmax;
  background: var(--glow-peach);
}

#process::before {
  bottom: 4%;
  right: -14%;
  width: 40vmax;
  height: 40vmax;
  background: var(--glow-mint);
}

/* последняя секция: тёплое свечение, отзвук огонька со входа */
#notes::before {
  bottom: -6%;
  left: 12%;
  width: 46vmax;
  height: 46vmax;
  background: var(--glow-peach);
}

/* ---------- Крупные фоновые слои ---------- */

/* слово или номер во всю секцию: сидит за текстом и уходит за край экрана */
.ghost {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  line-height: 0.8;
  color: var(--text);
  opacity: 0.055;
  white-space: nowrap;
  transform: translateY(calc(var(--depth, 0px) * 0.5));
}

.ghost--word {
  top: 12%;
  font-family: var(--font-display);
  font-size: clamp(5.5rem, 16vw, 17rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.ghost--num {
  top: 6%;
  font-family: var(--font-mono);
  font-size: clamp(8rem, 24vw, 24rem);
  font-weight: 400;
}

/* за край уходит только хвост, начало слова остаётся читаемым */
.ghost--left {
  left: calc(var(--pad-x) * -1 - 1vw);
}

.ghost--right {
  right: calc(var(--pad-x) * -1 - 3vw);
}

/* ---------- Бегущая строка ---------- */

.marquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding-block: clamp(2rem, 5vh, 3.5rem);
  border-block: 1px solid rgba(41, 41, 41, 0.14);
  margin-inline: calc(var(--pad-x) * -1);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 64s linear infinite;
}

.marquee__track span {
  padding-right: 2.5rem;
  font-family: var(--font-mono);
  font-size: clamp(0.8rem, 1vw, 0.95rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray);
  white-space: nowrap;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}


/* ---------- Фотографии-вырезы ---------- */

/* фигура стоит прямо на фоне, без рамки и плашки:
   позади мягкое пятно, под ней короткая подпись */
.cut {
  position: relative;
  isolation: isolate;
  margin: 0;
}

.cut img {
  display: block;
  width: 100%;
  height: auto;
  /* приглушаем под палитру сайта */
  filter: saturate(0.85) contrast(0.97);
  /* низ фигуры мягко уходит в фон, а не обрывается краем */
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, rgba(0, 0, 0, 0.55) 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 72%, rgba(0, 0, 0, 0.55) 88%, transparent 100%);
}

/* мягкий свет позади фигуры */
.cut::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 6% -12% 12% -12%;
  border-radius: 50%;
  background: var(--glow-peach);
}

/* за портретом Даника свет теплее — это финальный акцент страницы */
.cut--portrait::before {
  background: var(--glow-orange);
  opacity: 0.5;
  filter: blur(20px);
}

.cut figcaption {
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray);
}

/* NOTES: два столбца — текст слева, крупная фигура справа */
#notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  grid-template-areas:
    'num .'
    'lead cut'
    'note cut'
    'card cut';
  column-gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

#notes .section__num {
  grid-area: num;
}

#notes .section__lead {
  grid-area: lead;
}

#notes .note {
  grid-area: note;
}

#notes .note-card {
  grid-area: card;
}

/* фигура крупная и чуть выходит за правое поле */
.cut--notes {
  grid-area: cut;
  width: calc(100% + clamp(0px, 5vw, 5rem));
  max-width: none;
  margin-top: clamp(1rem, 3vh, 2rem);
  margin-right: calc(clamp(0px, 5vw, 5rem) * -1);
}



/* CONTACT: фигура почти в рост — финальный визуал секции */
#contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  grid-template-areas:
    'num cut'
    'lead cut'
    'body cut'
    'call cut'
    'links cut';
  column-gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

#contact .section__num {
  grid-area: num;
}

#contact .section__lead {
  grid-area: lead;
}

#contact .section__body {
  grid-area: body;
}

#contact .links {
  grid-area: links;
}

.cut--portrait {
  grid-area: cut;
  align-self: end;
  width: calc(100% + clamp(0px, 4vw, 4rem));
  max-width: none;
  margin-right: calc(clamp(0px, 4vw, 4rem) * -1);
}

/* ---------- Полноэкранное меню ---------- */

/* display: flex перебивает браузерное [hidden] — гасим явно,
   иначе меню видно всегда и оно закрывает собой сайт */
.menu[hidden] {
  display: none;
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--pad-y) var(--pad-x);
  background: var(--cream);
  animation: menu-in 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes menu-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.menu__close {
  position: absolute;
  top: calc(var(--pad-y) + 0.35rem);
  right: var(--pad-x);
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.7;
}

.menu__nav {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.menu__nav a {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  color: var(--text);
  text-decoration: none;
  font-size: 1.35rem;
  font-weight: 300;
}

.menu__num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  opacity: 0.45;
}

/* ---------- Ссылки в CONTACT ---------- */

.links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: clamp(2.5rem, 6vh, 3.5rem);
}

.link-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.25rem 2.5rem;
  min-width: min(100%, 15rem);
  padding: clamp(1.1rem, 2.5vh, 1.5rem) clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid rgba(41, 41, 41, 0.22);
  border-radius: 2px;
  color: var(--text);
  text-decoration: none;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.45s ease;
}

.link-card::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -18% -12%;
  border-radius: 50%;
  inset: -34% -22%;
  background: var(--glow-orange);
  opacity: 0.38;
  filter: blur(22px);
  transition: opacity 0.5s ease;
}

.link-card:hover {
  transform: translateY(-3px);
  border-color: rgba(41, 41, 41, 0.4);
}

.link-card:hover::before {
  opacity: 0.7;
}

.link-card__name {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
}

.link-card__hint {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--gray);
}

.link-card__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 15px;
  height: 15px;
  color: var(--text);
  opacity: 0.7;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}

.link-card:hover .link-card__arrow {
  transform: translateX(5px);
  opacity: 1;
  color: var(--accent-orange);
}

/* ---------- Подвал ---------- */

.footer {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 1rem clamp(2rem, 5vw, 4rem);
  padding-block: clamp(3rem, 7vh, 5rem) clamp(2rem, 4vh, 3rem);
  border-top: 1px solid rgba(41, 41, 41, 0.14);
}

.logo--footer .logo__dan {
  font-size: 1.35rem;
}

.logo--footer .logo__ai {
  font-size: calc(1.35rem * 0.9);
}

.footer__line {
  margin: 0;
  font-weight: 300;
  font-size: 0.92rem;
}

.footer__links {
  display: flex;
  gap: 1.5rem;
  margin: 0;
  grid-column: 3;
  grid-row: 1;
}

.footer__links a {
  position: relative;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
  transition: opacity 0.35s ease;
}

.footer__links a:hover {
  opacity: 1;
}

.footer__copy {
  grid-column: 1 / -1;
  margin: clamp(1.5rem, 4vh, 2.5rem) 0 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--gray);
}

/* ---------- Промежуточный CTA после WORK ---------- */

.pitch {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-block: clamp(2.5rem, 6vh, 4rem);
  border-block: 1px solid rgba(41, 41, 41, 0.14);
}

/* вопрос — вводная строка, главным должно читаться действие */
.pitch__q {
  margin: 0 0 clamp(0.9rem, 2vh, 1.4rem);
  font-weight: 300;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  opacity: 0.75;
}

.pitch__link {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--text);
  text-decoration: none;
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  font-weight: 300;
  line-height: 1.15;
  padding-bottom: 0.12em;
}

/* тёплый акцент не под всей строкой, а компактно у стрелки */
.pitch__link::before {
  content: '';
  position: absolute;
  z-index: -1;
  right: -0.6em;
  top: 50%;
  width: 6.5em;
  height: 6.5em;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--glow-orange);
  opacity: 0.85;
  transition: opacity 0.5s ease;
}

/* тонкая линия снизу дорастает до конца при наведении */
.pitch__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  transform: scaleX(0.999);
  transform-origin: left;
  transition: opacity 0.4s ease;
}

.pitch__link:hover::after {
  opacity: 1;
  background: var(--accent-orange);
}

.pitch__link:hover .pitch__arrow {
  color: var(--accent-orange);
}

.pitch__link:hover::before {
  opacity: 1;
}

.pitch__arrow,
.call__arrow {
  width: 0.62em;
  height: auto;
  flex: none;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.pitch__link:hover .pitch__arrow,
.call:hover .call__arrow {
  transform: translateX(5px);
}

/* пояснение стоит прямо под действием */
.pitch__note {
  margin: 0.9rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--gray);
}

/* ---------- Основной CTA в CONTACT ---------- */

.call {
  position: relative;
  isolation: isolate;
  grid-area: call;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: clamp(2.5rem, 6vh, 3.5rem);
  color: var(--text);
  text-decoration: none;
}

/* тёплый акцент у стрелки, а не пятно под всей строкой */
.call::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0.6em;
  width: 7em;
  height: 7em;
  transform: translate(-32%, -42%);
  border-radius: 50%;
  background: var(--glow-orange);
  opacity: 0.55;
  filter: blur(16px);
  transition: opacity 0.5s ease;
}

.call:hover::before {
  opacity: 0.85;
}

.call__title {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 300;
  line-height: 1.2;
  border-bottom: 1px solid rgba(41, 41, 41, 0.35);
  padding-bottom: 0.12em;
  transition: border-color 0.4s ease;
}

.call:hover .call__title {
  border-color: var(--accent-orange);
}

.call:hover .call__arrow {
  color: var(--accent-orange);
}

.call__note {
  display: block;
  margin-top: 0.9rem;
  font-weight: 300;
  font-size: 0.95rem;
  opacity: 0.72;
}

/* ---------- Планшет ---------- */

@media (max-width: 900px) {
  :root {
    --dan-size: clamp(130px, 18vw, 180px);
  }

  .nav {
    display: none;
  }

  .menu-btn {
    display: block;
  }

  .footer {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .footer__links {
    grid-column: 1;
    grid-row: auto;
  }


  .cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero__foot {
    gap: clamp(1.5rem, 4vw, 3rem);
  }

  /* секции с фигурами перестают быть двухколоночными */
  #notes {
    grid-template-columns: 1fr;
    grid-template-areas:
      'num'
      'lead'
      'cut'
      'note'
      'card';
  }

  #contact {
    grid-template-columns: 1fr;
    grid-template-areas:
      'num'
      'lead'
      'body'
      'call'
      'links'
      'cut';
  }


  /* никаких сдвигов и выходов за край: фигуры стоят в потоке */
  .cut {
    width: min(100%, 20rem);
    max-width: min(100%, 20rem);
    margin-inline: 0;
    margin-block: 2.5rem;
    justify-self: start;
    align-self: auto;
    transform: none;
  }

}

/* ============================================================
   ТЕЛЕФОН — тот же знак, но подписи идут одна под другой
   ============================================================ */

@media (max-width: 640px) {
  :root {
    --dan-size: clamp(100px, 29vw, 125px);
    --logo-size: 1rem;
  }

  /* размытие в реальном времени телефон не тянет, а морфинг формы —
     дешёвая операция, поэтому движение оставляем, фильтр снимаем */
  .blob {
    filter: none;
    animation-duration: 34s;
  }

  /* фактура остаётся, но без режима наложения — он дорогой */
  .grain {
    mix-blend-mode: normal;
    opacity: 0.22;
  }

  .blob--mint {
    display: none;
  }

  .blob--yellow {
    width: 130vmax;
    height: 100vmax;
    top: -30%;
    left: -14%;
  }

  .blob--peach {
    width: 90vmax;
    height: 90vmax;
    top: 12%;
    left: 4%;
  }

  /* на телефоне серое пятно только намекает, без чёткого края */
  .blob--gray {
    width: 46vmax;
    height: 58vmax;
    top: 44%;
    left: -14%;
    opacity: 0.2;
  }

  .nav {
    gap: 1.05rem;
  }

  .nav a {
    font-size: 0.64rem;
    letter-spacing: 0.08em;
  }

  .hero {
    min-height: auto;
    justify-content: flex-start;
    padding-block: 13vw 11vw;
  }

  .hero__group {
    width: 100%;
    margin-inline: 0;
  }

  /* сам знак стоит по центру экрана */
  .wordmark {
    width: fit-content;
    margin-inline: auto;
  }

  .wordmark__ai {
    margin-left: 1.3em;
  }

  /* подписи разведены по краям: less manual слева, BUILD справа */
  .hero__foot {
    width: 100%;
    justify-content: space-between;
    gap: 16px;
    margin-top: 10vw;
  }

  .hero__line {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .ember__flame {
    width: 74vmin;
  }

  .ember__aura {
    width: 165%;
    filter: blur(24px);
  }

  .section {
    padding-block: clamp(4.5rem, 13vw, 7rem);
  }

  .cards {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .case {
    grid-template-columns: 1fr;
    grid-template-areas:
      'num'
      'marker'
      'scheme'
      'states';
    gap: 0;
    padding-block: 2.5rem;
  }


  .case__num {
    font-size: 2.4rem;
    margin-bottom: 0.75rem;
  }

  .note-card {
    width: 100%;
    padding-inline: 1.5rem;
  }

  /* пятно секции на телефоне не смещается: лишняя перерисовка на каждый кадр */
  .section::before {
    transform: none;
  }

  /* визуалы просто стоят в потоке: без сдвигов, наложений и выходов за край */
  .cut {
    width: min(100%, 15rem);
    max-width: min(100%, 15rem);
    margin-inline: 0;
    margin-block: 2.25rem;
    justify-self: start;
    align-self: auto;
    transform: none;
  }


  /* свечение поджато под размер фигуры */
  .cut::before {
    inset: 8% -10% 10% -10%;
    opacity: 0.7;
  }

  .links {
    flex-direction: column;
  }

  .link-card {
    width: 100%;
  }





  /* строка действия остаётся одной строкой */
  .note-card__action {
    min-width: 0;
    gap: 1rem;
    white-space: nowrap;
  }

  .case::after {
    width: 60vmax;
    height: 60vmax;
  }

  .section::before {
    opacity: 0.65;
  }

  .ghost {
    opacity: 0.045;
  }

  .ghost--word {
    font-size: clamp(4.5rem, 21vw, 8rem);
  }

  /* меньше вылет за край: на узком экране он тянул страницу вбок */
  .ghost--left {
    left: calc(var(--pad-x) * -1);
  }

  .ghost--right {
    right: calc(var(--pad-x) * -1);
  }

  .ghost--num {
    font-size: clamp(7rem, 32vw, 11rem);
  }

  .marquee {
    padding-block: 1.75rem;
  }

  .marquee__track {
    animation-duration: 48s;
  }

  #work::before,
  #cases::before,
  #process::before,
  #notes::before {
    width: 80vmax;
    height: 80vmax;
  }

  /* компактные шаги: ни длинной линии, ни крупных номеров */
  .stages {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    margin-top: 6vw;
  }

  .stage {
    padding-top: 0;
    max-width: 32ch;
  }

  .stage::before,
  .stage__mark {
    display: none;
  }

  /* номер — маленький технический маркер */
  .stage__num {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    opacity: 0.42;
  }

  .stage__name {
    margin-top: 0.45rem;
    font-size: 1.2rem;
    font-weight: 400;
  }

  .stage__text {
    margin-top: 0.4rem;
    font-size: 0.95rem;
    line-height: 1.5;
    opacity: 0.72;
  }

  /* между шагами короткая стрелка, а не сплошная линия */
  .stage:not(:last-child)::after {
    content: '↓';
    display: block;
    margin-top: 1.4rem;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--gray);
    opacity: 0.55;
  }

  .case__states {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .flow {
    font-size: 0.76rem;
    gap: 0.45rem;
  }

  .flow__link {
    min-width: 0.5rem;
  }

  .auto__stage {
    padding-block: 10vw;
  }

  #automation .section__lead {
    font-size: 2.6rem;
    line-height: 1.1;
    max-width: 12ch;
  }

  .rows {
    margin-top: 10vw;
  }

  .row__task {
    font-size: 1.45rem;
    line-height: 1.4;
    max-width: 20ch;
  }

  .row__verdict {
    margin-top: 1rem;
    font-size: 0.9rem;
  }

  .row__meta {
    max-width: none;
    font-size: 0.78rem;
  }

  .row {
    grid-template-columns: 1fr;
    grid-template-areas:
      'task'
      'verdict'
      'diagram'
      'meta'
      'status';
    gap: 0;
  }

  .row__status {
    justify-self: start;
    margin-top: 1rem;
  }

  .diagram {
    max-width: 17rem;
    margin-top: 2.5rem;
  }

  .row--human::before {
    inset: -14% -10%;
    filter: none;
  }

  .row--human .row__task {
    font-size: 1.6rem;
  }

  .hero__label {
    width: fit-content;
    font-size: 0.9rem;
    line-height: 1.5;
  }
}

/* ---------- Уважение к настройкам системы ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .menu {
    animation: none;
  }

  .blob {
    animation: none;
  }

  .wordmark__dan,
  .wordmark__ai,
  .hero__line,
  .hero__label,
  .header {
    animation: none;
  }

  .nav a::after,
  .note-card,
  .note-card__arrow,
  .card::after,
  .card__name,
  .card__index,
  .flow--card {
    transition: none;
  }

  .js .section {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .section .flow__node,
  .js .section .flow__link {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .js .section .flow__link::after {
    animation: none;
    opacity: 0;
  }

  .section::before,
  .ghost {
    transform: none;
  }

  .marquee__track {
    animation: none;
  }

  .js .row .dg-line,
  .js .row .dg-ring {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }

  .js .row .dg-box,
  .js .row .dg-dot,
  .js .row .dg-human,
  .js .row .dg-mark {
    opacity: 1;
    animation: none;
  }

  .dg-pulse,
  .dg-orbit {
    display: none;
  }

  .flow--manual {
    display: none;
  }

  .flow--auto {
    opacity: 1;
  }

  .note-card__ember {
    animation: none;
  }

  .ember {
    display: none;
  }

  .intro-playing .page {
    visibility: visible;
  }

  .bg {
    animation: none;
  }
}