/* Кастомный курсор — вынесен из style.css для переиспользования на юр-страницах.
   Самодостаточен: свои переменные, без зависимостей от site-переменных. */
.site-cursor {
  --cursor-scale: 1;
  --cursor-rotation: 0deg;
  position: fixed;
  z-index: 2147483647;
  inset: 0;
  display: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
  contain: strict;
}

.site-cursor.is-enabled {
  display: block;
}

.site-cursor.is-visible {
  opacity: 1;
}

@media (pointer: fine) and (hover: hover) {
  html.custom-cursor-active,
  html.custom-cursor-active * {
    cursor: none !important;
  }
}

.cursor-core,
.cursor-pulse,
.cursor-reticle,
.cursor-trail__ghost {
  position: fixed;
  top: 0;
  left: 0;
  will-change: transform;
}

.cursor-core {
  width: 5px;
  height: 5px;
  border: 1px solid rgba(42, 48, 54, 0.92);
  background: rgba(235, 242, 246, 0.8);
  box-shadow:
    -1px 0 2px rgba(237, 72, 113, 0.32),
    1px 0 2px rgba(62, 205, 220, 0.34);
}

.cursor-reticle {
  width: 44px;
  height: 44px;
}

.cursor-rotor {
  position: absolute;
  inset: 0;
  transform: rotate(var(--cursor-rotation)) scale(var(--cursor-scale));
  transition: transform 180ms cubic-bezier(0.22, 0.8, 0.24, 1);
  will-change: transform;
}

.cursor-frame {
  position: absolute;
  inset: 0;
}

.cursor-frame i {
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: currentColor;
  border-style: solid;
  border-width: 0;
}

.cursor-frame i:nth-child(1) {
  top: 0;
  left: 0;
  border-top-width: 1px;
  border-left-width: 1px;
}

.cursor-frame i:nth-child(2) {
  top: 0;
  right: 0;
  border-top-width: 1px;
  border-right-width: 1px;
}

.cursor-frame i:nth-child(3) {
  right: 0;
  bottom: 0;
  border-right-width: 1px;
  border-bottom-width: 1px;
}

.cursor-frame i:nth-child(4) {
  bottom: 0;
  left: 0;
  border-bottom-width: 1px;
  border-left-width: 1px;
}

.cursor-frame--main {
  color: rgba(61, 68, 75, 0.78);
  filter: drop-shadow(0 0 3px rgba(136, 205, 220, 0.2));
}

.cursor-frame--red,
.cursor-frame--cyan {
  opacity: 0.18;
  filter: blur(0.2px);
}

.cursor-frame--red {
  color: #ff6689;
  transform: translate3d(-1px, 0, 0);
}

.cursor-frame--cyan {
  color: #4ee5ed;
  transform: translate3d(1px, 0, 0);
}

.site-cursor.is-hovering {
  --cursor-scale: 0.84;
}

.site-cursor.is-hovering .cursor-frame--red,
.site-cursor.is-hovering .cursor-frame--cyan {
  opacity: 0.72;
}

.site-cursor.is-hovering .cursor-frame--red {
  transform: translate3d(-3px, -1px, 0);
}

.site-cursor.is-hovering .cursor-frame--cyan {
  transform: translate3d(3px, 1px, 0);
}

.site-cursor.is-hovering .cursor-frame--main {
  color: rgba(39, 47, 54, 0.92);
  filter:
    drop-shadow(-2px 0 5px rgba(255, 74, 121, 0.48))
    drop-shadow(2px 0 5px rgba(64, 226, 239, 0.52));
}

@media (pointer: fine) and (hover: hover) {
  .site-cursor.is-hovering .cursor-core {
    animation: cursor-jitter 192ms steps(1, end) infinite;
    box-shadow:
      -4px 0 8px rgba(255, 68, 116, 0.72),
      4px 0 8px rgba(55, 225, 239, 0.76),
      0 0 6px rgba(242, 248, 250, 0.86);
  }
}

@keyframes cursor-jitter {
  0% { translate: -1px 1px; }
  20% { translate: 2px -1px; }
  40% { translate: -2px 0; }
  60% { translate: 1px 2px; }
  80% { translate: 0 -2px; }
  100% { translate: 1px 0; }
}

.cursor-trail__ghost {
  width: 18px;
  height: 18px;
  opacity: 0;
  background:
    linear-gradient(90deg, rgba(93, 107, 117, 0.24) 5px, transparent 5px) 0 0 / 100% 1px no-repeat,
    linear-gradient(rgba(93, 107, 117, 0.24) 5px, transparent 5px) 0 0 / 1px 100% no-repeat,
    linear-gradient(270deg, rgba(78, 197, 213, 0.18) 5px, transparent 5px) 100% 100% / 100% 1px no-repeat,
    linear-gradient(0deg, rgba(224, 91, 139, 0.14) 5px, transparent 5px) 100% 100% / 1px 100% no-repeat;
  transition: opacity 180ms ease;
}

.site-cursor.is-moving .cursor-trail__ghost:nth-child(1) { opacity: 0.28; }
.site-cursor.is-moving .cursor-trail__ghost:nth-child(2) { opacity: 0.18; }
.site-cursor.is-moving .cursor-trail__ghost:nth-child(3) { opacity: 0.1; }

.cursor-pulse {
  width: 12px;
  height: 12px;
  opacity: 0;
  border: 1px solid rgba(74, 124, 139, 0.42);
}

.cursor-pulse.is-active {
  animation: cursor-pulse 360ms ease-out;
}

@keyframes cursor-pulse {
  0% {
    opacity: 0.65;
    transform: translate3d(var(--pulse-x), var(--pulse-y), 0) scale(0.35) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--pulse-x), var(--pulse-y), 0) scale(2.4) rotate(45deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-trail {
    display: none;
  }

  .site-cursor.is-hovering .cursor-core {
    animation: none;
  }

  .cursor-rotor {
    transition-duration: 0ms;
  }
}