/* ==========================================================================
   Dynamic Cursor — foglio del motore
   --------------------------------------------------------------------------
   Token (li scrive il JS sulla radice .dc dalle impostazioni):
     --dc-c1   colore primario     --dc-c2   colore secondario
     --dc-on   colore del testo/icona sopra il primario (calcolato)
     --dc-halo alone sottile che tiene visibili anello e disco su fondi simili
     --dc-font font dell'etichetta (assente = eredita dal sito)
   Misure delle azioni (sovrascrivibili da tema/plugin su :root):
     --dc-ring 52px  --dc-disc 96px  --dc-label 14px  --dc-icon-size 34px

   La radice .dc è fixed (sito) o absolute (anteprima, .dc--boxed).
   I .dc-p sono i wrapper posizionati dal JS; i .dc-seg dentro sono liberi per
   le animazioni di ogni tipo. Le azioni (.dc-actp) sono uguali per tutti i tipi.
   ========================================================================== */

@property --angle { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --speed { syntax: '<number>'; inherits: true; initial-value: 0; }

/* il cursore di sistema sparisce solo dove il nostro è montato */
.dc-on, .dc-on *, .dc-on *::before, .dc-on *::after { cursor: none !important; }
.dc-on :where(input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
             textarea, select, [contenteditable="true"], iframe,
             [data-cursor="native"], [data-cursor="native"] *, #wpadminbar, #wpadminbar *) { cursor: auto !important; }

.dc {
  --c:  var(--dc-c1, #A2CC02);
  --c2: var(--dc-c2, #3397A0);
  --c3: var(--dc-c3, #ffffff);
  --on: var(--dc-on, #fff);
  --halo: var(--dc-halo, rgba(255,255,255,.9));
  --ring:  var(--dc-ring, 52px);
  --disc:  var(--dc-disc, 96px);
  --lab:   var(--dc-label, 14px);
  --ico:   var(--dc-icon-size, 34px);
  --ease:  cubic-bezier(.16, 1, .3, 1);
  --dur:   .26s;
  --angle: 0deg;
  --speed: 0;
  position: fixed; left: 0; top: 0; width: 0; height: 0;
  z-index: 2147483000;
  pointer-events: none;
}
.dc--boxed { position: absolute; }
.dc.is-hidden { visibility: hidden; }

.dc-base, .dc-actp, .dc-p { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.dc-p, .dc-actp { will-change: transform; }
.dc-seg, .dc-act {
  position: absolute; left: 0; top: 0;
  translate: -50% -50%;
  box-sizing: border-box;
  display: grid; place-items: center;
}

/* a riposo: la base si vede; in azione si ritira e resta il livello azioni */
.dc-base { transition: opacity .18s var(--ease); }
.dc.is-act .dc-base { opacity: 0; }
.dc.is-act .dc-seg { scale: .4; }
.dc-seg { transition: scale .22s var(--ease); }

/* ---------- livello azioni: anello / disco con testo o icona ---------- */
.dc-act {
  width: 0; height: 0;
  border-radius: 50%;
  background: var(--c);
  border: 0 solid var(--c);
  box-shadow: 0 0 0 0 var(--halo);
  opacity: 0;
  scale: .6;
  transition: width var(--dur) var(--ease), height var(--dur) var(--ease), opacity .16s var(--ease), scale var(--dur) var(--ease),
              background-color var(--dur) var(--ease), border-width var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.dc.is-act .dc-act { opacity: 1; scale: 1; }
.dc.is-act--stroke .dc-act { width: var(--ring); height: var(--ring); background: transparent; border-width: 2px; box-shadow: 0 0 0 1.5px var(--halo); }
.dc.is-act--fill   .dc-act { width: var(--disc); height: var(--disc); box-shadow: 0 0 0 1.5px var(--halo); }
.dc.is-down .dc-act, .dc.is-down .dc-seg { scale: .9; }
.dc.is-down.is-act .dc-seg { scale: .4; }

.dc-label {
  font-family: var(--dc-font);
  font-size: var(--lab); font-weight: 600; line-height: 1;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: var(--on);
  opacity: 0; scale: .8;
  transition: opacity .16s var(--ease), scale .22s var(--ease);
  -webkit-font-smoothing: antialiased; user-select: none;
}
.dc.is-act--text .dc-label { opacity: 1; scale: 1; transition-delay: .05s; }

.dc-icon {
  position: absolute;
  width: var(--ico); height: var(--ico);
  background: var(--on);
  -webkit-mask: var(--dc-icon) center / contain no-repeat;
          mask: var(--dc-icon) center / contain no-repeat;
  opacity: 0; scale: .7;
  transition: opacity .16s var(--ease), scale .22s var(--ease);
}
.dc.is-act--icon .dc-icon { opacity: 1; scale: 1; transition-delay: .05s; }

/* ---------- linee a tutto campo (Mirino, Faro) ----------
   La radice .dc è larga e alta zero: le linee non possono misurarsi su di lei.
   Sul sito coprono la viewport (fixed); nell'anteprima il JS scrive width/height del box. */
.dc-lines { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.dc--boxed .dc-lines { position: absolute; inset: auto; left: 0; top: 0; }
.dc-h, .dc-v { position: absolute; left: 0; top: 0; will-change: transform; }
.dc.is-act .dc-lines { opacity: 0; transition: opacity .18s var(--ease); }

/* ==========================================================================
   I TIPI — ogni tipo disegna solo il .dc-seg (e le linee, se le ha)
   ========================================================================== */

/* Metaball — due gocce che si fondono (filtro goo sul gruppo) */
.dc--goo .dc-base { filter: url(#dc-goo); }
.dc--goo .dc-seg { width: 30px; height: 30px; border-radius: 50%; background: var(--c); }
.dc--goo .dc-p--1 .dc-seg { width: 16px; height: 16px; }   /* la goccia che segue è più piccola */
.dc--goo.is-act .dc-base { filter: none; }

/* Punto — un punto pieno, stretto sul puntatore */
.dc--dot .dc-seg { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }

/* Inverso — disco bianco in "difference": inverte quello che copre */
.dc--blend { mix-blend-mode: difference; }
.dc--blend .dc-seg { width: 62px; height: 62px; border-radius: 50%; background: #fff; }
.dc--blend .dc-act { background: #fff; border-color: #fff; box-shadow: none !important; }
.dc--blend .dc-label { color: #000; }          /* in "difference" il nero lascia passare la pagina: lettere leggibili su qualunque fondo */
.dc--blend .dc-icon  { background: #000; }     /* l'icona è una maschera: il colore è lo sfondo */

/* Alone — un bagliore morbido */
.dc--glow .dc-seg { width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(circle, var(--c), transparent 70%); filter: blur(6px); }

/* Cometa — testa luminosa con coda lungo il moto */
.dc--trail .dc-seg { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); }
.dc--trail .dc-seg::after {
  content: ""; position: absolute; right: 50%; top: 50%;
  width: calc(18px + var(--speed) * 64px); height: 4px;
  transform: translateY(-50%) rotate(var(--angle)); transform-origin: right center;
  background: linear-gradient(to left, var(--c), transparent); border-radius: 4px; opacity: var(--speed);
}

/* Scia — otto segmenti che inseguono come una coda */
.dc--snake .dc-seg {
  width: calc(20px - var(--i) * 2px); height: calc(20px - var(--i) * 2px); border-radius: 50%;
  background: color-mix(in srgb, var(--c) calc(100% - var(--i) * 11%), var(--c2));
}
.dc--snake .dc-p { z-index: calc(10 - var(--i)); }

/* Mirino — due linee sottili che si incrociano sul puntatore */
.dc--crosshair .dc-seg { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--c); background: transparent; }
.dc--crosshair .dc-h { width: 100%; height: 1px; background: color-mix(in srgb, var(--c) 55%, transparent); }
.dc--crosshair .dc-v { width: 1px; height: 100%; background: color-mix(in srgb, var(--c) 55%, transparent); }

/* Calamita — anello tratteggiato, lento e magnetico */
.dc--magnet .dc-seg { width: 56px; height: 56px; border-radius: 50%; border: 2px dashed var(--c2); background: transparent; }

/* Gelatina — si schiaccia e si allunga nel senso del moto */
.dc--jelly .dc-seg {
  width: 30px; height: 30px; border-radius: 50%; background: var(--c);
  transform: rotate(var(--angle)) scale(calc(1 + var(--speed) * .7), calc(1 - var(--speed) * .4));
  transition: transform .14s, scale .22s var(--ease);
}

/* Lente — anello spesso con riflesso di vetro */
.dc--lens .dc-seg {
  width: 46px; height: 46px; border-radius: 50%; background: transparent; border: 3px solid var(--c);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c3) 30%, transparent), 0 4px 12px rgba(0,0,0,.4);
}
.dc--lens .dc-seg::after { content: ""; position: absolute; top: 6px; left: 8px; width: 12px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--c3) 55%, transparent); transform: rotate(-40deg); }

/* Pixel — quadrato a scatti */
.dc--pixel .dc-seg { width: 18px; height: 18px; border-radius: 0; background: var(--c); box-shadow: 3px 3px 0 color-mix(in srgb, var(--c2) 70%, transparent); }
.dc--pixel .dc-act { border-radius: 4px; }

/* Neon — anello bianco con bagliore colorato che cambia tono */
.dc--neon .dc-seg {
  width: 30px; height: 30px; border-radius: 50%; background: transparent; border: 2px solid var(--c3);
  box-shadow: 0 0 4px var(--c), 0 0 16px var(--c), inset 0 0 8px var(--c);
  animation: dc-neon 3s linear infinite;
}
@keyframes dc-neon { to { filter: hue-rotate(360deg); } }

/* Stelle — una stella che brilla con una scia di scintille */
.dc--sparkle .dc-seg {
  width: calc(15px - var(--i) * 2px); height: calc(15px - var(--i) * 2px); background: var(--c);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  opacity: calc(1 - var(--i) * .16);
  animation: dc-twinkle 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * .15s);
}
@keyframes dc-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(.55) rotate(45deg); } }

/* Faro — un fascio verticale che scende dal puntatore */
.dc--beam .dc-seg { width: 0; height: 0; }
.dc--beam .dc-v { width: 3px; height: 100%; border-radius: 3px; margin-left: -1.5px; background: linear-gradient(var(--c), transparent 72%); box-shadow: 0 0 20px var(--c); }
.dc--beam .dc-h { display: none; }

/* Ameba — anello che si deforma di continuo (deformazione marcata) */
.dc--morph .dc-seg { width: 42px; height: 42px; background: transparent; border: 2px solid var(--c); animation: dc-morph 4s ease-in-out infinite; }
@keyframes dc-morph {
  0%   { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transform: rotate(0deg) scale(1, .92); }
  25%  { border-radius: 70% 30% 45% 55% / 60% 70% 30% 40%; transform: rotate(15deg) scale(1.08, .9); }
  50%  { border-radius: 40% 60% 30% 70% / 70% 40% 60% 30%; transform: rotate(-10deg) scale(.9, 1.1); }
  75%  { border-radius: 65% 35% 60% 40% / 35% 65% 35% 65%; transform: rotate(20deg) scale(1.05, .95); }
  100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transform: rotate(0deg) scale(1, .92); }
}

/* Radar — reticolo con braccio che spazza */
.dc--radar .dc-seg { width: 46px; height: 46px; border-radius: 50%; background: transparent; border: 1px solid var(--c); overflow: visible; }
.dc--radar .dc-seg::before { content: ""; position: absolute; inset: 34%; border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); border-radius: 50%; }
.dc--radar .dc-seg::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--c2), transparent 60deg);
  -webkit-mask: radial-gradient(transparent 40%, #000 41%); mask: radial-gradient(transparent 40%, #000 41%);
  animation: dc-spin 2s linear infinite;
}
@keyframes dc-spin { to { transform: rotate(360deg); } }

/* Battitura — la barretta lampeggiante del testo */
.dc--caret .dc-seg { width: 3px; height: 34px; border-radius: 1px; background: var(--c); animation: dc-blink 1s steps(1) infinite; }
@keyframes dc-blink { 50% { opacity: 0; } }

/* Eclissi — anello che si riempie con la velocità */
.dc--eclipse .dc-seg { width: 36px; height: 36px; border-radius: 50%; background: transparent; border: 2px solid var(--c); box-shadow: inset 0 0 0 calc(var(--speed) * 18px) var(--c2); transition: box-shadow .3s, scale .22s var(--ease); }

/* Orbita — un satellite gira intorno al puntatore */
.dc--orbit .dc-seg { width: 6px; height: 6px; border-radius: 50%; background: var(--c); overflow: visible; }
.dc--orbit .dc-seg::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--c2); animation: dc-orbit 1.4s linear infinite; }
@keyframes dc-orbit { from { transform: rotate(0deg) translateX(20px) rotate(0deg); } to { transform: rotate(360deg) translateX(20px) rotate(-360deg); } }

/* Pennello — una pennellata di segmenti dal tono cangiante */
.dc--paint .dc-seg { width: calc(24px - var(--i) * 2px); height: calc(24px - var(--i) * 2px); border-radius: 50%; background: var(--c); filter: hue-rotate(calc(var(--i) * 40deg)); }
.dc--paint .dc-p { z-index: calc(10 - var(--i)); }

/* Autofocus — quattro parentesi da fotocamera intorno al puntatore */
.dc--focusbox .dc-seg {
  width: 46px; height: 46px; background: transparent; border: 2px solid var(--c); border-radius: 3px;
  --m: linear-gradient(#000, #000);
  -webkit-mask: var(--m) top left, var(--m) top right, var(--m) bottom left, var(--m) bottom right; mask: var(--m) top left, var(--m) top right, var(--m) bottom left, var(--m) bottom right;
  -webkit-mask-size: 13px 13px; mask-size: 13px 13px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: dc-focus 2.4s ease-in-out infinite;
  transform: scale(calc(1 - var(--speed) * .18)); transition: transform .14s, scale .22s var(--ease);
}
@keyframes dc-focus { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
.dc--focusbox .dc-act { border-radius: 6px; }

/* Glitch — quadrato con canali RGB che si separano con la velocità */
.dc--glitch .dc-seg { width: 16px; height: 16px; background: var(--c3); overflow: visible; }
.dc--glitch .dc-seg::before, .dc--glitch .dc-seg::after { content: ""; position: absolute; inset: 0; mix-blend-mode: screen; animation: dc-glitch 1.1s steps(2) infinite; }
.dc--glitch .dc-seg::before { background: var(--c);  transform: translateX(calc(-2px - var(--speed) * 7px)); }
.dc--glitch .dc-seg::after  { background: var(--c2); transform: translateX(calc(2px + var(--speed) * 7px)); animation-delay: -.55s; }
@keyframes dc-glitch { 0%, 100% { clip-path: inset(0 0 58% 0); } 50% { clip-path: inset(52% 0 0 0); } }
.dc--glitch .dc-act { border-radius: 4px; }

/* Griglia — un marcatore che si aggancia a una griglia di 24px */
.dc--grid .dc-seg { width: 20px; height: 20px; border-radius: 3px; background: transparent; border: 2px solid var(--c); }
.dc--grid .dc-p { transition: transform .12s steps(3); }
.dc--grid .dc-act { border-radius: 6px; }

/* Cuore — batte a doppio colpo */
.dc--heart .dc-seg {
  width: 32px; height: 32px; background: var(--c);
  clip-path: path('M16 29 C 16 29, 2 20, 2 11 C 2 6, 6 3, 10 3 C 13 3, 15 5, 16 7 C 17 5, 19 3, 22 3 C 26 3, 30 6, 30 11 C 30 20, 16 29, 16 29 Z');
  animation: dc-beat 1s ease-in-out infinite;
}
@keyframes dc-beat { 0%, 40%, 100% { transform: scale(1); } 20% { transform: scale(1.28); } 30% { transform: scale(1.12); } }

/* Coriandoli — strisce colorate che si aprono a ventaglio dietro il puntatore */
.dc--confetti .dc-seg {
  --spread: calc((var(--i) - 3) * 10deg);
  width: 5px; height: 14px; border-radius: 2px;
  background: var(--c); box-shadow: 0 0 5px var(--c);
  opacity: calc(1 - var(--i) * .09);
  transform: rotate(calc(var(--angle) + 90deg + var(--spread))) translateY(calc(var(--i) * 5px + var(--speed) * var(--i) * 4px));
  transition: transform .14s, scale .22s var(--ease);
}
.dc--confetti .dc-p:nth-child(odd) .dc-seg { background: var(--c2); box-shadow: 0 0 5px var(--c2); }

/* riduci movimento: non si spegne, si attenua — niente animazioni ambientali, niente scie */
@media (prefers-reduced-motion: reduce) {
  .dc .dc-seg, .dc .dc-seg::before, .dc .dc-seg::after { animation: none !important; }
  .dc .dc-p:not(.dc-p--0) { display: none; }
  .dc--goo .dc-base { filter: none; }
  .dc .dc-act, .dc .dc-label, .dc .dc-icon, .dc .dc-seg { transition-duration: .01s; }
}