/* Баннеры раздела /tests/ в шапке сайта (26.10.2026). Блок .vtb, размер 400x50, фон прозрачный.
   Анимация: «жы», затем «шы» пишутся пером по штрихам, красные волны рисуются слева направо, затем волны и буквы
   вздрагивают (буквы строк — вразнобой), затем появляется кнопка и остаётся. «жы шы» повторяются раз в 30 с, блик по кнопке — раз в 10 с.
   Шаги переключает tests-banners.js классами на .vtb. */
.vtb {
  --vtb-text: #000;
  --vtb-btn: #ffffff69;
  --vtb-btn-text: #000;
  --vtb-red: #e0281e;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 400px;
  height: 50px;
  color: var(--vtb-text);
  text-decoration: none;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.vtb:hover {
  text-decoration: none;
  color: var(--vtb-text);
}

.vtb *,
.vtb *::before,
.vtb *::after {
  box-sizing: border-box;
}

/* Сброс «жы шы» перед повтором — без обратной анимации */
.vtb.is-instant .vtb-pic,
.vtb.is-instant .vtb-pic * {
  transition: none !important;
  animation: none !important;
}

/* Слева: «жы / шы» (контуры EB Garamond 500 Italic), проявляются маской-пером */
.vtb-pic {
  flex: 0 0 36px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: opacity .4s;
}

.vtb-line {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.vtb-word {
  display: block;
  width: 36px;
  height: 12px;
  transform-origin: 50% 60%;
}

.vtb-word svg,
.vtb-wave svg {
  display: block;
  overflow: visible;
}

.vtb-word svg>path {
  fill: var(--vtb-text);
}

.vtb-pen path {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dashoffset: var(--o);
}

.vtb-fill {
  fill: #fff;
  opacity: 0;
}

.vtb.is-w1 .vtb-line:first-child .vtb-pen path,
.vtb.is-w2 .vtb-line+.vtb-line .vtb-pen path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--t) cubic-bezier(.45, .1, .55, .9) var(--d);
}

/* После последнего штриха маска заливается целиком — без щелей между штрихами */
.vtb.is-w1 .vtb-line:first-child .vtb-fill,
.vtb.is-w2 .vtb-line+.vtb-line .vtb-fill {
  opacity: 1;
  transition: opacity .25s ease var(--d);
}

/* Красная волна: рисуется слева направо; когда готовы обе — вместе вздрагивают */
.vtb-wave {
  display: block;
  width: 36px;
  height: 2.5px;
  transform-origin: 50% 50%;
}

.vtb-wave path {
  fill: none;
  stroke: var(--vtb-red);
  stroke-width: 1.6px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.vtb-wave svg {
  clip-path: inset(-6px 100% -6px -2px);
}

.vtb.is-e1 .vtb-line:first-child .vtb-wave svg,
.vtb.is-e2 .vtb-line+.vtb-line .vtb-wave svg {
  clip-path: inset(-6px -2px -6px -2px);
  transition: clip-path .72s linear;
}

.vtb.is-shake .vtb-wave {
  animation: vtb-shake .5s ease-out;
}

/* Буквы вздрагивают вместе с волнами, но строки — в противоположные стороны */
.vtb.is-shake .vtb-line:first-child .vtb-word {
  animation: vtb-shake-a .5s ease-out;
}

.vtb.is-shake .vtb-line+.vtb-line .vtb-word {
  animation: vtb-shake-b .5s ease-out;
}

@keyframes vtb-shake-a {
  0% {
    transform: none;
  }

  20% {
    transform: scale(1.12) translateX(1.5px) rotate(3deg);
  }

  40% {
    transform: scale(1.12) translateX(-1.5px) rotate(-3deg);
  }

  60% {
    transform: scale(1.08) translateX(1px) rotate(1.5deg);
  }

  80% {
    transform: scale(1.04) translateX(-.5px);
  }

  100% {
    transform: none;
  }
}

@keyframes vtb-shake-b {
  0% {
    transform: none;
  }

  20% {
    transform: scale(1.12) translateX(-1.5px) rotate(-3deg);
  }

  40% {
    transform: scale(1.12) translateX(1.5px) rotate(3deg);
  }

  60% {
    transform: scale(1.08) translateX(-1px) rotate(-1.5deg);
  }

  80% {
    transform: scale(1.04) translateX(.5px);
  }

  100% {
    transform: none;
  }
}

@keyframes vtb-shake {
  0% {
    transform: none;
  }

  20% {
    transform: scale(1.18) translateX(-1.5px) rotate(-2deg);
  }

  40% {
    transform: scale(1.18) translateX(1.5px) rotate(2deg);
  }

  60% {
    transform: scale(1.12) translateX(-1px) rotate(-1deg);
  }

  80% {
    transform: scale(1.06) translateX(.5px);
  }

  100% {
    transform: none;
  }
}

/* Справа: кнопка-«мазок маркером» (неровные края — маска в форме мазка) */
.vtb-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.vtb-btn {
  position: relative;
  overflow: hidden;
  display: inline-block;
  padding: 0 12px;
  height: 28px;
  line-height: 28px;
  background: var(--vtb-btn);
  color: var(--vtb-btn-text);
  font-size: 15px;
  font-weight: 600;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 300 30%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M9 4.6C40 2.4 74 4.4 110 3.1S178 4.9 216 3.3S270 4.2 290 4.8C296.5 5.6 298.6 10 297.4 14.2C299.2 18.6 297.6 23.6 291.5 25.4C266 27.8 230 26 194 27.1S116 25.3 78 26.9S26 26.2 8.5 25.6C2.6 24.4 1 20.2 2.8 16.4C1.2 12 3 6.2 9 4.6Z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 300 30%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M9 4.6C40 2.4 74 4.4 110 3.1S178 4.9 216 3.3S270 4.2 290 4.8C296.5 5.6 298.6 10 297.4 14.2C299.2 18.6 297.6 23.6 291.5 25.4C266 27.8 230 26 194 27.1S116 25.3 78 26.9S26 26.2 8.5 25.6C2.6 24.4 1 20.2 2.8 16.4C1.2 12 3 6.2 9 4.6Z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  white-space: nowrap;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .35s, transform .35s cubic-bezier(.3, 1.6, .5, 1), background-color .2s;
}

.vtb.is-btn .vtb-btn {
  opacity: 1;
  transform: none;
}

/* Блик по кнопке */
.vtb-btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg);
  opacity: 0;
}

.vtb.is-shine .vtb-btn::after {
  animation: vtb-shine .8s ease-out;
}

@keyframes vtb-shine {
  0% {
    left: -40%;
    opacity: 1;
  }

  100% {
    left: 120%;
    opacity: 1;
  }
}

/* Перед повтором «жы шы» плавно гаснут */
.vtb.is-pout .vtb-pic {
  opacity: 0;
}

@media (hover: hover) {
  .vtb:hover .vtb-btn {
    background-color: #ffffffb3;
  }
}

/* Без анимации — сразу итоговый вид */
@media (prefers-reduced-motion: reduce) {

  .vtb *,
  .vtb *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Место в шапке: только десктоп, по центру, прячется при открытом поиске */
.head-banner {
  display: none;
}

@media (min-width: 1024px) {
  .head-banner {
    display: block;
    position: absolute;
    top: 5px;
    left: 50%;
    width: 400px;
    height: 50px;
    margin-left: -200px;
    z-index: 5;
    transition: opacity .25s, visibility 0s linear 0s;
  }

  .container-head:has(.search.activ) .head-banner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility 0s linear .2s;
  }
}

/* Полноэкранная всплывашка для мобильных (.vtp): фон в клетку как на страницах /tests/, всегда тёмная.
   Внутри тот же .vtb (модификатор .vtb--pop): «жы шы» пишутся пером, затем текст и кнопка. */
.vtp {
  --vtp-bg: #131314;
  --vtp-grid: rgba(255, 255, 255, .055);
  --vtp-text: #e3e3e3;
  --vtp-muted: #a8abb0;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px 52px;
  background: var(--vtp-bg);
  color: var(--vtp-text);
  opacity: 0;
  transition: opacity .3s ease;
  overscroll-behavior: contain;
}

.vtp[hidden] {
  display: none;
}

.vtp.is-open {
  opacity: 1;
}

.vtp-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--vtp-grid) 1px, transparent 1px), linear-gradient(90deg, var(--vtp-grid) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 45%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 75% 60% at 50% 45%, #000 15%, transparent 72%);
}

.vtp-close {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  right: 10px;
  z-index: 2;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--vtp-muted);
  outline: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
}

.vtp-close svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.vtp-close:active {
  background: rgba(127, 127, 127, .15);
}

/* С клавиатуры фокус виден по фону, без рамки */
.vtp-close:focus-visible {
  background: rgba(127, 127, 127, .12);
}

html.vtp-lock,
html.vtp-lock body {
  overflow: hidden;
}

.vtb.vtb--pop {
  --vtb-text: var(--vtp-text);
  --vtb-btn: #0842a0;
  --vtb-btn-text: #fff;
  --vtb-red: #ff5a4f;
  position: relative;
  z-index: 1;
  flex-direction: column;
  gap: 77px;
  width: 100%;
  max-width: 420px;
  height: auto;
  text-align: center;
}

.vtb--pop .vtb-pic {
  flex: none;
  gap: 10px;
}

.vtb--pop .vtb-line {
  gap: 4px;
}

.vtb--pop .vtb-word {
  width: 162px;
  height: 54px;
}

.vtb--pop .vtb-wave {
  width: 162px;
  height: 9px;
}

.vtb--pop .vtb-wave path {
  stroke-width: 3px;
}

.vtb--pop .vtb-body {
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 51px;
}

.vtb--pop .vtb-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s, transform .45s cubic-bezier(.2, .7, .3, 1);
}

.vtb--pop .vtb-title {
  display: flex;
  flex-direction: column;
  color: var(--vtp-text);
}

.vtb--pop .vtb-t1 {
  font: 600 30px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.vtb--pop .vtb-t2 {
  font: 600 39px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* на узких экранах (320px) чуть меньше, чтобы строка не переносилась */
  font-size: min(39px, 10.5vw);
}

.vtb--pop .vtb-sub {
  font: 400 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--vtp-muted);
}

.vtb--pop.is-btn .vtb-text {
  opacity: 1;
  transform: none;
}

.vtb--pop .vtb-btn {
  -webkit-mask: none;
  mask: none;
  height: 60px;
  padding: 0 30px;
  border-radius: 999px;
  font: 600 30px/60px system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .8);
  transition: opacity .35s .35s, transform .35s cubic-bezier(.3, 1.6, .5, 1) .35s;
}

@media (hover: hover) {
  .vtb--pop:hover .vtb-btn {
    background-color: #0a4fbf;
  }
}

@media (min-width: 1024px) {
  .vtp {
    display: none !important;
  }
}

/* Баннер 2 «Может ты гений?» → /tests/iq-1.html (27.10.2026, пока только на /help). Блок .vib.
   В шапке: голова Эйнштейна, надпись и маленькая чёрная кнопка; голова увеличивается и покачивается через 3 с, потом раз в 20 с.
   Во всплывашке (.vib--pop): силуэты эволюции с головой на пятой фигуре; голова раз в 3 с увеличивается
   и покачивается, как в шапке, надпись пульсирует раз в секунду. Блик по кнопке раз в 10 с (во всплывашке — 5 с).
   Классы is-wig и is-shine ставит tests-banners.js. */
.vib {
  --vib-text: #000;
  --vib-btn: #000;
  --vib-btn-text: #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 400px;
  height: 50px;
  color: var(--vib-text);
  text-decoration: none;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.vib:hover {
  text-decoration: none;
  color: var(--vib-text);
}

.vib-head {
  display: block;
  flex: none;
  width: 35px;
  height: auto;
  transform-origin: 50% 85%;
}

.vib.is-wig .vib-head {
  animation: vib-wig 1.6s ease-in-out;
}

.vib-title {
  display: block;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.vib-btn {
  position: relative;
  overflow: hidden;
  display: inline-block;
  flex: none;
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  background: var(--vib-btn);
  color: var(--vib-btn-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  white-space: nowrap;
  transition: background-color .2s;
}

.vib-btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg);
  opacity: 0;
}

.vib.is-shine .vib-btn::after {
  animation: vtb-shine .8s ease-out;
}

@keyframes vib-wig {
  0% {
    transform: none;
  }

  15% {
    transform: scale(1.18) rotate(-8deg);
  }

  30% {
    transform: scale(1.22) rotate(7deg);
  }

  45% {
    transform: scale(1.22) rotate(-6deg);
  }

  60% {
    transform: scale(1.2) rotate(5deg);
  }

  78% {
    transform: scale(1.1) rotate(-2deg);
  }

  100% {
    transform: none;
  }
}

@keyframes vib-pulse {
  0% {
    transform: none;
  }

  25% {
    transform: scale(1.06);
  }

  50% {
    transform: scale(1.01);
  }

  70% {
    transform: scale(1.04);
  }

  100% {
    transform: none;
  }
}

@media (hover: hover) {
  .vib:hover .vib-btn {
    background-color: #222;
  }
}

@media (prefers-color-scheme: dark) {
  .vib {
    --vib-text: #e3e3e3;
  }

  .vib-btn {
    box-shadow: inset 0 0 0 1px #3a3d41;
  }
}

/* Всплывашка 2: синий фон как у кнопок сайта, в обеих темах */
.vtp.vtp--iq {
  --vtp-bg: #0842a0;
  --vtp-text: #fff;
  --vtp-muted: rgba(255, 255, 255, .7);
}

.vib.vib--pop {
  position: relative;
  z-index: 1;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 420px;
  height: auto;
  text-align: center;
  --vib-text: #fff;
}

/* Картинка из макета: 262×94, голова — на пятой фигуре (координаты сняты с макета Василевса) */
.vib-evo {
  position: relative;
  display: block;
  width: 262px;
  height: 94px;
}

.vib-evo-img {
  display: block;
  width: 100%;
  height: 100%;
}

.vib--pop .vib-head {
  position: absolute;
  left: 61.4%;
  top: 6.2%;
  width: 8.3%;
  height: auto;
}

.vib--pop .vib-title {
  margin-top: 44px;
  font-size: min(39px, 10.5vw);
  font-weight: 700;
  white-space: normal;
}

/* Во всплывашке голова качается так же, как в шапке (класс is-wig, раз в 3 с — data-every во фрагменте),
   но увеличивается на 20% сильнее (vib-wig-pop); надпись пульсирует раз в секунду. */
.vib.vib--pop.is-wig .vib-head {
  animation: vib-wig-pop 1.6s ease-in-out;
}

@keyframes vib-wig-pop {
  0% {
    transform: none;
  }

  15% {
    transform: scale(1.216) rotate(-8deg);
  }

  30% {
    transform: scale(1.264) rotate(7deg);
  }

  45% {
    transform: scale(1.264) rotate(-6deg);
  }

  60% {
    transform: scale(1.24) rotate(5deg);
  }

  78% {
    transform: scale(1.12) rotate(-2deg);
  }

  100% {
    transform: none;
  }
}

.vib--pop .vib-title {
  animation: vib-beat 1s ease-in-out infinite;
}

@keyframes vib-beat {
  0%,
  100% {
    transform: none;
  }

  40% {
    transform: scale(1.05);
  }
}

.vib--pop .vib-btn {
  margin-top: 82px;
  height: 50px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 23px;
  font-weight: 600;
  line-height: 50px;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .6);
}

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

  .vib *,
  .vib *::after {
    animation: none !important;
  }
}

/* Ротация баннеров (27.10.2026): шаблон кладёт варианты в обёртки .vtr, tests-banners.js оставляет один (is-on) */
.vtr:not(.is-on) {
  display: none;
}