/* news-scene.css — ядро «сцен» страницы выпуска (вставка media kind: scene), не зависит от стиля сцены.
   Корень сцены — <figure class="nx-scene nx-scene--<стиль>" data-scene-type="page|x_thread"
   data-scene-duration="<сек>"> с заранее построенной разметкой стиля (site_kit/scenes/<стиль>/).
   Единый интерфейс управления (его держит плеер news-player.js, кнопку повтора — news-scene.js):
     без классов — финальный кадр (статичная картинка: читатель, режим ведущего без A, reduced-motion);
     is-armed — первый кадр на паузе (глава новости звучит, такт ещё впереди);
     is-playing — проигрывание с начала (перезапуск: снять класс, reflow, поставить снова);
     is-paused вместе с is-playing — пауза (аудио на паузе).
   Здесь: рамка и пропорции (как у скриншотов), пауза для is-armed / is-paused, кнопка «проиграть ещё»,
   тёмная тема панели читателя и prefers-reduced-motion. Вид самой сцены — только в CSS стиля. */

.nx-scene { position: relative; display: block; box-sizing: border-box; width: 100%; margin: 0; padding: 0;
  aspect-ratio: 16 / 10; overflow: hidden; container-type: inline-size; isolation: isolate; contain: layout paint;
  border-radius: 12px; border: 1px solid #e8e6e2; box-shadow: 0 12px 32px rgba(0, 0, 0, .12); background: #f4f3f0; }

.nx-scene.is-armed:not(.is-playing), .nx-scene.is-armed:not(.is-playing) *,
.nx-scene.is-armed:not(.is-playing) *::before, .nx-scene.is-armed:not(.is-playing) *::after,
.nx-scene.is-playing.is-paused, .nx-scene.is-playing.is-paused *,
.nx-scene.is-playing.is-paused *::before, .nx-scene.is-playing.is-paused *::after { animation-play-state: paused !important; }

/* «проиграть ещё» для читателя: видна на финальном и первом кадре, пока сцена не играет; у ведущего её нет
   (запись видео остаётся чистой), при reduced-motion — тоже */
.nx-scene-replay { position: absolute; left: 12px; bottom: 12px; z-index: 6; width: 38px; height: 38px; min-width: 28px; min-height: 28px;
  padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; pointer-events: auto;
  background: rgba(29, 29, 27, .66); color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .22); opacity: .92;
  transition: opacity .2s ease, transform .15s ease, background-color .15s ease; -webkit-tap-highlight-color: transparent; }
.nx-scene-replay svg { width: 15px; height: 15px; margin-left: 2px; display: block; }
.nx-scene-replay:hover, .nx-scene-replay:focus-visible { background: #1e6e52; opacity: 1; transform: scale(1.06); }
.nx-scene-replay:focus-visible { outline: 3px solid #1e6e52; outline-offset: 2px; }
.nx-scene.is-playing:not(.is-paused) .nx-scene-replay { opacity: 0; visibility: hidden; pointer-events: none; }
html.nx-present .nx-scene-replay { display: none; }
@container (max-width: 520px) { .nx-scene-replay { width: 30px; height: 30px; left: 8px; bottom: 8px; } .nx-scene-replay svg { width: 12px; height: 12px; } }

/* тёмная тема панели читателя: reader-toolbar инвертирует блок [data-lang-block] целиком — сцена, как видеобокс
   .nx-vbox в news.css, инвертируется обратно и остаётся «как на свету» (скриншот страницы не негатив) */
html[data-dark="1"] [data-lang-block] .nx-scene { filter: invert(1) hue-rotate(180deg); }
html[data-dark="1"] [data-lang-block] .nx-scene img { filter: none !important; }

/* вставка-сцена: широкий ряд во всю колонку, подпись и кредит — как у остальных медиа */
.nx .nx-media[data-kind="scene"] { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .nx-scene, .nx-scene *, .nx-scene *::before, .nx-scene *::after { animation: none !important; transition: none !important; }
  .nx-scene-replay { display: none; }
}