/* Направление «Сцена» — кино.
   Одна деталь движения: при смене раздела окно приложения остаётся на месте и перетекает в следующий экран
   (View Transitions: view-transition-name на .app), текст уходит и приходит по ходу показа (html[data-vt-dir]).
   Где View Transitions нет (Firefox) или включено «уменьшить движение» — спокойное появление (класс .sc-intro из fx/scena.js).
   Остальное — крупный переменный Playfair, виньетка, широкий кадр обложек, финальные титры.
   Цвета — только токены; свет и тень кадра — свои токены для Пергамента и Ночи. */

[data-dir="scena"] {
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display-w: 700;
  --display-track: -0.022em;
  --display-lh: 1;
  --display-scale: 1.04;
  --hero-scale: 1.02;
  --eyebrow-track: .24em;
  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 14px;
  --sc-ease: cubic-bezier(.22, .7, .16, 1);
}
[data-mode="light"][data-dir="scena"] {
  --sc-vignette: rgba(49, 43, 36, .11);
  --sc-light: color-mix(in srgb, var(--surface) 85%, transparent);
  --sc-frame: 0 2px 4px rgba(49, 43, 36, .05), 0 60px 110px -60px rgba(49, 43, 36, .55);
}
[data-mode="dark"][data-dir="scena"] {
  --sc-vignette: rgba(0, 0, 0, .55);
  --sc-light: color-mix(in srgb, var(--accent) 16%, transparent);
  --sc-frame: 0 0 0 1px rgba(255, 255, 255, .04), 0 70px 120px -50px rgba(0, 0, 0, .95);
}

[data-dir="scena"] .hero-title em,
[data-dir="scena"] .sec-title em,
[data-dir="scena"] .cover-title em,
[data-dir="scena"] .slide-title em,
[data-dir="scena"] .final-title em,
[data-dir="scena"] .pain-after em { font-style: italic; font-weight: 500; }

/* ── Свет и виньетка кадра ──────────────────────────────────────── */
[data-dir="scena"] .hero,
[data-dir="scena"] .slide-cover,
[data-dir="scena"] .slide-final {
  background:
    radial-gradient(ellipse 60% 55% at 30% 38%, var(--sc-light), transparent 70%),
    radial-gradient(ellipse 85% 80% at 50% 45%, transparent 55%, var(--sc-vignette) 100%);
}

/* ── Смена слайда: своё движение вместо общего въезда ───────────── */
[data-dir="scena"] .slide,
[data-dir="scena"] .slide[data-step="prev"] { opacity: 1; transform: none; transition: none; }
[data-dir="scena"] .slide-sec .app { view-transition-name: sc-app; }
[data-dir="scena"] .slide-sec .slide-text { view-transition-name: sc-text; }

/* остальная страница: новый кадр проявляется поверх старого (смену темы кругом — .vt-mode — не трогаем) */
[data-dir="scena"]:not(.vt-mode)::view-transition-old(root) { animation: none; }
[data-dir="scena"]:not(.vt-mode)::view-transition-new(root) { animation: sc-fade .45s ease both; }
[data-dir="scena"]::view-transition-group(sc-app) { animation-duration: .7s; animation-timing-function: var(--sc-ease); }
[data-dir="scena"]::view-transition-old(sc-app),
[data-dir="scena"]::view-transition-new(sc-app) { animation-duration: .55s; animation-timing-function: ease; height: 100%; object-fit: cover; object-position: top; }
[data-dir="scena"]::view-transition-group(sc-text) { animation: none; }
[data-dir="scena"][data-vt-dir="next"]::view-transition-old(sc-text) { animation: sc-out-l .24s ease-in both; }
[data-dir="scena"][data-vt-dir="next"]::view-transition-new(sc-text) { animation: sc-in-r .6s .22s var(--sc-ease) both; }
[data-dir="scena"][data-vt-dir="prev"]::view-transition-old(sc-text) { animation: sc-out-r .24s ease-in both; }
[data-dir="scena"][data-vt-dir="prev"]::view-transition-new(sc-text) { animation: sc-in-l .6s .22s var(--sc-ease) both; }
@keyframes sc-out-l { to { opacity: 0; transform: translateX(-36px); filter: blur(2px); } }
@keyframes sc-out-r { to { opacity: 0; transform: translateX(36px); filter: blur(2px); } }
@keyframes sc-in-r { from { opacity: 0; transform: translateX(42px); } }
@keyframes sc-in-l { from { opacity: 0; transform: translateX(-42px); } }

/* первое появление и браузеры без View Transitions: текст поднимается, кадр проявляется */
[data-dir="scena"] .sc-intro .slide-text,
[data-dir="scena"] .sc-intro .cover-text,
[data-dir="scena"] .sc-intro.slide-final .wrap > * { animation: sc-rise .8s var(--sc-ease) both; }
[data-dir="scena"] .sc-intro .slide-device,
[data-dir="scena"] .sc-intro .plates { animation: sc-fade 1s .12s ease both; }
@keyframes sc-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes sc-fade { from { opacity: 0; } }

/* ── Навигация показа ───────────────────────────────────────────── */
[data-dir="scena"] .case-nav { background: color-mix(in srgb, var(--bg) 90%, transparent); }
[data-dir="scena"] .cn-item { border-radius: 999px; font-size: 13.5px; }
[data-dir="scena"] .cn-item.on { box-shadow: none; background: var(--text); color: var(--bg); border-color: var(--text); }
[data-dir="scena"] .cn-item.on .cn-n { color: color-mix(in srgb, var(--bg) 70%, var(--accent)); }
[data-dir="scena"] .case-prog { gap: 0; }
[data-dir="scena"] .case-prog a { height: 2px; border-radius: 0; }
[data-dir="scena"] .case-prog a.on { background: var(--text); }

/* ── Раздел ─────────────────────────────────────────────────────── */
[data-dir="scena"] .slide-sec { padding: 34px 0 44px; }
[data-dir="scena"] .slide-title { font-size: clamp(32px, 3.3vw, 50px); letter-spacing: -.025em; }
[data-dir="scena"] .slide-lead { font-size: 16px; }
[data-dir="scena"] .app { box-shadow: var(--sc-frame); border-color: color-mix(in srgb, var(--line) 70%, transparent); }
[data-dir="scena"] .app-bar { background: var(--surface); }
/* меню окна: шире, чтобы слова не рвались посередине (Montserrat шире, рядом счётчики) */
[data-dir="scena"] .app-side { width: 198px; }
[data-dir="scena"] .app-nav-i span { overflow-wrap: break-word; }
[data-dir="scena"] .try { border-style: solid; border-color: transparent; background: var(--surface-2); border-radius: 999px; padding: 9px 14px; }

/* ── Обложка решения: широкий кадр, крупный заголовок, плашки — строкой титров ── */
[data-dir="scena"] .slide-cover { padding: 56px 0 60px; }
[data-dir="scena"] .cover-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; min-height: 0; }
[data-dir="scena"] .cover-text {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: 64px; align-items: end;
  grid-template-areas: "eye eye" "title title" "lead actions" "lead note" "toc toc";
}
[data-dir="scena"] .cover-text .eyebrow { grid-area: eye; }
[data-dir="scena"] .cover-title { grid-area: title; font-size: clamp(54px, 8vw, 128px); letter-spacing: -.035em; margin-bottom: 28px; max-width: 15ch; }
[data-dir="scena"] .cover-lead { grid-area: lead; margin-bottom: 0; align-self: start; }
[data-dir="scena"] .cover-actions { grid-area: actions; justify-content: flex-end; margin-bottom: 0; }
[data-dir="scena"] .cover-note { grid-area: note; justify-self: end; text-align: right; margin: 10px 0 0; }
[data-dir="scena"] .cover-toc { grid-area: toc; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); }
[data-dir="scena"] .cover-toc .chip { background: transparent; border-color: transparent; padding: 0 10px; }
[data-dir="scena"] .cover-toc .chip:hover { border-color: var(--line); }
[data-dir="scena"] .plates { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; align-items: start; }
[data-dir="scena"] .plate:nth-child(2) { grid-row: auto; }
[data-dir="scena"] .plate { border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 70%, transparent); }
[data-dir="scena"] .plate-v { font-size: 34px; }
/* в узкой плашке строка списка переносится, а не обрезается */
[data-dir="scena"] .plate-list li { flex-wrap: wrap; column-gap: 8px; row-gap: 0; }
[data-dir="scena"] .plate-list b { white-space: normal; }

/* ── Итог — финальные титры ─────────────────────────────────────── */
[data-dir="scena"] .slide-final { padding: 64px 0 60px; }
[data-dir="scena"] .slide-final .wrap { text-align: center; max-width: 1060px; }
[data-dir="scena"] .final-title { font-size: clamp(42px, 5.6vw, 84px); letter-spacing: -.03em; margin-left: auto; margin-right: auto; }
[data-dir="scena"] .final-lead { margin-left: auto; margin-right: auto; }
[data-dir="scena"] .outcome { text-align: left; background: transparent; box-shadow: none; border-color: var(--line); }
[data-dir="scena"] .final-cta { justify-content: center; }
[data-dir="scena"] .final-next { text-align: left; }

/* ── Главная ────────────────────────────────────────────────────── */
[data-dir="scena"] .hero { padding: 64px 0 96px; }
[data-dir="scena"] .hero-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, .75fr); gap: 56px; }
[data-dir="scena"] .hero-title { letter-spacing: -.035em; text-wrap: balance; }
[data-dir="scena"] .hero-plates .plate { background: color-mix(in srgb, var(--surface) 72%, transparent); }
[data-dir="scena"] .hero-pulse { opacity: .4; }
[data-dir="scena"] .sec-title { letter-spacing: -.028em; }
[data-dir="scena"] .pain-after { font-size: clamp(34px, 4.4vw, 64px); }
[data-dir="scena"] .card { box-shadow: none; }
[data-dir="scena"] .case-card { box-shadow: var(--sc-frame); border-color: color-mix(in srgb, var(--line) 70%, transparent); }
[data-dir="scena"] .case-card:hover { box-shadow: var(--sc-frame); }
[data-dir="scena"] .cc-name { font-size: 42px; letter-spacing: -.03em; }
[data-dir="scena"] .step-n { font-style: italic; font-weight: 500; }
[data-dir="scena"] .final .sec-title { font-size: clamp(38px, 5vw, 76px); }

/* ── Узкие экраны ───────────────────────────────────────────────── */
@media (max-width: 1080px) {
  [data-dir="scena"] .cover-text { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eye" "title" "lead" "actions" "note" "toc"; }
  [data-dir="scena"] .cover-actions { justify-content: flex-start; margin-top: 24px; }
  [data-dir="scena"] .cover-note { justify-self: start; text-align: left; }
}
@media (max-width: 900px) {
  [data-dir="scena"] .hero-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  [data-dir="scena"] .slide-cover { padding: 30px 0 40px; }
  [data-dir="scena"] .cover-title { font-size: clamp(42px, 12vw, 60px); }
  [data-dir="scena"] .cc-name { font-size: 34px; }
}