/* ==========================================================================
   HERO TRAIL — интерактивный «поток контента» в первом экране
   Состояние покоя: авто-лента баннеров (вверх/вниз).
   На hover: GSAP-трейл — креативы разлетаются за курсором.
   Контейнер: правая карточка hero (.hero__art). Текст/CTA не задеты.
   ========================================================================== */

/* Карточка-рамка получает фиксированную пропорцию (видео больше нет) */
.hero__art--trail {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1.08;
  cursor: crosshair;
}

/* Сцена — клипующий вьюпорт внутри плавающей рамки.
   (Рамка .hero__art имеет overflow:visible !important ради чипов,
   поэтому клиппинг берёт на себя .hero__stage.) */
.hero__stage {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  overflow: hidden;
  z-index: 1;
  background:
    radial-gradient(120% 80% at 70% 10%, rgba(255, 45, 139, 0.18), transparent 60%),
    radial-gradient(100% 90% at 20% 100%, rgba(200, 255, 62, 0.08), transparent 55%),
    #0A0912;
}

/* --- Авто-лента (стена контента) --- */
.hero__wall {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 14px;
  padding: 14px;
  opacity: 0.92;
  transition: opacity 0.5s var(--ease, ease), filter 0.5s var(--ease, ease);
  /* мягкое затухание у верх/низ кромок */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.hero__wall-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  will-change: transform;
}

.hero__wall-col--up   { animation: wallScrollUp   38s linear infinite; }
.hero__wall-col--down { animation: wallScrollDown 38s linear infinite; }

@keyframes wallScrollUp   { from { transform: translateY(0); }       to { transform: translateY(-50%); } }
@keyframes wallScrollDown { from { transform: translateY(-50%); }    to { transform: translateY(0); } }

.hero__wall-card {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}

/* При наведении лента уходит на второй план, трейл становится героем */
.hero__art--trail.is-hovering .hero__wall {
  opacity: 0.42;
  filter: saturate(0.85) brightness(0.85);
}

/* --- Слой трейла (GSAP спавнит сюда) --- */
.hero__trail-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  border-radius: 28px;
}

.hero__trail-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 44%;
  max-width: 190px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 45, 139, 0.12);
  will-change: transform, opacity;
  transform: translate(-50%, -50%);
}

/* --- Подсказка-аффорданс --- */
.hero__trail-hint {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--display, sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(20, 17, 31, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: hintPulse 2.6s ease-in-out infinite;
  transition: opacity 0.4s ease;
}

.hero__art--trail.is-ready .hero__trail-hint { opacity: 1; }
.hero__art--trail.is-hovering .hero__trail-hint { opacity: 0; animation: none; }

@keyframes hintPulse {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-4px); }
}

/* --- Доступность: меньше движения --- */
@media (prefers-reduced-motion: reduce) {
  .hero__wall-col--up,
  .hero__wall-col--down { animation: none; }
  .hero__wall { opacity: 1; }
  .hero__trail-hint { display: none; }
  .hero__art--trail { cursor: default; }
}

/* --- Сенсорные/узкие экраны: трейл не нужен, лента остаётся премиум-стеной --- */
@media (hover: none) {
  .hero__art--trail { cursor: default; }
  .hero__trail-hint { display: none; }
}