/* ==========================================================================
   ScrollSplitCard — перенос компонента componentry.dev на чистый CSS/JS.
   Оригинал: React + Framer Motion + Tailwind. Здесь классы Tailwind
   развёрнуты в обычный CSS, значения те же.

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

.ssc {
  /* высоту ставит JS: она и есть дорожка прокрутки */
  position: relative;
  width: 100%;
}

.ssc__sticky {
  /* липкий экран, внутри которого всё и происходит */
  perspective: 1200px;
  justify-content: center;
  align-items: center;
  height: 100vh;
  /* поля по бокам живут здесь, а не на .ssc__cards: у той коробки
     задана пропорция кадра, и внутренние отступы её бы сбивали */
  padding: 0 16px;
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}

/* подписи в начале и в конце дорожки */
.ssc__start,
.ssc__end {
  text-align: center;
  color: var(--light-grey, #999);
  font-family: "Open Sans", sans-serif;
  position: absolute;
  left: 20px;
  right: 20px;
}

.ssc__start {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 13px;
  font-weight: 500;
  top: 20%;
}

.ssc__end {
  color: #010c64;
  letter-spacing: -0.5px;
  font-size: 30px;
  font-weight: 300;
  bottom: 20%;
}

/* --- сами панели --------------------------------------------------------- */
/* Пропорцию ставит JS из опции ratio — и в aspect-ratio, и в переменную,
   чтобы по ней же ограничить ширину. Без ограничения на низком экране
   блок перерос бы липкую область и обрезался по overflow. */
.ssc__cards {
  --ssc-ratio: 2.2857;

  transform-style: preserve-3d;
  width: 100%;
  max-width: min(1200px, calc((100vh - 180px) * var(--ssc-ratio)));
  display: flex;
  position: relative;
}

.ssc__slot {
  transform-style: preserve-3d;
  flex: 1;
  height: 100%;
  position: relative;
}

.ssc__face {
  backface-visibility: hidden;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* лицевая сторона — своя треть общей картинки. Она втрое шире панели
   и сдвинута влево на свой номер, поэтому три панели вместе читаются
   как один непрерывный кадр. */
.ssc__face--front {
  z-index: 2;
}

.ssc__shot {
  background-position: 50%;
  background-size: 100% 100%;
  width: 300%;
  height: 100%;
  position: absolute;
  inset: 0 auto 0 0;
}

/* оборот — карточка с текстом. Пока панель не перевернулась, она смотрит
   от зрителя и не видна благодаря backface-visibility. */
.ssc__face--back {
  z-index: 1;
  border: 1px solid #ffffff0d;
  flex-direction: column;
  justify-content: flex-end;
  padding: 38px;
  display: flex;
  transform: rotateY(180deg);
}

/* зерно поверх заливки: в оригинале сюда грузилась картинка с чужого
   домена — здесь тот же эффект даёт инлайновый SVG, без внешнего запроса */
.ssc__grain {
  mix-blend-mode: overlay;
  opacity: 0.2;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  position: absolute;
  inset: 0;
}

.ssc__title {
  z-index: 10;
  letter-spacing: -0.5px;
  margin: 0 0 12px;
  font-family: "Open Sans", sans-serif;
  font-size: 27px;
  font-weight: 600;
  line-height: 34px;
  position: relative;
}

.ssc__text {
  z-index: 10;
  opacity: 0.85;
  margin: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 27px;
  position: relative;
}

/* --- запасной режим ------------------------------------------------------
   Три панели рядом требуют ширины: на телефоне каждая вышла бы уже 120px,
   и текст в ней не прочитать. Плюс отдельная история — отключённые
   анимации. В обоих случаях показываем те же карточки обычным столбиком,
   без прокрутки и без 3D. Флаг ставит JS, он же перестаёт считать
   прогресс, чтобы инлайновые стили не спорили с этими правилами. */
.ssc.is-static {
  height: auto !important;
}

.ssc.is-static .ssc__sticky {
  perspective: none;
  height: auto;
  padding: 0;
  position: static;
  overflow: visible;
}

.ssc.is-static .ssc__start,
.ssc.is-static .ssc__end,
.ssc.is-static .ssc__face--front {
  display: none;
}

.ssc.is-static .ssc__cards {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  transform-style: flat;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* пропорцию кадра JS ставит инлайном, а столбик растёт
     по содержимому — здесь она мешает */
  aspect-ratio: auto !important;
  height: auto !important;
  max-width: 1100px;
  padding: 0 40px;
  display: grid;
  transform: none !important;
}

/* Ячейки сетки тянутся до общей высоты, а карточка внутри — нет: без
   flex она была бы ростом со свой текст, и три блока обрывались бы
   на разной высоте. */
.ssc.is-static .ssc__slot {
  height: auto;
  display: flex;
  transform: none !important;
}

.ssc.is-static .ssc__face--back {
  backface-visibility: visible;
  border-radius: 24px !important;
  /* в 3D-режиме текст прижат к низу панели, в столбике так остаётся
     дыра под заголовком — здесь равняем по верху */
  justify-content: flex-start;
  flex: 1;
  position: static;
  transform: none;
  box-shadow: none !important;
}

@media screen and (max-width: 767px) {
  .ssc.is-static .ssc__cards {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 20px;
  }

  .ssc.is-static .ssc__face--back {
    padding: 24px;
  }
}