/* ============================================================
   ENHANCE — оформление к enhance.js: волна под первым экраном,
   объёмные карточки, глубина, крупная мобильная версия.

   ВЕРНУТЬ КАК БЫЛО — удалить в index.html две строки:
     <link rel="stylesheet" href="enhance.css?v=1">
     <script src="enhance.js?v=1" defer></script>
   Файлы styles.css и index.html при этом не менялись.
   ============================================================ */

/* ============================================================
   1. ПЕРВЫЙ ЭКРАН — ФИРМЕННЫЙ СИНИЙ + ВОЛНА
   Возвращаем синий hero (белый вариант перекрывал волну), белая
   волна мягко перетекает в светлую секцию ниже.
   ============================================================ */
.hero-white.hero-blue {
  position: relative;
  overflow: hidden;
  color: #f2f7ff;
  background:
    radial-gradient(58% 44% at 50% 14%, rgba(150, 200, 255, 0.22), transparent 62%),
    linear-gradient(180deg, #2f6fd0 0%, #1f56ad 46%, #143f86 100%);
}

/* текст на синем — светлый */
.hero-white.hero-blue .hero-copy h1 {
  color: #ffffff;
  text-shadow: 0 10px 40px rgba(5, 20, 50, 0.35);
}
.hero-white.hero-blue .hero-copy .lead { color: rgba(226, 238, 255, 0.86); }
.hero-white.hero-blue .button-secondary {
  border-color: rgba(255, 255, 255, 0.44);
  color: #ffffff;
}
.hero-white.hero-blue .button-primary {
  background: #ffffff;
  color: #14418a;
  box-shadow: 0 14px 34px rgba(5, 20, 50, 0.28);
}
.hero-white.hero-blue .button-primary:hover { background: #eaf2ff; }

/* лого на синем: версия со светлыми буквами (селектор той же
   специфичности, что и в базовой теме, иначе не перебьёт) */
.poster-3d .poster-image { content: url("logo-3d-dark.png?v=1"); }
.poster-shell::before {
  background: radial-gradient(52% 52% at 50% 50%, rgba(180, 215, 255, 0.28), transparent 70%);
  filter: blur(34px);
}

.hero-white.hero-blue .en-wave,
.en-wave {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -2px;
  z-index: 3;
  height: clamp(70px, 9vw, 130px);
  pointer-events: none;
}

/* сама волна рисуется псевдоэлементами — три слоя с разным ритмом */
/* основная волна — широкая и пологая, «перетекает» в белую секцию */
.hero-white.hero-blue::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 3;
  height: clamp(60px, 7vw, 104px);
  background: #ffffff;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  filter: none;
  opacity: 1;
  inset: auto -22% -4px;
  animation: en-wave-main 12s ease-in-out infinite;
}

/* вторая волна убрана — читалась как посторонняя светлая полоса
   поперёк первого экрана. Остаётся одна чистая волна. */

@keyframes en-wave-main {
  0%, 100% { transform: scaleY(1) translateX(0); }
  50% { transform: scaleY(1.14) translateX(-2%); }
}

/* следующая за hero секция подхватывает белый цвет волны */
#about.section-light { background: #ffffff; }

/* ============================================================
   2. ОБЪЁМ ПО ВСЕМУ САЙТУ
   ============================================================ */
.section {
  perspective: 1400px;
}

.en-3d {
  transform-style: preserve-3d;
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 380ms ease !important;
  will-change: transform;
}

/* блик, следующий за курсором внутри карточки */
.en-3d::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--gx, 50%) var(--gy, 0%), rgba(120, 180, 255, 0.16), transparent 62%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 380ms ease;
}
.en-3d:hover::after { opacity: 1; }

/* содержимое карточки приподнимается над «поверхностью» */
.en-3d h3, .en-3d .trust-logo, .en-3d .supplier-logo, .en-3d span, .en-3d time {
  transform: translateZ(26px);
}
.catalog-card.en-3d:hover h3, .news-card.en-3d:hover h3 { transform: translateZ(44px); }

/* логотип в hero слегка утапливается при прокрутке — усиливает глубину */
.poster-3d {
  --en-scroll: 0;
  transform:
    translate3d(calc(var(--pointer-x, 0) * 14px), calc(var(--pointer-y, 0) * 10px), 0)
    rotateY(calc(var(--pointer-x, 0) * 12deg))
    rotateX(calc(var(--pointer-y, 0) * -7deg))
    scale(calc(1 - var(--en-scroll) * 0.12));
}

/* секции въезжают с лёгким поворотом по оси X */
.mo-in { transform: translateY(30px) rotateX(6deg); }
.mo-in.is-visible { transform: none; }

/* ============================================================
   2a. ШАПКА — раскладка потоком вместо абсолютной
   Логотип, меню и телефон раньше позиционировались абсолютно и на
   промежуточных ширинах наезжали друг на друга. Обычный flex не даёт
   им пересечься физически: меню ужимается, лишнее прячется.
   ============================================================ */
@media (min-width: 981px) {
  .topbar-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 max(16px, calc(50% - 620px));
  }

  .brand {
    position: static;
    transform: none;
    flex: 0 0 auto;
  }

  .nav {
    position: static;
    transform: none;
    flex: 1 1 auto;
    justify-content: center;
    gap: clamp(12px, 1.6vw, 22px);
    min-width: 0;
  }

  .topbar-actions {
    position: static;
    transform: none;
    flex: 0 0 auto;
    gap: 12px;
  }
}

/* ============================================================
   2b. ГЕОГРАФИЯ — единая карточка: текст и карта в одном блоке
   ============================================================ */
.geo-card {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: center;
  gap: 34px;
  padding: 34px;
  border: 1px solid #e4eaf3;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
  box-shadow: 0 18px 44px rgba(16, 38, 76, 0.09);
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 380ms ease;
}

.geo-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 64px rgba(16, 38, 76, 0.15);
}

.geo-card .section-copy,
.geo-text { max-width: none; }

.geo-text h2 { margin-bottom: 0; }
.geo-text .body-copy { margin-top: 14px; }

/* строка городов — акцентом под текстом */
.geo-cities {
  margin: 16px 0 0;
  color: #1d4ed8;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.geo-map {
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #0a0e18;
  line-height: 0;
}

.geo-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.geo-card:hover .geo-map img { transform: scale(1.04); }

@media (max-width: 980px) {
  .geo-card { grid-template-columns: 1fr; gap: 22px; padding: 24px; }
}

/* ============================================================
   3. МОБИЛЬНАЯ ВЕРСИЯ — крупно, удобно, с характером
   ============================================================ */
@media (max-width: 980px) {
  /* ---------- мобильное меню: карточки вместо голого списка ---------- */
  .nav {
    gap: 8px;
    padding: 14px 14px 18px;
    background: linear-gradient(180deg, rgba(14, 22, 44, 0.98), rgba(9, 15, 32, 0.98));
    border-bottom: 1px solid rgba(120, 170, 255, 0.18);
    box-shadow: 0 24px 50px rgba(4, 10, 26, 0.5);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    max-height: calc(100svh - 46px);
    overflow-y: auto;
  }

  .nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    color: #eaf2ff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
  }

  /* стрелка справа — понятно, что пункт кликабельный */
  .nav a::before {
    content: "›";
    order: 2;
    color: rgba(180, 210, 255, 0.6);
    font-size: 20px;
    line-height: 1;
  }

  /* подчёркивание из десктопной версии на мобильном не нужно */
  .nav a::after { display: none; }

  .nav a:active {
    transform: scale(0.98);
    background: rgba(120, 170, 255, 0.18);
    border-color: rgba(120, 170, 255, 0.4);
  }

  .nav a.is-current {
    background: linear-gradient(135deg, rgba(43, 124, 240, 0.32), rgba(29, 78, 216, 0.28));
    border-color: rgba(120, 170, 255, 0.5);
  }

  /* пункты появляются каскадом при открытии меню */
  .nav.is-open a {
    animation: en-nav-in 380ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
  .nav.is-open a:nth-child(1) { animation-delay: 30ms; }
  .nav.is-open a:nth-child(2) { animation-delay: 60ms; }
  .nav.is-open a:nth-child(3) { animation-delay: 90ms; }
  .nav.is-open a:nth-child(4) { animation-delay: 120ms; }
  .nav.is-open a:nth-child(5) { animation-delay: 150ms; }
  .nav.is-open a:nth-child(6) { animation-delay: 180ms; }
  .nav.is-open a:nth-child(7) { animation-delay: 210ms; }

  @keyframes en-nav-in {
    from { opacity: 0; transform: translateX(-14px); }
    to { opacity: 1; transform: none; }
  }

  /* кнопка-бургер превращается в крестик */
  .menu-toggle span {
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
  }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
}

@media (max-width: 720px) {
  /* первый экран: лого крупнее, текст компактнее, волна тоньше */
  .hero-stack { padding-top: 18px; padding-bottom: 46px; gap: 10px; }
  .poster-image { width: min(74%, 290px); }
  .hero-copy h1 { font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; }
  .hero-copy .lead { font-size: 14.5px; }

  .hero-white.hero-blue::before { height: 54px; inset: auto -34% -3px; }
  .hero-white.hero-blue .container::after { display: none; }

  /* секция сразу после волны не должна начинаться с пустого поля */
  #about.section-light { padding-top: 6px; }
  #hero.section { padding-bottom: 26px; }

  /* кнопки в hero — во всю ширину, крупные (удобно пальцем) */
  .hero-copy .actions { display: grid; gap: 10px; width: 100%; }
  .hero-copy .actions .button {
    width: 100%;
    min-height: 52px;
    font-size: 15px;
    border-radius: 14px;
  }

  /* карточки: крупнее радиус, мягче тени, без 3D-наклона */
  .catalog-card, .metric-card, .contact-card, .news-card, .trust-tile, .supplier-card {
    border-radius: 16px !important;
  }
  .en-3d { transform: none !important; }
  .en-3d::after { display: none; }
  .en-3d h3, .en-3d span, .en-3d time { transform: none; }

  /* тап по карточке — заметная отдача */
  .catalog-card:active, .news-card:active, .contact-card:active, .metric-card:active, .cert-card:active {
    transform: scale(0.98) !important;
    transition: transform 120ms ease !important;
  }

  /* нижняя панель действий: позвонить / написать */
  .en-bar {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 120;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px;
    border-radius: 18px;
    background: rgba(12, 22, 44, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 16px 40px rgba(4, 12, 30, 0.4);
    transform: translateY(0);
    transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1), opacity 280ms ease;
  }
  .en-bar.is-hidden { transform: translateY(140%); opacity: 0; }

  .en-bar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
  }
  .en-bar svg { width: 18px; height: 18px; }
  .en-bar-call { background: linear-gradient(135deg, #2b7cf0, #1d4ed8); color: #fff; }
  .en-bar-mail { background: rgba(255, 255, 255, 0.12); color: #eaf2ff; border: 1px solid rgba(255, 255, 255, 0.2); }
  .en-bar a:active { transform: scale(0.97); }

  /* кнопка «наверх» не должна перекрывать панель */
  .mo-top { bottom: 76px; }

  /* чуть больше воздуха между блоками, крупнее заголовки секций */
  .section { padding-top: 44px; padding-bottom: 44px; }
  .section-head h2, .section-copy h2 { font-size: 26px; line-height: 1.15; }

  /* ленты логотипов и сертификатов — крупнее и с плавным затуханием краёв */
  .trust-tile { width: 142px; min-height: 84px; }
  .trust-logo { max-height: 44px; }

  /* нижний отступ страницы, чтобы панель ничего не закрывала */
  .footer { padding-bottom: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-white.hero-blue::before,
  .hero-white.hero-blue .container::after { animation: none; }
  .en-3d { transform: none !important; }
}