/* =========================================================
   CRONEX BAU — PREMIUM MOBILE NAVIGATION
   Подключать после основного style.css
========================================================= */


/* =========================================================
   TABLET + MOBILE
========================================================= */

@media (max-width:980px){

  /* -------------------------------------------------------
     Блокировка страницы при открытом меню
  ------------------------------------------------------- */

  body.nav-open{
    overflow:hidden;
    overscroll-behavior:none;
    touch-action:none;
  }


  /* -------------------------------------------------------
     HEADER
  ------------------------------------------------------- */

  .site-header{
    z-index:120;
  }

  .header-inner{
    position:relative;
    align-items:center;
  }


  /* =======================================================
     КНОПКА ГАМБУРГЕРА
  ======================================================= */

  .nav-toggle{
    position:relative;
    z-index:125;

    display:block;

    flex:0 0 48px;

    width:48px;
    height:48px;

    margin:0;
    padding:0;

    border:1px solid rgba(255,255,255,.16);
    border-radius:15px;

    color:#fff;

    background:rgba(10,10,12,.34);

    box-shadow:
      0 10px 28px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.08);

    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);

    appearance:none;
    -webkit-appearance:none;

    box-sizing:border-box;

    font-size:0;
    line-height:0;

    cursor:pointer;

    transition:
      background-color .28s ease,
      border-color .28s ease,
      box-shadow .28s ease,
      transform .28s ease;
  }


  /*
    Все три линии расположены относительно
    точного центра кнопки.
  */

  .nav-toggle span{
    position:absolute;

    left:50%;
    top:50%;

    display:block;

    width:21px;
    height:2px;

    margin:0;
    padding:0;

    border:0;
    border-radius:999px;

    background:#fff;

    transform-origin:center center;

    transition:
      transform .34s cubic-bezier(.22,1,.36,1),
      opacity .22s ease,
      width .28s ease;
  }


  /* Верхняя линия */

  .nav-toggle span:nth-child(1){
    transform:
      translate(-50%, -50%)
      translateY(-7px);
  }


  /* Средняя линия */

  .nav-toggle span:nth-child(2){
    transform:
      translate(-50%, -50%);
  }


  /* Нижняя линия */

  .nav-toggle span:nth-child(3){
    transform:
      translate(-50%, -50%)
      translateY(7px);
  }


  /* -------------------------------------------------------
     КНОПКА ПРИ ОТКРЫТОМ МЕНЮ
  ------------------------------------------------------- */

  body.nav-open .nav-toggle{
    border-color:rgba(255,255,255,.29);

    background:rgba(12,12,14,.66);

    box-shadow:
      0 16px 38px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.11);
  }


  /* Верхняя линия превращается в крестик */

  body.nav-open .nav-toggle span:nth-child(1){
    transform:
      translate(-50%, -50%)
      rotate(45deg);
  }


  /* Средняя линия исчезает */

  body.nav-open .nav-toggle span:nth-child(2){
    width:0;
    opacity:0;

    transform:
      translate(-50%, -50%);
  }


  /* Нижняя линия превращается в крестик */

  body.nav-open .nav-toggle span:nth-child(3){
    transform:
      translate(-50%, -50%)
      rotate(-45deg);
  }


  /* Нажатие на кнопку */

  .nav-toggle:active{
    transform:scale(.95);
  }


  /* Фокус с клавиатуры */

  .nav-toggle:focus-visible{
    outline:2px solid rgba(255,255,255,.94);
    outline-offset:4px;
  }


  /* =======================================================
     ПОЛНОЭКРАННОЕ МОБИЛЬНОЕ МЕНЮ
  ======================================================= */

  .site-nav{
    --mobile-nav-width:min(540px, calc(100vw - 48px));

    position:fixed;
    inset:0;

    z-index:118;

    width:100%;

    height:100vh;
    height:100svh;
    height:100dvh;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:12px;

    padding-top:max(
      108px,
      calc(env(safe-area-inset-top) + 88px)
    );

    padding-right:max(
      24px,
      env(safe-area-inset-right)
    );

    padding-bottom:max(
      32px,
      calc(env(safe-area-inset-bottom) + 22px)
    );

    padding-left:max(
      24px,
      env(safe-area-inset-left)
    );

    border:0;
    border-radius:0;

    overflow-x:hidden;
    overflow-y:auto;

    isolation:isolate;

    /*
      Основной тёмный фон.
      Фотографии здесь нет.
    */

    background:
      radial-gradient(
        circle at 50% 44%,
        rgba(128,0,32,.17) 0%,
        rgba(128,0,32,.07) 22%,
        transparent 47%
      ),

      radial-gradient(
        ellipse at 16% 10%,
        rgba(255,255,255,.052) 0%,
        transparent 32%
      ),

      radial-gradient(
        ellipse at 88% 92%,
        rgba(255,255,255,.022) 0%,
        transparent 38%
      ),

      linear-gradient(
        145deg,
        #18181b 0%,
        #101012 28%,
        #09090b 57%,
        #050506 78%,
        #020203 100%
      );

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:translate3d(100%, 0, 0);

    transition:
      transform .74s cubic-bezier(.22,1,.36,1),
      opacity .38s ease,
      visibility 0s linear .74s;

    will-change:transform, opacity;
  }


  /* =======================================================
     МЯГКОЕ СВЕЧЕНИЕ НА ФОНЕ
  ======================================================= */

  .site-nav::before{
    content:"";

    position:absolute;
    inset:-22%;

    z-index:-2;

    pointer-events:none;

    background:
      radial-gradient(
        circle at 30% 36%,
        rgba(255,255,255,.06) 0%,
        rgba(255,255,255,.02) 14%,
        transparent 29%
      ),

      radial-gradient(
        circle at 68% 57%,
        rgba(128,0,32,.13) 0%,
        rgba(128,0,32,.04) 21%,
        transparent 40%
      ),

      radial-gradient(
        circle at 77% 17%,
        rgba(255,255,255,.026) 0%,
        transparent 24%
      );

    opacity:.64;

    transform:
      translate3d(8%, 0, 0)
      scale(1.12);

    transition:
      opacity .85s ease,
      transform 1.25s cubic-bezier(.22,1,.36,1);

    will-change:transform;
  }


  /* =======================================================
     ВИНЬЕТКА И ТОНКАЯ ТЕКСТУРА
  ======================================================= */

  .site-nav::after{
    content:"";

    position:absolute;
    inset:0;

    z-index:-1;

    pointer-events:none;

    background:
      radial-gradient(
        ellipse at center,
        transparent 18%,
        rgba(0,0,0,.10) 45%,
        rgba(0,0,0,.58) 100%
      ),

      linear-gradient(
        180deg,
        rgba(255,255,255,.036) 0%,
        transparent 20%,
        transparent 72%,
        rgba(0,0,0,.36) 100%
      ),

      repeating-linear-gradient(
        115deg,
        rgba(255,255,255,.011) 0,
        rgba(255,255,255,.011) 1px,
        transparent 1px,
        transparent 10px
      );

    opacity:.92;
  }


  /* =======================================================
     ОТКРЫТОЕ СОСТОЯНИЕ МЕНЮ
  ======================================================= */

  body.nav-open .site-nav{
    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transform:translate3d(0, 0, 0);

    transition-delay:0s;
  }

  body.nav-open .site-nav::before{
    opacity:1;

    transform:
      translate3d(0, 0, 0)
      scale(1);
  }


  /* =======================================================
     ССЫЛКИ МЕНЮ
  ======================================================= */

  .site-nav > a{
    position:relative;
    isolation:isolate;

    width:var(--mobile-nav-width);
    min-height:66px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 auto;

    padding:12px 64px;

    border:1px solid rgba(255,255,255,.135);
    border-radius:18px;

    overflow:hidden;

    color:rgba(255,255,255,.81);

    background:
      linear-gradient(
        135deg,
        rgba(255,255,255,.074),
        rgba(255,255,255,.022)
      );

    box-shadow:
      0 18px 46px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.085);

    -webkit-backdrop-filter:blur(17px) saturate(1.08);
    backdrop-filter:blur(17px) saturate(1.08);

    font-size:clamp(1.12rem, 2.5vw, 1.42rem);
    font-weight:700;
    line-height:1.15;
    letter-spacing:-.025em;

    text-align:center;
    text-decoration:none;

    opacity:0;

    transform:
      translate3d(46px, 0, 0)
      scale(.982);

    transition:
      opacity .42s ease,
      transform .56s cubic-bezier(.22,1,.36,1),
      color .25s ease,
      border-color .25s ease,
      background .25s ease,
      box-shadow .25s ease;

    will-change:transform, opacity;
  }


  /* =======================================================
     СВЕТОВОЙ ПРОХОД ПО КНОПКЕ
  ======================================================= */

  .site-nav > a::before{
    content:"";

    position:absolute;
    inset:0;

    z-index:-1;

    pointer-events:none;

    background:
      linear-gradient(
        110deg,
        transparent 0%,
        transparent 30%,
        rgba(255,255,255,.09) 48%,
        transparent 66%,
        transparent 100%
      );

    opacity:.7;

    transform:translateX(-110%);

    transition:
      opacity .25s ease,
      transform .72s cubic-bezier(.22,1,.36,1);
  }


  /* =======================================================
     СТРЕЛКА СПРАВА
  ======================================================= */

  .site-nav > a::after{
    content:"↗";

    position:absolute;

    right:23px;
    top:50%;

    color:rgba(255,255,255,.39);

    font-size:1rem;
    font-weight:600;
    line-height:1;

    transform:translate3d(0, -50%, 0);

    transition:
      color .25s ease,
      transform .25s ease;
  }


  /* =======================================================
     ПОЯВЛЕНИЕ ССЫЛОК
  ======================================================= */

  body.nav-open .site-nav > a{
    opacity:1;

    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  body.nav-open .site-nav > a:nth-child(1){
    transition-delay:.10s;
  }

  body.nav-open .site-nav > a:nth-child(2){
    transition-delay:.16s;
  }

  body.nav-open .site-nav > a:nth-child(3){
    transition-delay:.22s;
  }

  body.nav-open .site-nav > a:nth-child(4){
    transition-delay:.28s;
  }

  body.nav-open .site-nav > a:nth-child(5){
    transition-delay:.34s;
  }

  body.nav-open .site-nav > a:nth-child(6){
    transition-delay:.40s;
  }


  /* =======================================================
     АКТИВНАЯ СТРАНИЦА
  ======================================================= */

  .site-nav > a.is-active,
  .site-nav > a[aria-current="page"]{
    color:#fff;

    border-color:rgba(255,255,255,.27);

    background:
      linear-gradient(
        135deg,
        rgba(128,0,32,.62),
        rgba(76,0,22,.35)
      );

    box-shadow:
      0 22px 52px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.13);
  }

  .site-nav > a.is-active::after,
  .site-nav > a[aria-current="page"]::after{
    color:#fff;

    transform:translate3d(3px, -50%, 0);
  }


  /* =======================================================
     КНОПКА KONTAKT & ANFRAGE
  ======================================================= */

  .site-nav > .nav-button,
  .site-nav > a.nav-button{
    min-height:70px;

    margin-top:8px;

    color:#fff;

    border-color:rgba(255,255,255,.28);

    background:
      linear-gradient(
        135deg,
        #8d082f 0%,
        #68001f 52%,
        #480015 100%
      );

    box-shadow:
      0 24px 56px rgba(0,0,0,.35),
      inset 0 1px 0 rgba(255,255,255,.17);
  }

  .site-nav > .nav-button::after,
  .site-nav > a.nav-button::after{
    content:"→";

    color:rgba(255,255,255,.84);
  }


  /* =======================================================
     ФОКУС С КЛАВИАТУРЫ
  ======================================================= */

  .site-nav > a:focus-visible{
    outline:2px solid rgba(255,255,255,.94);
    outline-offset:4px;
  }


  /* =======================================================
     НАЖАТИЕ НА ССЫЛКУ
  ======================================================= */

  .site-nav > a:active{
    transform:scale(.982);

    color:#fff;
    border-color:rgba(255,255,255,.28);
  }
}


/* =========================================================
   ПЛАНШЕТЫ
   621px — 980px
========================================================= */

@media (min-width:621px) and (max-width:980px){

  .site-nav{
    /*
      Кнопки не растягиваются
      на всю ширину планшета.
    */

    --mobile-nav-width:min(520px, calc(100vw - 140px));

    gap:14px;

    padding-right:max(
      48px,
      env(safe-area-inset-right)
    );

    padding-left:max(
      48px,
      env(safe-area-inset-left)
    );
  }

  .site-nav > a{
    min-height:68px;

    padding-right:70px;
    padding-left:70px;

    border-radius:20px;

    font-size:clamp(1.18rem, 2.4vw, 1.42rem);
  }

  .site-nav > .nav-button,
  .site-nav > a.nav-button{
    min-height:72px;

    margin-top:10px;
  }
}


/* =========================================================
   ТЕЛЕФОНЫ
   ДО 620px
========================================================= */

@media (max-width:620px){

  .site-nav{
    --mobile-nav-width:min(440px, calc(100vw - 36px));

    gap:10px;

    padding-top:max(
      94px,
      calc(env(safe-area-inset-top) + 76px)
    );

    padding-right:max(
      18px,
      env(safe-area-inset-right)
    );

    padding-bottom:max(
      24px,
      calc(env(safe-area-inset-bottom) + 18px)
    );

    padding-left:max(
      18px,
      env(safe-area-inset-left)
    );
  }

  .site-nav > a{
    min-height:58px;

    padding:
      10px
      54px
      10px
      20px;

    border-radius:16px;

    font-size:1.08rem;
  }

  .site-nav > a::after{
    right:19px;
  }

  .site-nav > .nav-button,
  .site-nav > a.nav-button{
    min-height:62px;

    margin-top:6px;
  }
}


/* =========================================================
   ОЧЕНЬ МАЛЕНЬКИЕ ТЕЛЕФОНЫ
   ДО 380px
========================================================= */

@media (max-width:380px){

  .nav-toggle{
    flex-basis:45px;

    width:45px;
    height:45px;

    border-radius:14px;
  }

  .nav-toggle span{
    width:20px;
  }

  .site-nav{
    --mobile-nav-width:calc(100vw - 28px);

    gap:8px;

    padding-right:max(
      14px,
      env(safe-area-inset-right)
    );

    padding-left:max(
      14px,
      env(safe-area-inset-left)
    );
  }

  .site-nav > a{
    min-height:54px;

    padding:
      8px
      48px
      8px
      16px;

    border-radius:15px;

    font-size:1rem;
  }

  .site-nav > a::after{
    right:17px;
  }

  .site-nav > .nav-button,
  .site-nav > a.nav-button{
    min-height:58px;
  }
}


/* =========================================================
   НИЗКИЕ ЭКРАНЫ
========================================================= */

@media (max-width:980px) and (max-height:720px){

  .site-nav{
    justify-content:flex-start;

    gap:8px;

    padding-top:max(
      84px,
      calc(env(safe-area-inset-top) + 70px)
    );

    padding-bottom:max(
      18px,
      env(safe-area-inset-bottom)
    );
  }

  .site-nav > a{
    min-height:50px;

    padding-top:8px;
    padding-bottom:8px;

    font-size:1rem;
  }

  .site-nav > .nav-button,
  .site-nav > a.nav-button{
    min-height:54px;

    margin-top:3px;
  }
}


/* =========================================================
   ОЧЕНЬ НИЗКИЕ ЭКРАНЫ / ГОРИЗОНТАЛЬНЫЙ ТЕЛЕФОН
========================================================= */

@media (max-width:980px) and (max-height:560px){

  .site-nav{
    gap:6px;

    padding-top:max(
      74px,
      calc(env(safe-area-inset-top) + 62px)
    );
  }

  .site-nav > a{
    min-height:44px;

    padding-top:6px;
    padding-bottom:6px;

    border-radius:14px;

    font-size:.95rem;
  }

  .site-nav > .nav-button,
  .site-nav > a.nav-button{
    min-height:48px;

    margin-top:2px;
  }
}


/* =========================================================
   HOVER ТОЛЬКО ДЛЯ МЫШИ И ТРЕКПАДА
========================================================= */

@media (max-width:980px) and (hover:hover) and (pointer:fine){

  .nav-toggle:hover{
    border-color:rgba(255,255,255,.27);

    background:rgba(18,18,21,.58);

    box-shadow:
      0 15px 36px rgba(0,0,0,.25),
      inset 0 1px 0 rgba(255,255,255,.11);

    transform:translateY(-1px);
  }

  .site-nav > a:hover{
    color:#fff;

    border-color:rgba(255,255,255,.28);

    background:
      linear-gradient(
        135deg,
        rgba(255,255,255,.115),
        rgba(255,255,255,.042)
      );

    box-shadow:
      0 24px 58px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.12);

    transform:translateY(-2px);
  }

  .site-nav > a:hover::before{
    opacity:.92;

    transform:translateX(110%);
  }

  .site-nav > a:hover::after{
    color:#fff;

    transform:translate3d(4px, -50%, 0);
  }

  .site-nav > .nav-button:hover,
  .site-nav > a.nav-button:hover{
    border-color:rgba(255,255,255,.37);

    background:
      linear-gradient(
        135deg,
        #9e0b3b 0%,
        #750025 52%,
        #510018 100%
      );

    box-shadow:
      0 27px 65px rgba(0,0,0,.38),
      inset 0 1px 0 rgba(255,255,255,.20);
  }
}


/* =========================================================
   ОТКЛЮЧЕНИЕ АНИМАЦИИ
========================================================= */

@media (prefers-reduced-motion:reduce){

  .site-nav,
  .site-nav::before,
  .site-nav > a,
  .site-nav > a::before,
  .site-nav > a::after,
  .nav-toggle,
  .nav-toggle span{
    transition:none !important;
    animation:none !important;
  }

  .site-nav::before{
    transform:none !important;
  }
}