/* Start Target — состояния, управляемые из site.js */

/* Шапка при скролле */
#site-header { background: transparent; }
#site-header.is-scrolled {
  background: rgba(14, 17, 16, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 40px -12px rgba(0, 0, 0, 0.8);
}

/* Бургер */
#burger span { transition: transform 0.3s ease, opacity 0.3s ease; }
#burger.open span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
#burger.open span:nth-child(2) { opacity: 0; }
#burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Мобильное меню */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}
#mobile-menu.open { max-height: 26rem; }

/* Диалог чата: в закрытом состоянии полностью убран (display:none) —
   не перекрывает контент ни на мобильном, ни на десктопе */
.chat-dialog {
  display: none;
  width: calc(100vw - 2rem);
  max-width: 320px;
}
.chat-dialog.visible {
  display: block;
  animation: chat-in 0.4s ease;
}
@keyframes chat-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-dialog.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Шаги квиза: видим только активный (класс управляется из site.js) */
.quiz-step { display: none; }
.quiz-step.quiz-step-active { display: block; }

/* Аккордеон этапов: состояния через .open */
.acc-item { border-color: #263029; background: rgba(21, 25, 23, 0.4); }
.acc-item:hover { background: rgba(21, 25, 23, 0.7); }
.acc-item.open { border-color: rgba(42, 167, 155, 0.6); background: rgba(21, 25, 23, 0.8); }
.acc-num { color: #263029; }
.acc-item.open .acc-num { color: #c9d92e; }
.acc-icon { border-color: #263029; color: #a1a1aa; }
.acc-item.open .acc-icon { border-color: #c9d92e; background: rgba(201, 217, 46, 0.15); color: #c9d92e; }

/* Видео-кнопки: прозрачный фон (иначе кнопка может быть незаметной) */
button[data-video] { background: transparent; border: 0; padding: 0; cursor: pointer; }

/* Чат-виджет: на мобильных кнопка компактнее, чтобы не перекрывать контент */
.chat-toggle {
  height: 52px;
  width: 52px;
  box-shadow: 0 10px 40px -8px rgba(201, 217, 46, 0.6);
}
@media (min-width: 640px) {
  .chat-toggle { height: 64px; width: 64px; }
}

/* Свечение кнопок Play */
.play-glow { box-shadow: 0 10px 40px -8px rgba(201, 217, 46, 0.7); }

/* Слайдер «Партнёры»: размеры карточек и фото */
.partner-card { width: 72%; }
.partner-photo { aspect-ratio: 16 / 10; }
@media (min-width: 640px) { .partner-card { width: 44%; } }
@media (min-width: 1024px) { .partner-card { width: 23.5%; } }

/* Слайдер «Партнёры»: скрыть полосу прокрутки (навигация стрелками и точками) */
.partners-track {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.partners-track::-webkit-scrollbar { display: none; }

/* Стандартные стили WordPress, чтобы ничего не ломалось */
.alignnone { margin: 5px 20px 20px 0; }
.aligncenter { display: block; margin: 5px auto; }
.alignright { float: right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }
.wp-caption { max-width: 100%; }
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ---------- Кнопка видео в hero: мобильная обёртка ---------- */
.hero-video-cta { display: flex; margin-top: 2.5rem; }
@media (min-width: 1280px) { .hero-video-cta { display: none; } }

/* ---------- Промо-блок после бегущей строки — только мобильный ---------- */
@media (min-width: 1280px) { .promo-video-mob { display: none; } }
.promo-video-cta { margin: 2rem auto 0; }

/* ---------- Мишень отдельным слоем (десктоп) ---------- */
.hero-target-layer {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  width: 42rem;
  max-width: 85vh;
  aspect-ratio: 1 / 1;
}
.hero-target-layer img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.9;
}
/* внутренняя обёртка несёт float-анимацию: мишень и кнопка плавают синхронно */
.hero-target-inner { position: relative; width: 100%; height: 100%; }

/* ---------- Кнопка-плашка «Смотреть видео» ---------- */
.video-cta-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 24rem;
  padding: 1rem 1.25rem;
  text-align: left;
  border-radius: 1rem;
  border: 1px solid #2b332f;
  background: rgba(20, 24, 22, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: border-color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.video-cta-bar:hover { border-color: rgba(201, 217, 46, 0.5); }
.video-cta-play {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.video-cta-core {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  color: #0e1110;
  background: linear-gradient(135deg, #c9d92e, #2ec4b6);
  transition: transform 0.3s ease;
}
.video-cta-bar:hover .video-cta-core { transform: scale(1.1); }
.video-cta-text { display: block; min-width: 0; }
.video-cta-title {
  display: block;
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.25;
  color: #ffffff;
}
.video-cta-sub {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #4adee3;
}

/* ---------- Круглая play-кнопка «в мишени» ---------- */
.target-play {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  background: none;
  border: 0;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.target-play-ring {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 1px solid rgba(201, 217, 46, 0.6);
  animation: target-pulse 2.6s cubic-bezier(0, 0, 0.2, 1) infinite;
  pointer-events: none;
}
.target-play-ring--late {
  border-color: rgba(46, 196, 182, 0.5);
  animation-delay: 1.1s;
}
@keyframes target-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  80%, 100% { transform: scale(1.9); opacity: 0; }
}
.target-play-core {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  color: #0e1110;
  background: linear-gradient(135deg, #c9d92e, #2ec4b6);
  box-shadow: 0 0 45px -5px rgba(201, 217, 46, 0.55);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.target-play-core--lg { width: 80px; height: 80px; }
.target-play:hover .target-play-core,
.target-play:focus-visible .target-play-core {
  transform: scale(1.1);
  box-shadow: 0 0 60px -5px rgba(201, 217, 46, 0.8);
}
/* позиция в центре слоя мишени — только десктоп */
.target-play--bullseye {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-95%, -48%);
  width: 96px;
  height: 96px;
}
@media (prefers-reduced-motion: reduce) {
  .target-play-ring { animation: none; opacity: 0.4; }
}

/* Спиннер загрузки видео (используется в попапе) */
@keyframes st-spin { to { transform: rotate(360deg); } }

/* ---------- Модальное окно с видео ---------- */
.vmodal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(7, 9, 8, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.vmodal.open { display: flex; }
@media (min-width: 640px) { .vmodal { padding: 32px; } }
.vmodal-box {
  position: relative;
  width: 100%;
  max-width: 56rem;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(46, 196, 182, 0.3);
  background: #141816;
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.7);
  animation: vmodal-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes vmodal-in {
  from { transform: scale(0.92) translateY(14px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.vmodal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid #242a27;
}
.vmodal-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #a1a1aa;
}
.vmodal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 9999px;
  border: 0;
  background: none;
  color: #a1a1aa;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.vmodal-close:hover { background: #242a27; color: #ffffff; }
.vmodal-body {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000000;
}
.vmodal-body iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .vmodal-box { animation: none; }
}