:root{
  color-scheme: light dark;

  --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);

  --auto-video-max-width: 1600px;
  --auto-video-radius: 14px;
}

.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);
}

/* базовый .auto-video для всего сайта */

.auto-video-wrap{
  position: relative;
  width: 100%;
  max-width: var(--auto-video-max-width);
  margin: 0 auto 24px;
  background: #000;
  overflow: hidden;
  border-radius: var(--auto-video-radius);
  aspect-ratio: 16 / 9;
}

.auto-video-wrap.auto-video-wrap--small{
  width: min(100%, 480px);
}

.auto-video-wrap.auto-video-wrap--vh{
  height: 70vh;
  max-height: 800px;
  aspect-ratio: 9 / 16;
  width: auto;
}

.auto-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 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;
}

/* тёмная тема */

: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{
  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);
}

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);
}

.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;
}

/* переходы между страницами */

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;
}

html:not(.pgtr-ready)::before,
html.pgtr-leave::before{
  opacity: 1;
}

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