/**
 * Визуальное усиление лендинга «Инфодисплей».
 * Палитра НЕ меняется — используются те же фирменные petrol / orange / ice,
 * что и в исходной сборке. Только движение, глубина и мелкие правки вёрстки.
 */

/* ==========================================================================
   1. Scroll-reveal
   В исходной сборке всё появлялось сразу, без входной анимации.
   ========================================================================== */

.geo-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.geo-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   2. Инженерная сетка фоном в hero — лёгкая, чтобы не спорить с фото
   ========================================================================== */

.hero {
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: linear-gradient(rgba(10, 125, 134, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 125, 134, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 35%, transparent 78%);
}

.hero > * {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   3. Свечение за фотографией в hero, реагирующее на курсор
   Координаты подставляет wow.js через --geo-gx / --geo-gy.
   ========================================================================== */

.hero__visual {
  position: relative;
  isolation: isolate;
}

.hero__visual::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(
    42% 42% at var(--geo-gx, 50%) var(--geo-gy, 42%),
    rgba(10, 125, 134, 0.34) 0%,
    rgba(10, 125, 134, 0.14) 45%,
    transparent 72%
  );
  filter: blur(18px);
  transition: opacity 0.4s ease;
}

/* ==========================================================================
   4. Shine-sweep на основных кнопках при наведении
   ========================================================================== */

.button--primary,
.button--light {
  position: relative;
  overflow: hidden;
}

.button--primary::after,
.button--light::after {
  content: "";
  position: absolute;
  top: 0;
  left: -140%;
  width: 60%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.42) 50%,
    transparent 100%
  );
  transform: skewX(-18deg);
  transition: left 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.button--primary:hover::after,
.button--light:hover::after {
  left: 140%;
}

/* ==========================================================================
   5. Глубина карточек при наведении
   ========================================================================== */

.capability-card,
.industry-card {
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.capability-card:hover,
.industry-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(6, 42, 54, 0.16);
}

/* ==========================================================================
   6. Точечные правки вёрстки по замечаниям
   ========================================================================== */

/* Шапка карточки срочности — flex со space-between и flex-wrap: nowrap.
   Пока значение было коротким («20+ шт.»), подпись и значение помещались
   в одну строку. С формулировкой «Команда с 1991 года» значение стало
   243px при ширине карточки 255px и вылезало за её правый край.
   Разрешаем перенос строки целиком, а само значение оставляем неразрывным —
   так оно уходит на свою строку и там уже помещается. */
.urgency-card__top {
  flex-wrap: wrap;
}

.urgency-card__top strong {
  white-space: nowrap;
}

/* Блок «Быстрый путь к поставке»: надзаголовок и H2 стояли в двух
   колонках грида (0.72fr / 1.28fr), из-за чего заголовок выглядел
   «съехавшим» далеко вправо. Ставим друг под другом по левому краю —
   порядок в DOM уже правильный, переключаем только grid → block. */
.fast-order__heading {
  display: block;
}

.fast-order__heading .eyebrow--light,
.eyebrow--light {
  display: block;
  margin-bottom: 18px;
}

/* Разделитель между ячейками отсчёта (метки «часов/минут/секунд» убраны). */
.countdown__sep {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  opacity: 0.55;
}

/* ==========================================================================
   7. Уважение к системной настройке «уменьшить движение»
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .geo-reveal,
  .capability-card,
  .industry-card {
    transition: none;
  }

  .geo-reveal {
    opacity: 1;
    transform: none;
  }

  .button--primary::after,
  .button--light::after {
    display: none;
  }

  .capability-card:hover,
  .industry-card:hover {
    transform: none;
  }
}

/* ==========================================================================
   Отсчёт: цифры по центру своих ячеек.

   У ячейки задана фиксированная ширина (48 px, в компактном виде 24 px),
   чтобы строка не дёргалась при смене секунды. Но выравнивание оставалось
   по левому краю, и число занимало не всю ячейку: при ширине 48 текст
   занимал 28, слева зазор 0, справа 20. Из-за этого числа жались влево,
   а двоеточия стояли на разном расстоянии — со стороны выглядело так,
   будто время съехало.

   Одно правило чинит все три отсчёта: в карточке, в нижней панели и в
   компактной строке.
   ========================================================================== */

.countdown__cell strong {
  text-align: center;
}

/* Сам блок отсчёта тоже по центру — и в карточке «Прямой заказ у
   производителя», и в нижней панели. Компактный вариант не трогаем: он стоит
   в строку рядом с надписью «Завод-изготовитель в Твери», занимает ровно свою
   ширину, и центрировать там нечего. */
.countdown:not(.countdown--compact) {
  justify-content: center;
}

/* Подпись агентства-разработчика: отдельная строка под сеткой контактов,
   тем же приглушённым тоном, что и остальной мелкий текст подвала. */
.geo-footer-credit {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.85rem;
  opacity: 0.6;
}

.geo-footer-credit a {
  color: #7cc6e8;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}