/* Просмотр историй во весь экран (ui/story-viewer.js): полосы
   прогресса, автопрокрутка CSS-анимацией. Литералы цвета —
   только themes.css. */

.story-view {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--base) var(--ease), translate var(--fast) var(--ease);
  touch-action: none;
}

.story-view.is-open { opacity: 1; pointer-events: auto; }

.story-view__bars {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  right: var(--sp-3);
  z-index: 1;
  display: flex;
  gap: var(--sp-1);
}

.story-view__bar {
  flex: 1;
  height: 3px;
  border-radius: var(--r-sm);
  background: var(--veil);
  overflow: hidden;
}

.story-view__bar b {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--on-badge);
  transform-origin: left;
  scale: 0 1;
}

.story-view__bar.is-done b { scale: 1 1; animation: none; }
.story-view__bar.is-live b { scale: 0 1; }

@keyframes story-run {
  from { scale: 0 1; }
  to   { scale: 1 1; }
}

.story-view.is-paused .story-view__bar.is-live b {
  animation-play-state: paused;
}

.story-view__top {
  position: absolute;
  top: var(--sp-6);
  right: var(--sp-3);
  z-index: 1;
  display: flex;
  gap: var(--sp-2);
}

.story-view__close,
.story-view__more {
  display: grid;
  place-items: center;
  width: var(--sp-10);
  height: var(--sp-10);
  border: none;
  border-radius: 50%;
  background: var(--veil);
  color: var(--on-badge);
}

.story-view__close .icon,
.story-view__more .icon { width: var(--fs-md); height: var(--fs-md); }

.story-view__shot {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}