/* ── Презентации: полноэкранный слайд-шоу (data-format="presentation") ── */

/* Дочерние шаблоны презентаций прячут шапку/футер/кнопки base.html,
   поэтому основная настройка — тело и контейнер. */

/* Фолбэк-палитра презентации. Задаётся на :root, а не на .presentation:
   иначе близкий к контенту блок перекрывал бы пресеты
   (html[data-pres-theme=...]) и выбор theme в meta не работал бы —
   слайды всегда были бы в цветах фолбэка. Пресеты переопределяют эти
   переменные на html[data-pres-theme=...]. */
:root {
  --pres-bg: #0a0e1a;
  --pres-color: #e0e0e0;
  --pres-accent: #00e5ff;
}

.pres-body,
.pres-body .container {
  max-width: none;
  padding: 0;
}

.pres-body {
  overflow: hidden;
}

/* Обёртка слайд-шоу: занимает весь вьюпорт. */
.pres-body .presentation {
  /* Переопределение переменных блога на палитру презентации: иначе в
     светлой теме сайта инлайн-код/карточки/таблицы тянут светлый фон
     site-темы (--card-bg #f7f7f7), а текст — белый --pres-color →
     белое на белом. Здесь НЕ задаём --pres-bg/--pres-color/--pres-accent:
     фолбэк этих цветов — на :root (см. ниже), пресеты задают их на
     html[data-pres-theme=...], иначе этот блок (ближе к контенту) их
     перекрывал бы и пресеты никогда бы не применялись. */
  --pres-card: var(--pres-bg);
  --pres-border: rgba(127, 127, 127, 0.4);
  --card-bg: var(--pres-card);
  --fg: var(--pres-color);
  --muted: rgba(127, 127, 127, 0.85);
  --accent: var(--pres-accent);
  --accent-bg: var(--pres-accent);
  --on-accent: var(--pres-bg);
  --border: var(--pres-border);
  --code-border: var(--pres-border);
  --code-block-bg: var(--pres-card);
  --code-block-fg: var(--pres-color);
  --mark-bg: var(--pres-accent);
  --mark-fg: var(--pres-bg);
  --message-bg: rgba(127, 127, 127, 0.18);
  --message-border: rgba(127, 127, 127, 0.35);
  --message-fg: var(--pres-color);
  /* Семантические фоны (.bg-info/.bg-warning/.bg-success/.bg-danger) — на
     полупрозрачных оттенках пресета, а не на site-палитре (иначе в hive
     `.bg-info` был бы синим по жёлтой гамме). color-mix современный; фолбэк
     ниже — rgba из акцент-цвета пресета. */
  --info-bg: color-mix(in srgb, var(--pres-accent) 22%, transparent);
  --info-fg: var(--pres-color);
  --warning-bg: color-mix(in srgb, var(--pres-accent) 26%, transparent);
  --warning-fg: var(--pres-color);
  --success-bg: rgba(80, 200, 120, 0.18);
  --success-fg: var(--pres-color);
  --danger-bg: rgba(255, 102, 102, 0.2);
  --danger-fg: var(--pres-color);
  --critic-del-bg: rgba(255, 102, 102, 0.18);
  --critic-del-fg: #ffd7d5;
  --critic-ins-bg: rgba(80, 200, 120, 0.18);
  --critic-ins-fg: #d4f4d4;
  /* Таблицы (.t-*) */
  --t-border: var(--pres-border);
  --t-header-same-bg: rgba(127, 127, 127, 0.18);
  --t-header-same-fg: var(--pres-color);
  --t-stripe-bg: rgba(127, 127, 127, 0.07);
  --t-stripe-strong-bg: rgba(127, 127, 127, 0.14);
  display: block;
  position: fixed;
  inset: 0;
  background: var(--pres-bg);
  color: var(--pres-color);
}

/* Заголовок статьи до сборки слайдов скрыт; presentation.js переносит его
   в титульный слайд и снимает display:none. */
.pres-title {
  display: none;
}

.pres-cover {
  /* Титульный слайд: заголовок крупнее, без отступов-буллетов. */
  text-align: center;
}

.pres-cover h1 {
  font-size: 3em;
  margin: 0;
}

.pres-slideshow {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.pres-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 64px) clamp(16px, 6vw, 96px);
  overflow-y: auto;                 /* высокий контент скроллится внутри слайда */
  background: var(--pres-bg);       /* непрозрачный фон: чистый кросс-фейд без наложения */
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  transition: opacity .35s ease, transform .35s ease, visibility .35s;
  z-index: 1;
}

.pres-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  z-index: 2;
}

/* Отключаем горизонтальный скролл у всего слайда; скроллят внутренние
   контейнеры по своим классам (таблицы/код/vega). */
.pres-slide {
  scrollbar-width: thin;
}

.pres-slide h1 {
  font-size: 2.2em;
  color: var(--pres-accent);
  margin-bottom: .6em;
}

.pres-slide h2 {
  color: var(--pres-accent);
}

.pres-slide a {
  color: var(--pres-accent);
}

/* Список-буллеты слайда: маркеры в цвет акцента. */
.pres-slide ul {
  list-style: none;
  padding-left: 0;
}

/* Грид-фенсы (columns/cards) в слайде: в flex-контейнере слайда auto-fit
   ужимает их до контента и складывает в одну колонку — фиксируем ширину. */
.pres-slide .columns,
.pres-slide .cards {
  width: 100%;
  align-self: stretch;
}

/* Фенс-обёртки (```box/```cards/```columns), которым нужна полная высота
   слайда: flex:1 растягивает по основной оси (height в column-flex),
   stretch — по поперечной (width). Без этого box сидит по контенту в центре.
   Контент внутри при этом тоже растянут (display:flex, column). */
.pres-slide .box {
  width: 100%;
  flex: 1 0 auto;
  align-self: stretch;
}

.pres-slide ul > li {
  position: relative;
  padding-left: 1.3em;
  margin: .35em 0;
}

.pres-slide ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: .5em;
  height: .5em;
  background: var(--pres-accent);
  border-radius: 50%;
}

/* ── UI плеера ── */

.pres-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255,255,255,.15);
  z-index: 5;
}

.pres-bar-fill {
  height: 100%;
  width: 0;
  background: var(--pres-accent);
  transition: width .2s linear;
}

.pres-counter {
  position: absolute;
  bottom: 14px;
  right: 18px;
  z-index: 5;
  font-size: 13px;
  opacity: .75;
  color: var(--pres-color);
  font-variant-numeric: tabular-nums;
}

.pres-corners {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.pres-corners > button {
  pointer-events: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20%;
  max-width: 160px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--pres-color);
  opacity: 0;
  transition: opacity .2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.pres-corners > button:hover,
.pres-corners > button:focus-visible {
  opacity: .5;
}

.pres-corners .pres-prev {
  left: 0;
}

.pres-corners .pres-next {
  right: 0;
}

.pres-actions {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 5;
  display: flex;
  gap: 6px;
}

.pres-actions button {
  background: rgba(127,127,127,.2);
  border: 1px solid rgba(255,255,255,.25);
  color: var(--pres-color);
  border-radius: 6px;
  width: 34px;
  height: 34px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pres-actions button:hover {
  background: rgba(255,255,255,.2);
}

/* ── Типографика из meta font-size ── */

html[data-pres-font="sm"] .pres-slide { font-size: 15px; }
html[data-pres-font="md"] .pres-slide { font-size: 17px; }
html[data-pres-font="lg"] .pres-slide { font-size: 20px; }
html[data-pres-font="xl"] .pres-slide { font-size: 24px; }

/* ── Переходы из meta transition ── */

[data-pres-transition="slide"] .pres-slide {
  transform: translateX(8px);
}

[data-pres-transition="slide"] .pres-slide.is-active {
  transform: none;
}

[data-pres-transition="fade"] .pres-slide,
[data-pres-transition="none"] .pres-slide {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .pres-slide {
    transition: opacity .1s ease, visibility .1s;
    transform: none !important;
  }
}

/* ── Пресеты тем ── */

html[data-pres-theme="cyber"] {
  --pres-bg: #0a0e1a;
  --pres-color: #dbe4ff;
  --pres-accent: #00e5ff;
  --pres-card: #111a33;
  --pres-border: rgba(140, 180, 255, 0.35);
}

html[data-pres-theme="warm"] {
  --pres-bg: #2a1a0e;
  --pres-color: #ffe8d6;
  --pres-accent: #ffb454;
  --pres-card: #3a2718;
  --pres-border: rgba(255, 200, 160, 0.3);
}

html[data-pres-theme="ocean"] {
  --pres-bg: #071621;
  --pres-color: #d6e9ff;
  --pres-accent: #4cc9f0;
  --pres-card: #0e2333;
  --pres-border: rgba(150, 200, 240, 0.32);
}

html[data-pres-theme="mono"] {
  --pres-bg: #111111;
  --pres-color: #eeeeee;
  --pres-accent: #ffffff;
  --pres-card: #1c1c1c;
  --pres-border: rgba(200, 200, 200, 0.32);
}

html[data-pres-theme="minimal"] {
  --pres-bg: #f4f4f2;
  --pres-color: #222222;
  --pres-accent: #111111;
  --pres-card: #ffffff;
  --pres-border: rgba(20, 20, 20, 0.25);
}

/* Тёмная тема «hive»: чёрный / жёлтый / белый (фирменная гамма оператора,
   без названия бренда). Фон чёрный, текст белый, акцент — фирменный жёлтый. */
html[data-pres-theme="hive"] {
  --pres-bg: #0a0a0a;
  --pres-color: #ffffff;
  --pres-accent: #ffd100;
  --pres-card: rgba(255, 209, 0, 0.07);
  --pres-border: rgba(255, 209, 0, 0.3);
}

html[data-pres-theme="lime"] {
  --pres-bg: #0a0a0a;
  --pres-color: #f7ffe0;
  --pres-accent: #a3e635;
  --pres-card: rgba(163, 230, 53, 0.07);
  --pres-border: rgba(163, 230, 53, 0.3);
}

html[data-pres-theme="cherry"] {
  --pres-bg: #0a0a0a;
  --pres-color: #ffeef2;
  --pres-accent: #e8255a;
  --pres-card: rgba(232, 37, 90, 0.07);
  --pres-border: rgba(232, 37, 90, 0.3);
}