/* ============================================================
   BLOCK «STANDARD MOTORYZACJI» (Figma node 911:1510)
   Слои (z-снизу-вверх): bg-сетка → нижнее свечение → линия →
   бегущая строка → лента → круглая кнопка.
   Десктоп — pixel-perfect к фрейму 1440×848.
   ============================================================ */
.std {
  /* размеры из Figma (переопределяются в media для адаптива) */
  --std-h:           848px;
  --std-font:        72px;     /* Headings/H2 */
  --std-marquee-top: 199px;    /* опущена на 32px (была 167) — не липнет к верху */
  --std-line-top:    370px;
  --std-line-w:      568.586px;
  --std-tape-top:    513.52px;
  --std-tape-h:      58.817px;
  --std-circle:      208px;    /* чуть больше фрейма (188) — перекрывает ленту */
  --std-circle-top:  439px;    /* центр кружка = центр ленты (≈543); = origin zoom-перехода в блок 5 */
  --std-glow-w:      1440.8px;
  --std-glow-h:      278px;    /* свечение прижато к низу, не перекрывает паттерн */
  --std-bg-w:        1440px;   /* новый bgg pattern.svg, viewBox 1440×848 */

  position: relative;
  width: 100%;
  height: var(--std-h);
  background: var(--dark-1000);
  overflow: hidden;
  isolation: isolate;
  /* поднят на 48px вверх; блок услуг (выше) накрывает сверху → фон выровнен */
  margin-top: -48px;
  z-index: 1;
}

/* ── Фон: перспективная сетка ─────────────────────────────── */
.std__bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--std-bg-w);
  height: 100%;            /* svg viewBox 1440×848 = вся секция */
  z-index: 0;
  pointer-events: none;
}

/* ── Нижнее жёлтое свечение + лучи ────────────────────────── */
.std__glow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  /* до 1440 — ширина фрейма (кроп по краям), шире 1440 — тянем на всю ширину */
  width: max(var(--std-glow-w), 100%);
  height: var(--std-glow-h);
  z-index: 1;
  pointer-events: none;
  /* тёмные зоны картинки = #0f0f0f (= фон секции) → при обычном наложении
     сливаются с фоном; НЕ используем screen (он поднимал чёрное до серого) */
  object-fit: cover;        /* при низкой высоте показываем яркий низ, не сплющиваем */
  object-position: bottom;
}

/* ── Тонкая разделительная линия (Light/200) ──────────────── */
.std__line {
  position: absolute;
  top: var(--std-line-top);
  left: 50%;
  transform: translateX(-50%);
  width: var(--std-line-w);
  height: 1px;
  z-index: 2;
  pointer-events: none;
}
/* пунктир как SVG (Line 15, 237:321: stroke-dasharray 8 8) — надёжный рендер */
.std__line svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ── Бегущая строка ───────────────────────────────────────── */
.std__marquee {
  position: absolute;
  top: var(--std-marquee-top);
  left: 0;
  width: 100%;
  height: calc(var(--std-font) * 1.62);   /* вмещает лого (115.67 при 72) */
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 3;
  /* фейд по краям — маска из дизайна (D9D9D9 25–75%) */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
}

.std__track {
  display: flex;
  align-items: center;
  gap: 40px;                 /* gap автолейаута между блоками */
  width: max-content;
  flex: 0 0 auto;
  animation: std-scroll 38s linear infinite;
  will-change: transform;
}

.std__unit {
  display: flex;
  align-items: center;
  gap: 40px;
  flex: 0 0 auto;
}

.std__logo {
  height: calc(var(--std-font) * 1.606);   /* 115.67 при 72 */
  width: auto;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
}

.std__word {
  font-family: var(--ff-display);
  font-weight: 700;
  font-style: italic;
  font-size: var(--std-font);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  /* металлическая заливка: белый сверху → серый снизу */
  background: linear-gradient(180deg, #ffffff 38.834%, #717171 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@keyframes std-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Предупреждающая лента ────────────────────────────────── */
.std__tape {
  position: absolute;
  top: var(--std-tape-top);
  left: 0;
  width: 100%;
  height: var(--std-tape-h);
  z-index: 4;
  background-image: url(../../public/assets/block4/lent.png);
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
}

/* ── Круглая кнопка (фары / авто) ─────────────────────────── */
.std__circle {
  position: absolute;
  top: var(--std-circle-top);
  left: 50%;
  transform: translateX(-50%);
  width: var(--std-circle);
  height: var(--std-circle);
  z-index: 5;
}
.std__circle img {
  width: 100%;
  height: 100%;
  display: block;
  /* кадр кнопки экспортирован с чёрными углами → обрезаем в круг */
  border-radius: 50%;
}

/* ── Адаптив (мобильного фрейма в Figma нет — пропорц. сжатие) ─ */
@media (max-width: 1024px) {
  .std {
    --std-h:           620px;
    --std-font:        52px;
    --std-marquee-top: 118px;
    --std-line-top:    268px;
    --std-line-w:      460px;
    --std-tape-top:    372px;
    --std-circle:      166px;
    --std-circle-top:  318px;
    --std-glow-h:      205px;
  }
}

@media (max-width: 768px) {
  /* мобайл pixel-perfect (Figma 941:4072): py72/gap47, лого-марка 52, dash 313, круг 237 */
  .std {
    --std-h:           560px;
    --std-font:        52px;
    --std-marquee-top: 72px;
    --std-line-top:    203px;
    --std-line-w:      313px;
    --std-tape-top:    340px;
    --std-tape-h:      58.8px;
    --std-circle:      237px;
    --std-circle-top:  251px;
    --std-glow-h:      205px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .std__track { animation: none; }
}