/* ============================================================
   «Почему A³» — куб-переворот при скролле (превью)
   Секция растянута на N экранов, вьюпорт залипает, куб
   поворачивается на 90° за каждый экран. Чистый CSS 3D.
   Десктоп + fine pointer; иначе — прежний список (fallback).
   ============================================================ */

.why-cube-sec { padding-block: 0; position: relative; }

/* по умолчанию (мобильные / reduced motion) — куб скрыт, список виден */
.why-sticky { display: none; }
.why-fallback { padding-block: var(--sec-y); }

@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  .why-cube-sec.cube-on { height: calc(var(--why-stops, 5) * 100vh); }
  .why-cube-sec.cube-on .why-fallback { display: none; }
  .why-cube-sec.cube-on .why-sticky {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background:
      radial-gradient(56vw 60vh at 14% 18%, rgba(43, 78, 234, 0.09), transparent 70%),
      radial-gradient(60vw 70vh at 88% 82%, rgba(29, 63, 191, 0.12), transparent 70%),
      radial-gradient(34vw 40vh at 78% 12%, rgba(125, 150, 255, 0.1), transparent 70%),
      linear-gradient(180deg, #ffffff 0%, #eef3ff 55%, #e7eeff 100%);
  }
  /* лёгкая сетка-миллиметровка поверх свечений */
  .why-cube-sec.cube-on .why-sticky::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      repeating-linear-gradient(0deg, rgba(29, 63, 191, 0.045) 0, rgba(29, 63, 191, 0.045) 1px, transparent 1px, transparent 56px),
      repeating-linear-gradient(90deg, rgba(29, 63, 191, 0.045) 0, rgba(29, 63, 191, 0.045) 1px, transparent 1px, transparent 56px);
    -webkit-mask-image: radial-gradient(75% 75% at 50% 48%, #000 35%, transparent 100%);
    mask-image: radial-gradient(75% 75% at 50% 48%, #000 35%, transparent 100%);
  }
}

/* — шапка секции + счётчик — */
.why-cube-head {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-top: clamp(48px, 7vh, 84px);
}
.why-cube-head .sec-head { margin-bottom: 0; }
.why-cube-head { position: relative; z-index: 2; }

/* — сцена — */
.why-scene {
  /* ширина/высота грани; глубина куба = ширине */
  --cw: min(40vw, 480px);
  --chh: calc(var(--cw) * 0.78);
  flex: 1;
  position: relative;
  display: grid;
  place-items: center;
  perspective: 1400px;
  perspective-origin: 50% 42%;
}

.why-cube {
  width: var(--cw);
  height: var(--chh);
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(90deg);
}

.why-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 18px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0.07) 1px, transparent 1px, transparent 44px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0.07) 1px, transparent 1px, transparent 44px),
    linear-gradient(160deg, #2b4eea, var(--blue) 55%, color-mix(in oklab, var(--blue), black 22%));
  color: #fff;
  padding: clamp(24px, 3vw, 36px);
  overflow: hidden;
}

/* крышки (верх/низ) — квадраты со стороной --cw, без контента */
.why-face.cap {
  inset: auto 0;
  top: calc(50% - var(--cw) / 2);
  height: var(--cw);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 44px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 44px),
    color-mix(in oklab, var(--blue), black 32%);
}

/* интро на верхней крышке: логотип + подсказка */
.why-cap-intro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.75);
}
/* интро-крышка: белая, логотип почти на всю грань */
.why-face.cap.cap-intro {
  background:
    radial-gradient(70% 70% at 50% 42%, rgba(43, 78, 234, 0.07), transparent 75%),
    linear-gradient(180deg, #ffffff, #f2f5ff);
  color: var(--blue);
}
.why-cap-intro img {
  width: 68%;
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(29, 63, 191, 0.25));
}
.why-cap-intro svg { opacity: 0.7; }
@media (prefers-reduced-motion: no-preference) {
  .why-cap-intro svg { animation: whyHintBob 1.6s ease-in-out infinite; }
}
@keyframes whyHintBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}

/* контент грани: SVG-сцена на всю грань */
.why-face-art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
/* изометрические SVG-сцены */
.why-face-art > svg {
  width: min(82%, 380px);
  height: auto;
  filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.3));
}
.why-face .why-icon { color: #fff; padding: 0; }
.why-face .why-icon svg {
  width: clamp(96px, 11vw, 150px);
  height: clamp(96px, 11vw, 150px);
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.25));
}
/* иконки на гранях видны сразу — отменяем «дорисовку штрихом» списка */
.why-face .why-icon :is(path, circle, rect)[pathLength] {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}
.why-face .why-icon [fill="currentColor"] { opacity: 1; }

/* — подписи по бокам от куба — */
.why-caption {
  position: absolute;
  top: 50%;
  width: min(23vw, 330px);
  /* воздух над заголовком: контурная цифра остаётся фоном сверху,
     а не под текстом (раньше это место занимала плашка «Причина») */
  padding-top: clamp(44px, 4.5vw, 58px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s;
}
.why-caption.cap-left {
  left: max(24px, calc(50% - var(--cw) / 2 - min(23vw, 330px) - clamp(32px, 4vw, 72px)));
  transform: translateY(-50%) translateX(-24px);
}
.why-caption.cap-right {
  right: max(24px, calc(50% - var(--cw) / 2 - min(23vw, 330px) - clamp(32px, 4vw, 72px)));
  transform: translateY(-50%) translateX(24px);
  text-align: left;
}
.why-caption.on {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}
/* огромный контурный номер позади текста */
.why-caption::before {
  content: attr(data-num);
  position: absolute;
  top: -0.62em;
  left: -0.08em;
  z-index: -1;
  font-size: clamp(96px, 10vw, 150px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--blue) 22%, transparent);
  text-stroke: 2px color-mix(in srgb, var(--blue) 22%, transparent);
  user-select: none;
}
.why-caption.cap-right::before { left: auto; right: -0.08em; }

.why-caption h3 {
  margin: 0 0 12px;
  font-size: clamp(28px, 2.8vw, 42px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
  background: linear-gradient(115deg, var(--ink) 35%, var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.why-caption p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.6;
  text-wrap: pretty;
  border-left: 3px solid var(--blue);
  padding-left: 14px;
}
/* грань с изображением: картинка + лёгкая синяя вуаль, иконка прячется */
.why-face-pic {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.why-face-pic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(29, 63, 191, 0.18), rgba(10, 18, 52, 0.42));
}
.why-face.has-pic .why-face-art { display: none; }
.why-face.has-pic .why-cap-intro { display: none; }

/* — точки прогресса — */
.why-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding-bottom: clamp(28px, 5vh, 52px);
}
.why-dots i {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--line);
  transition: background 0.3s, transform 0.3s;
}
.why-dots i.on { background: var(--blue); transform: scale(1.25); }