/* Наши правила. Подключаются последними, после сорока таблиц Dayos.
   Здесь только то, чего у Dayos нет и быть не могло: заглушки на месте
   их видео и мелочи нашей вёрстки. Ни одно их правило тут не повторяется
   и не переписывается — за этим следит правило дома.

   Цвета пока их. Перекраска под Ordanio идёт следующим ходом, и делается
   она переопределением переменных `--cl-*`, а не правкой правил. */

/* Прокрутка. Dayos прибивает страницу к окну — `body{position:fixed;
   overflow:hidden}` — и катает содержимое своим кодом на GSAP внутри
   `.smooth-wrapper`. Их кода у нас нет, поэтому страница без этой
   поправки не прокручивается вовсе. Возвращаем обычную прокрутку
   браузера. Плавность, если Тимур её захочет, делается своим кодом
   по замерам (в проекте уже стоит lenis). */
html,
body {
  height: auto;
  overflow: visible;
  position: static;
}

/* Место под 3D-ролик. У Dayos здесь зацикленный webm 2560 x 2560 весом
   12 МБ; их файл мы не берём. Наш ролик — телефон с работающим
   БанкетCRM — снимаем позже, вес держим в пределах 1,5-2 МБ. */
.zaglushka {
  align-items: center;
  aspect-ratio: 1 / 1;
  border: 1px dashed var(--cl-grey-400);
  border-radius: 2.4rem;
  color: var(--cl-grey-500);
  display: flex;
  justify-content: center;
  text-align: center;
  width: 100%;
}

/* Образец гарнитур на первом этапе: строка-подпись над каждым примером
   и разделительная линия. Блок временный, он уйдёт вместе с приёмкой. */
.obrazec-shrifta {
  border-top: 1px solid var(--cl-grey-300);
  grid-column: 1 / -1;
  padding-block: 3.2rem;
}

.obrazec-shrifta .podpis {
  color: var(--cl-grey-500);
  margin-bottom: 1.6rem;
}

/* Подпись на плитке стека. У Dayos в этой сетке лежат логотипы Oracle,
   SAP и Workday — чужие знаки, мы их не берём, и на месте картинки
   у нас слово. Их правило центрует по классу `media` картинку
   с высотой 33% от плитки; слову такая высота не нужна, поэтому оно
   центруется здесь своим правилом. */
.plitka-podpis {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  padding-inline: 1.6rem;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
}

/* Слой оверлеев. У Dayos меню на телефоне лежит в `<div id="overlays">`
   в конце страницы, и растягивается оно потому, что у них весь документ
   прибит к окну (`body{position:fixed;height:100%}`). Мы прокрутку
   вернули браузеру, поэтому слою нужен свой размер — он и задан здесь.
   Правил Dayos на `#overlays` нет вовсе, так что это наш элемент. */
#overlays {
  inset: 0;
  pointer-events: none;
  position: fixed;
  /* Ниже шапки (`.the-nav` держит 2000): меню закрывает страницу,
     но сама шапка с крестиком остаётся сверху и нажимается.
     У Dayos это выходит само собой — их шапка живёт в том же слое,
     куда телепортируется меню. */
  z-index: 1900;
}

/* Живой фон первого экрана. Канва лежит во всю секцию под содержимым
   и не ловит мышь: заголовок, шапка и кнопка остаются нажимаемыми.
   Сам фон рисует `components/dayos/fon-holmy.tsx`. */
.fon-holmy {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
  /* Низ канвы растворяется в белом следующего блока. Без маски холмы
     обрывались ровной линией по границе секции (замечено Тимуром
     19.09.2026). */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}

.fon-holmy canvas {
  display: block;
  height: 100%;
  width: 100%;
}

/* Текст первого экрана поднимается над канвой. Поднимаем только его:
   стоит тронуть позиционирование их контейнера, и секция теряет высоту,
   заголовок уезжает на тысячу пикселей вниз. Проверено 12.09.2026. */
.hero-home .content {
  position: relative;
  z-index: 1;
}


/* Место живой фигуры. Держит ту же квадратную клетку, что держала
   заглушка до неё: у Dayos здесь их зацикленный ролик 2560 на 2560.
   Канва мышь не ловит. */
.figura {
  aspect-ratio: 1 / 1;
  pointer-events: none;
  position: relative;
  width: 100%;
}

.figura canvas {
  display: block;
  height: 100%;
  width: 100%;
}

/* Две плашки и полоса под ними. Устройство снято с образца, который
   Тимур прислал 12.09.2026. Вёрстка своя: у нас сетка Dayos в двенадцать
   колонок на десктопе и шесть на телефоне, плашки встают по половине.

   Кадр лежит фоном во всю плашку, текст идёт поверх. Обе картинки сняты
   с пустой левой половиной, и поверх неё положен ещё градиент — без него
   светлые кнопки на светлом фоне теряют края, а на тёмной плашке
   заголовок спорит с ярким кодом. */
.plashki-blok {
  padding-block: 8rem 4rem;
}

.plashka {
  background-color: #eceef2;
  /* Кадр снят ровно под пропорцию плашки (замер: 1,19 на десктопе),
     поэтому берётся целиком. Правый край держится в кадре: телефон
     и код сидят там, и при обрезке под телефон терять надо левое
     пустое поле, а не их. */
  /* Картинка берётся по высоте с запасом: она шире плашки и лишнее
     уходит под обрез. Прижимаем ЛЕВЫЙ край — тогда режется пустое
     правое поле, а телефон и код съезжают к правому краю плашки,
     из-под кнопок. Замер на 1280: плашка 551 на 471, кадр при такой
     посадке 690 в ширину, под обрез уходит 139. */
  background-position: left center;
  background-size: auto 118%;
  border-radius: 3.2rem;
  grid-column: span 6;
  isolation: isolate;
  min-height: 52rem;
  overflow: hidden;
  padding: 4rem;
  position: relative;
}

/* Свет под текстом: слева плотнее, к правому краю сходит на нет.

   Цвет тёплый, взят из самой фотографии. Белая заливка, стоявшая тут
   раньше, выбеливала левую треть кадра и выглядела как побелка поверх
   снимка (правка Тимура 12.09.2026). */
.plashka::before {
  background: linear-gradient(
    100deg,
    rgba(243, 232, 216, 0.72) 0%,
    rgba(243, 232, 216, 0.4) 38%,
    rgba(243, 232, 216, 0) 66%
  );
  content: "";
  inset: 0;
  position: absolute;
  z-index: -1;
}

.plashka.tyomnaya::before {
  background: linear-gradient(
    100deg,
    rgba(6, 7, 10, 0.94) 0%,
    rgba(6, 7, 10, 0.78) 38%,
    rgba(6, 7, 10, 0.1) 72%
  );
}

.plashka-levo {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  /* Колонка у́же половины плашки: иначе белые кнопки наезжают
     на телефон, который стоит в середине кадра. */
  max-width: 30rem;
  position: relative;
}

/* Заголовок плашки держит перенос строкой из данных: у образца он
   тоже разбит на две строки вручную. Прописные сняты — у Dayos ступень
   `type-h4` набирается капсом, а на образце заголовок строчный,
   и в капсе он разъезжается на четыре строки вместо двух. */
.plashka-zagolovok {
  font-size: 3.6rem;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  text-transform: none;
  white-space: pre-line;
}

.plashka.tyomnaya .plashka-zagolovok {
  color: var(--cl-white);
}

.plashka-stroki {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Строка-кнопка: стекло, имя слева, стрелка справа. Просьба Тимура
   12.09.2026 — «как Apple Glass». Держится на трёх вещах: заливка
   чуть светлее фона, размытие того, что под ней, и светлая рамка
   в один пиксель, которая и читается как край стекла. */
.plashka-stroka {
  align-items: center;
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  background: rgba(255, 255, 255, 0.44);
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 1.2rem;
  box-shadow: 0 0.6rem 2rem rgba(28, 24, 18, 0.06);
  color: var(--cl-black);
  display: flex;
  gap: 1.6rem;
  justify-content: space-between;
  padding: 1.4rem 1.8rem;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background 0.24s ease-in-out,
    border-color 0.24s ease-in-out,
    color 0.24s ease-in-out;
}

.plashka-stroka:hover {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(255, 255, 255, 0.9);
}

/* На тёмной плашке стекло тёмное: заливка светлая, но еле заметная,
   а текст белый. Иначе белая пилюля выжигает дыру в чёрном кадре. */
.plashka.tyomnaya .plashka-stroka {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.2);
  color: var(--cl-white);
}

.plashka.tyomnaya .plashka-stroka:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
}

.plashka-strelka {
  display: inline-flex;
  flex: none;
  height: 1.6rem;
  width: 1.6rem;
}

.plashka-strelka svg {
  height: 100%;
  width: 100%;
}

/* Полоса под плашками: во всю ширину, текст слева, стрелка справа. */
.plashka-polosa {
  align-items: center;
  background: var(--cl-black);
  border-radius: 2.4rem;
  color: var(--cl-white);
  display: flex;
  grid-column: 1 / -1;
  justify-content: space-between;
  margin-top: 2.4rem;
  padding: 2.4rem 3.2rem;
  text-decoration: none;
  text-transform: uppercase;
}

.plashka-polosa .plashka-strelka {
  height: 2.4rem;
  width: 2.4rem;
}

/* На телефоне плашки идут друг под другом. Картинка остаётся фоном,
   но берётся правым краем: телефон и код сидят именно там. */
@media (max-width: 767px) {
  .plashki-blok {
    padding-block: 4.8rem 2.4rem;
  }

  .plashka {
    /* На телефоне плашка вытянута вверх (замер: 340 на 514), и кадр
       при обычной посадке показывает телефон ровно под кнопками —
       он просвечивает призраком и мажет их. Прижимаем левый край:
       телефон уходит к правой границе и виден краем, а под текстом
       остаётся чистое поле. */
    background-position: left center;
    background-size: cover;
    grid-column: 1 / -1;
    min-height: 44rem;
    padding: 2.8rem;
  }

  .plashka::before {
    background: linear-gradient(
      120deg,
      rgba(243, 232, 216, 0.86) 0%,
      rgba(243, 232, 216, 0.55) 52%,
      rgba(243, 232, 216, 0) 88%
    );
  }

  .plashka.tyomnaya::before {
    background: linear-gradient(
      120deg,
      rgba(6, 7, 10, 0.92) 0%,
      rgba(6, 7, 10, 0.72) 52%,
      rgba(6, 7, 10, 0.18) 88%
    );
  }

  .plashka-levo {
    max-width: none;
  }

  .plashka-polosa {
    gap: 1.6rem;
    padding: 2rem 2.4rem;
  }
}


/* Кейсы. Устройство снято с образца surf.ru (Тимур прислал 12.09.2026):
   лёгкий заголовок с подписью, под ним три карточки — кадр, имя,
   описание и строки-факты на плашках.

   Заголовок здесь один на всей главной набран обычным регистром: у Dayos
   имена разделов идут прописными в тринадцать рем, и такой кегль над
   рядом карточек забирает весь экран себе. У образца на этом месте
   стоит подпись к ряду, ею она и осталась. */
.kejsy-blok {
  padding-block: 9.6rem 4rem;
}

.kejsy-shapka {
  grid-column: 1 / span 12;
  margin-bottom: 4.8rem;
}

.kejsy-zagolovok {
  font-family: Onest, SuisseIntl, sans-serif;
  font-size: 4.4rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  /* Dayos ставит всем h2 и h3 прописные буквы. У образца имена
     набраны обычным регистром, и здесь он держится своим правилом. */
  text-transform: none;
}

.kejsy-podpis {
  color: var(--cl-grey-500);
  margin-top: 1.6rem;
}

.kejsy-spisok {
  display: grid;
  gap: 3.2rem;
  grid-column: 1 / span 12;
  /* Три карточки с 19.09.2026: приложение заведения встало третьим,
     окна стали квадратными под ролики (`Материалы/ТЗ-ролики-для-сайта.md`).
     Карточка арабского языка снята 14.09.2026 и не возвращается. */
  grid-template-columns: repeat(3, 1fr);
}

.kejs {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Кадр держит квадратную клетку, как у образца: ролики сняты 1080 на
   1080, и окно под них квадратное. Подложка светлая: кадры продуктов
   сняты на своём фоне, и общая рамка их объединяет. */
.kejs-kadr {
  aspect-ratio: 1;
  background: var(--cl-grey-100);
  border-radius: 2.4rem;
  margin-bottom: 2.4rem;
  overflow: hidden;
  position: relative;
}

.kejs-kadr img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  width: 100%;
}

.kejs:hover .kejs-kadr img {
  transform: scale(1.03);
}

/* Заглушка внутри кадра занимает его целиком: своя рамка здесь лишняя,
   клетку уже держит сам кадр. */
.kejs-kadr .zaglushka {
  aspect-ratio: auto;
  border: 0;
  height: 100%;
}

.kejs-imya {
  font-family: Onest, SuisseIntl, sans-serif;
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 1.2rem;
  text-transform: none;
}

.kejs-opisanie {
  color: var(--cl-grey-500);
  margin-bottom: 2.4rem;
  /* Прижимает строки-факты к низу карточки: у соседей описание длиннее
     или короче, а плашки должны стоять на одной линии. */
  flex-grow: 1;
}

.kejs-fakty {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.kejs-fakt {
  align-items: center;
  background: var(--cl-grey-100);
  border-radius: 1.2rem;
  display: flex;
  gap: 1.2rem;
  line-height: 1.35;
  padding: 1.4rem 1.6rem;
}

.kejs-znak {
  flex-shrink: 0;
  height: 2.4rem;
  width: 2.4rem;
}

.kejs-znak svg {
  display: block;
  height: 100%;
  width: 100%;
}

@media (max-width: 767px) {
  .kejsy-blok {
    padding-block: 6.4rem 3.2rem;
  }

  .kejsy-shapka {
    grid-column: 1 / -1;
    margin-bottom: 3.2rem;
  }

  .kejsy-zagolovok {
    font-size: 3.2rem;
  }

  .kejsy-spisok {
    gap: 4.8rem;
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }
}


/* Фотография под первым экраном страниц разделов (`lib/fony.ts`).

   Слой уходит под содержимое через z-index -1, а секция получает
   `isolation: isolate`. Без изоляции отрицательный слой проваливается
   под чёрный фон самой секции и не виден. Позиционирование их
   контейнеров и шапки не трогаем: на главной подъём `.clip` уже
   ронял шапку.

   Кадры сняты тёмными, с пустой левой половиной, но в правой нижней
   части первого экрана стоят ссылки на разделы, а текст идёт белым.
   Поэтому поверх кадра два градиента: слева направо под заголовком
   и снизу вверх под ссылками. */
.hero-business.s-foto {
  isolation: isolate;
}

.foto-ekrana {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.foto-ekrana img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
  width: 100%;
}

.foto-ekrana::after {
  background:
    linear-gradient(180deg, rgba(10, 10, 9, 0.45) 0%, rgba(10, 10, 9, 0) 22%),
    linear-gradient(90deg, rgba(10, 10, 9, 0.7) 0%, rgba(10, 10, 9, 0.35) 45%, rgba(10, 10, 9, 0) 72%),
    linear-gradient(0deg, rgba(10, 10, 9, 0.92) 0%, rgba(10, 10, 9, 0.55) 30%, rgba(10, 10, 9, 0) 55%);
  content: "";
  inset: 0;
  position: absolute;
}

/* На телефоне экран вытянут вверх, и из широкого кадра видна узкая
   полоса. Сюжет стоит справа, туда её и сдвигаем. Текст на телефоне
   занимает всю ширину, поэтому затемнение ровнее. */
@media (max-width: 767px) {
  .foto-ekrana img {
    object-position: 74% 50%;
  }

  .foto-ekrana::after {
    background:
      linear-gradient(180deg, rgba(10, 10, 9, 0.8) 0%, rgba(10, 10, 9, 0.74) 50%, rgba(10, 10, 9, 0.94) 100%);
  }
}

/* Подложка шапки `.backdrop` у Dayos залита чёрным и на фотографии
   лежала сплошной полосой. Над кадром она прозрачная: верх кадра
   и так затемнён градиентом, пункты меню читаются. */
.hero-business.s-foto .backdrop {
  background: transparent;
}

/* Описание у Dayos набрано серым `--cl-grey-400`. На чёрном ему хватает
   контраста, на кадре с бликами серый пропадает. Над фото оно светлее. */
.hero-business.s-foto .desc {
  color: var(--cl-grey-300);
}

/* Кадр в карточке раздела вместо окна под видео (решение Тимура
   14.09.2026). Окно у Dayos квадратное под их ролик; наши фотографии
   сняты 16:9 с сюжетом справа, поэтому окно ниже, а кадр обрезается
   к правой части. Наведение чуть приближает кадр, как у их ролика. */
.entry-solution .media-wrap:has(.kadr-kartochki) {
  aspect-ratio: 4 / 3;
  border-radius: 2.4rem;
  margin-bottom: 2.4rem;
  overflow: hidden;
}
/* Кадры продуктов сняты квадратом, телефон в них стоит целиком. */
.entry-solution .media-wrap:has(.kadr-kartochki.kvadrat) {
  aspect-ratio: 1;
}
.kadr-kartochki.kvadrat {
  object-position: 50% 50%;
}
.kadr-kartochki {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  width: 100%;
}
.entry-solution:hover .kadr-kartochki {
  transform: scale(1.04);
}


/* Окно ролика (`components/dayos/okno-rolika.tsx`). В окне лежат два
   слоя: обложка в потоке держит размер клетки, видео стоит поверх неё
   вторым слоем. Пока ролик не пошёл, видео прозрачное — так в окне
   никогда не мелькает чёрный прямоугольник пустого `<video>`.

   Классы кадра компонент вешает и на обложку, и на видео: в карточке
   это `kadr-kartochki`, и правила выше (посадка, наведение) достаются
   обоим слоям сами. Своё окно задаёт только слоистость.

   Без скрипта и без файла ролика видно обложку: класс `rolik-idet`
   ставит сам компонент, и только после события `playing`. */
.okno-rolika {
  display: block;
  height: 100%;
  position: relative;
  width: 100%;
}

.okno-rolika .okno-oblozhka {
  display: block;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
  width: 100%;
}

.okno-rolika .okno-video {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  opacity: 0;
  position: absolute;
  transition: opacity 0.3s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  width: 100%;
}

.okno-rolika.rolik-idet .okno-video {
  opacity: 1;
}

.okno-rolika.rolik-idet .okno-oblozhka {
  opacity: 0;
}

/* В кейсах на главной у кадра своя посадка (`.kejs-kadr img` выше),
   классов карточки там нет — видео равняется по ней отдельно. */
.kejs-kadr .okno-video {
  object-position: center top;
}

.kejs:hover .kejs-kadr .okno-video {
  transform: scale(1.03);
}

/* Человек попросил не двигать — остаётся обложка, ролик не грузится:
   наблюдатель в этом случае не ставится вовсе. */
@media (prefers-reduced-motion: reduce) {
  .okno-rolika .okno-video {
    display: none;
  }

  .okno-rolika.rolik-idet .okno-oblozhka {
    opacity: 1;
  }
}