/* ------------------------------------------------------------------
   Слой анимации, общий для трёх макетов.
   Только transform / opacity / clip-path — они не вызывают пересчёт
   раскладки и считаются на видеокарте.
   ------------------------------------------------------------------ */
:root{
  --m-ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --m-ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);
}

/* плавная прокрутка по якорям — отключается при «уменьшить движение» */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}

/* ---------- Отступ под липкую шапку при переходе по якорю ----------
   Задаём в CSS, а не из скрипта: браузер начинает прокрутку к якорю
   раньше, чем отработает скрипт, и заголовок раздела уезжает под шапку.
   Точное значение скрипт потом уточняет по реальной высоте шапки. */
:root{--m-anchor:120px}
@media (max-width:1060px){:root{--m-anchor:165px}}
@media (max-width:640px){:root{--m-anchor:200px}}
[id]{scroll-margin-top:var(--m-anchor)}

/* ---------- 1. Появление при прокрутке ---------- */
.m-rv{opacity:0;transform:translateY(16px);
  transition:opacity 520ms var(--m-ease-out),transform 520ms var(--m-ease-out);
  transition-delay:var(--m-d,0ms);will-change:opacity,transform}
.m-rv.m-in{opacity:1;transform:none}

/* заголовки разделов — проявляются шторкой, как в рекомендации к clip-path */
.m-rv-clip{clip-path:inset(0 0 100% 0);
  transition:clip-path 620ms var(--m-ease-in-out);
  transition-delay:var(--m-d,0ms)}
.m-rv-clip.m-in{clip-path:inset(0 0 0 0)}

/* карточки-плитки приезжают чуть заметнее */
.m-rv-tile{opacity:0;transform:translateY(22px) scale(.985);
  transition:opacity 560ms var(--m-ease-out),transform 560ms var(--m-ease-out);
  transition-delay:var(--m-d,0ms);will-change:opacity,transform}
.m-rv-tile.m-in{opacity:1;transform:none}

/* снимаем will-change после проигрывания, чтобы не держать слой в памяти */
.m-done{will-change:auto}

/* ---------- 2. Вход первого экрана ---------- */
.m-hero-el{opacity:0;transform:translateY(18px);
  animation:m-hero-in 620ms var(--m-ease-out) forwards;
  animation-delay:var(--m-d,0ms)}
@keyframes m-hero-in{to{opacity:1;transform:none}}

/* фон первого экрана медленно «выдыхает» после загрузки */
.m-hero-bg img{animation:m-hero-bg 1400ms var(--m-ease-out) both}
@keyframes m-hero-bg{from{transform:scale(1.12)}to{transform:scale(1.06)}}

/* ---------- 3. Шапка при прокрутке ---------- */
header{transition:background-color 220ms ease,box-shadow 220ms ease}
header .brand .mark{transition:transform 260ms var(--m-ease-out);transform-origin:left center}
header.m-stuck{box-shadow:0 6px 24px -12px rgba(7,43,55,.45)}
header.m-stuck .brand .mark{transform:scale(.86)}

/* ---------- 4. Пункты меню ---------- */
@media (hover: hover) and (pointer: fine){
  header nav a{position:relative}
  header nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;
    background:currentColor;opacity:.55;transform:scaleX(0);transform-origin:left center;
    transition:transform 180ms var(--m-ease-out)}
  header nav a:hover::after{transform:scaleX(1)}
  header nav a.on::after,header nav a.active::after{display:none}
}

/* ---------- 5. Нажатие ---------- */
.btn,.go,.review a{transition:transform 160ms var(--m-ease-out),
  background-color 180ms ease,border-color 180ms ease,color 180ms ease}
.btn:active,.review a:active{transform:scale(.97)}

/* ---------- 6. Стрелки «подробнее» ---------- */
@media (hover: hover) and (pointer: fine){
  .m-arrow{display:inline-block;transition:transform 200ms var(--m-ease-out)}
  a:hover > .m-arrow,a:hover .m-arrow{transform:translateX(5px)}
}

/* ---------- 7. Счётчики ---------- */
.m-count{font-variant-numeric:tabular-nums}

/* ---------- Уменьшенное движение ----------
   Не «ноль анимации», а мягче: оставляем проявление, убираем перемещение. */
@media (prefers-reduced-motion: reduce){
  .m-rv,.m-rv-tile{transform:none;transition:opacity 260ms ease;transition-delay:0ms}
  .m-rv-clip{clip-path:none;opacity:0;transition:opacity 260ms ease;transition-delay:0ms}
  .m-rv-clip.m-in{opacity:1}
  .m-hero-el{transform:none;animation:m-fade 300ms ease forwards;animation-delay:0ms}
  .m-hero-bg img{animation:none}
  @keyframes m-fade{to{opacity:1}}
  header.m-stuck .brand .mark{transform:none}
  .btn:active,.review a:active{transform:none}
}

/* ---------- Сенсорные экраны ----------
   На тапе браузер выдаёт ложный :hover — движение на нём выключаем. */
@media (hover: none), (pointer: coarse){
  .card:hover,.doc:hover,.tile:hover,.row-p:hover,.in-it:hover,.ct:hover,
  .band .it:hover,.info .i:hover,.v:hover,.btn:hover,.b-fill:hover,
  .btn-primary:hover,.prodlist a:hover{transform:none}
  .tile:hover img{transform:none}
}

/* ==================================================================
   Второй слой анимации
   ================================================================== */

/* ---------- 8. Заголовок первого экрана по словам ---------- */
.m-w{display:inline-block;overflow:hidden;vertical-align:bottom}
.m-w > span{display:inline-block;transform:translateY(110%);
  animation:m-word 700ms var(--m-ease-out) forwards;animation-delay:var(--m-d,0ms)}
@keyframes m-word{to{transform:none}}

/* ---------- 9. Параллакс фона первого экрана ----------
   overflow обязателен: сдвинутый слой иначе вылезает за пределы
   первого экрана и закрывает начало следующего раздела. */
.hero{overflow:hidden}
.hero .bg{will-change:transform}

/* ---------- 10. Шапка уезжает при прокрутке вниз ---------- */
header.m-hide{transform:translateY(-100%)}
header.m-sticky{transition:transform 280ms var(--m-ease-out),
  background-color 220ms ease,box-shadow 220ms ease}

/* ---------- 11. Полоса прочитанного ---------- */
.m-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;
  background:linear-gradient(90deg,var(--teal-700,#1b6c8c),var(--cyan,#00a0c4));
  transform:scaleX(0);transform-origin:left center;pointer-events:none}

/* ---------- 12. Активный пункт меню ----------
   Цвет не трогаем: шапка в вариантах и светлая, и тёмная —
   любой фиксированный цвет на одной из них станет невидимым.
   Показываем только подчёркивание, оно наследует текущий цвет текста. */
@media (hover: hover) and (pointer: fine){
  header nav a.m-active::after{transform:scaleX(1);opacity:.8}
}

/* ---------- 13. Кнопка «наверх» ---------- */
.m-top{position:fixed;right:20px;bottom:74px;z-index:98;width:46px;height:46px;border:0;
  border-radius:50%;background:var(--teal-700,#1b6c8c);color:#fff;cursor:pointer;
  display:grid;place-items:center;font-size:19px;line-height:1;
  box-shadow:0 10px 26px -12px rgba(7,43,55,.7);
  opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;
  transition:opacity 220ms var(--m-ease-out),transform 220ms var(--m-ease-out),
             background-color 180ms ease}
.m-top.m-on{opacity:1;transform:none;pointer-events:auto}
.m-top:hover{background:var(--teal-900,#0d3f4e)}
.m-top:active{transform:scale(.94)}

/* ---------- 14. Свет за курсором на карточках ---------- */
@media (hover: hover) and (pointer: fine){
  .card,.doc,.in-it,.ct,.office{position:relative;isolation:isolate}
  .card::after,.doc::after,.in-it::after,.ct::after,.office::after{
    content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
    opacity:0;transition:opacity 260ms ease;
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
               rgba(0,160,196,.10),transparent 70%)}
  .card:hover::after,.doc:hover::after,.in-it:hover::after,
  .ct:hover::after,.office:hover::after{opacity:1}

  /* иконки разделов подрастают */
  .doc .ic,.in-it .ic{transition:transform 220ms var(--m-ease-out)}
  .doc:hover .ic,.in-it:hover .ic{transform:scale(1.09)}
}

/* ---------- 15. Фото проявляется с наездом ---------- */
.m-zoom{overflow:hidden}
.m-zoom > img{transform:scale(1.07);transition:transform 900ms var(--m-ease-out)}
.m-zoom.m-in > img{transform:none}

@media (prefers-reduced-motion: reduce){
  .m-w > span{transform:none;animation:none}
  .hero .bg{transform:none !important}
  header.m-hide{transform:none}
  .m-top{transform:none}
  .m-top.m-on{transform:none}
  .m-zoom > img{transform:none;transition:none}
  .card::after,.doc::after,.in-it::after,.ct::after,.office::after{display:none}
}

/* кнопка «наверх» не должна налезать на переключатель вариантов на узких экранах */
@media (max-width:640px){
  .m-top{bottom:112px;right:14px;width:42px;height:42px}
}

/* ==================================================================
   Мобильная шапка: логотип — бургер — телефон
   ================================================================== */
.m-mob{display:none;margin-left:auto;align-items:center;gap:8px}
.m-call,.m-burger{width:44px;height:44px;border-radius:10px;border:1px solid var(--m-panel-line,rgba(255,255,255,.2));
  background:transparent;color:var(--m-panel-fg,#fff);display:grid;place-items:center;cursor:pointer;padding:0;
  transition:background-color 180ms ease,transform 160ms var(--m-ease-out)}
.m-call svg,.m-burger svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.m-call:active,.m-burger:active{transform:scale(.94)}
.m-burger i{display:block;width:19px;height:2px;background:currentColor;border-radius:2px;position:relative;
  transition:transform 220ms var(--m-ease-out),opacity 160ms ease}
.m-burger i::before,.m-burger i::after{content:"";position:absolute;left:0;width:19px;height:2px;
  background:currentColor;border-radius:2px;transition:transform 220ms var(--m-ease-out)}
.m-burger i::before{top:-6px}
.m-burger i::after{top:6px}
.m-burger[aria-expanded="true"] i{background:transparent}
.m-burger[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
.m-burger[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}

.m-panel{position:absolute;left:0;right:0;top:100%;z-index:40;
  background:var(--m-panel-bg,#072b37);color:var(--m-panel-fg,#fff);
  border-top:1px solid var(--m-panel-line,rgba(255,255,255,.14));
  box-shadow:0 18px 40px -18px rgba(7,43,55,.6);
  opacity:0;transform:translateY(-10px);pointer-events:none;visibility:hidden;
  transition:opacity 200ms var(--m-ease-out),transform 220ms var(--m-ease-out),visibility 0s linear 220ms}
.m-panel.m-open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
.m-panel .m-pn{display:flex;flex-direction:column;padding:8px 20px 14px}
.m-panel .m-pn a{padding:14px 2px;font-size:17px;font-weight:600;color:var(--m-panel-fg,#fff);
  border-bottom:1px solid var(--m-panel-line,rgba(255,255,255,.12))}
.m-panel .m-pn a:last-child{border-bottom:0}
.m-panel .m-pi{padding:16px 20px 20px;border-top:1px solid var(--m-panel-line,rgba(255,255,255,.14));
  display:flex;flex-direction:column;gap:12px;font-size:14.5px}
.m-panel .m-pi a,.m-panel .m-pi span{color:var(--m-panel-fg,#fff);opacity:.78}
.m-panel .m-pi .m-tel{font-size:18px;font-weight:800;opacity:1}
.m-panel .m-lang{display:flex;gap:8px;margin-top:2px}
.m-panel .m-lang a{opacity:1;font-weight:800;padding:7px 14px;border-radius:8px;
  border:1px solid var(--m-panel-line,rgba(255,255,255,.2))}
.m-panel .m-lang a.on{background:var(--teal-700,#1b6c8c);color:#fff;border-color:transparent}

@media (max-width:900px){
  /* !important здесь по делу: в каждом макете свои правила шапки
     с более высокой специфичностью, иначе мобильная раскладка не применится */
  .m-mob{display:flex;flex:0 0 auto}
  header nav{display:none !important}
  .util,.top{display:none !important}
  header .wrap{position:relative;flex-wrap:nowrap !important;gap:12px !important}
  header{position:sticky;top:0;z-index:50}
  /* знак и название ужимаем, подписи убираем — иначе кнопки уезжают за край */
  .brand{min-width:0;flex:1 1 auto;gap:10px !important}
  .brand .mark{width:44px !important;height:44px !important}
  .brand .wordmark{height:26px !important}
  .brand .nm{font-size:15px !important;line-height:1.15;white-space:normal !important}
  .brand .nm span,.brand .nm i,.brand .t span,.brand .nm::after{display:none !important}
  .brand .t{font-size:16px !important}
}