/* «Кодовый цех» · story.css — основа для сцен story.js. Цвета и шрифты задаёт сайт через переменные. */
:root { --story-bg: #f4f1ea; --story-fg: #15161a; --story-accent: #1d2bff; }
html { background: var(--story-bg); color: var(--story-fg); transition: background-color .4s; }
body { margin: 0; background: transparent; color: inherit; overflow-x: hidden; }
img, video { max-width: 100%; display: block; }

/* Заголовок по словам: слова обрезаются снизу, пока выезжают */
.st-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; }
.st-wi, .st-c { display: inline-block; will-change: transform; }

/* Линии SVG для data-draw */
[data-draw] { overflow: visible; }
[data-draw] path, [data-draw] line, [data-draw] polyline { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* Слои «глубины»: все дети в одной клетке, порядок — z-index (буквы за героем, героя перед буквами) */
.st-depth { display: grid; place-items: end center; position: relative; overflow: hidden; }
.st-depth > * { grid-area: 1 / 1; }

/* Последовательность кадров */
[data-sequence] { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
[data-sequence] [data-frame] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-sequence] [data-step] { position: absolute; z-index: 2; }

/* Зум медиа на весь экран */
[data-zoom] { height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; }
[data-zoom] > * { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

/* Бегущая строка */
[data-marquee] { overflow: hidden; white-space: nowrap; }
[data-marquee] > * { display: inline-flex; gap: 2.5rem; padding-right: 2.5rem; will-change: transform; }

/* Наезжающие панели */
[data-panel] { min-height: 100vh; min-height: 100svh; position: relative; overflow: hidden; }

/* Горизонтальная лента */
[data-hscroll] { overflow: hidden; }
[data-hscroll] > * { display: flex; width: max-content; will-change: transform; }
.st-hscroll-native { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.st-hscroll-native > * > * { scroll-snap-align: start; }

/* Рваный край бумаги между секциями: добавьте класс секции, которая «наезжает» */
.st-torn-top { -webkit-mask: var(--st-torn) top / 100% 48px no-repeat, linear-gradient(#000 0 0) 0 47px / 100% 100% no-repeat;
  mask: var(--st-torn) top / 100% 48px no-repeat, linear-gradient(#000 0 0) 0 47px / 100% 100% no-repeat; margin-top: -40px; position: relative; }
:root { --st-torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V22l40-8 35 10 50-14 38 9 44-12 30 13 55-15 42 11 36-9 48 14 40-12 52 10 34-13 47 12 41-8 39 11 50-15 33 9 46-10 44 13 38-11 52 9 35-12 49 14 40-10 37 8 45-13 42 12 38-9 41 10V48z'/%3E%3C/svg%3E"); }

/* Зерно плёнки поверх всей страницы (по желанию: <div class="st-grain"></div> в конце body) */
.st-grain { position: fixed; inset: -50%; pointer-events: none; z-index: 50; opacity: .07;
  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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: st-grain 1s steps(4) infinite; }
@keyframes st-grain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -2%); } }

/* Модальная карточка */
.st-modal { border: 0; padding: 0; max-width: min(960px, calc(100vw - 32px)); width: 100%; border-radius: 20px; background: #fff; color: #15161a; }
.st-modal::backdrop { background: rgb(10 10 14 / .6); backdrop-filter: blur(4px); }
.st-modal[open] { animation: st-pop .35s cubic-bezier(.2,.8,.2,1); }
@keyframes st-pop { from { opacity: 0; transform: translateY(24px) scale(.97); } }

/* Без анимаций: ничего не скрыто и не закреплено */
.story-static [data-sequence] { height: auto; }
.story-static [data-sequence] [data-frame], .story-static [data-sequence] [data-step] { position: relative; }
.story-static [data-hscroll] { overflow-x: auto; }
.story-static .st-grain { display: none; }
@media (prefers-reduced-motion: reduce) { html { transition: none; } .st-grain { animation: none; } }