/* ============================================================
   Полигон /test. Секция полностью изолирована:
   все классы начинаются с lp-test-.
   ============================================================ */

.lp-test {
  --lp-test-grid: rgba(233, 226, 210, .07);
  --lp-test-line: rgba(233, 226, 210, .14);
  --lp-test-muted: #a79c83;
  background: #14160f;
  color: var(--color-bone-100);
  overflow: clip;
}

/* --- Эксперимент 01: полотно на ветру --------------------- */

.lp-test-wave {
  align-items: center;
  background:
    radial-gradient(circle at 50% 34%, rgba(200, 168, 90, .12), transparent 32rem),
    linear-gradient(var(--lp-test-grid) 1px, transparent 1px) 0 0 / 100% 48px,
    linear-gradient(90deg, var(--lp-test-grid) 1px, transparent 1px) 0 0 / 48px 100%,
    #14160f;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  min-height: 100svh;
  /* Шапка лежит поверх секции (overlayHeader) — сверху её высота плюс отступ */
  padding: calc(var(--sp-9) + 56px) var(--container-pad) var(--sp-8);
  position: relative;
}

/* Виньетка: сетка не должна упираться в края экрана */
.lp-test-wave::after {
  background: radial-gradient(ellipse at center, transparent 42%, rgba(10, 11, 7, .82) 100%);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.lp-test-wave-head {
  max-width: 46rem;
  position: relative;
  text-align: center;
  z-index: 1;
}

.lp-test-kicker {
  color: var(--color-amber-400);
  font-size: .8125rem;
  letter-spacing: .18em;
  margin: 0 0 var(--sp-3);
  text-transform: uppercase;
}

.lp-test-title {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.02;
  margin: 0 0 var(--sp-4);
}

.lp-test-lead {
  color: var(--lp-test-muted);
  font-size: 1.0625rem;
  line-height: var(--lh-base);
  margin: 0;
}

/* Площадка эффекта. Внутри либо статичный постер, либо canvas
   поверх него — размеры задаёт сама площадка, не содержимое. */
.lp-test-stage {
  aspect-ratio: 3 / 2;
  max-width: 1100px;
  position: relative;
  touch-action: pan-y;
  width: 100%;
  z-index: 1;
}

.lp-test-canvas {
  display: block;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.lp-test-poster {
  filter: drop-shadow(0 26px 60px rgba(0, 0, 0, .55));
  height: 100%;
  object-fit: contain;
  opacity: 1;
  transition: opacity var(--tr-base);
  width: 100%;
}

/* Шейдер уже рисует постер — статичную копию убираем */
.lp-test-stage.is-live .lp-test-poster {
  opacity: 0;
}

.lp-test-note {
  color: var(--text-faint);
  font-size: .875rem;
  margin: 0;
  position: relative;
  text-align: center;
  z-index: 1;
}

@media (max-width: 900px) {
  .lp-test-wave {
    gap: var(--sp-5);
    min-height: 0;
    padding: calc(var(--sp-8) + 48px) var(--container-pad) var(--sp-7);
  }

  .lp-test-stage {
    aspect-ratio: 4 / 5;
    max-width: 420px;
  }
}

@media (max-width: 420px) {
  .lp-test-stage {
    aspect-ratio: 3 / 4;
  }
}

/* Уменьшение движения: canvas не создаётся, постер остаётся статичным */
@media (prefers-reduced-motion: reduce) {
  .lp-test-poster {
    transition: none;
  }
}