/* ==========================================================================
   IMAGO 5.1 — базовые стили
   Раскладка блоков (координаты элементов) лежит в blocks.css.
   ========================================================================== */

:root {
  --font: 'Inter', Arial, sans-serif;
  --bg: #0c0d0e;
  --accent: #ddd3b2;
  --zoom: 1;          /* ширина окна / ширина макета, выставляет js/main.js */
  --vh: 1vh;          /* 1% высоты окна на момент загрузки (мобильные) */
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--bg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

a { color: #ff8562; text-decoration: none; }
a[href^="tel"] { color: inherit; }
b, strong { font-weight: 700; }
ul, ol { margin-top: 0; margin-bottom: 0; }
ul { padding-left: 20px; }
ol { padding-left: 22px; }
a:focus-visible,
button:focus-visible { outline: auto #2015ff; outline-offset: 4px; }
a, button { outline: none; }

/* Плавное появление страницы */
.page { overflow-x: clip; opacity: 0; transition: opacity .5s ease-in-out; }
.page.is-visible { opacity: 1; }

/* ---------------------------------------------------------------- блоки
   Каждый блок — «холст» фиксированной ширины макета (--w) и высоты (--h),
   который через zoom растягивается на всю ширину окна. */
.ab {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* как в Tilda: высота блока = высота макета × масштаб, округлённая вниз */
  height: round(down, calc(var(--h) * var(--zoom-ab, var(--zoom))), 1px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.ab::-webkit-scrollbar { height: 0; }

.ab[data-overflow="visible"] { overflow: visible; }

.ab__canvas {
  position: relative;
  flex: none;
  width: var(--w);
  height: var(--h);
  margin: auto; /* по центру блока по вертикали, если блок выше макета (100vh) */
  zoom: var(--zoom-ab, var(--zoom));
}

.ab__bg,
.ab__filter {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ab__bg { z-index: 0; }
.ab__filter { z-index: 1; }

/* ---------------------------------------------------------------- элементы */
.el {
  position: absolute;
  display: table;
}

.atom {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  word-break: normal;
  border-width: var(--border-width, 0);
  border-style: var(--border-style, solid);
  border-color: var(--border-color, transparent);
  transition:
    background-color var(--speed-hover, 0s) ease-in-out,
    color var(--speed-hover, 0s) ease-in-out,
    border-color var(--speed-hover, 0s) ease-in-out,
    box-shadow var(--shadow-speed-hover, .2s) ease-in-out;
}
a.atom { text-decoration: none; }
.atom ul, .atom ol { margin-bottom: 0; }

.atom__img { display: block; width: 100%; }

.atom__video { display: block; width: 100%; height: 100%; border: 0; }
/* Сайт масштабируется через CSS zoom, а zoom наследуется и содержимым iframe:
   плеер внутри раздувался и в полноэкранном режиме не занимал весь экран.
   Возвращаем iframe с видео масштаб 1 — размер окна при этом не меняется. */
.ab__canvas iframe { zoom: calc(1 / var(--zoom-ab, var(--zoom))); }
.features iframe,
.module-popup iframe { zoom: calc(1 / var(--zoom)); }
.el--video { display: block; }
.el--video .atom { display: block; height: 100%; background-color: #000; }

/* кнопки */
.el--button { display: block; }
.el--button .atom {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.el--button .atom::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
}
.btn__content {
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.btn__text { flex: 1 1 0; text-overflow: ellipsis; }
.btn__border {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  transition-duration: inherit;
  transition-timing-function: inherit;
  pointer-events: none;
}
.btn__border::before,
.btn__border::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  backface-visibility: hidden;
}
.btn__border::after {
  opacity: 0;
  transition-property: opacity;
  transition-duration: inherit;
  transition-timing-function: inherit;
}

/* обёртка пошаговой анимации */
.atom-anim { display: inherit; width: inherit; height: inherit; }
.el.is-anim-hidden { opacity: 0; }

/* блоки только для десктопной / только для мобильной раскладки */
@media (max-width: 959px) { .t-screenmin-980px { display: none; } }
@media (min-width: 960px) { .t-screenmax-980px, .t-screenmax-480px { display: none; } }

.anchor { display: block; height: 0; font-size: 0; }

/* ---------------------------------------------------------------- попапы */
.popup {
  position: fixed;
  inset: 0;
  z-index: 10000002;
  display: none;
}
.popup.is-open { display: block; }

.popup__bg {
  position: fixed;
  /* с запасом за края экрана: на телефонах при скрытии/появлении адресной строки
     и при «оттягивании» страницы не должно оставаться незатемнённых полос */
  top: -50vh;
  right: 0;
  bottom: -50vh;
  left: 0;
  opacity: 0;
  transition: opacity .3s;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.popup.is-shown .popup__bg { opacity: 1; }

/* попап с zero-блоком: выезжает целиком и прокручивается (в т.ч. пальцем на телефоне);
   клик мимо элементов панели закрывает (js/main.js) */
.popup--zero .popup__scroll {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.popup--zero .ab { min-height: 100vh; }
.popup--zero .ab__canvas { margin: 0 auto; } /* контент сверху, панель тянется до низа экрана */
.popup--zero .el { pointer-events: auto !important; }
.popup--zero[data-popup-anim="appearfrombottom"] .popup__scroll { transform: translateY(100vh); }
.popup--zero[data-popup-anim="appearfromright"] .popup__scroll { transform: translateX(100%); }
.popup--zero.is-shown .popup__scroll { transform: none; }
@media (max-width: 959px) {
  .popup--zero[data-popup-anim-mobile="appearfrombottom"] .popup__scroll { transform: translateY(100vh); }
  .popup--zero.is-shown .popup__scroll { transform: none; }
}

/* попап с html-кодом (формы оплаты GetCourse) */
.popup--html {
  padding: 0 20px;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, .6);
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s ease-in-out;
}
.popup--html.is-shown { opacity: 1; }
.popup--html .popup__container {
  position: relative;
  max-width: 1160px;
  margin: 65px auto;
  cursor: default;
  transform: translateY(30%) scale(.9);
  transition: transform .3s ease-in-out;
}
.popup--html.is-shown .popup__container { transform: none; }
.popup__close {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9;
  width: 43px;
  height: 43px;
  padding: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: opacity .3s ease-in-out;
}
.popup__close::before,
.popup__close::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 20.5px;
  width: 2px;
  height: 30px;
  background: #fff;
  transform: rotate(45deg);
}
.popup__close::after { transform: rotate(-45deg); }
@media (hover) { .popup__close:hover { opacity: .7; } }

/* ---------------------------------------------------------------- аккордеон FAQ */
.uc-accord-1, .uc-accord-2, .uc-accord-3, .uc-accord-4 { display: none; }

.accordionTrigger { cursor: pointer; }

.accord-line-inside { opacity: 1; transition: opacity .1s cubic-bezier(.77, 0, .175, 1); }
.accord-line-inside.is-active { opacity: 0; }

.accordion-icon .atom { position: relative; }
.accordion-icon-inside {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
}
.accordion-icon-inside::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  display: block;
  width: 32px; /* кружок кнопки; крестик внутри — 10px */
  height: 32px;
  border-radius: 100px;
  background-color: #292a2b;
  transform: translate(-50%, -50%);
  transition: background-color .2s cubic-bezier(.77, 0, .175, 1);
}
.accordion-icon-inside span {
  position: absolute;
  width: 10px;
  height: 1px;
  background-color: #f5f5f5;
  transition: background-color .2s cubic-bezier(.77, 0, .175, 1), transform .2s cubic-bezier(.77, 0, .175, 1);
}
.accordion-icon-inside span:nth-child(1) { transform: rotate(90deg); }
.accordion-icon.is-hover .accordion-icon-inside::after,
.accordion-icon.is-active .accordion-icon-inside::after { background-color: var(--accent); }
.accordion-icon.is-hover .accordion-icon-inside span,
.accordion-icon.is-active .accordion-icon-inside span { background-color: #1f2223; }
.accordion-icon.is-active .accordion-icon-inside span:nth-child(1) { transform: rotate(0deg); }
@media (max-width: 959px) { .accordion-icon-inside::after { width: 28px; height: 28px; } }

/* ---------------------------------------------------------------- превью модулей */
.preview {
  position: absolute;
  z-index: 100;
  width: 390px;
  height: 222px;
  overflow: hidden;
  pointer-events: none;
  transform-origin: center;
  transform: scale(0);
}
.preview-img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-image: url('../img/modules/modules-preview.jpg'); /* 5 кадров друг под другом */
  background-size: cover;
  background-position: 0 0;
  pointer-events: none;
}
.project { cursor: pointer; }
@media (max-width: 959px) { .preview { display: none; } }

/* ---------------------------------------------------------------- курсор */
.mf-cursor::before { background: var(--accent); transform: scale(0); }
.mf-cursor.-media .mf-cursor-media-box { transform: scale(.18); }
/* на кнопках и ссылках жёлтую точку курсора не показываем — только картинка модуля в программе (-media) */
.mf-cursor.-pointer:not(.-media)::before { transform: scale(0); }
@media (max-width: 480px) { .mf-cursor { display: none; } }

/* ленты, которые можно тянуть мышью (js/drag-scroll.js) */
.ab.is-draggable { cursor: grab; }
.ab.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; -webkit-user-select: none; }
.ab.is-dragging a { cursor: grabbing; }