/* Понятные кнопки управления поверх стилей Webflow (2026-10-23).
   Токены - здесь; сами кнопки - белые на синей сцене, при наведении синие, при нажатии сжимаются. */
:root {
  --ny-blue: #0014bf;
  --ny-blue-deep: #000c80;
  --ny-white: #fff;
  --ny-ring: rgba(255, 255, 255, .6);
  --ny-shadow: 0 .5rem 1.5rem rgba(0, 8, 90, .35);
  --ny-btn: clamp(3.5rem, 4.4vw, 5rem);        /* круглые стрелки */
  --ny-pill-h: clamp(3rem, 3.8vw, 4.25rem);     /* кнопки-таблетки */
  --ny-pill-pad: clamp(1.25rem, 1.7vw, 2rem);
  --ny-font: clamp(.9375rem, 1.15vw, 1.25rem);
  --ny-dur: .25s;
  --ny-dur-pulse: 2.2s;
  --ny-ease: cubic-bezier(.2, .7, .2, 1);
  --ny-press: .93;
  --ny-hover: 1.06;
  --ny-snow-scale: 1.6;
  --ny-snow-opacity: .75;
}

/* крупный новогодний указатель: синяя стрелка в белой обводке видна и на снегу, и на небе */
html, body, .content, .teammate-card { cursor: url("../images/cursor.svg") 5 3, auto; }
.btn-div-left, .btn-div-right, .modal-btn, .press, .close, .modal-button, .lotie-2, .lottie-1, a { cursor: url("../images/cursor-pointer.svg") 22 22, pointer; }

/* снег реже: видео крупнее (видно меньше снежинок) и чуть прозрачнее */
.background-video video { transform: scale(var(--ny-snow-scale)); opacity: var(--ny-snow-opacity); }

/* общие состояния */
.btn-div-left, .btn-div-right, .modal-btn, .press, .close {
  transition: scale var(--ny-dur) var(--ny-ease), background-color var(--ny-dur) var(--ny-ease), color var(--ny-dur) var(--ny-ease), box-shadow var(--ny-dur) var(--ny-ease);
  -webkit-tap-highlight-color: transparent;
}
.btn-div-left img, .btn-div-right img, .close img { transition: filter var(--ny-dur) var(--ny-ease); }

/* стрелки между домиками */
.btn-div-left, .btn-div-right {
  position: relative;
  width: var(--ny-btn);
  height: var(--ny-btn);
  padding: 0;
  border-radius: 999px;
  background-color: var(--ny-white);
  box-shadow: var(--ny-shadow);
}
.btn-div-left img, .btn-div-right img { width: 36%; height: auto; }
.btn-div-left:active, .btn-div-right:active { scale: var(--ny-press); }
/* «дальше» мягко пульсирует, подсказывая, куда нажимать */
.btn-div-right::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--ny-ring);
  animation: ny-pulse var(--ny-dur-pulse) var(--ny-ease) infinite;
  pointer-events: none;
}

/* «Meet the team» на домике и «Enter the village» на первом экране */
.modal-btn, .press {
  height: var(--ny-pill-h);
  padding: 0 var(--ny-pill-pad);
  gap: .6em;
  border-radius: 999px;
  background-color: var(--ny-white);
  color: var(--ny-blue);
  -webkit-text-fill-color: currentColor;
  background-clip: border-box;
  box-shadow: var(--ny-shadow);
  white-space: nowrap;
}
.modal-btn .anim-wrapper, .press .anim-wrapper { display: none; }
.modal-btn .text-s, .press .text-s { font-size: var(--ny-font); line-height: 1; letter-spacing: .02em; color: inherit; }
.modal-btn::before, .press::before {
  content: "";
  flex: none;
  width: .55em;
  height: .55em;
  border-radius: 50%;
  background-color: currentColor;
  font-size: var(--ny-font);
  animation: ny-dot var(--ny-dur-pulse) var(--ny-ease) infinite;
}
.modal-btn::after, .press::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--ny-ring);
  animation: ny-pulse var(--ny-dur-pulse) var(--ny-ease) infinite;
  pointer-events: none;
}
.press { position: relative; }
.modal-btn:active, .press:active { scale: var(--ny-press); }

/* закрыть панель команды */
.close { background-color: var(--ny-blue); box-shadow: var(--ny-shadow); }
.close img { filter: brightness(0) invert(1); }
.close:active { scale: var(--ny-press); }

/* карточки команды больше не открываются */
.teammate-card { display: flex; }
.teammate-card .teammate-img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

/* наведение - только там, где есть мышь (на телефоне ховер «залипает») */
@media (hover: hover) {
  .btn-div-left:hover, .btn-div-right:hover { background-color: var(--ny-blue); scale: var(--ny-hover); }
  .btn-div-left:hover img, .btn-div-right:hover img { filter: brightness(0) invert(1); }
  .modal-btn:hover, .press:hover { background-color: var(--ny-blue); color: var(--ny-white); scale: var(--ny-hover); }
  .close:hover { background-color: var(--ny-blue-deep); scale: var(--ny-hover); }
}

@keyframes ny-pulse {
  0% { opacity: .9; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.35); }
}
@keyframes ny-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-div-right::after, .modal-btn::after, .press::after, .modal-btn::before, .press::before { animation: none; }
  .btn-div-left, .btn-div-right, .modal-btn, .press, .close { transition: none; }
}