/* ════════════════════════════════════════════════════════
   CURSOR PLUGIN v2 — Styles
   ════════════════════════════════════════════════════════ */

/* ── Hide native cursor (fine pointer devices only) ──── */
@media (pointer: fine) {
  *,
  a, button, [role="button"],
  input, select, textarea,
  [data-cursor-magnetique],
  [data-cursor-icon],
  [data-cursor-text] {
    cursor: none !important;
  }
}

/* ─────────────────────────────────────────────────────────
   WRAPPER  — pinned at 0,0; translate3d follows mouse
   ───────────────────────────────────────────────────────── */
.cursor-wrapper {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 99999;
  will-change: transform;
  mix-blend-mode: var(--cursor-blend, normal);
  transition: opacity 0.35s ease;
}

/* ─────────────────────────────────────────────────────────
   STRETCH  — handles velocity squish/stretch via JS each frame
   No CSS transitions here; JS writes transform every rAF.
   ───────────────────────────────────────────────────────── */
.cursor-stretch {
  position: absolute;
  top: 0; left: 0;
  will-change: transform;
  pointer-events: none; /* Allows hover detection on elements below */
}

.cursor-body {
  position: absolute;
  top: 0; left: 0;     /* Ensures reliable positioning */
  width: var(--cursor-size);
  height: var(--cursor-size);
  background: var(--cursor-bg);
  pointer-events: none; /* Prevents the cursor from blocking clicks */
  border-radius: var(--cursor-radius);
  opacity: var(--cursor-opacity);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--cursor-outline-width, 2px) solid transparent;
  box-shadow: none;
  overflow: visible;
  transition:
    width              var(--cursor-shape-transition),
    height             var(--cursor-shape-transition),
    border-radius      var(--cursor-shape-transition),
    transform          var(--cursor-shape-transition),
    background         0.25s ease,
    opacity            0.25s ease,
    border-color       0.25s ease,
    box-shadow         0.3s  ease;
}

/* ─────────────────────────────────────────────────────────
   CONTENT  — icon / text inside the body
   ───────────────────────────────────────────────────────── */
.cursor-content {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(var(--content-rot, 0deg)) scale(0.6);
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  pointer-events: none;
}

.cursor-content svg {
  width:  var(--cursor-icon-size, 28px);
  height: var(--cursor-icon-size, 28px);
  color: var(--cursor-icon-color, var(--cursor-content-color, #fff));
  stroke-width: 1.5;
  flex-shrink: 0;
}

.cursor-content .text,
.cursor-content.text {
  font-size:      var(--cursor-text-size, 11px);
  font-weight:    600;
  color:          var(--cursor-text-color, var(--cursor-content-color, #fff));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height:    1;
}


/* ═══════════════════════════════════════════════════════
   HOVER STATE
   ═══════════════════════════════════════════════════════ */
.cursor-wrapper.hover .cursor-body {
  width:   var(--cursor-size-hover);
  height:  var(--cursor-size-hover);
  background: var(--cursor-hover-bg);
  opacity: var(--cursor-hover-opacity);
}

.cursor-wrapper.hover .cursor-content {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(var(--content-rot, 0deg)) scale(1);
}

/* ── Square shape ── */
.cursor-wrapper.hover.shape-square .cursor-body {
  border-radius: 6px;
}

/* ── Losange / Diamond shape ── */
.cursor-wrapper.hover.shape-losange .cursor-body {
  border-radius: 1em;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* ── Pill shape ── */
.cursor-wrapper.hover.shape-pill .cursor-body {
  border-radius: 9999px;
  width: calc(var(--cursor-size-hover) * 2.2);
}

/* ── Triangle shape ── */
.cursor-wrapper.hover.shape-triangle .cursor-body {
  border-radius: 0;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* ── Hexagon shape ── */
.cursor-wrapper.hover.shape-hexagon .cursor-body {
  border-radius: 0;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* ── Star shape ── */
.cursor-wrapper.hover.shape-star .cursor-body {
  border-radius: 0;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* ── Cross / Plus ── */
.cursor-wrapper.hover.shape-cross .cursor-body {
  border-radius: 0;
  clip-path: polygon(33% 0%, 67% 0%, 67% 33%, 100% 33%, 100% 67%, 67% 67%, 67% 100%, 33% 100%, 33% 67%, 0% 67%, 0% 33%, 33% 33%);
}

/* ── Arrow right ── */
.cursor-wrapper.hover.shape-arrow .cursor-body {
  border-radius: 0;
  clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}

/* ── Arrow up ── */
.cursor-wrapper.hover.shape-arrow-up .cursor-body {
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 50%, 70% 50%, 70% 100%, 30% 100%, 30% 50%, 0% 50%);
}

/* ── Chevron / Flag ── */
.cursor-wrapper.hover.shape-chevron .cursor-body {
  border-radius: 0;
  clip-path: polygon(25% 0%, 100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%);
}

/* ── Pentagon ── */
.cursor-wrapper.hover.shape-pentagon .cursor-body {
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

/* ── Octagon ── */
.cursor-wrapper.hover.shape-octagon .cursor-body {
  border-radius: 0;
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

/* ── Parallelogram ── */
.cursor-wrapper.hover.shape-parallelogram .cursor-body {
  border-radius: 0;
  clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
}

/* ── Trapezoid ── */
.cursor-wrapper.hover.shape-trapezoid .cursor-body {
  border-radius: 0;
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

/* ── Shield ── */
.cursor-wrapper.hover.shape-shield .cursor-body {
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 15%, 100% 60%, 50% 100%, 0% 60%, 0% 15%);
}

/* ── Lightning bolt ── */
.cursor-wrapper.hover.shape-bolt .cursor-body {
  border-radius: 0;
  clip-path: polygon(60% 0%, 25% 55%, 55% 55%, 35% 100%, 80% 40%, 50% 40%, 75% 0%);
}

/* ── Chat bubble ── */
.cursor-wrapper.hover.shape-chat .cursor-body {
  border-radius: 0;
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 60% 75%, 45% 100%, 30% 75%, 0% 75%);
}

/* ── Ribbon / Bookmark ── */
.cursor-wrapper.hover.shape-ribbon .cursor-body {
  border-radius: 0;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 78%, 0% 100%);
}

/* ── Notch ── */
.cursor-wrapper.hover.shape-notch .cursor-body {
  border-radius: 0;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 60% 100%, 50% 82%, 40% 100%, 0% 100%);
}

/* ── Burst / 8-point star ── */
.cursor-wrapper.hover.shape-burst .cursor-body {
  border-radius: 0;
  clip-path: polygon(50% 0%, 55% 35%, 80% 15%, 65% 42%, 100% 50%, 65% 58%, 80% 85%, 55% 65%, 50% 100%, 45% 65%, 20% 85%, 35% 58%, 0% 50%, 35% 42%, 20% 15%, 45% 35%);
}

/* ── Moon / Crescent ── */
.cursor-wrapper.hover.shape-moon .cursor-body {
  border-radius: 50% 50% 50% 0% / 50% 50% 50% 0%;
}

/* ── Egg ── */
.cursor-wrapper.hover.shape-egg .cursor-body {
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

/* ── Teardrop ── */
.cursor-wrapper.hover.shape-teardrop .cursor-body {
  border-radius: 50% 50% 50% 0%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ── Wave / Organic ── */
.cursor-wrapper.hover.shape-wave .cursor-body {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

/* ── Blob ── */
.cursor-wrapper.hover.shape-blob .cursor-body {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

/* ── Cut corners / Octaframe ── */
.cursor-wrapper.hover.shape-cut .cursor-body {
  border-radius: 0;
  clip-path: polygon(15% 0%, 85% 0%, 100% 15%, 100% 85%, 85% 100%, 15% 100%, 0% 85%, 0% 15%);
}

/* ── NEW 20 SHAPES ── */
.cursor-wrapper.hover.shape-rabbet .cursor-body { border-radius: 0; clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%); }
.cursor-wrapper.hover.shape-left-arrow .cursor-body { border-radius: 0; clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%); }
.cursor-wrapper.hover.shape-right-point .cursor-body { border-radius: 0; clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%); }
.cursor-wrapper.hover.shape-left-point .cursor-body { border-radius: 0; clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%); }
.cursor-wrapper.hover.shape-left-chevron .cursor-body { border-radius: 0; clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%); }
.cursor-wrapper.hover.shape-star-4 .cursor-body { border-radius: 0; clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); }
.cursor-wrapper.hover.shape-message-alt .cursor-body { border-radius: 0; clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); }
.cursor-wrapper.hover.shape-door .cursor-body { border-radius: 50% 50% 0 0; clip-path: none; }
.cursor-wrapper.hover.shape-leaf .cursor-body { border-radius: 50% 0 50% 0; clip-path: none; }
.cursor-wrapper.hover.shape-lemon .cursor-body { border-radius: 50% 10% 50% 10%; clip-path: none; }
.cursor-wrapper.hover.shape-triangle-down .cursor-body { border-radius: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.cursor-wrapper.hover.shape-decagon .cursor-body { border-radius: 0; clip-path: polygon(50% 0%, 81% 10%, 100% 35%, 100% 65%, 81% 90%, 50% 100%, 19% 90%, 0% 65%, 0% 35%, 19% 10%); }
.cursor-wrapper.hover.shape-heptagon .cursor-body { border-radius: 0; clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); }
.cursor-wrapper.hover.shape-barrel .cursor-body { border-radius: 50% / 10%; clip-path: none; }
.cursor-wrapper.hover.shape-tv .cursor-body { border-radius: 10% / 50%; clip-path: none; }
.cursor-wrapper.hover.shape-tag .cursor-body { border-radius: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 30%, 30% 0); }
.cursor-wrapper.hover.shape-pin .cursor-body { border-radius: 0; clip-path: polygon(40% 0%, 60% 0%, 60% 40%, 100% 40%, 50% 100%, 0% 40%, 40% 40%); }
.cursor-wrapper.hover.shape-gem .cursor-body { border-radius: 0; clip-path: polygon(20% 0%, 80% 0%, 100% 30%, 50% 100%, 0% 30%); }
.cursor-wrapper.hover.shape-kite .cursor-body { border-radius: 0; clip-path: polygon(50% 0%, 100% 30%, 50% 100%, 0% 30%); }
.cursor-wrapper.hover.shape-banner .cursor-body { border-radius: 0; clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 20% 50%, 0% 0%); }


/* ═══════════════════════════════════════════════════════
   DEFAULT SHAPES  — applied when NOT hovering
   Set data-cursor-shape on #custom-cursor itself.
   ═══════════════════════════════════════════════════════ */
.cursor-wrapper.default-shape-square .cursor-body      { border-radius: 6px; }
.cursor-wrapper.default-shape-losange .cursor-body     { border-radius: 1em; transform: translate(-50%,-50%) rotate(45deg); }
.cursor-wrapper.default-shape-pill .cursor-body        { border-radius: 9999px; width: calc(var(--cursor-size) * 2.2); }
.cursor-wrapper.default-shape-triangle .cursor-body    { border-radius: 0; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.cursor-wrapper.default-shape-hexagon .cursor-body     { border-radius: 0; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
.cursor-wrapper.default-shape-star .cursor-body        { border-radius: 0; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.cursor-wrapper.default-shape-cross .cursor-body       { border-radius: 0; clip-path: polygon(33% 0%, 67% 0%, 67% 33%, 100% 33%, 100% 67%, 67% 67%, 67% 100%, 33% 100%, 33% 67%, 0% 67%, 0% 33%, 33% 33%); }
.cursor-wrapper.default-shape-arrow .cursor-body       { border-radius: 0; clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%); }
.cursor-wrapper.default-shape-arrow-up .cursor-body    { border-radius: 0; clip-path: polygon(50% 0%, 100% 50%, 70% 50%, 70% 100%, 30% 100%, 30% 50%, 0% 50%); }
.cursor-wrapper.default-shape-chevron .cursor-body     { border-radius: 0; clip-path: polygon(25% 0%, 100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%); }
.cursor-wrapper.default-shape-pentagon .cursor-body    { border-radius: 0; clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); }
.cursor-wrapper.default-shape-octagon .cursor-body     { border-radius: 0; clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); }
.cursor-wrapper.default-shape-parallelogram .cursor-body { border-radius: 0; clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%); }
.cursor-wrapper.default-shape-trapezoid .cursor-body   { border-radius: 0; clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); }
.cursor-wrapper.default-shape-shield .cursor-body      { border-radius: 0; clip-path: polygon(50% 0%, 100% 15%, 100% 60%, 50% 100%, 0% 60%, 0% 15%); }
.cursor-wrapper.default-shape-bolt .cursor-body        { border-radius: 0; clip-path: polygon(60% 0%, 25% 55%, 55% 55%, 35% 100%, 80% 40%, 50% 40%, 75% 0%); }
.cursor-wrapper.default-shape-chat .cursor-body        { border-radius: 0; clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 60% 75%, 45% 100%, 30% 75%, 0% 75%); }
.cursor-wrapper.default-shape-ribbon .cursor-body      { border-radius: 0; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 78%, 0% 100%); }
.cursor-wrapper.default-shape-notch .cursor-body       { border-radius: 0; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 60% 100%, 50% 82%, 40% 100%, 0% 100%); }
.cursor-wrapper.default-shape-burst .cursor-body       { border-radius: 0; clip-path: polygon(50% 0%, 55% 35%, 80% 15%, 65% 42%, 100% 50%, 65% 58%, 80% 85%, 55% 65%, 50% 100%, 45% 65%, 20% 85%, 35% 58%, 0% 50%, 35% 42%, 20% 15%, 45% 35%); }
.cursor-wrapper.default-shape-moon .cursor-body        { border-radius: 50% 50% 50% 0% / 50% 50% 50% 0%; }
.cursor-wrapper.default-shape-egg .cursor-body         { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.cursor-wrapper.default-shape-teardrop .cursor-body    { border-radius: 50% 50% 50% 0%; transform: translate(-50%,-50%) rotate(-45deg); }
.cursor-wrapper.default-shape-wave .cursor-body        { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
.cursor-wrapper.default-shape-blob .cursor-body        { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
.cursor-wrapper.default-shape-cut .cursor-body         { border-radius: 0; clip-path: polygon(15% 0%, 85% 0%, 100% 15%, 100% 85%, 85% 100%, 15% 100%, 0% 85%, 0% 15%); }

.cursor-wrapper.default-shape-rabbet .cursor-body { border-radius: 0; clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%); }
.cursor-wrapper.default-shape-left-arrow .cursor-body { border-radius: 0; clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%); }
.cursor-wrapper.default-shape-right-point .cursor-body { border-radius: 0; clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%); }
.cursor-wrapper.default-shape-left-point .cursor-body { border-radius: 0; clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%); }
.cursor-wrapper.default-shape-left-chevron .cursor-body { border-radius: 0; clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%); }
.cursor-wrapper.default-shape-star-4 .cursor-body { border-radius: 0; clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); }
.cursor-wrapper.default-shape-message-alt .cursor-body { border-radius: 0; clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); }
.cursor-wrapper.default-shape-door .cursor-body { border-radius: 50% 50% 0 0; clip-path: none; }
.cursor-wrapper.default-shape-leaf .cursor-body { border-radius: 50% 0 50% 0; clip-path: none; }
.cursor-wrapper.default-shape-lemon .cursor-body { border-radius: 50% 10% 50% 10%; clip-path: none; }
.cursor-wrapper.default-shape-triangle-down .cursor-body { border-radius: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.cursor-wrapper.default-shape-decagon .cursor-body { border-radius: 0; clip-path: polygon(50% 0%, 81% 10%, 100% 35%, 100% 65%, 81% 90%, 50% 100%, 19% 90%, 0% 65%, 0% 35%, 19% 10%); }
.cursor-wrapper.default-shape-heptagon .cursor-body { border-radius: 0; clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); }
.cursor-wrapper.default-shape-barrel .cursor-body { border-radius: 50% / 10%; clip-path: none; }
.cursor-wrapper.default-shape-tv .cursor-body { border-radius: 10% / 50%; clip-path: none; }
.cursor-wrapper.default-shape-tag .cursor-body { border-radius: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 30%, 30% 0); }
.cursor-wrapper.default-shape-pin .cursor-body { border-radius: 0; clip-path: polygon(40% 0%, 60% 0%, 60% 40%, 100% 40%, 50% 100%, 0% 40%, 40% 40%); }
.cursor-wrapper.default-shape-gem .cursor-body { border-radius: 0; clip-path: polygon(20% 0%, 80% 0%, 100% 30%, 50% 100%, 0% 30%); }
.cursor-wrapper.default-shape-kite .cursor-body { border-radius: 0; clip-path: polygon(50% 0%, 100% 30%, 50% 100%, 0% 30%); }
.cursor-wrapper.default-shape-banner .cursor-body { border-radius: 0; clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 20% 50%, 0% 0%); }


/* ═══════════════════════════════════════════════════════
   MODIFIER CLASSES  (added per-element via data-attrs)
   ═══════════════════════════════════════════════════════ */

/* Outline mode: hollow cursor */
.cursor-wrapper.outline .cursor-body {
  background:   transparent !important;
  border-color: var(--cursor-hover-bg);
  border-width: var(--cursor-outline-width, 2px);
  border-style: solid;
}

/* Glow mode */
.cursor-wrapper.glow .cursor-body {
  box-shadow:
    0 0 var(--cursor-glow-blur, 24px) var(--cursor-glow-color),
    0 0 calc(var(--cursor-glow-blur, 24px) * 2.2) var(--cursor-glow-color);
}

/* Pulse ring */
.cursor-wrapper.pulse::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width:  var(--cursor-size-hover, 80px);
  height: var(--cursor-size-hover, 80px);
  border-radius: 50%;
  border: 2px solid var(--cursor-hover-bg);
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  animation: cursor-pulse 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
  pointer-events: none;
}

@keyframes cursor-pulse {
  0%   { transform: translate(-50%, -50%) scale(0.85); opacity: 0.75; }
  100% { transform: translate(-50%, -50%) scale(1.7);  opacity: 0; }
}

/* Border ring (always visible, subtle) */
.cursor-wrapper.ring .cursor-body::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  border: 1px solid var(--cursor-hover-bg);
  opacity: 0.4;
  animation: none;
}


/* ═══════════════════════════════════════════════════════
   EXTENDED VISUAL EFFECTS  (v2 — 20 new modifiers)
   ═══════════════════════════════════════════════════════ */

/* 1. Neon — intense multi-layer colored glow */
.cursor-wrapper.neon .cursor-body {
  box-shadow:
    0 0 4px  var(--cursor-hover-bg),
    0 0 14px var(--cursor-hover-bg),
    0 0 32px var(--cursor-hover-bg),
    0 0 72px var(--cursor-hover-bg);
}

/* 2. Rainbow — cycling hue-rotate */
.cursor-wrapper.rainbow .cursor-body {
  animation: cursor-rainbow 1.8s linear infinite;
}
@keyframes cursor-rainbow {
  to { filter: hue-rotate(360deg); }
}

/* 3. Spin — rotating cursor body */
.cursor-wrapper.spin .cursor-body {
  animation: cursor-spin 2.5s linear infinite;
}
@keyframes cursor-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 4. Breathe — slow scale in/out */
.cursor-wrapper.breathe .cursor-body {
  animation: cursor-breathe 2.2s ease-in-out infinite;
}
@keyframes cursor-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(0.82); }
  50%       { transform: translate(-50%, -50%) scale(1.12); }
}

/* 5. Glitch — distortion / channel split */
.cursor-wrapper.glitch .cursor-body {
  animation: cursor-glitch 0.5s steps(3) infinite;
}
@keyframes cursor-glitch {
  0%,100% { transform: translate(-50%,-50%); filter: none; }
  25%      { transform: translate(calc(-50% - 5px),-50%); filter: hue-rotate(90deg) saturate(3); }
  50%      { transform: translate(calc(-50% + 4px),-50%); filter: hue-rotate(-90deg) saturate(3); }
  75%      { transform: translate(-50%,calc(-50% - 3px)); filter: hue-rotate(45deg); }
}

/* 6. Gradient — animated conic gradient fill */
.cursor-wrapper.gradient .cursor-body {
  background: linear-gradient(135deg, #fe0c32, #ff8c00, #ffd93d, #6bcb77, #4d96ff, #fe0c32) !important;
  background-size: 400% 400% !important;
  animation: cursor-gradient 3s ease infinite;
}
@keyframes cursor-gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 7. Frost — frosted glass */
.cursor-wrapper.frost .cursor-body {
  background: rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.35) !important;
}

/* 8. Shadow — deep layered drop shadow */
.cursor-wrapper.shadow .cursor-body {
  box-shadow:
    0 4px 8px rgba(0,0,0,0.35),
    0 10px 24px rgba(0,0,0,0.25),
    0 22px 48px rgba(0,0,0,0.18);
}

/* 9. Elastic — elastic bounce scale */
.cursor-wrapper.elastic .cursor-body {
  animation: cursor-elastic 1.4s cubic-bezier(0.36,0.07,0.19,0.97) infinite;
}
@keyframes cursor-elastic {
  0%,100% { transform: translate(-50%,-50%) scale(1); }
  25%      { transform: translate(-50%,-50%) scale(1.18); }
  50%      { transform: translate(-50%,-50%) scale(0.88); }
  75%      { transform: translate(-50%,-50%) scale(1.06); }
}

/* 10. Flash — blinking cursor */
.cursor-wrapper.flash .cursor-body {
  animation: cursor-flash 0.7s step-end infinite;
}
@keyframes cursor-flash {
  0%,100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* 11. Dashed — spinning dashed ring overlay (via ::after on body) */
.cursor-wrapper.dashed .cursor-body::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2.5px dashed var(--cursor-hover-bg);
  animation: cursor-dashed-spin 4s linear infinite;
}
@keyframes cursor-dashed-spin {
  to { transform: rotate(360deg); }
}
.cursor-wrapper.dashed .cursor-body { background: transparent !important; }

/* 12. Double — two concentric halo rings */
.cursor-wrapper.double .cursor-body::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  border: 1.5px solid var(--cursor-hover-bg);
  opacity: 0.5;
}
.cursor-wrapper.double .cursor-body::after {
  content: '';
  position: absolute;
  inset: -22px;
  border-radius: inherit;
  border: 1px solid var(--cursor-hover-bg);
  opacity: 0.25;
}

/* 13. Soft — blurred dreamy appearance */
.cursor-wrapper.soft .cursor-body {
  filter: blur(5px);
  transform: translate(-50%, -50%) scale(1.2);
  opacity: 0.75;
}

/* 14. Stripe — animated diagonal stripes */
.cursor-wrapper.stripe .cursor-body {
  background: repeating-linear-gradient(
    45deg,
    var(--cursor-hover-bg) 0px, var(--cursor-hover-bg) 5px,
    rgba(255,255,255,0.25) 5px, rgba(255,255,255,0.25) 10px
  ) !important;
  animation: cursor-stripe 0.6s linear infinite;
}
@keyframes cursor-stripe {
  from { background-position: 0 0; }
  to   { background-position: 20px 0; }
}

/* 15. Highlight — bright inner glow */
.cursor-wrapper.highlight .cursor-body {
  box-shadow:
    inset 0 0 10px rgba(255,255,255,0.7),
    inset 0 0 3px  rgba(255,255,255,0.95);
}

/* 16. Holo — holographic shimmer */
.cursor-wrapper.holo .cursor-body {
  background: linear-gradient(135deg, #ff0080, #ff8c00, #40e0d0, #7b2ff7, #ff0080) !important;
  background-size: 300% 300% !important;
  animation: cursor-holo 2s ease infinite;
}
@keyframes cursor-holo {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 17. Heat — hue cycling heat effect */
.cursor-wrapper.heat .cursor-body {
  animation: cursor-heat 2s linear infinite;
}
@keyframes cursor-heat {
  0%,100% { filter: hue-rotate(0deg) saturate(2) brightness(1.1); }
  50%      { filter: hue-rotate(40deg) saturate(3) brightness(1.3); }
}

/* 18. Electric — flickering electric arc */
.cursor-wrapper.electric .cursor-body {
  animation: cursor-electric 0.12s steps(1) infinite;
}
@keyframes cursor-electric {
  0%   { box-shadow: 0 0 4px #fff, 0 0 14px var(--cursor-hover-bg), 0 0 32px var(--cursor-hover-bg); }
  50%  { box-shadow: 0 0 8px #fff, 0 0 24px var(--cursor-hover-bg), 0 0 64px var(--cursor-hover-bg); }
  100% { box-shadow: 0 0 4px #fff, 0 0 14px var(--cursor-hover-bg), 0 0 32px var(--cursor-hover-bg); }
}

/* 19. Gold — golden metallic gradient */
.cursor-wrapper.gold .cursor-body {
  background: linear-gradient(135deg, #b8960c 0%, #f5e269 30%, #e8b606 55%, #ffd700 80%, #b8960c 100%) !important;
  box-shadow: 0 2px 18px rgba(255,215,0,0.6);
}

/* 20. Dark — dark glass inverted cursor */
.cursor-wrapper.dark .cursor-body {
  background: rgba(10,10,10,0.9) !important;
  border: 2px solid var(--cursor-hover-bg) !important;
  backdrop-filter: blur(4px);
}




/* ═══════════════════════════════════════════════════════
   CLICK / PRESS
   ═══════════════════════════════════════════════════════ */
.cursor-wrapper.clicking .cursor-body {
  transform: translate(-50%, -50%) scale(0.86) !important;
  transition: transform 0.08s ease !important;
}

/* Losange: keep rotation when clicking */
.cursor-wrapper.clicking.hover.shape-losange .cursor-body {
  transform: translate(-50%, -50%) rotate(45deg) scale(0.86) !important;
}

/* Ripple element (spawned by JS on click) */
.cursor-ripple {
  position: absolute;
  top: 0; left: 0;
  width:  var(--cursor-size-hover, 80px);
  height: var(--cursor-size-hover, 80px);
  border-radius: 50%;
  border: 1.5px solid var(--cursor-hover-bg, var(--cursor-bg));
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 1;
  pointer-events: none;
  animation: cursor-ripple 0.55s cubic-bezier(0.2, 1, 0.4, 1) forwards;
}

@keyframes cursor-ripple {
  to {
    transform: translate(-50%, -50%) scale(2.2);
    opacity: 0;
  }
}


/* ═══════════════════════════════════════════════════════
   IDLE  — after N seconds of no movement
   ═══════════════════════════════════════════════════════ */
.cursor-wrapper.idle .cursor-body {
  opacity: 0.25;
  transform: translate(-50%, -50%) scale(0.55);
  transition:
    opacity   0.6s ease,
    transform 0.6s ease;
}


/* ═══════════════════════════════════════════════════════
   TRAIL DOTS  — default: small shrinking dots
   ═══════════════════════════════════════════════════════ */
.cursor-trail-dot {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  background: var(--cursor-bg);
  pointer-events: none;
  z-index: 99998;
  will-change: transform;
}

/* ── Comet — thick tapered glowing tail ─────────────── */
.cursor-trail-comet {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  background: var(--cursor-bg);
  pointer-events: none;
  z-index: 99998;
  will-change: transform;
  filter: blur(1px);
  box-shadow: 0 0 6px 2px var(--cursor-bg);
}

/* ── Echo — hollow ghost rings ──────────────────────── */
.cursor-trail-echo {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  border: 1.5px solid var(--cursor-bg);
  background: transparent;
  pointer-events: none;
  z-index: 99998;
  will-change: transform;
}

/* ── Glow — soft radiant orbs ───────────────────────── */
.cursor-trail-glow {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  background: var(--cursor-bg);
  pointer-events: none;
  z-index: 99998;
  will-change: transform;
  filter: blur(4px);
  mix-blend-mode: screen;
}

/* ── Shared base for inline-styled trail particles ── */
.cursor-trail-fire,.cursor-trail-rainbow,.cursor-trail-aurora {
  position: fixed; top: 0; left: 0;
  border-radius: 50%; pointer-events: none; z-index: 99998; will-change: transform;
}

/* ── Star ── */
.cursor-trail-star {
  position: fixed; top: 0; left: 0;
  background: var(--cursor-bg);
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  pointer-events: none; z-index: 99998; will-change: transform;
}

/* ── Neon ── */
.cursor-trail-neon {
  position: fixed; top: 0; left: 0;
  border-radius: 50%;
  background: var(--cursor-bg);
  box-shadow: 0 0 6px 2px var(--cursor-bg), 0 0 14px 4px var(--cursor-bg);
  pointer-events: none; z-index: 99998; will-change: transform;
}

/* ── Smoke ── */
.cursor-trail-smoke {
  position: fixed; top: 0; left: 0;
  border-radius: 50%;
  background: rgba(200,200,220,0.7);
  filter: blur(8px);
  pointer-events: none; z-index: 99998; will-change: transform;
}

/* ── Spark ── */
.cursor-trail-spark {
  position: fixed; top: 0; left: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px 1px #fff, 0 0 8px 2px var(--cursor-bg);
  pointer-events: none; z-index: 99998; will-change: transform;
}

/* ── Bubble ── */
.cursor-trail-bubble {
  position: fixed; top: 0; left: 0;
  border-radius: 50%;
  border: 1.5px solid var(--cursor-bg);
  background: transparent;
  pointer-events: none; z-index: 99998; will-change: transform;
}

/* ── Diamond ── */
.cursor-trail-diamond {
  position: fixed; top: 0; left: 0;
  background: var(--cursor-bg);
  clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%);
  pointer-events: none; z-index: 99998; will-change: transform;
}

/* ── Square ── */
.cursor-trail-square {
  position: fixed; top: 0; left: 0;
  border-radius: 1px;
  background: var(--cursor-bg);
  pointer-events: none; z-index: 99998; will-change: transform;
}

/* ── Pixel ── */
.cursor-trail-pixel {
  position: fixed; top: 0; left: 0;
  border-radius: 0;
  background: var(--cursor-bg);
  image-rendering: pixelated;
  pointer-events: none; z-index: 99998; will-change: transform;
}

/* ── Confetti ── */
.cursor-trail-confetti {
  position: fixed; top: 0; left: 0;
  border-radius: 1px;
  pointer-events: none; z-index: 99998; will-change: transform;
}

/* ── Snowflake ── */
.cursor-trail-snowflake {
  position: fixed; top: 0; left: 0;
  border-radius: 50%;
  background: rgba(220,240,255,0.95);
  filter: blur(1.5px);
  pointer-events: none; z-index: 99998; will-change: transform;
}

/* ── Lightning ── */
.cursor-trail-lightning {
  position: fixed; top: 0; left: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 3px 1px #fff, 0 0 8px 3px rgba(var(--color-accent-rgb), 0.8);
  pointer-events: none; z-index: 99998; will-change: transform;
}

/* ── Shadow ── */
.cursor-trail-shadow {
  position: fixed; top: 0; left: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.7);
  filter: blur(7px);
  pointer-events: none; z-index: 99997; will-change: transform;
}

/* ── Ink ── */
.cursor-trail-ink {
  position: fixed; top: 0; left: 0;
  border-radius: 50%;
  background: rgba(10,10,20,0.88);
  pointer-events: none; z-index: 99998; will-change: transform;
}

/* ── Crystal ── */
.cursor-trail-crystal {
  position: fixed; top: 0; left: 0;
  background: rgba(var(--color-accent-rgb), 0.75);
  clip-path: polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  pointer-events: none; z-index: 99998; will-change: transform;
}

/* ── Ribbon ── */
.cursor-trail-ribbon {
  position: fixed; top: 0; left: 0;
  border-radius: 2px;
  background: var(--cursor-bg);
  pointer-events: none; z-index: 99998; will-change: transform;
}

/* ── Meteor ── */
.cursor-trail-meteor {
  position: fixed; top: 0; left: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cursor-bg) 10%, transparent 75%);
  filter: blur(2px);
  pointer-events: none; z-index: 99998; will-change: transform;
}

/* ── Electric ── */
.cursor-trail-electric {
  position: fixed; top: 0; left: 0;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 4px 2px var(--color-accent), 0 0 10px 4px rgba(var(--color-accent-rgb), 0.55);
  pointer-events: none; z-index: 99998; will-change: transform;
}

/* ── Dust ── */
.cursor-trail-dust {
  position: fixed; top: 0; left: 0;
  border-radius: 50%;
  background: rgba(200,180,140,0.85);
  pointer-events: none; z-index: 99998; will-change: transform;
}

/* ── Heartbeat ── */
.cursor-trail-heartbeat {
  position: fixed; top: 0; left: 0;
  border-radius: 50%;
  border: 1.5px solid var(--cursor-bg);
  background: transparent;
  pointer-events: none; z-index: 99998; will-change: transform;
}



/* ═══════════════════════════════════════════════════════
   MAGNETIC ELEMENTS — base styles
   ═══════════════════════════════════════════════════════ */
[data-cursor-magnetique],
a, button, [role="button"] {
  position: relative;
  pointer-events: auto !important;
  cursor: none !important;
  will-change: transform;
}

/* Inline elements need display:inline-block for getBoundingClientRect */
span[data-cursor-magnetique],
a[data-cursor-magnetique],
h1[data-cursor-magnetique], h2[data-cursor-magnetique],
h3[data-cursor-magnetique], h4[data-cursor-magnetique] {
  display: inline-block;
}


/* ═══════════════════════════════════════════════════════
   TOUCH  — disable everything on coarse pointer
   ═══════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  .cursor-wrapper,
  .cursor-trail-dot { display: none !important; }

  [data-cursor-magnetique] { transform: none !important; }
}