/**
 * Слой 2026: детали, которые считываются как «дорого».
 *
 * Ничего не перестраивает — только уточняет поведение уже готовых
 * элементов. Отключается снятием библиотеки efist/ui2026 в efist.info.yml.
 *
 *   1. Шапка становится стеклянной после первого экрана.
 *   2. Переходы между страницами — плавные, как в приложении.
 *   3. Карточки светлеют под курсором.
 *   4. Заглушки обложек — мягкий градиент вместо серого прямоугольника.
 */

/* ================= 1. Стеклянная шапка ================= */

.ef-header {
  transition: background-color .35s ease, backdrop-filter .35s ease,
              box-shadow .35s ease, border-color .35s ease;
}
/* Класс ставит скрипт после 40px прокрутки — до этого шапка обычная. */
.ef-header.is-glass {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
  border-bottom-color: rgba(0, 0, 0, .07);
  box-shadow: 0 1px 24px rgba(0, 0, 0, .05);
}
/* Над слайдером шапка прозрачная и светлая — там стекло тёмное. */
.ef-header--over.is-glass {
  background: rgba(10, 10, 12, .5);
  border-bottom-color: rgba(255, 255, 255, .12);
  box-shadow: none;
}

/* ================= 2. Переходы между страницами ================= */
/* Браузеры без поддержки просто игнорируют правило — переход обычный. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: ef-vt-out .22s ease both; }
::view-transition-new(root) { animation: ef-vt-in .32s cubic-bezier(.22,.61,.36,1) both; }
@keyframes ef-vt-out { to { opacity: 0; } }
@keyframes ef-vt-in { from { opacity: 0; transform: translateY(8px); } }

/* ================= 3. Подсветка карточки под курсором ================= */

.ef-card--article,
.s26 .ef-k-soc__item,
.wg26 .wg26-who__item,
.u26 .ef-u-acc__item { position: relative; }

.ef-card--article::before,
.s26 .ef-k-soc__item::before,
.wg26 .wg26-who__item::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%),
    rgba(10, 132, 255, .06), transparent 62%);
  opacity: 0; transition: opacity .35s;
  pointer-events: none;
}
.ef-card--article:hover::before,
.s26 .ef-k-soc__item:hover::before,
.wg26 .wg26-who__item:hover::before { opacity: 1; }

/* ================= 4. Заглушка обложки: градиент вместо серого ================= */

.ef-card__cover--blank {
  background: linear-gradient(135deg, #eef2f7 0%, #e7ecf5 40%, #f4eef7 100%);
  position: relative; overflow: hidden;
}
.ef-card__cover--blank::after {
  content: "";
  position: absolute; inset: -30%;
  background: radial-gradient(45% 45% at 30% 20%, rgba(10,132,255,.16), transparent 70%),
              radial-gradient(40% 40% at 75% 70%, rgba(191,90,242,.14), transparent 70%);
}
.ef-card__cover--blank span {
  position: relative; z-index: 1;
  color: rgba(29, 29, 31, .28);
  font-weight: 700; letter-spacing: -.03em;
}

/* ================= 5. Один вертикальный ритм ================= */
/* Секции разъезжались от 44 до 110px в разных слоях — сводим к шкале. */
.s26 .ef-home-section,
.s26 .ef-platforms-section,
.s26 .ef-about-teaser { padding-block: clamp(56px, 8vw, 104px); }

@media (prefers-reduced-motion: reduce) {
  .ef-header { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .ef-card--article::before { transition: none; }
}

/* ================= Свой проигрыватель ================= */

.ef-pl {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px 10px 10px;
  background: #f5f5f7;
  border-radius: 980px;
}
.ef-pl audio { display: none; }

.ef-pl__btn {
  flex: 0 0 auto; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: #1d1d1f; color: #fff;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.32,.72,0,1), background-color .2s;
}
.ef-pl__btn:hover { background: #000; transform: scale(1.05); }
.ef-pl__btn:active { transform: scale(.94); }
.ef-pl__btn svg { width: 18px; height: 18px; }
.ef-pl__pause { display: none; }
.ef-pl.is-playing .ef-pl__play { display: none; }
.ef-pl.is-playing .ef-pl__pause { display: block; }

.ef-pl__bar {
  flex: 1 1 auto; height: 4px; border-radius: 4px;
  background: rgba(0,0,0,.12);
  cursor: pointer; position: relative;
  transition: height .18s;
}
.ef-pl__bar:hover, .ef-pl__bar:focus-visible { height: 7px; }
.ef-pl__fill {
  height: 100%; width: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, #0A84FF, #6E5BFF);
}
.ef-pl__time {
  flex: 0 0 auto; min-width: 4ch; text-align: right;
  font-size: .86rem; color: #6e6e73;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .ef-pl__btn, .ef-pl__bar { transition: none; }
}

/* ================= Телефон: пальцы и мелкий шрифт ================= */
/* Замеры на 390px показали: точки карусели 8px, метки 11,5px, ссылка
   «все релизы» 21px по высоте. Правим не внешний вид, а зону нажатия
   и нижнюю границу кегля. */

@media (max-width: 860px) {
  /* Точка остаётся маленькой, но нажимается вся область вокруг неё. */
  .wg26 .wg26-rev__dot {
    position: relative;
  }
  .wg26 .wg26-rev__dot::after {
    content: ""; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 40px; height: 40px;
  }
  .wg26 .wg26-rev__dots { gap: 6px; }

  /* Мелкий текст: 11,5–12,8px на телефоне читается с трудом. */
  .wg26 .wg26-badge { font-size: .84rem; }
  .wg26 .wg26-eyebrow,
  .s26 .ef-eyebrow,
  .k26 .ef-eyebrow,
  .a26 .ef-eyebrow,
  .u26 .ef-u-eyebrow { font-size: .82rem; }
  .wg26 .wg26-price__legal { font-size: .86rem; }

  /* Метка на слайдере и ссылки-«ещё» — читаемый кегль. */
  /* Тот же вес селектора, что у общего слоя: при равной важности
     решает специфичность, и короткий селектор проигрывал. */

  /* Закрытое меню уезжает вверх, но остаётся «видимым» для браузера:
     клавиатура и озвучка экрана проходили по восьми невидимым пунктам.
     Прячем его до конца перехода и возвращаем при открытии. */
  .ef-nav {
    visibility: hidden;
    transition: transform var(--t), visibility 0s linear .3s;
  }
  .ef-nav.is-open {
    visibility: visible;
    transition: transform var(--t), visibility 0s;
  }
  .ef-slider .ef-slider__eyebrow { font-size: .8rem !important; }
  .s26 .ef-link-more, .a26 .ef-link-more { font-size: .86rem; }

  /* Ссылки-«ещё» в заголовках разделов — полноценная цель. */
  .s26 .ef-link-more,
  .a26 .ef-link-more {
    min-height: 44px;
    display: inline-flex; align-items: center;
  }
}