/**
 * СТИЛИ ДЛЯ TILDA
 * 
 * Этот файл содержит все CSS стили для различных эффектов и компонентов
 */

/* ===========================================
   СТИЛИ ДЛЯ РАЗМЫТИЯ С АНИМАЦИЕЙ
   =========================================== */
/* Применяется к элементам с классом .myblur */
/* Создает анимированное размытие с движением по кругу */

@keyframes blur-circle-move {
  0% {
    filter: blur(80px);
    transform: translate(50px, 0px);
  }
  25% {
    filter: blur(150px);
    transform: translate(0px, 50px);
  }
  50% {
    filter: blur(80px);
    transform: translate(-50px, 0px);
  }
  75% {
    filter: blur(150px);
    transform: translate(0px, -50px);
  }
  100% {
    filter: blur(80px);
    transform: translate(50px, 0px);
  }
}

.myblur {
  animation: blur-circle-move 8s ease-in-out infinite !important;
  will-change: transform, filter !important;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Оптимизация для мобильных устройств */
@media (max-width: 768px) {
  .myblur {
    /* Отключаем анимацию и задаем статический сильный blur */
    animation: none !important;
    will-change: auto !important;
    filter: blur(150px) !important;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .myblur {
      animation: none !important;
    }
  }
}

 

/* ===========================================
   СТИЛИ ДЛЯ BURGER МЕНЮ
   =========================================== */
/* Блокировка скролла когда меню открыто */
body.burger-menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    touch-action: none !important;
    -webkit-overflow-scrolling: auto !important;
}

.burger {
    position: relative;
}

.burger-button {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.burger-button span {
    display: block;
    width: 100%;
    height: 17%;
    background-color: #333;
    border-radius: 50px;
    transition: none !important;
    transform-origin: center;
    will-change: transform, opacity;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Анимация превращения в крестик */
.burger-button.active span:nth-child(1) {
    transform: translateY(250%) rotate(45deg);
}

.burger-button.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.burger-button.active span:nth-child(3) {
    transform: translateY(-250%) rotate(-45deg);
}

/* ===========================================
   СТИЛИ ДЛЯ MENU-BACK
   =========================================== */
/* По умолчанию menu-back скрыт */
.menu-back {
    display: none !important;
    opacity: 0;
    visibility: hidden;
}

/* Показываем menu-back когда бургер открыт (без анимации) */
.burger-open .menu-back,
.burger-open ~ .menu-back {
    display: table !important;
    opacity: 1;
    visibility: visible !important;
    transition: none !important;
}

/* Скрываем при закрытии бургера (без анимации) */
.menu-back { transition: none !important; }

/* ===========================================
   СТИЛИ ДЛЯ MYLINK
   =========================================== */
/* На десктопе mylink всегда видим */
@media (min-width: 1280px) {
    .mylink {
        display: block !important;
    }
}

/* На мобильных устройствах: скрываем по умолчанию, показываем когда body в режиме открытого меню */
@media (max-width: 1279px) {
    .mylink {
        display: none !important;
        opacity: 0;
    }
    
    /* Показываем пункты меню при открытом меню */
    body.burger-menu-open .mylink {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        animation: none !important;
    }

    .burger-open .mylink:nth-of-type(1),
    .burger-open ~ .mylink:nth-of-type(1) {
        animation-delay: 0s;
    }

    .burger-open .mylink:nth-of-type(2),
    .burger-open ~ .mylink:nth-of-type(2) {
        animation-delay: 0.02s;
    }

    .burger-open .mylink:nth-of-type(3),
    .burger-open ~ .mylink:nth-of-type(3) {
        animation-delay: 0.04s;
    }

    .burger-open .mylink:nth-of-type(4),
    .burger-open ~ .mylink:nth-of-type(4) {
        animation-delay: 0.06s;
    }

    .burger-open .mylink:nth-of-type(5),
    .burger-open ~ .mylink:nth-of-type(5) {
        animation-delay: 0.08s;
    }

    .burger-open .mylink:nth-of-type(6),
    .burger-open ~ .mylink:nth-of-type(6) {
        animation-delay: 0.1s;
    }

    .burger-open .mylink:nth-of-type(7),
    .burger-open ~ .mylink:nth-of-type(7) {
        animation-delay: 0.12s;
    }

    .burger-open .mylink:nth-of-type(8),
    .burger-open ~ .mylink:nth-of-type(8) {
        animation-delay: 0.14s;
    }

    .burger-open .mylink:nth-of-type(9),
    .burger-open ~ .mylink:nth-of-type(9) {
        animation-delay: 0.16s;
    }

    .burger-open .mylink:nth-of-type(10),
    .burger-open ~ .mylink:nth-of-type(10) {
        animation-delay: 0.18s;
    }

    /* Оптимизация для мобильных - убираем задержки и ускоряем анимацию */
    @media (max-width: 768px) {
    .burger-open .mylink {
        will-change: auto !important;
        animation: none !important;
    }
    }
}

/* (удалено) */

/* ===========================================
   СТИЛИ ДЛЯ ЛИНИЙ С АНИМАЦИЕЙ
   =========================================== */

/* Для линий, двигающихся вверх */
.line_up div {
    transform-origin: center top !important;
}

/* Для линий, двигающихся вниз */
.line_down div {
    transform-origin: center bottom !important;
}

/* ===========================================
   ОПТИМИЗИРОВАННЫЙ СТЕКЛЯННЫЙ ЭФФЕКТ (.my-glass, .slide)
   =========================================== */
/* Применяется к элементам с классами .my-glass и .slide */
/* SVG фильтр создается динамически через JavaScript */
.my-glass,.slide{overflow:hidden;isolation:isolate;transform:translateZ(0);-webkit-transform:translateZ(0)}
.glass-layer{position:absolute;top:0;left:0;width:100%;height:100%;backdrop-filter:blur(8px) saturate(180%) contrast(110%);-webkit-backdrop-filter:blur(8px) saturate(180%) contrast(110%);background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.04));filter:url(#glass-distortion);-webkit-filter:url(#glass-distortion);pointer-events:none;z-index:1}
.glass-border{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2;box-sizing:border-box;-webkit-box-sizing:border-box}
.glass-shadow{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;box-sizing:border-box;-webkit-box-sizing:border-box}
.my-glass>*:not(.glass-layer):not(.glass-border):not(.glass-shadow),.slide>*:not(.glass-layer):not(.glass-border):not(.glass-shadow){position:relative;z-index:3}
@media (max-width:640px){.glass-layer{backdrop-filter:blur(4px) saturate(120%);-webkit-backdrop-filter:blur(4px) saturate(120%)}}
@supports(-webkit-backdrop-filter:blur(1px)) and (not (backdrop-filter:blur(1px))){.glass-layer{backdrop-filter:blur(3px) saturate(120%);-webkit-backdrop-filter:blur(3px) saturate(120%);filter:none!important;-webkit-filter:none!important}}

/* Полное отключение стеклянного эффекта на мобильных */
@media (max-width: 768px) {
  .my-glass,
  .slide {
    isolation: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    overflow: visible !important;
  }
  .glass-layer,
  .glass-border,
  .glass-shadow {
    display: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    -webkit-filter: none !important;
  }
}

/* ===========================================
   СТИЛИ ДЛЯ ТЕНЕЙ
   =========================================== */
/* Применяется к элементам с классом .shadow */
/* Добавляет тень к div и ссылкам внутри элемента */
.shadow div, .shadow a{
  box-shadow: 0px 7px 6px rgba(0, 0, 0, 0.15);
}

/* ===========================================
   СТИЛИ ДЛЯ СВЕТЯЩЕГОСЯ ТЕКСТА
   =========================================== */
/* Применяется к элементам с классом .textglow */
/* Создает эффект свечения белого текста */
.textglow {
  color: #fff;
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.8),
    0 0 2px rgba(255, 255, 255, 0.4);
}

/* ===========================================
   СТИЛИ ДЛЯ АНИМИРОВАННЫХ КНОПОК
   =========================================== */
/* Применяется к элементам с классом .mybutton */
/* Создает эффект приподнятия кнопки при наведении */
.mybutton a{
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  background-clip: padding-box !important;
}

/* Эффект приподнятия при наведении */
.mybutton a {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.mybutton a:hover {
  transform: translateY(-3px) scale(1.02) translateZ(0) !important;
  -webkit-transform: translateY(-3px) scale(1.02) translateZ(0) !important;
}

/* Оптимизация для мобильных - убираем hover эффект */
@media (max-width: 768px) and (hover: none) {
  .mybutton a:hover {
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
  }
}

/* ===========================================
   СТИЛИ ДЛЯ ССЫЛОК С ЭФФЕКТОМ ЦВЕТА
   =========================================== */
/* Применяется к элементам с классом .mylink */
/* Создает смену цвета при наведении */

.mylink a:hover {
  color: #FC037F !important;
  font-weight: 600 !important;
}

/* ===========================================
   СТИЛИ ДЛЯ ССЫЛОК С ПОДЧЕРКИВАНИЕМ
   =========================================== */
/* Применяется к элементам с классом .link-under */
/* Добавляет подчеркивание при наведении */

.link-under a {
  text-decoration: none !important;
  transition: text-decoration 0.2s ease !important;
}

.link-under a:hover {
  text-decoration: underline !important;
  color: #FC037F !important;
}

/* ===========================================
   СТИЛИ ДЛЯ ГОРИЗОНТАЛЬНОГО СЛАЙДЕРА
   =========================================== */
/* Применяется к элементам с классом .slider */
/* Создает горизонтальный скролл без видимого скроллбара */

/* Основные стили слайдера */
.slider {
  overflow-x: scroll !important;
  overflow-y: hidden !important;
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
  scroll-behavior: smooth !important;
}

/* Стили для тикера */
.ticker {
  overflow-x: hidden !important;
}

/* Скрытие скроллбара в WebKit браузерах */
.slider::-webkit-scrollbar {
  display: none !important;
}

/* Оптимизация скроллинга для мобильных устройств */
@media (max-width: 768px) {
  .slider {
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
  }
  
  /* Уменьшаем blur для мобильных */
  .myblur {
    filter: blur(60px) !important;
  }
  
  /* Упрощаем glass эффект на мобильных */
  .glass-layer {
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }
}

/* ===========================================
   СТИЛИ ДЛЯ ТОЧЕК НАВИГАЦИИ СЛАЙДЕРА
   =========================================== */
/* Применяется к элементам с классом .bar */
/* Создает точки навигации для слайдера */

/* Контейнер для точек */
.bar .bar-dots {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  gap: 10px !important;
}

/* Стили отдельных точек */
.bar .bar-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #BFBFBF !important;
  flex: 0 0 10px !important;
  transition: background 0.3s ease !important;
  cursor: pointer !important;
}

/* Активные точки (залитые) */
.bar .bar-dot.active {
  background: #FC037F !important;
}

/* ===========================================
   ИСПРАВЛЕНИЕ ПРОБЛЕМ С SVG В МОБИЛЬНОМ SAFARI
   =========================================== */
/* Исправляет проблему "съезжания" SVG элементов вниз в мобильном Safari */
.tn-elem svg {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Дополнительные исправления для SVG с анимацией */
.tn-elem svg[viewBox] {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
}

/* Исправление для SVG внутри контейнеров Tilda */
.tn-atom svg,
.tn-element svg {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Специальные исправления для мобильного Safari */
@supports (-webkit-touch-callout: none) {
  .tn-elem svg {
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    will-change: auto !important;
  }
}

/* Дополнительные исправления для SVG с анимацией stroke-dashoffset */
.tn-elem svg path[stroke-dasharray] {
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
}

/* Исправление для SVG внутри flex-контейнеров */
.tn-elem [style*="display: flex"] svg {
  flex-shrink: 0 !important;
  align-self: flex-start !important;
}

/* ===========================================
  ФОРМЫ: скрываем дефолтную кнопку сабмита (ОТКЛЮЧЕНО)
  =========================================== */
/* При использовании <a href="#Submit"> скрываем стандартные submit-кнопки */
/*
form button[type="submit"] {
  display: none !important;
}
*/

/* ===========================================
   COOKIE СОГЛАСИЕ
   =========================================== */
/* Всплывающее окно о согласии на использование cookies */
.cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-height: auto;
  max-height: 100vh;
  overflow-y: auto;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #333;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  z-index: 2147483647;
  display: none;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.cookie-consent-banner.show {
  display: block;
}

/* Скрытие баннера через класс */
.cookie-consent-banner.hidden {
  display: none !important;
}

.cookie-consent-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

.cookie-consent-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.cookie-consent-text a {
  color: #3026EF;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.cookie-consent-text a:hover {
  color: #FC037F;
}

.cookie-consent-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
}

.cookie-consent-btn {
  padding: 12px 28px;
  border: none;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: normal;
  word-wrap: break-word;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.cookie-consent-btn-accept {
  background: linear-gradient(135deg, #FC037F 0%, #FC037F 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(252, 3, 127, 0.3);
}

.cookie-consent-btn-accept:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(252, 3, 127, 0.4);
}

.cookie-consent-btn-accept:active {
  transform: translateY(0);
}

.cookie-consent-btn-accept::before {
  content: "✓ ";
  font-size: 18px;
  margin-right: 4px;
  font-family: monospace;
}

.cookie-consent-btn-decline {
  background: transparent;
  color: #3026EF;
  border: 2px solid #3026EF;
}

.cookie-consent-btn-decline:hover {
  background: #3026EF;
  color: white;
  transform: translateY(-2px);
}

.cookie-consent-btn-decline:active {
  transform: translateY(0);
}

/* Мобильная версия */
@media (max-width: 768px) {
  .cookie-consent-banner {
    padding: 16px !important;
    box-sizing: border-box !important;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }

  .cookie-consent-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    padding: 0;
    margin: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .cookie-consent-text {
    font-size: 13px;
    text-align: center;
    padding: 0;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .cookie-consent-buttons {
    flex-direction: column;
    width: 100%;
    gap: 8px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  .cookie-consent-btn {
    width: 100%;
    min-width: 0;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
    white-space: normal;
    word-wrap: break-word;
  }
}

@media (max-width: 480px) {
  .cookie-consent-banner {
    padding: 16px !important;
  }

  .cookie-consent-wrapper {
    gap: 10px;
  }

  .cookie-consent-text {
    font-size: 12px;
  }

  .cookie-consent-btn {
    font-size: 13px;
    padding: 12px 16px !important;
    min-height: 44px;
  }

  .cookie-consent-btn-accept::before {
    font-size: 16px;
  }
}

/* ===========================================
   ОПТИМИЗАЦИИ ДЛЯ СКРОЛЛА
   =========================================== */
/* GPU ускорение для основных элементов */
.tn-atom,
.tn-element,
.tn-molecule {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

img {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* ===========================================
   ОБЩИЕ ОПТИМИЗАЦИИ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ
   =========================================== */
/* Оптимизация производительности для всех мобильных устройств */
@media (max-width: 768px) {
  /* Улучшаем blur эффект на мобильных */
  .myblur {
    filter: blur(60px) !important;
  }
  
  /* Упрощаем glass эффект на мобильных */
  .glass-layer {
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }
}

/* Оптимизация для устройств Apple */
@supports (-webkit-touch-callout: none) {
  /* Аппаратное ускорение для Safari */
  body {
    /* Не используем transform/perspective на body, чтобы не ломать position: fixed */
    -webkit-transform: none !important;
    transform: none !important;
    -webkit-perspective: none !important;
    perspective: none !important;
  }
  
  /* Оптимизация скролла для Safari */
  .slider,
  .ticker {
    -webkit-overflow-scrolling: touch;
  }
}

/* Уменьшение нагрузки на GPU для слабых устройств */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===========================================
   ШРИФТ ДЛЯ .t-form-success-popup .t-descr
   =========================================== */
.t-form-success-popup .t-descr {
  font-family: "NeueMontreal" !important;
}

/* ===========================================
   СМЕНА ТЕКСТА ВНУТРИ .changing-title (fade)
   =========================================== */
.changing-title {
  position: relative;
}

.changing-title div {
  position: relative;
}

.changing-title p {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.changing-title p.active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .changing-title p {
    transition: none !important;
  }
}