/* ===========================
   ТЕМА САЙТА (переменные)
   =========================== */
:root{
  /* подсказка браузеру, что есть и светлая, и тёмная тема */
  color-scheme: light dark;

  /* fallback для высоты шапки */
  --hdr-h: 70px;

  /* Светлая тема (по умолчанию) */
  --site-bg: #ffffff;
  --site-fg: #000000;
  --muted-fg: #6a6a6a;
  --line:    #e9e9e9;
  --link:    #0d5eff;

  /* Шапка/оверлей читают из общей палитры */
  --bg: var(--site-bg);
  --fg: var(--site-fg);
  --overlay-bg: rgba(255,255,255,.98);

  /* Плавность смены темы */
  --theme-tr-dur: 320ms;
  --theme-tr-ease: cubic-bezier(.22,1,.36,1);

  /* Переходы между страницами */
  --pgtr-dur: 500ms;
  --pgtr-ease: cubic-bezier(.22,1,.36,1);
}
/* Базовое состояние иконок (светлая тема) */
.uc-contacts-social img,
.uc-contacts-social svg{
  transition: filter .25s ease, background-color .25s ease;
}

/* В тёмной теме инвертируем иконки */
:root[data-theme="dark"] .uc-contacts-social img,
:root[data-theme="dark"] .uc-contacts-social svg{
  filter: invert(1);
}


/* ===========================
   Image zoom / popup под тему
   =========================== */

/* Фон оверлея при увеличении картинок / попапах */
.t-zoomer__wrapper,
.t-zoomer__bg,
.t-zoomer__container,
.t-popup,
.t-popup__container,
.t-popup__bg{
  background: var(--overlay-bg) !important;
  background-color: var(--overlay-bg) !important;
}

/* Цвет крестика/иконок в попапе под тему */
.t-zoomer__close,
.t-popup__close,
.t-zoomer__close-icon{
  color: var(--site-fg) !important;
  fill: var(--site-fg) !important;
}


/* Тёмная тема (включается атрибутом data-theme="dark" на ) */
:root[data-theme="dark"]{
  --site-bg: #000000;
  --site-fg: #ffffff;
  --muted-fg: #bdbdbd;
  --line:    #2a2a2a;
  --link:    #004CFF;

  --bg: var(--site-bg);
  --fg: var(--site-fg);
  --overlay-bg: rgba(0,0,0,.96);
}

/* ===========================
   ПРИМЕНЕНИЕ К ТИЛЬДЕ
   =========================== */

/* Глобальный фон/текст — ТОЛЬКО на html
   (важно, потому что именно html красим ранним скриптом
    и поверх него вешаем оверлей перехода) */
html{
  background: var(--site-bg) !important;
  background-color: var(--site-bg) !important;
  color: var(--site-fg) !important;
  transition:
    background-color var(--theme-tr-dur) var(--theme-tr-ease),
    color            var(--theme-tr-dur) var(--theme-tr-ease);
}

/* Всё остальное — прозрачное, читает цвет/фон от html */
body,
.t-body,
.t-records{
  background: transparent !important;
  color: inherit !important;
}

/* Секции/обложки — тоже прозрачные, чтобы читался общий фон темы */
.t-section,
.t-container,
.t396, .t396__artboard,
.t-cover, .t-cover__carrier, .t-cover__filter{
  background: transparent !important;
  transition:
    background-color var(--theme-tr-dur) var(--theme-tr-ease),
    border-color     var(--theme-tr-dur) var(--theme-tr-ease),
    color            var(--theme-tr-dur) var(--theme-tr-ease);
}

/* Тексты и ссылки — плавная перекраска */
h1,h2,h3,h4,h5,h6,
p, span, a, .t-text, .t-title, .t-name, .t-descr{
  color: inherit;
  transition: color var(--theme-tr-dur) var(--theme-tr-ease);
}

/* Ссылки/линии/иконки */
a{
  color: var(--link);
  transition: color var(--theme-tr-dur) var(--theme-tr-ease);
}

hr, .divider{
  border-color: var(--line);
  background: var(--line);
  transition: background-color var(--theme-tr-dur) var(--theme-tr-ease),
              border-color     var(--theme-tr-dur) var(--theme-tr-ease);
}

svg, .icon{
  color: var(--site-fg);
  fill: currentColor;
  transition:
    color var(--theme-tr-dur) var(--theme-tr-ease),
    fill  var(--theme-tr-dur) var(--theme-tr-ease);
}

/* Кастомные блоки */
#works,
#works-pagination button,
.work-card, .work-meta,
.marquee-wrap::before, .marquee-wrap::after,
.typebox{
  transition:
    background-color var(--theme-tr-dur) var(--theme-tr-ease),
    color            var(--theme-tr-dur) var(--theme-tr-ease),
    border-color     var(--theme-tr-dur) var(--theme-tr-ease);
}

/* Герой (Zero/Cover) = 100vh − высота шапки */
.t-records > .t-rec:first-child .t396__artboard,
.t-records > .t-rec:first-child .t396__filter,
.t-records > .t-rec:first-child .t396__carrier,
.t-records > .t-rec:first-child .t-cover,
.t-records > .t-rec:first-child .t-cover__carrier,
.t-records > .t-rec:first-child .t-cover__filter,
.t-records > .t-rec:first-child .t-cover__wrapper{
  height: calc(100vh - var(--hdr-h)) !important;
  min-height: calc(100vh - var(--hdr-h)) !important;
}

/* ===========================
   ПЕРЕХОДЫ МЕЖДУ СТРАНИЦАМИ
   (фейд через цвет темы)
   =========================== */

/* Оверлей на весь вьюпорт.
   Цвет = var(--site-bg):
   - при светлой теме — белый,
   - при тёмной теме — чёрный. */
html::before{
  content: "";
  position: fixed;
  inset: 0;
  background: var(--site-bg);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--pgtr-dur) var(--pgtr-ease);
  z-index: 2147483647;
}

/* Пока страница не готова (нет .pgtr-ready) — оверлей включен.
   При уходе со страницы (.pgtr-leave) — тоже включаем. */
html:not(.pgtr-ready)::before,
html.pgtr-leave::before{
  opacity: 1;
}

@media (prefers-reduced-motion: reduce){
  html::before{
    transition: none !important;
    opacity: 0 !important;
  }
}