/* ============================================================
   БНВ · финальная версия: «живописный мир + типографика деки»
   Прод-каркас (свет, механики) + канвас-композиция (цельные экраны,
   текст поверх картин) + приёмы деки (курсивные акценты, рамки).
   Палитра: сумерки #0E1626..#15233B → янтарь #E8A857 → рассвет #FAF6EF
   Радиусы: карточки/плашки 10px, кнопка 4px, интерактив-пилюли 999px.
   Один акцент: янтарь. Запрещены зелёный, неон, чистые #000/#fff.
   ============================================================ */

:root {
  --dusk-1: #0E1626;
  --dusk-2: #15233B;
  --amber: #E8A857;
  --amber-2: #C9A24B;
  --ochre: #8C6420;          /* янтарь на светлом фоне */
  --dawn-1: #FAF6EF;
  --dawn-2: #F4EDE1;
  --ink-light: #FAF6EF;
  --ink-dark: #2A2A2A;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Onest", -apple-system, "Segoe UI", sans-serif;
  /* ЕДИНАЯ ТИПОГРАФИЧЕСКАЯ ШКАЛА: 6 серифных + 5 текстовых ступеней.
     Меняешь ступень здесь - меняется везде. */
  /* Cormorant Garamond */
  --d1: clamp(2.75rem, 1.5rem + 7vw, 8.25rem);   /* 132 · герой */
  --d2: clamp(2.25rem, 1.35rem + 4.2vw, 5rem);   /* 80  · заголовки экранов */
  --d3: clamp(1.85rem, 1.15rem + 3vw, 4rem);     /* 64  · подзаголовки и входы */
  --d4: clamp(1.55rem, 1.05rem + 2.1vw, 3rem);   /* 48  · пуанты и финалы */
  --d5: clamp(1.4rem, 1rem + 1.5vw, 2.25rem);    /* 36  · лифты карточек и рамок */
  --d6: clamp(1.25rem, 1rem + 0.9vw, 1.8rem);    /* 29  · тихие серифные строки */
  /* Onest */
  --t-lead: clamp(1.12rem, 1.02rem + 0.5vw, 1.3rem);  /* 21   · лиды */
  --t-body: clamp(1.05rem, 0.98rem + 0.3vw, 1.15rem); /* 18.4 · основной текст */
  --t-note: calc(var(--t-body) * 0.92);               /* ~17  · примечания */
  --t-small: 0.875rem;                                 /* 14   · кнопки, контакты */
  --t-micro: 0.78rem;                                  /* 12.5 · кикеры, подписи */
  /* совместимость со старыми именами */
  --fs-body: var(--t-body);
  --fs-lead: var(--t-lead);
  --fs-display: var(--d2);
  --fs-hero: var(--d1);
  --r-card: 10px;            /* чуть заметное скругление карточек */
  --r-btn: 4px;              /* кнопка-прямоугольник как в деке */
  --wrap: 42rem;
  --wrap-wide: 80rem;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 750ms;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-weight: 330;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink-light);
  /* статичная версия шкалы света; app.js заменяет живой интерполяцией */
  background-color: var(--dusk-1);
  background-image: linear-gradient(
    to bottom,
    #0F1727 0%, #101A2C 8%, #101A2E 16%, #0D1523 24%, #0B1220 30%,
    #121E33 38%, #1A2A45 45%, #22304C 52%, #2E3C57 58%, #3A4661 64%,
    #46536E 69%, #63636E 72%, #8A7668 75%, #C0A98C 78%,
    #D9CCB6 82%, #EDE3D0 88%, #F4EDE1 94%, #FAF6EF 100%
  );
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

::selection { background: rgba(232, 168, 87, 0.35); }

/* зерно плёнки поверх всего */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.045;
}

/* ---------- Общие блоки ---------- */

.screen {
  position: relative;
  padding: clamp(6rem, 16vh, 11rem) 1.25rem;
}
.screen--compact { padding-block: clamp(4rem, 10vh, 6.5rem); }

.wrap { max-width: var(--wrap-wide); margin-inline: auto; position: relative; z-index: 1; }
.wrap--center { text-align: center; }
.wrap--narrow { max-width: var(--wrap); }

.on-light { color: var(--ink-dark); }

/* ---------- Цельные экраны: картина как фон секции ---------- */

/* картина во весь фон секции */
.sbg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.sbg > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* вариант: картина натуральной пропорции по центру, тает в фон сверху и снизу */
.sbg--fit > img {
  top: 50%;
  transform: translateY(-50%);
  height: auto;
  object-fit: initial;
  inset: auto 0;
  left: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
/* вуаль поверх картины: настраивается по секции через переменные */
.sbg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--veil, none);
}

/* ---------- Типографика ---------- */

.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 1.12;
  letter-spacing: 0.005em;
  max-width: 16ch;
  text-wrap: balance;
  margin-bottom: clamp(2rem, 5vh, 3rem);
  text-shadow: 0 2px 30px rgba(8, 13, 24, 0.55);
}
.on-light .display, .on-light.display { text-shadow: none; }
.display--sub { font-size: var(--d3); }
.wrap--center .display { margin-inline: auto; }

.display--hero {
  font-size: var(--fs-hero);
  line-height: 1.08;
  max-width: 15ch;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 7vh, 4rem);
}

/* авторский перенос строки: работает только на широких экранах,
   на мобильном текст переносится сам */
.br-d { display: none; }
@media (min-width: 1024px) { .br-d { display: inline; } }

/* фирменный приём деки: ключевые слова антиквой-курсивом янтарём */
em.glow {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--amber);
  padding-bottom: 0.08em;
}
.on-light em.glow { color: var(--ochre); }
.gold { color: var(--amber); }
.on-light .gold { color: var(--ochre); }

.prose p { margin-bottom: 1.35em; max-width: 42ch; text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }
.prose--center p { margin-inline: auto; }
.prose-strong {
  font-family: var(--serif);
  font-size: var(--d6);
  line-height: 1.4;
  margin-top: clamp(2rem, 5vh, 3rem);
  text-wrap: balance;
}
.lead { font-size: var(--fs-lead); line-height: 1.6; opacity: 0.92; margin-bottom: clamp(2.5rem, 6vh, 3.5rem); max-width: 40rem; }

.quiet { opacity: 0.72; font-size: var(--t-note); }
.quiet--after { margin-top: clamp(2rem, 5vh, 3rem); }

/* вход секции: первая мысль крупным серифом (канвас) */
.s-entry {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--d3);
  line-height: 1.28;
  max-width: 24ch;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(8, 13, 24, 0.6);
  margin-bottom: clamp(3rem, 8vh, 5.5rem);
}
/* пуант: тихая ударная фраза курсивом янтарём */
.s-point {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--d4);
  line-height: 1.4;
  color: rgba(232, 168, 87, 0.85);
  max-width: 24ch;
  text-wrap: balance;
  margin-top: clamp(3.5rem, 9vh, 6.5rem);
}
/* серифный финал секции по центру */
.s-final {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--d4);
  line-height: 1.4;
  max-width: 30ch;
  text-wrap: balance;
  margin: clamp(4rem, 10vh, 7rem) auto 0;
  text-align: center;
  text-shadow: 0 1px 24px rgba(8, 13, 24, 0.6);
}
.on-light .s-final { text-shadow: none; }

/* золотая рамка деки для ключевого вывода */
.frame-gold {
  border: 1px solid rgba(201, 162, 75, 0.55);
  background: rgba(232, 168, 87, 0.06);
  border-radius: var(--r-card);
  padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.4rem, 3.4vw, 3rem);
}

/* стеклянная карточка (точечно: s06 и s08) */
.glass {
  background: rgba(9, 15, 27, 0.55);
  border: 1px solid rgba(250, 246, 239, 0.08);
  border-radius: var(--r-card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: clamp(1.6rem, 3vw, 2.5rem);
}
.roman {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.18em;
  color: var(--amber);
  margin-bottom: 1rem;
}

/* ---------- Шапка ---------- */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 1.25rem;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  color: var(--ink-light);
  transition: color var(--dur) var(--ease);
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.topbar.topbar--light { color: var(--ink-dark); }
.topbar__name { opacity: 0.75; }
.topbar__cta {
  color: inherit;
  text-decoration: none;
  opacity: 0;
  letter-spacing: 0.1em;
  border-bottom: 1px solid rgba(232, 168, 87, 0.6);
  padding-bottom: 2px;
  transition: opacity var(--dur) var(--ease);
}
.topbar__cta.is-on { opacity: 0.85; }
.topbar__cta:hover { opacity: 1; }
.topbar__cta[hidden] { display: none; }

/* ---------- Экран 1: сумерки ---------- */

.screen--hero {
  min-height: 100lvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.hero-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}
.hero-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(15,23,39,0.22) 0%, rgba(15,23,39,0) 26%, rgba(15,23,39,0) 62%, #0F1727 100%),
    radial-gradient(80% 62% at 50% 44%, rgba(8,12,24,0.05), rgba(8,12,24,0.38) 100%);
}
.hero-window-glow {
  position: absolute;
  left: 67.8%;
  top: 79.5%;
  width: 130px;
  height: 130px;
  margin: -65px 0 0 -65px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,168,87,0.5) 0%, rgba(232,168,87,0.18) 38%, transparent 70%);
  mix-blend-mode: screen;
  animation: breathe 7s var(--ease) infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.035); }
}

/* флюид-вихрь: canvas поверх сцены, под текстом */
.hero-fluid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* пока вихрь рисует картину сам, CSS-дыхание подложки не нужно */
.has-fluid .hero-scene img { animation: none; }

.screen--hero .wrap { position: relative; z-index: 1; text-align: center; }

/* побуквенное появление заголовка: буквы готовит JS */
.display--hero .ltr {
  display: inline-block;
  will-change: transform, filter, opacity;
}
.js-letters .display--hero .ltr {
  opacity: 0;
  transform: translateY(0.22em);
  filter: blur(10px);
  animation: ltr-in 900ms var(--ease) forwards;
  animation-delay: calc(var(--li) * 34ms + 250ms);
}
@keyframes ltr-in {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* дуга-путь под кнопкой (канвас) */
.hero-arc {
  width: min(84vw, 600px);
  height: auto;
  overflow: visible;
  display: block;
  margin-inline: auto;
}
.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  margin-top: -44px;
}
.spark-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 246, 239, 0.9);
  background: rgba(14, 22, 38, 0.55);
  border: 1px solid rgba(232, 168, 87, 0.4);
  border-radius: 999px;
  padding: 1rem 2rem;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: border-color 250ms var(--ease), background 250ms var(--ease), transform 150ms var(--ease);
}
.spark-btn::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 12px 3px rgba(232, 168, 87, 0.55);
}
.spark-btn:hover { border-color: rgba(232, 168, 87, 0.9); background: rgba(232, 168, 87, 0.07); }
.spark-btn:active { transform: scale(0.98); }
.spark-note { font-size: var(--t-micro); opacity: 0.5; text-shadow: 0 1px 12px rgba(8, 12, 24, 0.6); }
/* пояснение под заголовком героя: кому и зачем страница (аудит 4.1) */
.hero-sub {
  font-size: calc(var(--t-lead) - 2px);
  line-height: 1.5;
  max-width: 54ch; /* две спокойные строки на десктопе */
  margin: clamp(0.4rem, 1.5vh, 1rem) auto 0;
  opacity: 0.9;
  text-wrap: balance;
  text-shadow: 0 1px 18px rgba(8, 12, 24, 0.7);
}

.scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 44px;
  overflow: hidden;
  opacity: 0.5;
}
.scroll-hint span {
  display: block;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(250, 246, 239, 0.8), transparent);
  animation: hint-flow 3.5s var(--ease) infinite;
}
@keyframes hint-flow {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
  .screen--hero { view-timeline-name: --hero; }
  .hero-scene img {
    animation: scene-breathe linear both;
    animation-timeline: --hero;
    animation-range: cover 0% cover 100%;
  }
}
}
@keyframes scene-breathe {
  from { scale: 1; }
  to { scale: 1.07; }
}

/* ---------- Экраны-картины: раскладки текстов (канвас) ---------- */

/* блоки влево/вправо в широкой обёртке */
@media (min-width: 900px) {
  .al { margin-right: auto; }
  .ar { margin-left: auto; margin-right: 0; }
  .ac { margin-inline: auto; }
}

/* s02 Зеркало */
#s02 .sbg { --veil:
  linear-gradient(to bottom, #0F1728 0%, rgba(15,23,40,0.5) 26%, rgba(16,26,44,0.55) 72%, #101A2C 100%),
  linear-gradient(to right, rgba(13,20,35,0.7), rgba(13,20,35,0.22) 55%, rgba(13,20,35,0)); }
/* картина лежит в нижней части секции: заголовок дышит на чистом фоне,
   фигуры проявляются у колонок текста (правка владельца) */
#s02 .sbg--fit > img { top: calc(64% + 20px); }
.cols-3 { display: grid; gap: 2.2rem clamp(2.5rem, 5vw, 5.5rem); margin-top: clamp(3rem, 8vh, 6rem); }
@media (min-width: 900px) { .cols-3 { grid-template-columns: repeat(3, 1fr); } }
.cols-3 p { max-width: 46ch; text-shadow: 0 1px 20px rgba(8, 13, 24, 0.7); }
#s02 .s-point { margin-left: auto; text-align: left; }
/* s02: вступление в два яруса - большой лид и «контракт» строкой ниже */
#s02 .s-entry { margin-bottom: 1.1rem; }
.s-entry-sub {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--d6);
  line-height: 1.35;
  max-width: 40ch;
  text-wrap: balance;
  opacity: 0.92;
  text-shadow: 0 2px 24px rgba(8, 13, 24, 0.6);
}

/* s03 Состояния: карточки с рамками и номерами */
#s03 { overflow: hidden; }
#s03 .lead { max-width: 66ch; }
.glints { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.states {
  list-style: none;
  display: grid;
  gap: clamp(1.6rem, 3.5vh, 2.4rem) clamp(1.8rem, 3.5vw, 3.5rem);
  margin-top: clamp(3rem, 7vh, 5rem);
}
@media (min-width: 820px) { .states { grid-template-columns: 1fr 1fr; } }
.state {
  position: relative;
  border: 1px solid rgba(250, 246, 239, 0.12);
  border-radius: var(--r-card);
  padding: clamp(1.4rem, 2.6vw, 2.1rem) clamp(1.3rem, 2.6vw, 2rem);
  max-width: 36rem;
}
.state__num {
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  color: var(--amber);
  opacity: 0.9;
}
.state__ember {
  position: absolute;
  right: 1.4rem;
  top: 1.55rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 12px 2px rgba(232, 168, 87, 0.45);
}
.state__phrase {
  font-family: var(--serif);
  font-size: var(--d6);
  line-height: 1.3;
  margin: 0.7rem 0 0.5rem;
}
.state__note { opacity: 0.72; font-size: var(--t-note); max-width: 44ch; }
#s03 .s-final {
  font-style: italic;
  color: rgba(250, 246, 239, 0.85);
}

/* s04 Корень */
#s04 .sbg > img { object-position: center 24%; opacity: 0.6; }
#s04 .sbg { --veil: linear-gradient(to bottom, #0D1523 0%, rgba(14,22,37,0.38) 24%, rgba(11,18,32,0.5) 74%, #0B1220 100%); }
#s04 .prose p { text-shadow: 0 1px 20px rgba(8, 13, 24, 0.75); }
/* s04: паузы между смысловыми блоками и строка-акцент перед выводом */
#s04 .prose > p:nth-of-type(2), #s04 .prose > p:nth-of-type(3) { margin-bottom: clamp(2.2rem, 5vh, 3.5rem); }
.s-accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--d5);
  line-height: 1.4;
  max-width: 28ch;
  text-wrap: balance;
  margin-top: clamp(2.5rem, 6vh, 4rem);
  text-shadow: 0 1px 24px rgba(8, 13, 24, 0.7);
}
#s04 .frame-gold {
  max-width: 44rem;
  margin: clamp(4rem, 10vh, 7rem) auto 0;
  text-align: center;
}
#s04 .frame-gold p {
  font-family: var(--serif);
  font-size: var(--d5);
  line-height: 1.4;
  text-wrap: balance;
}
/* ключевой вывод - янтарём, как в деке */
#s04 .frame-gold strong { font-weight: 500; color: var(--amber); }

/* s05 Дверь */
#s05 .sbg { --veil: linear-gradient(to bottom, #0B1220 0%, rgba(11,19,32,0.35) 24%, rgba(13,21,35,0.5) 76%, #121E33 100%); }
/* картина двери тоже лежит в нижней части секции (правка владельца) */
#s05 .sbg--fit > img { top: calc(64% + 20px); }
.door-glow {
  position: absolute;
  left: 13.5%;
  top: 60%;
  width: 190px;
  height: 430px;
  margin: -215px 0 0 -95px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(232,168,87,0.5), rgba(232,168,87,0.15) 55%, transparent 75%);
  mix-blend-mode: screen;
  filter: blur(6px);
  pointer-events: none;
  opacity: 0.35;
}
/* луч света и пылинки (canvas, кладёт JS) */
.shaft { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.s-door-final { max-width: 600px; margin-top: clamp(3rem, 8vh, 5.5rem); }
.s-door-final .s-lift {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--d4);
  line-height: 1.38;
  text-wrap: balance;
  text-shadow: 0 2px 26px rgba(8, 13, 24, 0.8);
  max-width: none;
}
.s-door-final .s-lift strong {
  display: block;
  font-style: italic;
  font-weight: 500;
  color: var(--amber);
  margin-top: 0.35em;
}
.s-door-final .s-tail { margin-top: 1.1rem; font-size: var(--t-note); opacity: 0.82; }

/* s06 Смена эпохи: три стеклянные карточки лесенкой */
/* заголовок s06 шире: три строки вместо пяти */
#s06 .display { max-width: 26ch; }
#s06 .sbg > img { object-position: center 32%; opacity: 0.6; }
#s06 .sbg { --veil:
  linear-gradient(to bottom, #121E33 0%, rgba(16,26,43,0.45) 26%, rgba(20,31,52,0.5) 72%, #1C2B46 100%),
  linear-gradient(to right, rgba(13,20,35,0.55), rgba(13,20,35,0.15) 50%, rgba(13,20,35,0.35)); }
#s06 .glass { max-width: 580px; margin-top: clamp(3.5rem, 9vh, 6.25rem); }
#s06 .glass p { margin-bottom: 1.1em; }
#s06 .glass p:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  #s06 .glass--ii { margin-left: clamp(1.5rem, 20vw, 23.75rem); }
  #s06 .glass--iii { margin-left: auto; max-width: 640px; }
}
#s06 .glass .g-lift {
  font-family: var(--serif);
  font-size: var(--d5);
  line-height: 1.4;
  text-wrap: balance;
}
/* тихий вопрос-акцент внутри карточки */
#s06 .g-accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--d6);
  line-height: 1.42;
  color: rgba(232, 168, 87, 0.9);
}

/* ---------- Экран 7: манифест ---------- */

.screen--manifesto {
  min-height: 100lvh;
  display: flex;
  align-items: center;
  padding-block: clamp(8rem, 20vh, 13rem);
  overflow: hidden;
}
.manifesto-glow {
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
  width: min(125vw, 1300px);
  height: min(125vw, 1300px);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(232, 168, 87, 0.14), rgba(232, 168, 87, 0) 70%);
  pointer-events: none;
}
.manifesto { position: relative; max-width: 52.5rem; margin-inline: auto; text-align: center; }
.manifesto__line {
  font-family: var(--serif);
  margin-bottom: clamp(2.5rem, 6vh, 3.75rem);
  text-wrap: balance;
}
.manifesto__line:last-child { margin-bottom: 0; }
.manifesto__line--i {
  font-style: italic;
  font-weight: 400;
  font-size: var(--d6);
  line-height: 1.55;
  color: rgba(250, 246, 239, 0.85);
}
.manifesto__line--b {
  font-weight: 500;
  font-size: var(--d5);
  line-height: 1.42;
}
.manifesto__divider {
  width: 72px;
  height: 1px;
  background: rgba(217, 164, 88, 0.65);
  margin: clamp(2.75rem, 7vh, 4.5rem) auto;
}
.manifesto__line--final {
  font-weight: 600;
  font-size: var(--d4);
  line-height: 1.3;
}
/* силуэт с разгорающимся сердцем (канвас): виден на широких экранах */
.manifesto-sil {
  position: absolute;
  left: calc(50% + 432px);
  top: 50%;
  transform: translateY(-52%);
  width: clamp(0px, calc(50vw - 452px), 170px);
  height: auto;
  aspect-ratio: 200 / 460;
  pointer-events: none;
  opacity: 0.65;
}
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
  .screen--manifesto { view-timeline-name: --mani; }
  .manifesto-sil .sil-heart {
    transform-box: fill-box;
    transform-origin: center;
    animation: sil-kindle linear both;
    animation-timeline: --mani;
    animation-range: cover 20% cover 75%;
  }
}
}
@keyframes sil-kindle {
  from { opacity: 0.15; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1.15); }
}

/* ---------- Экран 8: шар - закреплённая сцена, текст плывёт поверх ---------- */

.screen--balloon { padding: 0; }
.balloon-pin {
  position: sticky;
  top: 0;
  height: 100lvh;
  overflow: hidden;
  z-index: 0;
}
.balloon-scene {
  position: absolute;
  inset: 0;
}
.bs-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bs-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.bs-rope { transform-box: fill-box; transform-origin: right center; }
/* лёгкая жизнь сцены до взлёта: шар дрейфует, верёвки колышутся */
/* шар едва покачивается вокруг корзины: корзина на месте - канаты всегда в ней */
@media (prefers-reduced-motion: no-preference) {
  .bs-drift { transform-box: fill-box; transform-origin: 50% 100%; animation: bs-drift 9s var(--ease) infinite alternate; }
}
@keyframes bs-drift {
  from { transform: rotate(-0.5deg); }
  to { transform: rotate(0.5deg); }
}
/* склейки сцены с потоком */
.balloon-pin::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, #22304C 0%, rgba(34,48,76,0) 14%, rgba(34,48,76,0) 86%, #2E3C57 100%);
}
.s08-flow {
  position: relative;
  z-index: 1;
  margin-top: -100lvh;
  padding: clamp(6rem, 14vh, 9rem) 1.25rem clamp(7rem, 16vh, 11rem);
}
.s08-flow .display { max-width: 20ch; }
.balloon-cards { display: flex; flex-direction: column; gap: 1.4rem; align-items: flex-start; margin-top: clamp(3rem, 8vh, 5rem); }
.balloon-cards .glass {
  max-width: 560px;
  background: rgba(30, 44, 68, 0.5);
  border-color: rgba(232, 168, 87, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.balloon-cards .glass p { max-width: none; }
/* воздух А: чистая сцена - камера наезжает, шар с канатами поднимается выше в кадре */
.air-a { height: 110lvh; }
/* шаги: карточка прилипает сбоку шара, показывается и тает; с каждым шагом падает канат */
.b-steps { position: relative; }
.b-step { margin-bottom: 1.4rem; }
.b-step .glass {
  max-width: 560px;
  margin-left: clamp(1rem, 3vw, 4rem);
  background: rgba(30, 44, 68, 0.55);
  border-color: rgba(232, 168, 87, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.b-step .glass p { max-width: none; }
.b-step .glass p + p { margin-top: 1em; }
/* чётные шаги - справа от шара */
.b-step--r .glass { margin-left: auto; margin-right: clamp(1rem, 3vw, 4rem); }
.b-step .glass strong { font-weight: 500; color: var(--amber); }
/* воздух Б: свободный взлёт без текста */
.air-b { height: 80lvh; }
.b-final { height: 55lvh; }
.b-final .s-final { margin-top: 0; }
/* финал живёт на сцене: проявляется из пустоты на месте улетевшего шара */
.balloon-final {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  width: min(90vw, 52ch);
  max-width: none;
  margin: 0;
  z-index: 2;
  opacity: 0;
  text-wrap: initial; /* две строки по авторскому переносу, без автобаланса */
}

@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
  .screen--balloon { view-timeline-name: --bscene; }
  /* камера наезжает: шар с канатами крупнее и выше в кадре (сцепка сохраняется) */
  @media (min-width: 1366px) {
    .balloon-scene {
      transform-origin: 50% 80%;
      animation: bs-zoom linear both, bs-lift linear forwards;
      animation-timeline: --bscene, --bscene;
      animation-range: cover 25% cover 35%, cover 76% cover 83%;
    }
  }
  /* канаты падают по одному, с противоположной от текста стороны
     (шаги стоят на 30-37 / 40-44 / 48-54 / 58-63 / 66-73% таймлайна) */
  .bs-rope[data-r="4"] { animation: bs-rope-free linear both; animation-timeline: --bscene; animation-range: cover 40.5% cover 43.3%; }
  .bs-rope[data-r="1"] { animation: bs-rope-free linear both; animation-timeline: --bscene; animation-range: cover 48.6% cover 51.4%; }
  .bs-rope[data-r="3"] { animation: bs-rope-free linear both; animation-timeline: --bscene; animation-range: cover 56.8% cover 59.6%; }
  .bs-rope[data-r="2"] { animation: bs-rope-free linear both; animation-timeline: --bscene; animation-range: cover 64.9% cover 67.7%; }
  /* ТЕЛЕФОН: карточки едут в потоке, поэтому у канатов, взлёта и финала свои окна */
  @media (max-width: 1365px) {
    .bs-rope[data-r="4"] { animation-range: cover 47% cover 50%; }
    .bs-rope[data-r="1"] { animation-range: cover 55% cover 58%; }
    .bs-rope[data-r="3"] { animation-range: cover 61% cover 64%; }
    .bs-rope[data-r="2"] { animation-range: cover 67% cover 70%; }
    .bs-balloon { animation-range: cover 72% cover 82% !important; }
    .balloon-final { animation-range: cover 81% cover 87% !important; }
  }
  /* свободный взлёт: после последнего шага, в чистом небе */
  .bs-balloon {
    animation: bs-rise linear both;
    animation-timeline: --bscene;
    animation-range: cover 76% cover 84%;
  }
  /* ДЕСКТОП (от 1366px): шаги закреплены на сцене и сменяют друг друга; уже - обычный поток */
  @media (min-width: 1366px) {
    /* шаги: контейнер закреплён на сцене, карточки сменяют друг друга без пауз */
    .b-steps { height: 520lvh; }
    /* контейнер на всю ширину экрана: карточки у краёв вьюпорта, а не колонки */
    .b-steps-pin { position: sticky; top: 0; height: 100lvh; width: 100vw; margin-left: calc(50% - 50vw); }
    .b-step {
      position: absolute;
      top: 24lvh;
      left: clamp(1.5rem, 6vw, 9rem);
      width: min(560px, calc(44vw - 275px));
      margin: 0;
      opacity: 0;
      animation: step-show linear both;
      animation-timeline: --bscene;
    }
    .b-step .glass { max-width: none; margin: 0; }
    .b-step--r { left: auto; right: clamp(1.5rem, 6vw, 9rem); }
    /* окна слегка перекрываются: одна карточка тает, следующая уже проявляется */
    .b-step:nth-child(1) { animation-range: cover 35.2% cover 43.8%; }
    .b-step:nth-child(2) { animation-range: cover 42.8% cover 51.9%; }
    .b-step:nth-child(3) { animation-range: cover 50.9% cover 60.1%; }
    .b-step:nth-child(4) { animation-range: cover 59.1% cover 68.2%; }
    .b-step:nth-child(5) { animation-range: cover 67.2% cover 75.8%; }
  }
  /* финал приходит на место улетевшего шара - сразу после взлёта; копия в потоке не нужна */
  .b-final .s-final { display: none; }
  .balloon-final {
    animation: fin-show linear both;
    animation-timeline: --bscene;
    animation-range: cover 84% cover 90%;
  }
}
}
@keyframes bs-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.18); }
}
/* камера поднимается за шаром: якоря уходят за нижний край, остаётся небо */
@keyframes bs-lift {
  from { transform: scale(1.18) translateY(0); }
  to { transform: scale(1.3) translateY(16%); }
}
@keyframes bs-rope-free {
  0% { transform: rotate(0deg); opacity: 1; }
  55% { transform: rotate(-7deg) translateY(30px); opacity: 0.55; }
  100% { transform: rotate(-12deg) translateY(80px); opacity: 0; }
}
@keyframes bs-rise {
  0% { transform: translateY(0); }
  100% { transform: translateY(-1500px); }
}
@keyframes step-show {
  0% { opacity: 0; transform: translateY(10px); }
  10% { opacity: 1; transform: translateY(0); }
  88% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-8px); }
}
/* финал проявляется из пустоты уже на месте (после закрепления), без движения */
@keyframes fin-show {
  0% { opacity: 0; }
  18% { opacity: 1; }
  78% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- Экран 9: программа - путь по свечам, всё поверх картины ---------- */

.screen--path { padding: 0; }
.path-pin {
  position: sticky;
  top: 0;
  height: 100lvh;
  overflow: hidden;
  z-index: 0;
}
.path-pin img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.path-pin::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* верхняя вуаль длиннее: заголовок и вступление лежат на небе и дымке, им нужна ровная подложка */
  background: linear-gradient(to bottom, #2E3C57 0%, rgba(46,60,87,0.6) 14%, rgba(46,60,87,0.32) 36%, rgba(46,60,87,0) 52%, rgba(58,70,97,0) 82%, #3A4661 100%);
}
/* свечи-вехи: номера с лидерными линиями в точных позициях картины */
/* плоскость меток повторяет геометрию картины (object-fit: cover, низ по низу):
   ширина = max(экран, 2×высота), пропорция 2:1 - метки не плывут между ширинами */
.path-marks {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: max(100%, calc(100lvh * 2));
  aspect-ratio: 2 / 1;
  pointer-events: none;
}
.path-mark {
  position: absolute;
  transform: translate(-100%, -50%);
  display: flex;
  align-items: center;
  gap: min(1.6vw, 18px);
}
.path-mark--flip { transform: translate(0, -50%); }
.path-mark__num {
  font-family: var(--serif);
  font-style: italic;
  line-height: 1;
  color: var(--amber);
  text-shadow: 0 2px 20px rgba(20, 30, 48, 0.8);
}
.path-mark__line {
  height: 1px;
  background: linear-gradient(to right, rgba(232,168,87,0.15), rgba(232,168,87,0.75));
}
.path-mark--flip .path-mark__line { background: linear-gradient(to left, rgba(232,168,87,0.15), rgba(232,168,87,0.7)); }
.path-mark__halo {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(232,168,87,0.45), rgba(232,168,87,0));
}
@media (max-width: 700px) { .path-mark, .path-mark__halo { display: none; } }
/* подсветка вех по мере прохождения секции */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
  .screen--path { view-timeline-name: --path; }
  .path-mark, .path-mark__halo { opacity: 0.25; animation: mark-light linear both; animation-timeline: --path; }
  .path-mark[data-m="1"], .path-mark__halo[data-m="1"] { animation-range: cover 12% cover 26%; }
  .path-mark[data-m="2"], .path-mark__halo[data-m="2"] { animation-range: cover 26% cover 42%; }
  .path-mark[data-m="3"], .path-mark__halo[data-m="3"] { animation-range: cover 42% cover 58%; }
  .path-mark[data-m="4"], .path-mark__halo[data-m="4"] { animation-range: cover 58% cover 74%; }
}
}
@keyframes mark-light {
  from { opacity: 0.25; }
  to { opacity: 1; }
}
.s09-flow {
  position: relative;
  z-index: 1;
  margin-top: -100lvh;
  padding: 16lvh 1.25rem clamp(7rem, 16vh, 11rem);
}
.s09-flow .display {
  max-width: 40ch;
  font-size: var(--d3);
  line-height: 1.24;
  text-shadow: 0 2px 24px rgba(20, 30, 48, 0.95), 0 0 70px rgba(20, 30, 48, 0.8), 0 0 120px rgba(20, 30, 48, 0.6);
}
.s09-intro {
  display: grid;
  gap: 1.4rem clamp(2.5rem, 5vw, 5.5rem);
  margin-top: clamp(2.5rem, 6vh, 4rem);
  max-width: 68rem;
}
@media (min-width: 900px) { .s09-intro { grid-template-columns: 1fr 1fr; } }
.s09-intro .glass { background: rgba(24, 36, 58, 0.5); border-color: rgba(232, 168, 87, 0.16); }
.s09-intro .glass p { max-width: none; }
/* воздух: картина дышит, свечи загораются */
.path-air { height: 95lvh; }
.phases {
  list-style: none;
  display: grid;
  gap: clamp(1.4rem, 3.5vh, 2.2rem) clamp(2rem, 4vw, 4rem);
  max-width: 68rem;
}
@media (min-width: 900px) { .phases { grid-template-columns: 1fr 1fr; } }
.phase {
  background: rgba(24, 36, 58, 0.5);
  border: 1px solid rgba(232, 168, 87, 0.16);
  border-radius: var(--r-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: clamp(1.5rem, 2.8vw, 2.2rem);
}
.phase__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 1.1rem;
}
.phase__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(232, 168, 87, 0.9);
  box-shadow: 0 0 16px 4px rgba(232, 168, 87, 0.45);
}
.phase__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--d6);
  line-height: 1;
  color: var(--amber);
}
.phase__ray { height: 1px; flex: 1; background: linear-gradient(to right, rgba(232,168,87,0.35), rgba(232,168,87,0)); }
.phase__name { font-size: var(--t-body); font-weight: 500; margin-bottom: 0.4em; }
.phase__text { opacity: 0.78; font-size: var(--t-note); max-width: none; }
/* подводка к этапам */
/* два входа в программу: короткое вступление строкой, не карточкой (аудит 4.4) */
.s09-lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  max-width: 46ch; /* уже заголовка: остаётся над тёмным склоном, не ложится на светлую вершину */
  margin: 0 0 clamp(1.8rem, 4vh, 2.6rem);
  opacity: 0.96;
  text-wrap: pretty;
  text-shadow: 0 2px 22px rgba(20, 30, 48, 0.95), 0 0 60px rgba(20, 30, 48, 0.8);
}
.s09-steps-lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--d6);
  line-height: 1.4;
  color: rgba(250, 246, 239, 0.85);
  margin-bottom: clamp(1.4rem, 3vh, 2rem);
  text-shadow: 0 2px 20px rgba(20, 30, 48, 0.8);
}
.s09-outro { margin-top: clamp(3rem, 7vh, 4.5rem); max-width: 45rem; }
.s09-outro .quiet { font-style: italic; margin-top: 0.9rem; }

/* ---------- Экран 10: таблица ДО → ПОСЛЕ (дека) ---------- */

#s10 .wrap { max-width: 74rem; }
.shift-annot { margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.shift-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5.5rem);
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding-bottom: 0.9rem;
}
.shift-head .h-old { opacity: 0.55; }
.shift-head .h-new { color: var(--amber); text-align: right; }
.shift-rule {
  height: 2px;
  background: linear-gradient(to right, rgba(250,246,239,0.18), rgba(201,162,75,0.85));
  margin-bottom: 0.4rem;
}
.shift-list { list-style: none; }
.shift {
  display: grid;
  gap: 0.5rem clamp(2.5rem, 5vw, 5.5rem);
  padding: clamp(1.2rem, 2.6vh, 1.9rem) 1rem;
  border-bottom: 1px solid rgba(250, 246, 239, 0.08);
  align-items: baseline;
}
.shift:nth-child(odd) { background: rgba(250, 246, 239, 0.03); }
@media (min-width: 768px) { .shift { grid-template-columns: 1fr 1fr; } }
.shift__old { opacity: 0.85; }
.shift__new {
  font-family: var(--serif);
  font-size: var(--t-lead);
  line-height: 1.35;
  color: #F3C787;
}
.shift__new::before {
  content: "→";
  color: var(--amber);
  margin-right: 12px;
  font-family: var(--sans);
  font-size: var(--t-body);
}
#s10 .s-final { font-style: italic; opacity: 0.85; }

/* ---------- Переход к рассвету: тихий экран-выдох ---------- */

.dawn-band {
  position: relative;
  height: 70vh;
  overflow: hidden;
  pointer-events: none;
}
.dawn-sun {
  position: absolute;
  left: 50%;
  bottom: -20%;
  transform: translateX(-50%);
  width: min(80vw, 760px);
  height: min(80vw, 760px);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(242, 192, 120, 0.26), rgba(242, 192, 120, 0) 70%);
}
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
  .dawn-band { view-timeline-name: --dawnb; }
  .dawn-sun {
    animation: sun-rise linear both;
    animation-timeline: --dawnb;
    animation-range: cover 10% cover 90%;
  }
}
}
@keyframes sun-rise {
  from { transform: translateX(-50%) translateY(24%); opacity: 0.55; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.dawn-thread { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Экран 11а: свет расходится ---------- */

.screen--chain { overflow: hidden; }
.chain-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.chain-scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}
.chain-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(205,188,168,0.85) 0%, rgba(250,248,244,0.2) 16%, rgba(250,248,244,0) 45%, rgba(218,203,179,0.85) 100%);
}
/* живые огоньки поверх панорамы (canvas, кладёт JS) */
.chain-sparks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#s11a .s11a-head { max-width: 40rem; }
@media (min-width: 1024px) { #s11a .s11a-head { margin-left: clamp(0px, 18%, 320px); } }
.chain {
  list-style: none;
  display: grid;
  gap: clamp(1.8rem, 4vh, 2.75rem) clamp(1.75rem, 3vw, 3rem);
  margin-top: clamp(3.5rem, 9vh, 7rem);
}
@media (min-width: 900px) { .chain { grid-template-columns: repeat(4, 1fr); } }
.chain__node { position: relative; max-width: 34rem; }
.chain__dot {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #B98A3C;
  box-shadow: 0 0 16px 4px rgba(185, 138, 60, 0.4);
  margin-bottom: 1.4rem;
}
.chain__node p { font-size: var(--t-note); line-height: 1.7; opacity: 0.85; }
.chain__node strong { font-weight: 500; color: var(--ink-dark); }
/* нить света между узлами на широком */
@media (min-width: 900px) {
  .chain__node:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 22px;
    top: 5px;
    right: calc(-1 * clamp(1.75rem, 3vw, 3rem));
    height: 1px;
    background: linear-gradient(to right, rgba(140,100,32,0.45), rgba(140,100,32,0.1));
  }
}
@media (prefers-reduced-motion: no-preference) {
  .chain__node.lit .chain__dot { animation: chain-flare 950ms var(--ease); }
}
@keyframes chain-flare {
  0% { box-shadow: 0 0 0 0 rgba(232, 168, 87, 0); }
  45% { box-shadow: 0 0 26px 9px rgba(232, 168, 87, 0.55); }
  100% { box-shadow: 0 0 16px 4px rgba(185, 138, 60, 0.4); }
}
/* итог цепочки - серифом */
.chain-final {
  font-family: var(--serif);
  font-size: var(--t-lead);
  line-height: 1.5;
  max-width: 100ch; /* две строки на десктопе */
  text-wrap: pretty;
  margin-top: clamp(1.6rem, 4vh, 2.4rem);
  opacity: 0.9;
}
@media (min-width: 1024px) { .chain-final { margin-left: clamp(0px, 18%, 320px); } }
/* шкала деки: источник → мир вокруг */
.chain-scale {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: clamp(3.5rem, 8vh, 5.5rem);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
}
.chain-scale .cs-a { color: var(--ochre); display: flex; align-items: center; gap: 0.55rem; }
.chain-scale .cs-a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ochre);
  box-shadow: 0 0 10px 2px rgba(140, 100, 32, 0.4);
}
.chain-scale .cs-line {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--ochre), rgba(140, 100, 32, 0.12));
}
.chain-scale .cs-b { opacity: 0.6; }

/* ---------- Экран 11б: масштаб ---------- */

.screen--scale { padding: 0; }
.scale-scene {
  position: relative;
  min-height: clamp(560px, 100svh, 1080px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}
.scale-scene img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.scale-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(218,203,179,0.5), rgba(218,203,179,0) 28%, rgba(218,203,179,0) 82%, rgba(228,216,193,0.9) 100%);
}
.scale-scene .display {
  position: relative;
  z-index: 1;
  margin: clamp(4.5rem, 13vh, 9.5rem) 1.25rem 0;
  max-width: 22ch;
  text-align: center;
  font-size: var(--d3);
  line-height: 1.22;
}
.scale-body { position: relative; overflow: hidden; padding: clamp(4.5rem, 10vh, 8rem) 1.25rem clamp(7rem, 16vh, 11rem); }
/* мягкие облака света */
.scale-body::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 24% at 18% 12%, rgba(250,246,238,0.75), transparent 70%),
    radial-gradient(48% 26% at 84% 40%, rgba(250,246,238,0.65), transparent 70%),
    radial-gradient(50% 27% at 20% 66%, rgba(250,246,238,0.7), transparent 70%),
    radial-gradient(52% 30% at 55% 96%, rgba(255,241,214,0.75), transparent 70%);
}
.scale-dots { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scale-blocks {
  position: relative;
  max-width: 74rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(3.5rem, 9vh, 6rem);
}
.scale-block { max-width: 58ch; }
.scale-block .sb-lift {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--d6);
  line-height: 1.35;
  text-wrap: balance;
  margin-bottom: 0.6rem;
  max-width: none;
}
.scale-block p { max-width: none; text-wrap: pretty; opacity: 0.9; }
.scale-block p + p { margin-top: 0.9em; }
@media (min-width: 900px) {
  .scale-block--1 { align-self: flex-start; }
  .scale-block--2 { align-self: center; }
  .scale-block--3 { align-self: flex-end; }
}
.scale-final {
  position: relative;
  align-self: center;
  margin-top: clamp(3rem, 8vh, 5.5rem);
  text-align: center;
  max-width: 56rem;
  margin-inline: auto;
}
.scale-final .radar { width: 160px; display: block; margin: 0 auto 1.6rem; overflow: visible; }
.scale-final p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--d4);
  line-height: 1.38;
  max-width: 28ch;
  margin-inline: auto;
  text-wrap: balance;
}
.scale-final em.glow { text-shadow: 0 0 26px rgba(232, 168, 87, 0.5); }

/* ---------- Экран 12: кейсы ---------- */

.cases {
  display: grid;
  gap: clamp(3.5rem, 8vh, 5rem) clamp(2.5rem, 4.5vw, 4.5rem);
}
@media (min-width: 820px) { .cases { grid-template-columns: 1fr 1fr; } }

.case__video {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: var(--r-card);
  background:
    radial-gradient(120% 130% at 30% 20%, #22304A 0%, #0E1626 70%),
    var(--dusk-1);
  background-size: cover;
  background-position: center;
  color: var(--ink-light);
  cursor: pointer;
  padding: 1.1rem 1.25rem;
  overflow: hidden;
  transition: transform 250ms var(--ease);
}
/* живой кадр из видео + затемнение снизу под подпись */
.case__video[style]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 14, 24, 0.7), rgba(10, 14, 24, 0.08) 45%);
}
.case__video:hover { transform: translateY(-2px); }
.case__video:active { transform: scale(0.99); }
.case__play {
  position: absolute;
  top: 50%; left: 50%;
  width: 58px; height: 58px;
  transform: translate(-50%, -60%);
  border-radius: 50%;
  background: rgba(232, 168, 87, 0.92);
}
.case__play::after {
  content: "";
  position: absolute;
  top: 50%; left: 53%;
  transform: translate(-50%, -50%);
  border-left: 15px solid #1C2436;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.case__who { position: relative; font-size: var(--t-small); letter-spacing: 0.03em; text-align: left; }
.case iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-card); }

.case__name { font-size: var(--t-body); font-weight: 500; margin-top: 1.3rem; }
.case__tag {
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-top: 0.35rem;
}
.case__meta { margin-top: 1rem; font-size: var(--t-note); opacity: 0.75; }
.case__quote {
  margin-top: 0.9rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-lead);
  line-height: 1.5;
  opacity: 0.9;
}
/* слоты будущих кейсов */
.case--slot .case__frame {
  aspect-ratio: 16 / 9;
  border: 1px dashed rgba(42, 42, 42, 0.2);
  border-radius: var(--r-card);
  background: rgba(42, 42, 42, 0.02);
}
.case--slot .case__name, .case--slot .case__meta { opacity: 0.45; }

/* ---------- Экран 13: Максим ---------- */

.screen--maxim {
  position: relative;
  min-height: 92lvh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.maxim-scene {
  position: absolute;
  inset: 0;
}
.maxim-scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
.maxim-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(244,237,225,0.9) 0%, rgba(252,252,251,0) 12%, rgba(252,252,251,0) 88%, rgba(250,246,239,0.9) 100%),
    linear-gradient(to right, rgba(253,253,252,0.72) 0%, rgba(253,253,252,0.3) 42%, rgba(253,253,252,0) 62%);
}
.maxim-figure {
  position: absolute;
  right: max(6vw, calc(50% - 40rem));
  bottom: 0;
  height: min(97%, 92lvh);
  pointer-events: none;
}
.maxim-figure::before {
  content: "";
  position: absolute;
  inset: -12% -20%;
  background: radial-gradient(55% 55% at 50% 42%, rgba(232, 168, 87, 0.08), transparent 75%);
}
.maxim-figure img {
  position: relative;
  height: 100%;
  width: auto;
  display: block;
}
.screen .wrap.wrap--maxim { margin-inline: 0 auto; margin-left: max(1.25rem, calc(50% - 44rem)); max-width: 36rem; position: relative; z-index: 1; }
.screen .wrap.wrap--maxim > * { margin-inline: 0; }
@media (max-width: 900px) {
  .screen--maxim { flex-direction: column; justify-content: flex-end; padding-bottom: 0; }
  .maxim-figure { position: relative; right: auto; bottom: auto; height: auto; margin-top: 2rem; align-self: center; }
  .maxim-figure img { height: 52lvh; }
  .screen .wrap.wrap--maxim { margin-inline: auto; }
}

.maxim { display: block; }
.maxim__name.display { margin-bottom: 0.5rem; max-width: none; font-size: var(--d3); }
.maxim__role {
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: clamp(1.5rem, 3.5vh, 2.2rem);
}
.maxim__thread {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 34ch;
  margin-bottom: clamp(1.5rem, 3.5vh, 2.2rem);
}
.maxim__thread::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(232, 168, 87, 0.85);
  box-shadow: 0 0 14px 3px rgba(232, 168, 87, 0.4);
}
.maxim__thread::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(to right, rgba(140, 100, 32, 0.35), rgba(140, 100, 32, 0));
}
.maxim__facts { font-size: var(--t-note); opacity: 0.85; margin-bottom: 1.6rem; }
.maxim__why {
  font-family: var(--serif);
  font-size: var(--d6);
  line-height: 1.4;
  margin-bottom: 1.6rem;
  text-wrap: pretty;
}
.maxim__inst { font-size: var(--t-note); opacity: 0.75; }
.maxim__inst a { color: var(--ochre); }
.maxim__inst + .maxim__inst { margin-top: 0.7em; }

/* ---------- Экран 14: финал ---------- */

.screen--final { min-height: 92lvh; display: flex; align-items: center; overflow: hidden; }
.final-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.final-scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
.final-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #EDE3D0 0%, rgba(237, 227, 208, 0.42) 26%, rgba(250, 246, 239, 0.34) 60%, rgba(250, 246, 239, 0.75) 100%);
}
.screen--final .display { margin-inline: auto; font-size: var(--d2); max-width: 19ch; }
.screen--final .prose p { margin-inline: auto; max-width: 40rem; }

/* кнопка деки: прямоугольная, уверенная */
.cta {
  display: block;
  width: min(100%, 420px);
  margin: clamp(2.5rem, 6vh, 3.5rem) auto 0;
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: #231604;
  background: linear-gradient(180deg, #EDB068, #DE9A48);
  border-radius: var(--r-btn);
  padding: 1.4rem 2.75rem;
  text-decoration: none;
  box-shadow: 0 8px 40px rgba(222, 154, 72, 0.42);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), filter 200ms var(--ease);
}
.cta:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 12px 44px rgba(222, 154, 72, 0.5); }
.cta:active { transform: scale(0.99); }

.cta__after { margin-top: 1.1rem; font-size: var(--t-small); opacity: 0.72; }
.contacts { margin-top: clamp(3rem, 8vh, 4.5rem); font-size: var(--t-small); opacity: 0.8; }
.contacts a { color: var(--ochre); }

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

.footer {
  padding: clamp(4rem, 9vh, 5.5rem) 1.25rem clamp(3.5rem, 8vh, 5rem);
  background: var(--dawn-1);
  border-top: 1px solid rgba(42, 42, 42, 0.08);
  text-align: center;
  font-size: var(--t-small);
}
.footer__slogan {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--d6);
  line-height: 1.5;
  opacity: 0.85;
  margin-bottom: 2.4rem;
}
.footer p { margin-bottom: 0.85rem; }
.footer a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(42,42,42,0.25); padding-bottom: 1px; }
.footer__inst a.site { color: var(--ochre); border-color: rgba(140,100,32,0.35); }
.footer__paradox a { border: none; display: inline-flex; align-items: center; gap: 0.45rem; opacity: 0.75; }
.footer__paradox img { border-radius: 4px; }
.footer__legal { opacity: 0.72; font-size: var(--t-micro); margin-top: 1.6rem; }

/* ============================================================
   Огонёк, пасхалки, звук, возврат в свет
   ============================================================ */

.spark-glow {
  position: fixed;
  left: 0; top: 0;
  width: 380px; height: 380px;
  margin: -190px 0 0 -190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,168,87,0.32) 0%, rgba(232,168,87,0.13) 34%, rgba(232,168,87,0) 68%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 30;
  opacity: 0;
  transition: opacity 900ms var(--ease);
  will-change: transform;
}
.spark-on .spark-glow { opacity: 1; }

.spark-on .spark-btn, .spark-on .spark-note {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 800ms var(--ease);
}

.easter {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 300px;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-body);
  line-height: 1.45;
  color: rgba(232, 168, 87, 0.92);
  text-shadow: 0 0 18px rgba(232, 168, 87, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms var(--ease);
  z-index: 5;
}
.easter::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 10px 2px rgba(232, 168, 87, 0.5);
}
.easter--long { max-width: 340px; }
#s01 .easter { left: 8%; bottom: 20%; }
#s02 .easter { right: 6%; top: 26%; }
#s03 .easter { left: 5%; bottom: 16%; }
#s04 .easter { right: 6%; top: 10%; }
#s05 .easter { left: 6%; bottom: 28%; }
#s06 .easter { right: 8%; top: 38%; }
#s07 .easter { left: 50%; transform: translateX(-50%); bottom: 7%; text-align: center; }
#s08 .easter { left: 7%; top: 30%; z-index: 2; }

@media (max-width: 767px) {
  .easter {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 2.2rem !important;
    transform: translateX(-50%);
    text-align: center;
    width: max-content;
    max-width: 82vw;
  }
}

.touch-glow {
  position: absolute;
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,168,87,0.4) 0%, rgba(232,168,87,0.16) 40%, rgba(232,168,87,0) 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 30;
  animation: touch-bloom 2000ms var(--ease) forwards;
}
@keyframes touch-bloom {
  0% { transform: scale(0.4); opacity: 0; }
  22% { transform: scale(4.5); opacity: 1; }
  62% { transform: scale(6.5); opacity: 0.8; }
  100% { transform: scale(8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .touch-glow { animation: none; opacity: 0; }
}

.touch-hint {
  position: fixed;
  left: 50%;
  bottom: 4.5rem;
  transform: translateX(-50%);
  max-width: 300px;
  text-align: center;
  font-size: var(--t-small);
  line-height: 1.5;
  color: rgba(250, 246, 239, 0.9);
  background: rgba(14, 22, 38, 0.78);
  border: 1px solid rgba(232, 168, 87, 0.35);
  border-radius: var(--r-card);
  padding: 0.8rem 1.2rem;
  z-index: 45;
  opacity: 0;
  transition: opacity 700ms var(--ease);
  pointer-events: none;
  backdrop-filter: blur(8px);
}
.touch-hint.is-on { opacity: 1; }

/* возврат в свет */
.dawn .screen--hero {
  background: linear-gradient(to bottom, #FBF7F0 0%, #F6EFE2 58%, #D9CCB6 80%, rgba(217, 204, 182, 0) 100%);
  color: var(--ink-dark);
}
.dawn .hero-scene, .dawn .hero-fluid { display: none; }
.dawn .screen--hero .spark-btn,
.dawn .screen--hero .spark-note,
.dawn .screen--hero .hero-arc { display: none; }
.dawn .scroll-hint span { background: linear-gradient(to bottom, transparent, rgba(42, 42, 42, 0.55), transparent); }
.dawn .screen--hero em.glow { color: var(--ochre); }
.dawn .screen--hero .display--hero { text-shadow: none; }
.dawn #s01 .easter { display: none; }
/* проводник летит всегда - режим рассвета меняет только первый экран */

/* ---------- Кнопка звука ---------- */

.sound-toggle {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 40;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(232, 168, 87, 0.5);
  background: rgba(14, 22, 38, 0.55);
  color: var(--amber);
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.sound-toggle.is-off .sound-waves { display: none; }
.sound-toggle[hidden] { display: none; }

/* ---------- Проявление текста светом ---------- */

.js .rv {
  opacity: 0;
  transition: opacity 850ms var(--ease);
  transition-delay: calc(var(--rvi, 0) * 160ms);
}
.js .rv.lit { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transition: none; }
}

/* ---------- Сквозной полёт огонька ---------- */

.flight-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 25;
  pointer-events: none;
  overflow: visible;
}
.flight-spark {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFE3B0 0%, var(--amber) 55%, rgba(232,168,87,0) 100%);
  box-shadow:
    0 0 18px 6px rgba(232, 168, 87, 0.5),
    0 0 60px 24px rgba(232, 168, 87, 0.16);
  offset-rotate: 0deg;
  offset-distance: 0%;
}
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: scroll()) {
  .flight-spark {
    animation: spark-fly linear both;
    animation-timeline: scroll(root block);
  }
}
}
@keyframes spark-fly {
  0% { offset-distance: 0%; opacity: 0.95; }
  88% { offset-distance: 96%; opacity: 0.9; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ---------- Скролл-механики сцен ---------- */

/* уголёк состояния тлеет после появления */
.state .state__ember { transform: scale(0.6); opacity: 0.5; transition: transform 700ms var(--ease), opacity 700ms var(--ease); }
.state.lit .state__ember { transform: scale(1); opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .state.lit .state__ember { animation: ember-smolder 5s var(--ease) 1s infinite alternate; }
  .state.lit:nth-child(2n) .state__ember { animation-delay: 2.2s; }
  .state.lit:nth-child(3n) .state__ember { animation-delay: 3.4s; }
}
@keyframes ember-smolder {
  from { box-shadow: 0 0 12px 2px rgba(232, 168, 87, 0.45); }
  to { box-shadow: 0 0 18px 4px rgba(232, 168, 87, 0.7); }
}

@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {

  /* картина секции медленно приближается */
  .sbg { view-timeline-name: --sc; }
  .sbg > img {
    animation: scene-breathe linear both;
    animation-timeline: --sc;
    animation-range: cover 0% cover 100%;
  }
  .sbg--fit > img { animation-name: scene-breathe-fit; }

  /* свет тихой двери разгорается */
  #s05 .sbg { view-timeline-name: --door; }
  .door-glow {
    animation: door-warm linear both;
    animation-timeline: --door;
    animation-range: cover 8% cover 80%;
  }
  /* рассветная половина горизонта разгорается */
  #s06 .sbg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(58% 62% at 70% 46%, rgba(232, 168, 87, 0.32), transparent 74%);
    mix-blend-mode: screen;
    z-index: 1;
    animation: horizon-burn linear both;
    animation-timeline: --sc;
    animation-range: cover 10% cover 90%;
  }

  /* ТЕЛЕФОН/ПЛАНШЕТ: ДО гаснет - ПОСЛЕ загорается, построчно */
  @media (max-width: 1023px) {
    .shift__old {
      animation: old-out linear both;
      animation-timeline: view();
      animation-range: cover 42% cover 72%;
    }
    .shift__new {
      opacity: 0.25;
      animation: new-in linear both;
      animation-timeline: view();
      animation-range: cover 42% cover 72%;
    }
  }
  /* ДЕСКТОП: таблица закреплена; сначала проявляются все ДО, затем по одной
     загораются ПОСЛЕ, а ДО блекнут; потом страница идёт дальше */
  @media (min-width: 1024px) {
    #s10 { min-height: 185lvh; view-timeline-name: --s10; }
    #s10 .wrap { position: sticky; top: 4lvh; }
    #s10 .display { font-size: var(--d3); margin-bottom: 1rem; }
    #s10 .shift-annot { margin-bottom: 1.6rem; }
    #s10 .shift { padding: 0.85rem 1rem; }
    #s10 .shift__new { font-size: var(--t-lead); }
    #s10 .s-final { margin-top: 1.8rem; font-size: var(--d6); max-width: 62ch; }
    .shift__old {
      animation: s10-old-dim linear both;
      animation-timeline: --s10;
    }
    .shift__new {
      opacity: 0.18;
      animation: s10-new-in linear both;
      animation-timeline: --s10;
    }
    .shift:nth-child(1) .shift__old { animation-range: cover 41% cover 44%; }
    .shift:nth-child(2) .shift__old { animation-range: cover 44.5% cover 47.5%; }
    .shift:nth-child(3) .shift__old { animation-range: cover 48% cover 51%; }
    .shift:nth-child(4) .shift__old { animation-range: cover 51.5% cover 54.5%; }
    .shift:nth-child(5) .shift__old { animation-range: cover 55% cover 58%; }
    .shift:nth-child(6) .shift__old { animation-range: cover 58.5% cover 61.5%; }
    .shift:nth-child(1) .shift__new { animation-range: cover 41% cover 44%; }
    .shift:nth-child(2) .shift__new { animation-range: cover 44.5% cover 47.5%; }
    .shift:nth-child(3) .shift__new { animation-range: cover 48% cover 51%; }
    .shift:nth-child(4) .shift__new { animation-range: cover 51.5% cover 54.5%; }
    .shift:nth-child(5) .shift__new { animation-range: cover 55% cover 58%; }
    .shift:nth-child(6) .shift__new { animation-range: cover 58.5% cover 61.5%; }
    #s10 .s-final {
      opacity: 0;
      animation: new-in-full linear both;
      animation-timeline: --s10;
      animation-range: cover 59.5% cover 62.5%;
    }
  }

}
}
@keyframes scene-breathe-fit {
  from { scale: 1; }
  to { scale: 1.05; }
}
@keyframes door-warm {
  from { opacity: 0.35; }
  to { opacity: 1; }
}
@keyframes horizon-burn {
  from { opacity: 0.05; }
  to { opacity: 0.95; }
}
@keyframes old-out {
  from { opacity: 0.5; }
  to { opacity: 0.06; }
}
@keyframes new-in {
  from { opacity: 0.25; }
  to { opacity: 1; }
}
@keyframes s10-old-in { from { opacity: 0; } to { opacity: 0.85; } }
@keyframes s10-old-dim { from { opacity: 0.85; } to { opacity: 0.32; } }
@keyframes s10-new-in { from { opacity: 0.18; } to { opacity: 1; } }
@keyframes new-in-full { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Раскладки текстов на широком (канвас-позиции) ---------- */

@media (min-width: 1024px) {
  /* s04: блоки лево (1-2) / право (3) / лево (4-5), акцент справа */
  #s04 .prose > p { margin-right: auto; }
  #s04 .prose > p:nth-of-type(3) { margin-left: auto; margin-right: 0; }
  #s04 .s-accent { margin-left: auto; margin-right: 0; }

  /* s05: право/лево/право, финал слева */
  #s05 .prose > p:nth-of-type(1) { margin-left: auto; margin-right: 0; }
  #s05 .prose > p:nth-of-type(2) { margin-right: auto; }
  #s05 .prose > p:nth-of-type(3) { margin-left: auto; margin-right: 0; }

  /* s11b финальные блоки уже лесенкой через flex */
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js-letters .display--hero .ltr { opacity: 1; transform: none; filter: none; animation: none; }
}


/* ============================================================
   ТЕЛЕФОН / ТАЧ: лёгкая версия (подтверждено ревью Claude + Codex)
   - размытие карточек заменяем плотной заливкой: blur поверх закреплённой
     картины перерисовывается каждый кадр скролла
   - бесконечное покачивание шара выключаем
   ============================================================ */
@media (pointer: coarse), (max-width: 767px) {
  .glass, .phase, .b-step .glass, .balloon-cards .glass, .s09-intro .glass {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(14, 22, 38, 0.86);
  }
  .bs-drift { animation: none !important; }
}

/* ============================================================
   БЕЗ СКРОЛЛ-АНИМАЦИЙ (старые браузеры) и при «уменьшить движение»:
   воздух под хореографию убираем, финал показываем обычным текстом
   ============================================================ */
@supports not (animation-timeline: view()) {
  .air-a, .air-b, .path-air { height: 0; }
  .b-final { height: auto; }
  .balloon-final { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .air-a, .air-b, .path-air { height: 0; }
  .b-final { height: auto; }
  .balloon-final { display: none; }
}


/* ---------- Телефон: окна с картинами, шар целиком, путь с вехами, портрет ---------- */

.m-pic { display: none; }
@media (max-width: 767px) {
  /* картина не прячется под текстом: подложка гаснет, картина показывается окном в потоке */
  #s02 .sbg > img, #s04 .sbg > img, #s05 .sbg > img, #s05 .door-glow, #s06 .sbg > img { display: none; }
  .m-pic {
    display: block;
    position: relative;
    width: 100vw;
    margin: clamp(2.2rem, 6vh, 3.5rem) 0 clamp(2.2rem, 6vh, 3.5rem) calc(50% - 50vw);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  }
  .m-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
  .m-pic--sq { aspect-ratio: 1 / 1; }
  .m-pic--wide { aspect-ratio: 5 / 4; }

  /* s09: путь не закреплён, а показан окном: вся гора и четыре вехи, текст ниже */
  .path-pin { position: relative; height: auto; aspect-ratio: 780 / 887; }
  .path-pin img { object-position: 59% 50%; }
  .path-marks { width: 227.4%; left: -75%; right: auto; transform: none; bottom: 0; }
  .path-mark { display: flex; }
  .path-mark__halo { display: block; }
  .path-mark, .path-mark__halo { animation: none !important; opacity: 1 !important; }
  .s09-flow { margin-top: 0; padding-top: 2.5rem; }

  /* s08: сцена целиком - шар и ближние якоря, а не вырезка из центра */
  .balloon-scene {
    inset: auto;
    left: 50%;
    top: 50%;
    width: 200vw;
    height: auto;
    aspect-ratio: 1920 / 1086;
    transform: translate(-50%, -54%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  }
  /* воздухи только там, где хореография реально играет: со скролл-анимациями и без reduced-motion,
     иначе запасной вариант (высота 0 / auto) должен остаться в силе */
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .air-a { height: 70lvh; }
      /* после последней карточки - чистая сцена: канаты, взлёт, финал (проценты промерены под 390×844) */
      .air-b { height: 160lvh; }
      .b-final { height: 120lvh; }
    }
  }
  /* картина пути на телефоне не закреплена - «воздух» под неё не нужен */
  .path-air { height: 0; }
  /* старт - за самым поздним краем последней карточки (iPhone SE: 67.9%), конец - до ухода сцены (87%) */
  .bs-rope[data-r="4"] { animation-range: cover 68.5% cover 70%; }
  .bs-rope[data-r="1"] { animation-range: cover 70.6% cover 72.1%; }
  .bs-rope[data-r="3"] { animation-range: cover 72.7% cover 74.2%; }
  .bs-rope[data-r="2"] { animation-range: cover 74.8% cover 76.3%; }
  .bs-balloon { animation-range: cover 77.5% cover 83% !important; }
  .balloon-final { animation-range: cover 82.5% cover 87.5% !important; text-wrap: balance; }
}

/* портрет на узком экране: обычное фото в рамке вместо вырезанной фигуры */
@media (max-width: 900px) {
  .maxim-figure { width: min(100%, 26rem); margin: 1.5rem auto 0; }
  .maxim-figure img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; border-radius: var(--r-card); }
}

/* тач: без дыхания картины героя (тяжело телефону), огонёк легче и ведётся скриптом */
@media (pointer: coarse), (max-width: 767px) {
  .hero-scene img { animation: none !important; }
  .hero-window-glow { animation: none; }
  .flight-spark { box-shadow: 0 0 14px 4px rgba(232, 168, 87, 0.45); }
}
.flight-spark.is-js { animation: none !important; offset-path: none; top: 0; left: 0; will-change: transform; }