/* ─── Cursor system ─────────────────────────────────────────────────
   Используется и на лэндинге (index.html), и в превью админки (admin.html).
   .cur — позиционирующий контейнер. Графика — через ::before и ::after.
   Стиль выбирается через data-cursor="<id>". Режим наложения —
   через data-cursor-blend="<mode>". 30 вариантов ниже. */
.cur{
  position:fixed;left:0;top:0;width:0;height:0;
  pointer-events:none;z-index:6;
  transform:translate(-50%,-50%);
  --cur-c:#fff;
  color:var(--cur-c);
}
.cur::before,.cur::after{
  content:"";position:absolute;left:0;top:0;
  box-sizing:border-box;
}
@media (hover:none){.cur{display:none}}

/* Blend modes */
.cur[data-cursor-blend="normal"]     {mix-blend-mode:normal}
.cur[data-cursor-blend="difference"] {mix-blend-mode:difference}
.cur[data-cursor-blend="exclusion"]  {mix-blend-mode:exclusion}
.cur[data-cursor-blend="screen"]     {mix-blend-mode:screen}
.cur[data-cursor-blend="overlay"]    {mix-blend-mode:overlay}
.cur[data-cursor-blend="multiply"]   {mix-blend-mode:multiply}
.cur[data-cursor-blend="lighten"]    {mix-blend-mode:lighten}
.cur[data-cursor-blend="luminosity"] {mix-blend-mode:luminosity}

.cur[data-cursor]::before{border-radius:50%}

/* 1. ring-dot — дефолт */
.cur[data-cursor="ring-dot"]::before{width:36px;height:36px;margin:-18px 0 0 -18px;border:1px solid currentColor;opacity:.6}
.cur[data-cursor="ring-dot"]::after{width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}

/* 2. dot */
.cur[data-cursor="dot"]::before{width:8px;height:8px;margin:-4px 0 0 -4px;background:currentColor}

/* 3. ring */
.cur[data-cursor="ring"]::before{width:22px;height:22px;margin:-11px 0 0 -11px;border:1.5px solid currentColor}

/* 4. ring-thick */
.cur[data-cursor="ring-thick"]::before{width:24px;height:24px;margin:-12px 0 0 -12px;border:3px solid currentColor}

/* 5. ring-large */
.cur[data-cursor="ring-large"]::before{width:48px;height:48px;margin:-24px 0 0 -24px;border:1px solid currentColor;opacity:.7}

/* 6. dual-ring */
.cur[data-cursor="dual-ring"]::before{width:32px;height:32px;margin:-16px 0 0 -16px;border:1px solid currentColor}
.cur[data-cursor="dual-ring"]::after{width:14px;height:14px;margin:-7px 0 0 -7px;border:1px solid currentColor;border-radius:50%}

/* 7. dot-pulse */
.cur[data-cursor="dot-pulse"]::before{width:6px;height:6px;margin:-3px 0 0 -3px;background:currentColor}
.cur[data-cursor="dot-pulse"]::after{width:14px;height:14px;margin:-7px 0 0 -7px;border:1px solid currentColor;border-radius:50%;animation:cur-pulse 1.6s ease-out infinite}
@keyframes cur-pulse{0%{transform:scale(0.6);opacity:.9}100%{transform:scale(3);opacity:0}}

/* 8. ring-pulse */
.cur[data-cursor="ring-pulse"]::before{width:24px;height:24px;margin:-12px 0 0 -12px;border:1.5px solid currentColor;animation:cur-rpulse 1.6s ease-in-out infinite}
@keyframes cur-rpulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.35);opacity:.4}}

/* 9. cross */
.cur[data-cursor="cross"]::before{width:18px;height:1.5px;margin:-0.75px 0 0 -9px;background:currentColor;border-radius:0}
.cur[data-cursor="cross"]::after{width:1.5px;height:18px;margin:-9px 0 0 -0.75px;background:currentColor;border-radius:0}

/* 10. cross-thin */
.cur[data-cursor="cross-thin"]::before{width:24px;height:1px;margin:-0.5px 0 0 -12px;background:currentColor;border-radius:0;opacity:.7}
.cur[data-cursor="cross-thin"]::after{width:1px;height:24px;margin:-12px 0 0 -0.5px;background:currentColor;border-radius:0;opacity:.7}

/* 11. crosshair */
.cur[data-cursor="crosshair"]::before{width:26px;height:26px;margin:-13px 0 0 -13px;border:1px solid currentColor}
.cur[data-cursor="crosshair"]::after{
  width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:0;
  background:
    linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,
    linear-gradient(currentColor,currentColor) center/1px 100% no-repeat;
}

/* 12. crosshair-dot */
.cur[data-cursor="crosshair-dot"]::before{
  width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:0;
  background:
    linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,
    linear-gradient(currentColor,currentColor) center/1px 100% no-repeat;
}
.cur[data-cursor="crosshair-dot"]::after{width:4px;height:4px;margin:-2px 0 0 -2px;background:currentColor;border-radius:50%}

/* 13. square */
.cur[data-cursor="square"]::before{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:currentColor;border-radius:0}

/* 14. square-outline */
.cur[data-cursor="square-outline"]::before{width:14px;height:14px;margin:-7px 0 0 -7px;border:1.5px solid currentColor;border-radius:0}

/* 15. diamond */
.cur[data-cursor="diamond"]::before{width:11px;height:11px;margin:-5.5px 0 0 -5.5px;background:currentColor;border-radius:0;transform:rotate(45deg)}

/* 16. diamond-outline */
.cur[data-cursor="diamond-outline"]::before{width:14px;height:14px;margin:-7px 0 0 -7px;border:1.5px solid currentColor;border-radius:0;transform:rotate(45deg)}

/* 17. triangle */
.cur[data-cursor="triangle"]::before{
  width:0;height:0;margin:-4px 0 0 -7px;
  border-left:7px solid transparent;border-right:7px solid transparent;
  border-bottom:12px solid currentColor;
  border-radius:0;
}

/* 18. caret */
.cur[data-cursor="caret"]::before{width:2px;height:18px;margin:-9px 0 0 -1px;background:currentColor;border-radius:1px;animation:cur-blink 1.05s steps(1) infinite}
@keyframes cur-blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* 19. arrow */
.cur[data-cursor="arrow"]::before{
  width:0;height:0;margin:-2px 0 0 -2px;border-radius:0;
  border-left:9px solid currentColor;border-bottom:9px solid transparent;
  transform:rotate(45deg);transform-origin:0 0;
}

/* 20. spin-ring */
.cur[data-cursor="spin-ring"]::before{
  width:24px;height:24px;margin:-12px 0 0 -12px;
  border:1.5px solid currentColor;border-top-color:transparent;
  animation:cur-spin 1.2s linear infinite;
}
@keyframes cur-spin{to{transform:rotate(360deg)}}

/* 21. orbit */
.cur[data-cursor="orbit"]::before{width:4px;height:4px;margin:-2px 0 0 -2px;background:currentColor}
.cur[data-cursor="orbit"]::after{
  width:4px;height:4px;margin:-2px 0 0 -2px;background:currentColor;border-radius:50%;
  transform-origin:50% 50%;
  animation:cur-orbit 2.2s linear infinite;
}
@keyframes cur-orbit{
  from{transform:rotate(0deg) translateX(14px) rotate(0deg)}
  to  {transform:rotate(360deg) translateX(14px) rotate(-360deg)}
}

/* 22. breathing */
.cur[data-cursor="breathing"]::before{width:10px;height:10px;margin:-5px 0 0 -5px;background:currentColor;animation:cur-breath 2.4s ease-in-out infinite}
@keyframes cur-breath{0%,100%{transform:scale(0.7);opacity:.7}50%{transform:scale(1.3);opacity:1}}

/* 23. ripple */
.cur[data-cursor="ripple"]::before{width:8px;height:8px;margin:-4px 0 0 -4px;background:currentColor}
.cur[data-cursor="ripple"]::after{width:14px;height:14px;margin:-7px 0 0 -7px;border:1px solid currentColor;border-radius:50%;animation:cur-ripple 1.4s linear infinite}
@keyframes cur-ripple{0%{transform:scale(0.5);opacity:.9}100%{transform:scale(3.5);opacity:0}}

/* 24. tri-dot */
.cur[data-cursor="tri-dot"]::before{
  width:24px;height:24px;margin:-12px 0 0 -12px;
  background:
    radial-gradient(circle 2px at 12px 3px,currentColor 100%,transparent 100%),
    radial-gradient(circle 2px at 3px 19px,currentColor 100%,transparent 100%),
    radial-gradient(circle 2px at 21px 19px,currentColor 100%,transparent 100%);
  background-repeat:no-repeat;border-radius:0;
  animation:cur-spin 4s linear infinite;
}

/* 25. wave */
.cur[data-cursor="wave"]::before{width:6px;height:6px;margin:-3px 0 0 -3px;background:currentColor}
.cur[data-cursor="wave"]::after{
  width:30px;height:30px;margin:-15px 0 0 -15px;border:1px solid currentColor;border-radius:50%;
  animation:cur-wave 2s ease-out infinite;
}
@keyframes cur-wave{0%{transform:scale(0.3);opacity:.8}100%{transform:scale(1.4);opacity:0}}

/* 26. blink */
.cur[data-cursor="blink"]::before{width:8px;height:8px;margin:-4px 0 0 -4px;background:currentColor;animation:cur-blink 1.05s steps(1) infinite}

/* 27. plus-glow */
.cur[data-cursor="plus-glow"]::before{width:18px;height:1.5px;margin:-0.75px 0 0 -9px;background:currentColor;border-radius:0;box-shadow:0 0 10px currentColor}
.cur[data-cursor="plus-glow"]::after{width:1.5px;height:18px;margin:-9px 0 0 -0.75px;background:currentColor;border-radius:0;box-shadow:0 0 10px currentColor}

/* 28. dual-cross */
.cur[data-cursor="dual-cross"]::before{
  width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:0;
  background:
    linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;
}
.cur[data-cursor="dual-cross"]::after{
  width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:0;
  background:
    linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,
    linear-gradient(currentColor,currentColor) center/1px 100% no-repeat;
  transform:rotate(45deg);opacity:.85;
}

/* 29. target */
.cur[data-cursor="target"]::before{
  width:32px;height:32px;margin:-16px 0 0 -16px;
  border:1px solid currentColor;
  box-shadow:inset 0 0 0 6px transparent, inset 0 0 0 7px currentColor;
}
.cur[data-cursor="target"]::after{width:3px;height:3px;margin:-1.5px 0 0 -1.5px;background:currentColor}

/* 30. compass */
.cur[data-cursor="compass"]::before{
  width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:0;
  background:
    linear-gradient(currentColor,currentColor) left  center/6px 1px no-repeat,
    linear-gradient(currentColor,currentColor) right center/6px 1px no-repeat,
    linear-gradient(currentColor,currentColor) center top    /1px 6px no-repeat,
    linear-gradient(currentColor,currentColor) center bottom /1px 6px no-repeat;
}
.cur[data-cursor="compass"]::after{width:4px;height:4px;margin:-2px 0 0 -2px;background:currentColor;border-radius:50%}

/* Override для preview-карточек в админке: курсор внутри .cur-card .preview */
.cur-card .preview .cur{position:absolute !important;left:50% !important;top:50% !important;z-index:auto !important}
@media (hover:none){.cur-card .preview .cur{display:block !important}}