/*
 * Пространственный слой StillTech
 * ────────────────────────────────
 * Параллакс, 3D-карусель, появление по прокрутке.
 *
 * Всё на нативном CSS: animation-timeline: scroll() и view().
 * Проверено в Chrome 145 — поддержка полная, JavaScript не нужен.
 * Браузеры без поддержки просто показывают статику: анимации
 * не применяются, вёрстка остаётся целой.
 */

/* ═════════════════════════════════════════════════════════════
   1. ПАРАЛЛАКС ГЕРОЯ
   Фон уходит медленнее текста — глубина без скриптов.
   ═════════════════════════════════════════════════════════════ */

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {

    .st-hero .wp-block-cover__image-background {
      animation: st-hero-drift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100svh;
      will-change: transform;
    }

    @keyframes st-hero-drift {
      /* Фото сдвигается вниз и слегка приближается: кажется,
         что камера отъезжает вглубь ангара */
      to {
        transform: translate3d(0, 14%, 0) scale(1.08);
      }
    }

    /* Текст уходит быстрее фона и растворяется */
    .st-hero .wp-block-cover__inner-container {
      animation: st-hero-lift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 72svh;
      will-change: transform, opacity;
    }

    @keyframes st-hero-lift {
      to {
        transform: translate3d(0, -70px, 0);
        opacity: 0;
      }
    }
  }
}

/* ═════════════════════════════════════════════════════════════
   2. ПОЯВЛЕНИЕ СЕКЦИЙ ПРИ ВХОДЕ В КАДР
   view() отслеживает видимость самого элемента.
   ═════════════════════════════════════════════════════════════ */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    .st-reveal > * {
      animation: st-rise linear both;
      animation-timeline: view();
      /* Начинаем, когда элемент показался на 15% снизу,
         заканчиваем на 40% высоты окна */
      animation-range: entry 8% cover 32%;
    }

    @keyframes st-rise {
      from {
        opacity: 0;
        transform: translate3d(0, 34px, 0);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    /* Карточки каталога всплывают со сдвигом друг за другом */
    .st-card {
      animation: st-card-in linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 28%;
    }

    @keyframes st-card-in {
      from {
        opacity: 0;
        transform: translate3d(0, 42px, 0) scale(0.97);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    /* Цифры доверия набегают по одной */
    .st-facts > * {
      animation: st-fact-in linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 34%;
    }

    @keyframes st-fact-in {
      from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }
  }
}

/* ═════════════════════════════════════════════════════════════
   3. КАРУСЕЛЬ КАТЕГОРИЙ С 3D
   Карточка в центре разворачивается к зрителю, соседние —
   отклонены и притушены. Листается пальцем и колесом.
   ═════════════════════════════════════════════════════════════ */

.st-carousel {
  position: relative;
  margin-inline: calc(-1 * var(--wp--style--root--padding-left, 1.5rem));
  padding-inline: var(--wp--style--root--padding-left, 1.5rem);
}

.st-carousel__track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--wp--style--root--padding-left, 1.5rem);
  padding-block: 2.5rem;
  /* Пространство для 3D-поворотов */
  perspective: 1400px;
  perspective-origin: 50% 50%;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.st-carousel__track::-webkit-scrollbar {
  display: none;
}

.st-carousel__item {
  flex: 0 0 clamp(260px, 30vw, 400px);
  scroll-snap-align: center;
  transform-style: preserve-3d;
  /* Рамка плотнее обычной: на белом фоне и под 3D-поворотом
     стандартная #E4E7EB растворяется */
  border: 1px solid var(--st-border);
  border-radius: 2px;
  background: var(--st-bg);
  overflow: hidden;
  /* Карточка — ссылка, поэтому гасим наследуемое подчёркивание */
  text-decoration: none;
  box-shadow: 0 14px 34px -20px rgba(0, 0, 0, 0.4);
  transition: border-color var(--st-transition),
              box-shadow 280ms ease;
}

.st-carousel__item,
.st-carousel__item * {
  text-decoration: none !important;
}

.st-carousel__item:hover {
  border-color: var(--st-accent);
  box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.5);
}

.st-carousel__item:focus-visible {
  outline: 2px solid var(--st-accent);
  outline-offset: 3px;
}

.st-carousel__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.st-carousel__body {
  padding: 1.25rem 1.25rem 1.5rem;
}

.st-carousel__title {
  margin: 0 0 0.375rem;
  font-family: var(--wp--preset--font-family--body);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--st-fg);
}

.st-carousel__spec {
  margin: 0 0 0.5rem;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.8125rem;
  color: var(--st-accent-text);
}

.st-carousel__note {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--st-muted);
  max-width: none;
}

/* 3D-разворот, привязанный к положению карточки в полосе */
@supports (animation-timeline: view(inline)) {
  @media (prefers-reduced-motion: no-preference) {

    .st-carousel__item {
      animation: st-tilt linear both;
      animation-timeline: view(inline);
      animation-range: entry 0% exit 100%;
      will-change: transform, opacity;
    }

    @keyframes st-tilt {
      /* Слева: отклонена от зрителя и утоплена */
      from {
        transform: perspective(1400px) rotateY(22deg) translateZ(-110px) scale(0.9);
        opacity: 0.45;
      }
      /* В центре: развёрнута лицом, вынесена вперёд */
      50% {
        transform: perspective(1400px) rotateY(0deg) translateZ(0) scale(1);
        opacity: 1;
      }
      /* Справа: зеркально левой */
      to {
        transform: perspective(1400px) rotateY(-22deg) translateZ(-110px) scale(0.9);
        opacity: 0.45;
      }
    }
  }
}

/* Кнопки листания */
.st-carousel__nav {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

.st-carousel__btn {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--st-rule);
  border-radius: 2px;
  background: transparent;
  color: var(--st-fg);
  cursor: pointer;
  transition: border-color var(--st-transition), color var(--st-transition);
}

.st-carousel__btn:hover {
  border-color: var(--st-accent);
  color: var(--st-accent);
}

.st-carousel__btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ═════════════════════════════════════════════════════════════
   4. ГЛУБИНА У КАРТОЧЕК КАТАЛОГА
   Лёгкий наклон вслед за курсором — без скриптов, на :hover.
   ═════════════════════════════════════════════════════════════ */

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .st-card {
    transform-style: preserve-3d;
    transition: transform 320ms cubic-bezier(0.2, 0, 0.2, 1),
                border-color var(--st-transition),
                box-shadow 320ms ease;
  }

  .st-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.55);
  }
}

/* ═════════════════════════════════════════════════════════════
   5. ПАРАЛЛАКС В СЕКЦИЯХ С ФОНОМ
   ═════════════════════════════════════════════════════════════ */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .st-parallax-bg {
      animation: st-bg-drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      will-change: transform;
    }

    @keyframes st-bg-drift {
      from { transform: translate3d(0, -6%, 0) scale(1.12); }
      to   { transform: translate3d(0,  6%, 0) scale(1.12); }
    }
  }
}

/* ═════════════════════════════════════════════════════════════
   ДОСТУПНОСТЬ
   Всё пространственное отключается по системной настройке.
   ═════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .st-hero .wp-block-cover__image-background,
  .st-hero .wp-block-cover__inner-container,
  .st-reveal > *,
  .st-card,
  .st-facts > *,
  .st-carousel__item,
  .st-parallax-bg {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}