/* ─────────────────────────────────────────────────────────────────────────────
   Ilya Gamburg: живой слой (ig-motion) v1.0
   Подключать ПОСЛЕ colors_and_type.css, вместе с motion/ig-motion.js.
   Всё управляется data-атрибутами; без JS контент виден целиком и статичен.
   prefers-reduced-motion: все сдвиги выключаются, остаются только смены цвета.
   ───────────────────────────────────────────────────────────────────────────── */

/* Noto Sans как вариативный шрифт 100–900: нужен для kinetic-заголовков. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  /* ── Кривые ─────────────────────────────────────────────────────────────── */
  --ig-ease:        cubic-bezier(.16, 1, .3, 1);   /* expo-out: всё, что въезжает при скролле */
  --ig-ease-io:     cubic-bezier(.76, 0, .24, 1);  /* шторки, смена темы, меню */
  --ig-ease-soft:   var(--ease-soft, cubic-bezier(.34, 1.45, .5, 1));   /* из базовой системы: UI-микро */
  --ig-ease-press:  var(--ease-press, cubic-bezier(.34, 1.7, .64, 1));

  /* ── Длительности ───────────────────────────────────────────────────────── */
  --ig-t-micro:   260ms;   /* hover, нажатия */
  --ig-t-reveal:  1200ms;  /* въезд блоков и слов */
  --ig-t-theme:   900ms;   /* перекраска страницы */
  --ig-t-curtain: 600ms;   /* шторка в одну сторону */

  /* ── Ритм ──────────────────────────────────────────────────────────────── */
  --ig-stagger-word: 34ms;
  --ig-stagger-item: 90ms;
  --ig-rise: 30px;         /* насколько поднимается блок при въезде */

  /* ── Стопка карточек ───────────────────────────────────────────────────── */
  --ig-stack-offset: 16px; /* шаг, на который каждая следующая карточка ниже */
  --ig-stack-top: 72px;    /* отступ сверху у прилипшей карточки */

  /* Высота «экрана» для pin-секций. JS ставит реальное значение. */
  --ig-vh: 100svh;

  /* Тема по умолчанию = cream */
  --ig-bg: var(--cream-200, #F8F1E0);
  --ig-fg: var(--ink-900, #121212);
  --ig-muted: var(--warm-700, #6E6A60);
  --ig-line: rgba(18, 18, 18, .12);
  --ig-card: var(--cream-100, #FBF5E6);
  --ig-accent: var(--yellow-500, #F5C84A);
  --ig-marker: var(--yellow-300, #F7DD7C);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Темы секций. Сама секция помечается data-section-theme="butter";
   JS переносит тему на body (или на скроллер) и страница плавно перекрашивается.
   Все темы светлые. ink оставлен для одной короткой «паузы» на страницу.
   ───────────────────────────────────────────────────────────────────────────── */
[data-ig-theme="cream"] {
  --ig-bg: #F8F1E0; --ig-fg: #121212; --ig-muted: #6E6A60;
  --ig-line: rgba(18,18,18,.12); --ig-card: #FBF5E6; --ig-accent: #F5C84A; --ig-marker: #F7DD7C;
}
[data-ig-theme="paper"] {
  --ig-bg: #FDFAF1; --ig-fg: #121212; --ig-muted: #6E6A60;
  --ig-line: rgba(18,18,18,.10); --ig-card: #F8F1E0; --ig-accent: #F5C84A; --ig-marker: #F9E599;
}
[data-ig-theme="butter"] {
  --ig-bg: #FBEFC1; --ig-fg: #121212; --ig-muted: #5C584E;
  --ig-line: rgba(18,18,18,.14); --ig-card: #FDFAF1; --ig-accent: #C99A14; --ig-marker: #F6D260;
}
[data-ig-theme="sun"] {
  --ig-bg: #F5C84A; --ig-fg: #121212; --ig-muted: #3A3A37;
  --ig-line: rgba(18,18,18,.18); --ig-card: #FBEFC1; --ig-accent: #121212; --ig-marker: #FDFAF1;
}
[data-ig-theme="ink"] {
  --ig-bg: #1A1A1A; --ig-fg: #FDFAF1; --ig-muted: #C9C2B0;
  --ig-line: rgba(253,250,241,.14); --ig-card: #2A2A2A; --ig-accent: #F5C84A; --ig-marker: rgba(245,200,74,.45);
}

body[data-ig-theme],
[data-ig-scroller][data-ig-theme] {
  background-color: var(--ig-bg);
  color: var(--ig-fg);
  transition: background-color var(--ig-t-theme) var(--ig-ease-io),
              color var(--ig-t-theme) var(--ig-ease-io);
}
.ig-muted { color: var(--ig-muted); transition: color var(--ig-t-theme) var(--ig-ease-io); }
.ig-line  { border-color: var(--ig-line); transition: border-color var(--ig-t-theme) var(--ig-ease-io); }
.ig-card  { background: var(--ig-card); transition: background-color var(--ig-t-theme) var(--ig-ease-io); }

/* Внутренний скроллер (для превью и вставок): ведёт себя как окно. */
[data-ig-scroller] {
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* ─────────────────────────────────────────────────────────────────────────────
   1. Reveal: въезд при появлении в кадре
   data-reveal="up | words | chars | clip | left | stagger | zoom"
   --d: задержка (style="--d:200ms")
   ───────────────────────────────────────────────────────────────────────────── */
.ig-w  { display: inline-block; overflow: hidden; vertical-align: top;
         padding: 0 .08em .14em 0; margin: 0 -.08em -.14em 0; }
.ig-wi, .ig-ch { display: inline-block; }
.ig-cw { display: inline-block; white-space: nowrap; }
[dir="rtl"] .ig-w { padding: 0 0 .14em .08em; margin: 0 0 -.14em -.08em; }

.ig-js [data-reveal="up"] {
  opacity: 0; transform: translate3d(0, var(--ig-rise), 0);
  transition: opacity var(--ig-t-reveal) var(--ig-ease), transform calc(var(--ig-t-reveal) + 100ms) var(--ig-ease);
  transition-delay: var(--d, 0ms);
}
.ig-js [data-reveal="left"] {
  opacity: 0; transform: translate3d(-14px, 0, 0);
  transition: opacity .9s var(--ig-ease), transform 1s var(--ig-ease);
  transition-delay: var(--d, 0ms);
}
[dir="rtl"].ig-js [data-reveal="left"], .ig-js [dir="rtl"] [data-reveal="left"] { transform: translate3d(14px, 0, 0); }

.ig-js [data-reveal="words"] .ig-wi {
  transform: translate3d(0, 115%, 0) rotate(5deg);
  transform-origin: 0 0;
  transition: transform var(--ig-t-reveal) var(--ig-ease);
  transition-delay: calc(var(--i, 0) * var(--ig-stagger-word) + var(--d, 0ms));
}
.ig-js [dir="rtl"] [data-reveal="words"] .ig-wi,
[dir="rtl"].ig-js [data-reveal="words"] .ig-wi { transform: translate3d(0, 115%, 0) rotate(-5deg); transform-origin: 100% 0; }

.ig-js [data-reveal="chars"] .ig-ch {
  transform: translate3d(0, 105%, 0);
  transition: transform calc(var(--ig-t-reveal) + 300ms) var(--ig-ease);
  transition-delay: calc(var(--i, 0) * 28ms + var(--d, 0ms));
}
.ig-js [data-reveal="chars"] { overflow: hidden; padding-bottom: .08em; }

.ig-js [data-reveal="clip"] {
  clip-path: inset(100% 0 0 0 round var(--radius-lg, 20px));
  transition: clip-path 1.6s var(--ig-ease-io);
  transition-delay: var(--d, 0ms);
}
.ig-js [data-reveal="clip"] > img,
.ig-js [data-reveal="clip"] > picture { transform: scale(1.18); transition: transform 2s var(--ig-ease); }

.ig-js [data-reveal="zoom"] {
  opacity: 0; transform: scale(.94);
  transition: opacity 1s var(--ig-ease), transform 1.2s var(--ig-ease-soft);
  transition-delay: var(--d, 0ms);
}

.ig-js [data-reveal="stagger"] > * {
  opacity: 0; transform: translate3d(0, 24px, 0);
  transition: opacity 1s var(--ig-ease), transform 1.2s var(--ig-ease);
  transition-delay: calc(var(--k, 0) * var(--ig-stagger-item) + var(--d, 0ms));
}

.ig-js [data-reveal].is-in,
.ig-js [data-reveal].is-in .ig-wi,
.ig-js [data-reveal].is-in .ig-ch,
.ig-js [data-reveal="stagger"].is-in > *,
.ig-js [data-reveal="clip"].is-in > img,
.ig-js [data-reveal="clip"].is-in > picture { opacity: 1; transform: none; }
.ig-js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0 round var(--radius-lg, 20px)); }

/* Маркер-выделитель: <mark> или <em class="ig-mark"> прорисовывается после въезда */
.ig-mark, [data-reveal] mark {
  color: inherit; font-style: inherit;
  background: linear-gradient(var(--ig-marker), var(--ig-marker)) 0 88% / 0% .38em no-repeat;
  transition: background-size 1.1s var(--ig-ease) calc(var(--d, 0ms) + 500ms), background-color var(--ig-t-theme);
  padding: 0 .06em;
}
[dir="rtl"] .ig-mark, [dir="rtl"] [data-reveal] mark { background-position: 100% 88%; }
.is-in .ig-mark, .is-in mark, .ig-mark.is-in, html:not(.ig-js) .ig-mark, html:not(.ig-js) [data-reveal] mark { background-size: 100% .38em; }

/* ─────────────────────────────────────────────────────────────────────────────
   2. Highlight: слова абзаца загораются по мере скролла (data-highlight)
   ───────────────────────────────────────────────────────────────────────────── */
.ig-js [data-highlight] .ig-wi { opacity: .16; transition: opacity .12s linear; }

/* ─────────────────────────────────────────────────────────────────────────────
   3. Stack: карточки прилипают и уходят в глубину (data-stack)
   <div data-stack> <article class="ig-stack-card"> <div class="ig-stack-inner">…
   ───────────────────────────────────────────────────────────────────────────── */
[data-stack] { position: relative; }
.ig-stack-card {
  position: sticky;
  top: calc(var(--ig-stack-top) + var(--i, 0) * var(--ig-stack-offset));
  height: min(calc(var(--ig-vh) * .74), 640px);
  margin-bottom: calc(var(--ig-vh) * .08);
}
.ig-stack-card:last-child { margin-bottom: 0; }
.ig-stack-inner {
  position: relative; height: 100%;
  overflow: hidden;
  border-radius: var(--radius-xl, 28px);
  box-shadow: var(--shadow-card);
  transform-origin: 50% 0;
  will-change: transform;
}
.ig-stack-shade {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: var(--ig-bg); opacity: 0;
}
[data-stack-word] {
  position: absolute; pointer-events: none; white-space: nowrap; will-change: transform;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. Горизонтальный скролл при вертикальном (data-hscroll)
   <section data-hscroll> <div class="ig-hscroll-pin"> … <div data-hscroll-track> …
   Ниже 900px (или data-hscroll-min) превращается в обычный вертикальный список.
   ───────────────────────────────────────────────────────────────────────────── */
[data-hscroll] { position: relative; }
.ig-hscroll-pin {
  position: sticky; top: 0;
  height: var(--ig-vh);
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  gap: 4%;
}
[data-hscroll-track] { display: flex; will-change: transform; width: max-content; }
[data-hscroll-bar] { position: relative; height: 2px; overflow: hidden; background: var(--ig-line); border-radius: 2px; }
[data-hscroll-bar] > i { position: absolute; inset: 0; background: var(--ig-fg); transform: scaleX(0); transform-origin: 0 50%; }
[dir="rtl"] [data-hscroll-bar] > i { transform-origin: 100% 50%; }
[data-hscroll-step] { transition: opacity .6s var(--ig-ease); }
[data-hscroll].is-enabled [data-hscroll-step] { opacity: .45; }
[data-hscroll].is-enabled [data-hscroll-step].is-active { opacity: 1; }

[data-hscroll].is-vertical .ig-hscroll-pin { position: relative; height: auto; overflow: visible; }
[data-hscroll].is-vertical [data-hscroll-track] { flex-direction: column; width: auto; transform: none !important; }
[data-hscroll].is-vertical [data-hscroll-bar] { display: none; }

/* ─────────────────────────────────────────────────────────────────────────────
   5. Marquee: бегущая строка, ускоряется и наклоняется от скорости скролла
   ───────────────────────────────────────────────────────────────────────────── */
[data-marquee] { overflow: hidden; white-space: nowrap; }
[data-marquee] > * { display: inline-flex; align-items: center; will-change: transform; }

/* ─────────────────────────────────────────────────────────────────────────────
   6. Параллакс: data-zoom="1.18" (картинка мягко «отъезжает»), data-parallax="0.15"
   ───────────────────────────────────────────────────────────────────────────── */
[data-zoom] { overflow: hidden; }
[data-zoom] > img, [data-zoom] > picture, [data-zoom] > video {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform: scale(var(--ig-s, 1)); will-change: transform;
}
[data-parallax] { will-change: transform; }

/* ─────────────────────────────────────────────────────────────────────────────
   7. Карточки под курсором: data-tilt (наклон + солнечное пятно)
   ───────────────────────────────────────────────────────────────────────────── */
[data-tilt] { position: relative; perspective: 900px; isolation: isolate; }
[data-tilt] > .ig-tilt-body { transition: transform .7s var(--ig-ease); transform-style: preserve-3d; height: 100%; }
[data-tilt]::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(245,200,74,.34), transparent 62%);
  transition: opacity .5s var(--ig-ease);
}
[data-tilt]:hover::after { opacity: 1; }

/* 8. Магнитные кнопки */
[data-magnetic] { transition: transform .5s var(--ig-ease); will-change: transform; }

/* 9. Волна букв при наведении (data-wave) */
@keyframes ig-wave { 0% { transform: none; } 38% { transform: translate3d(0, -16%, 0); } 100% { transform: none; } }
[data-wave]:hover .ig-ch, a:hover > [data-wave] .ig-ch {
  animation: ig-wave 1s var(--ig-ease) both;
  animation-delay: calc(var(--i, 0) * 32ms);
}

/* 10. Стрелка в ссылке уезжает вперёд */
.ig-arrow { display: inline-block; transition: transform .45s var(--ig-ease); }
a:hover .ig-arrow, button:hover .ig-arrow { transform: translate3d(4px, -4px, 0); }
[dir="rtl"] a:hover .ig-arrow { transform: translate3d(-4px, -4px, 0); }

/* 11. Подчёркивание, которое «нарисовывается» */
.ig-underline {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat;
  transition: background-size .5s var(--ig-ease);
  border-bottom: 0 !important;
}
.ig-underline:hover { background-size: 100% 1px; }

/* ─────────────────────────────────────────────────────────────────────────────
   12. Свой курсор: точка + кольцо + подпись (data-cursor="Читать")
   Включается атрибутом data-ig-cursor на <html> или на скроллере. Только мышь.
   ───────────────────────────────────────────────────────────────────────────── */
.ig-cursor { position: fixed; inset: 0; z-index: 9999; pointer-events: none; display: none; }
.ig-has-cursor .ig-cursor { display: block; }
.ig-has-cursor, .ig-has-cursor a, .ig-has-cursor button { cursor: none; }
.ig-cursor.is-hidden { opacity: 0; }
.ig-cursor__dot, .ig-cursor__ring { position: absolute; left: 0; top: 0; will-change: transform; }
.ig-cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--ink-900, #121212); transition: opacity .3s; }
.ig-cursor__ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 1px solid rgba(18,18,18,.45);
  display: grid; place-items: center;
  transition: width .5s var(--ig-ease), height .5s var(--ig-ease), margin .5s var(--ig-ease),
              background-color .35s, border-color .35s, scale .3s var(--ig-ease);
}
.ig-cursor__label { font: 600 11px/1 var(--font-sans); color: var(--cream-50, #FDFAF1); opacity: 0; transition: opacity .3s; white-space: nowrap; }
.ig-cursor.is-link .ig-cursor__ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: var(--yellow-500, #F5C84A); border-color: var(--yellow-500, #F5C84A); mix-blend-mode: multiply; }
.ig-cursor.is-link .ig-cursor__dot, .ig-cursor.has-label .ig-cursor__dot { opacity: 0; }
.ig-cursor.has-label .ig-cursor__ring { width: 88px; height: 88px; margin: -44px 0 0 -44px; background: var(--ink-900, #121212); border-color: var(--ink-900, #121212); }
.ig-cursor.has-label .ig-cursor__label { opacity: 1; }
.ig-cursor.is-card .ig-cursor__ring { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
.ig-cursor.is-down .ig-cursor__ring { scale: .82; }

/* ─────────────────────────────────────────────────────────────────────────────
   13. Прогресс чтения (data-ig-progress), пульс, мигающее двоеточие
   ───────────────────────────────────────────────────────────────────────────── */
[data-ig-progress] { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 900; pointer-events: none; }
[data-ig-scroller] [data-ig-progress] { position: sticky; margin-bottom: -3px; }
[data-ig-progress] > i { display: block; height: 100%; background: var(--ig-fg); transform: scaleX(0); transform-origin: 0 50%; }
[dir="rtl"] [data-ig-progress] > i { transform-origin: 100% 50%; }

@keyframes ig-pulse { 0% { box-shadow: 0 0 0 0 rgba(245,200,74,.7); } 70%, 100% { box-shadow: 0 0 0 10px rgba(245,200,74,0); } }
.ig-pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow-500, #F5C84A); animation: ig-pulse 2.2s infinite; }
@keyframes ig-blink { to { visibility: hidden; } }
.ig-blink { animation: ig-blink 1s steps(2, start) infinite; }

/* 14. Подсказка «листайте»: линия, по которой бежит капля */
@keyframes ig-cue { from { top: -40%; } to { top: 100%; } }
.ig-cue { position: relative; width: 1px; height: 54px; overflow: hidden; background: var(--ig-line); }
.ig-cue::after { content: ""; position: absolute; left: 0; width: 1px; height: 40%; background: var(--ig-fg); animation: ig-cue 2s var(--ig-ease-io) infinite; }

/* ─────────────────────────────────────────────────────────────────────────────
   15. Carousel цитат: слова уходят вверх, новые поднимаются снизу
   ───────────────────────────────────────────────────────────────────────────── */
[data-carousel] [data-slides] { display: grid; touch-action: pan-y; }
[data-carousel] [data-slide] { grid-area: 1 / 1; visibility: hidden; }
[data-carousel] [data-slide].is-active, [data-carousel] [data-slide].is-leaving { visibility: visible; }
.ig-js [data-slide] .ig-wi { transform: translate3d(0, 115%, 0); transition: transform .95s var(--ig-ease); transition-delay: calc(var(--i, 0) * 13ms); }
.ig-js [data-slide].is-active .ig-wi { transform: none; }
.ig-js [data-slide].is-leaving .ig-wi { transform: translate3d(0, -115%, 0); transition-duration: .55s; transition-delay: calc(var(--i, 0) * 5ms); }
.ig-js [data-slide] [data-slide-meta] { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .6s, transform .9s var(--ig-ease); }
.ig-js [data-slide].is-active [data-slide-meta] { opacity: 1; transform: none; transition-delay: .4s; }
[data-carousel-bars] { display: flex; gap: 6px; }
[data-carousel-bars] > i { flex: 1; height: 2px; background: var(--ig-line); overflow: hidden; border-radius: 2px; }
[data-carousel-bars] > i > b { display: block; height: 100%; background: var(--ig-fg); transform: scaleX(0); transform-origin: 0 50%; }

/* ─────────────────────────────────────────────────────────────────────────────
   16. Шторка (смена языка/страницы) и лоадер
   ───────────────────────────────────────────────────────────────────────────── */
.ig-curtain { position: fixed; inset: 0; z-index: 9000; pointer-events: none; display: flex; }
[data-ig-scroller] > .ig-curtain { position: sticky; top: 0; height: var(--ig-vh); margin-bottom: calc(var(--ig-vh) * -1); }
.ig-curtain > i { flex: 1; background: var(--yellow-500, #F5C84A); transform: scaleY(0); transform-origin: 50% 100%; }
.ig-curtain > i:nth-child(2) { background: var(--yellow-400, #F6D260); }
.ig-curtain > i:nth-child(4) { background: var(--yellow-400, #F6D260); }
.ig-curtain > b {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 700 clamp(32px, 6vw, 88px)/1 var(--font-serif); color: var(--ink-900, #121212);
  opacity: 0; transform: translate3d(0, 30px, 0);
}
.ig-curtain.is-in > i { transform: scaleY(1); transition: transform .55s var(--ig-ease-io); }
.ig-curtain.is-in > i:nth-child(n) { transition-delay: calc(var(--k, 0) * 50ms); }
.ig-curtain.is-in > b { opacity: 1; transform: none; transition: opacity .3s .2s, transform .6s .15s var(--ig-ease); }
.ig-curtain.is-out > i { transform: scaleY(0); transform-origin: 50% 0; transition: transform .65s var(--ig-ease-io); transition-delay: calc(var(--k, 0) * 50ms); }
.ig-curtain.is-out > b { opacity: 0; transform: translate3d(0, -30px, 0); transition: opacity .25s, transform .5s var(--ig-ease); }

.ig-loader { position: fixed; inset: 0; z-index: 9500; display: flex; }
.ig-loader > i { flex: 1; background: var(--cream-200, #F8F1E0); transform-origin: 50% 0; transition: transform 1.15s var(--ig-ease-io); transition-delay: calc(var(--k, 0) * 60ms); }
.ig-loader__count {
  position: absolute; right: 5vw; bottom: 6vh; z-index: 2;
  font: 300 clamp(72px, 14vw, 200px)/.8 var(--font-sans); letter-spacing: -.05em; font-variant-numeric: tabular-nums;
  color: var(--ink-900, #121212); transition: opacity .45s, transform .9s var(--ig-ease);
}
.ig-loader__bar { position: absolute; left: 5vw; right: 5vw; bottom: 4vh; height: 2px; background: rgba(18,18,18,.12); z-index: 2; transition: opacity .45s; }
.ig-loader__bar > i { display: block; height: 100%; background: var(--yellow-600, #E8B92E); transform: scaleX(0); transform-origin: 0 50%; }
.ig-loader.is-done > i { transform: scaleY(0); }
.ig-loader.is-done .ig-loader__count { opacity: 0; transform: translate3d(0, -40px, 0); }
.ig-loader.is-done .ig-loader__bar { opacity: 0; }
.ig-loader.is-gone { display: none; }

/* ─────────────────────────────────────────────────────────────────────────────
   17. Полноэкранное меню: раскрывается сверху вниз, пункты поднимаются по очереди
   ───────────────────────────────────────────────────────────────────────────── */
.ig-menu {
  position: fixed; inset: 0; z-index: 800;
  background: var(--yellow-500, #F5C84A); color: var(--ink-900, #121212);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .85s var(--ig-ease-io), visibility 0s .85s;
}
[data-ig-scroller] .ig-menu { position: absolute; }
.ig-menu-open .ig-menu { clip-path: inset(0); visibility: visible; transition: clip-path .85s var(--ig-ease-io); }
.ig-menu [data-menu-link] { display: block; overflow: hidden; }
.ig-menu [data-menu-link] > span { display: inline-block; transform: translate3d(0, 105%, 0); transition: transform .9s var(--ig-ease); }
.ig-menu-open .ig-menu [data-menu-link] > span { transform: none; transition-delay: calc(.18s + var(--k, 0) * 60ms); }
.ig-burger i { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform .5s var(--ig-ease); }
.ig-burger i + i { margin-top: 5px; }
.ig-menu-open .ig-burger i:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.ig-menu-open .ig-burger i:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

/* 18. Тост */
.ig-toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 9100;
  padding: 12px 18px; border-radius: var(--radius-pill, 999px);
  background: var(--ink-900, #121212); color: var(--cream-50, #FDFAF1);
  font: 500 14px/1 var(--font-sans);
  opacity: 0; transform: translate3d(-50%, 16px, 0); pointer-events: none;
  transition: opacity .4s, transform .6s var(--ig-ease-soft);
}
[data-ig-scroller] .ig-toast { position: sticky; display: table; margin: -40px auto 0; transform: translate3d(0, 16px, 0); }
.ig-toast.is-on { opacity: 1; transform: translate3d(-50%, 0, 0); }
[data-ig-scroller] .ig-toast.is-on { transform: none; }

/* 19. Kinetic: начертание букв следует за курсором (data-kinetic) */
[data-kinetic] .ig-ch { font-variation-settings: normal; will-change: font-weight; }

/* 20. Chaos → order: canvas */
canvas[data-chaos] { display: block; width: 100%; height: 100%; }

/* ─────────────────────────────────────────────────────────────────────────────
   Доступность: никакого движения при reduced-motion
   ───────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ig-js [data-reveal], .ig-js [data-reveal] .ig-wi, .ig-js [data-reveal] .ig-ch,
  .ig-js [data-reveal="stagger"] > *, .ig-js [data-slide] .ig-wi {
    opacity: 1 !important; transform: none !important; transition: none !important; clip-path: none !important;
  }
  .ig-js [data-highlight] .ig-wi { opacity: 1 !important; }
  .ig-pulse, .ig-blink, .ig-cue::after, [data-wave] .ig-ch { animation: none !important; }
  .ig-mark, [data-reveal] mark { background-size: 100% .38em !important; transition: none !important; }
}