/* ==========================================================================
   3D Flip Slider
   ========================================================================== */

/* --------------------------------------------------------------------------
   Scene — видимая область (красная рамка).
   overflow:hidden клипирует всё что выходит за её пределы.
   Во время вращения wrapper bottom half заходит в scene снизу → становится видна.
   ВАЖНО: должна иметь явную высоту (задаётся в Bricks или inline-стилем).
   -------------------------------------------------------------------------- */
.slider__scene {
  position: relative;
  overflow: hidden;
  transform-origin: center bottom;
}

/* --------------------------------------------------------------------------
   Wrapper — вращаемый элемент (цель GSAP rotationZ)
   transform-origin: center bottom → ось вращения у нижнего края
   При rotateZ(180°): top уходит ниже scene, bottom поднимается в scene
   -------------------------------------------------------------------------- */
.slider__wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  will-change: transform;
  transform-origin: center bottom;
}

/* --------------------------------------------------------------------------
   Половины:
   slider__half--top    — занимает Y 0-100% враппера   (в scene, видима)
   slider__half--bottom — занимает Y 100-200% враппера (под scene, скрыта)
   -------------------------------------------------------------------------- */
.slider__half--top,
.slider__half--bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  overflow: hidden;
  display: grid;
  align-items: end;
}

.slider__half--top {
  top: 0;
  /* видима: внутри scene */
}

.slider__half--bottom {
  top: 100%;
  /* ниже scene, виден декоративно снизу */
  transform: rotateZ(180deg);
  /* перевёрнут: при вращении wrapper +180° даёт net 0° */
}

/* --------------------------------------------------------------------------
   Слайды внутри каждой половины
   -------------------------------------------------------------------------- */
.slide {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 10;
  width: 100%;
  height: 100%;
  min-height: 0;        /* запрещает grid-item расти выше трека */
  overflow: hidden;     /* клипируем содержимое внутри слайда */
  visibility: hidden;
  pointer-events: none; /* скрытые слайды не перехватывают клики */
  transition: none;
}

/* Единственный видимый слайд в каждой половине */
.slide.is-active {
  visibility: visible;
  pointer-events: auto;
}

/* ==========================================================================
   Text Slider
   ========================================================================== */

/* --------------------------------------------------------------------------
   Контейнер текстового слайдера.
   Позиционирование и размеры задаются в Bricks; здесь только логика.
   -------------------------------------------------------------------------- */
.text-slider {
  position: relative;
}

/* --------------------------------------------------------------------------
   Слайды текстового слайдера.
   Все слайды накладываются друг на друга через position: absolute.
   Виден только тот, у которого is-active.
   -------------------------------------------------------------------------- */
.text-slide {
  position: absolute;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.text-slide.is-active {
  visibility: visible;
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Клиппирующая обёртка строки (добавляется JS через SplitText).
   overflow:hidden обеспечивает эффект "появления через щель".
   -------------------------------------------------------------------------- */
.line-wrap {
  display: block;
  overflow: hidden;
  margin-bottom: 0.25em; /* расстояние между строками — меняй под дизайн */
}

.line-wrap:last-child {
  margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   Навигация
   -------------------------------------------------------------------------- */
.slider__controls {
  position: relative;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.slider__prev,
.slider__next {
  cursor: pointer;
  transition: none;
}

.slider__prev:disabled,
.slider__next:disabled,
.slider__prev.is-disabled,
.slider__next.is-disabled {
  pointer-events: none;
  opacity: 0.4;
}