/* Секции сцен лендинга. Только токены. Варианты (шаг 8, на согласовании) — атрибуты на .scenes:
   data-layout="spread | full | sticky", data-intensity="calm | tactile", data-motion="cascade | none".
   После выбора владельца лишние варианты отсюда убираются. */

.scenes { position: relative; z-index: var(--z-raised); }
.scene-section { padding: var(--space-24) var(--gutter); }
.scene-section__inner { max-width: var(--content-max); margin-inline: auto; display: grid; gap: var(--space-12); align-items: center; }
.scene-copy .num { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); color: var(--ink-muted-text); }
.scene-copy h2 { margin-top: var(--space-3); font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--display-md); line-height: var(--leading-snug); letter-spacing: var(--tracking-display); max-width: 18ch; }
.scene-copy > p { margin-top: var(--space-4); color: var(--ink-2); max-width: 44ch; }
.lines { margin-top: var(--space-6); list-style: none; display: grid; gap: var(--space-3); counter-reset: line; }
.lines li { counter-increment: line; display: grid; grid-template-columns: var(--space-8) 1fr; align-items: baseline; font-size: var(--text-md); color: var(--ink); }
.lines li::before { content: counter(line, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-muted-text); }

/* сцена: чёткий финал под видео, наплыв в него в конце */
.scene { position: relative; margin: 0; }
.scene__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-sunken); box-shadow: var(--ring); }
.scene__still, .scene__still img, .scene__video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.scene__still { z-index: 1; }
.scene__video { opacity: 0; }
.scenes-js .scene__video { opacity: 1; }
.scenes-js .scene__still { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.scenes-js .scene.is-done .scene__still { opacity: 1; }
.scene__btn {
  position: absolute; right: var(--space-3); bottom: var(--space-3); z-index: 2;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium);
  padding: var(--space-1) var(--space-3); min-height: var(--space-8); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); box-shadow: var(--ring);
  opacity: 0.88; transition: opacity var(--ui-dur-fast) var(--ease-out);
}
.scene__btn:hover, .scene__btn:focus-visible { opacity: 1; }
.scene__btn[hidden] { display: none; }
.scene-section[data-edge="action"] { --scene-edge: var(--edge-action); }
.scene-section[data-edge="done"] { --scene-edge: var(--edge-done); }
.scene-section[data-edge="note"] { --scene-edge: var(--edge-note); }

/* плотность: спокойно — плоская карточка; объём — цветной торец и контактная тень */
.scenes[data-intensity="tactile"] .scene__frame { box-shadow: var(--scene-edge, var(--edge-ink)), var(--shadow-contact), var(--ring); }

/* раскладка 1: разворот — текст и сцена рядом, стороны чередуются */
.scenes[data-layout="spread"] .scene-section__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.scenes[data-layout="spread"] .scene-section:nth-child(even) .scene-copy { order: 2; }
.scenes[data-layout="spread"] .scene-section:nth-child(even) .scene-section__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

/* раскладка 2: во всю ширину — заголовок и подзаголовок сверху, сцена на всю колонку, три строки в ряд */
.scenes[data-layout="full"] .scene-section__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-4) var(--space-12); align-items: end; }
.scenes[data-layout="full"] .scene-copy { display: contents; }
.scenes[data-layout="full"] .scene-copy .num { grid-area: 1 / 1; }
.scenes[data-layout="full"] .scene-copy h2 { grid-area: 2 / 1; }
.scenes[data-layout="full"] .scene-copy > p { grid-area: 2 / 2; }
.scenes[data-layout="full"] .scene { grid-area: 3 / 1 / 4 / 3; margin-top: var(--space-6); }
.scenes[data-layout="full"] .lines { grid-area: 4 / 1 / 5 / 3; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-4); }

/* раскладка 3: липкая сцена — ролик держится справа, слева три строки по очереди */
.scenes[data-layout="sticky"] .scene-section__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
/* по вертикали — по центру окна: высота кадра = ширина колонки 7/12 × 9/16 */
.scenes[data-layout="sticky"] .scene { position: sticky; top: calc(50vh - (min(100vw - 2 * var(--gutter), var(--content-max)) - var(--space-12)) * 7 / 12 * 9 / 32); }
.scenes[data-layout="sticky"] .scene-copy { padding-block: var(--space-16); }
.scenes[data-layout="sticky"] .lines { gap: var(--space-24); margin-top: var(--space-16); }
.scenes[data-layout="sticky"] .lines li { font-family: var(--font-display); font-size: var(--display-sm); line-height: var(--leading-snug); letter-spacing: var(--tracking-display); color: var(--ink-2); transition: color var(--dur-base) var(--ease-out); }
.scenes[data-layout="sticky"] .lines li.is-current { color: var(--ink); }

/* движение: текст собирается каскадом, как в роликах */
/* прячем только при работающем JS (класс .js ставит theme.js в <head>): без JS и при сбое текст виден */
.js .scenes[data-motion="cascade"] .scene-copy > *, .js .scenes[data-motion="cascade"] .lines li { opacity: 0; transform: translateY(var(--space-4)); }
.js .scenes[data-motion="cascade"] .is-in .scene-copy > *, .js .scenes[data-motion="cascade"] .is-in .lines li {
  opacity: 1; transform: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-settle);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}

@media (max-width: 54rem) {
  .scene-section { padding-block: var(--space-16); }
  .scenes .scene-section__inner, .scenes[data-layout] .scene-section__inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .scenes[data-layout] .scene-section:nth-child(even) .scene-copy { order: 0; }
  .scenes[data-layout="full"] .scene-copy { display: block; }
  .scenes[data-layout="full"] .scene, .scenes[data-layout="full"] .lines { grid-area: auto; }
  .scenes[data-layout="full"] .lines { grid-template-columns: 1fr; }
  .scenes[data-layout="sticky"] .scene { position: relative; top: auto; }
  .scenes[data-layout="sticky"] .lines { gap: var(--space-3); margin-top: var(--space-6); }
  .scenes[data-layout="sticky"] .lines li { font-family: var(--font-ui); font-size: var(--text-md); color: var(--ink); }
  .scenes[data-layout="sticky"] .scene-copy { padding-block: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .scenes[data-motion="cascade"] .scene-copy > *, .js .scenes[data-motion="cascade"] .lines li { opacity: 1; transform: none; }
}