/* Neon cursor color schemes and desktop cursor visuals. */

/* ============================================================
   0. Cursor color variables (schemes)
   ------------------------------------------------------------ */

/* GLOW – default */
:root {
  --cursor-core: #ffffff;

  --cursor-main-glow-1: rgba(255, 255, 255, 0.9);
  --cursor-main-glow-2: rgba(255, 180, 80, 0.9);

  --cursor-trail-border: rgba(255, 160, 70, 0.9);
  --cursor-trail-glow-1: rgba(255, 160, 70, 0.8);
  --cursor-trail-glow-2: rgba(255, 0, 150, 0.6);

  --cursor-glow-stop-1: rgba(255, 200, 120, 0.8);
  --cursor-glow-stop-2: rgba(255, 0, 200, 0.4);
  --cursor-glow-shadow-1: rgba(255, 180, 100, 0.9);
  --cursor-glow-shadow-2: rgba(255, 0, 200, 0.7);
  --cursor-glow-shadow-3: rgba(0, 220, 255, 0.7);
}

/* just a marker; vars already come from :root */
body.cursor-glow {}

/* RED – bloody crimson / wine red */
body.cursor-red {
  /* Core: pale */
  --cursor-core: #fee2e2; /* very light red */

  /* Inner glow: soft -> mid red */
  --cursor-main-glow-1: rgba(254, 202, 202, 0.95); /* soft red */
  --cursor-main-glow-2: rgba(248, 113, 113, 0.9);  /* medium red */

  /* Ring: deep crimson edge */
  --cursor-trail-border: rgba(185, 28, 28, 1);      /* dark red border */
  --cursor-trail-glow-1: rgba(220, 38, 38, 0.95);   /* strong red */
  --cursor-trail-glow-2: rgba(127, 29, 29, 0.9);    /* deeper blood red */

  /* Outer halo: dark blood / wine red */
  --cursor-glow-stop-1: rgba(190, 24, 24, 0.9);     /* rich blood red */
  --cursor-glow-stop-2: rgba(76, 5, 25, 0.85);      /* wine / dried blood */

  --cursor-glow-shadow-1: rgba(127, 29, 29, 0.95);  /* dark red shadow */
  --cursor-glow-shadow-2: rgba(69, 10, 10, 0.95);   /* very dark red */
  --cursor-glow-shadow-3: rgba(24, 0, 0, 1);        /* almost black red */
}

/* FIREFLY – yellow core, green/yellow glow */
body.cursor-firefly {
  --cursor-core: #facc15; /* bright yellow dot */

  --cursor-main-glow-1: rgba(250, 250, 170, 1);   /* yellow glow */
  --cursor-main-glow-2: rgba(132, 204, 22, 1);    /* yellow-green */

  --cursor-trail-border: rgba(74, 222, 128, 1);   /* green ring */
  --cursor-trail-glow-1: rgba(52, 211, 153, 0.95);
  --cursor-trail-glow-2: rgba(22, 163, 74, 0.9);

  --cursor-glow-stop-1: rgba(250, 250, 170, 0.95); /* outer yellow halo */
  --cursor-glow-stop-2: rgba(132, 204, 22, 0.6);
  --cursor-glow-shadow-1: rgba(190, 242, 100, 0.9);
  --cursor-glow-shadow-2: rgba(74, 222, 128, 0.9);
  --cursor-glow-shadow-3: rgba(21, 128, 61, 0.9);
}

/* DARK – black core, pure red ring, purple glow */
body.cursor-dark {
  /* Core: almost black */
  --cursor-core: #020617; /* deep navy/black */

  /* Inner glow: very dark */
  --cursor-main-glow-1: rgba(15, 23, 42, 1);       /* dark navy */
  --cursor-main-glow-2: rgba(15, 23, 42, 0.8);     /* slightly softer navy */

  /* RING: pure evil red */
  --cursor-trail-border: rgba(239, 68, 68, 1);     /* pure red edge */
  --cursor-trail-glow-1: rgba(248, 113, 113, 0.95);/* bright red glow */
  --cursor-trail-glow-2: rgba(185, 28, 28, 0.9);   /* deeper red */

  /* Outer halo: purple glow fading into near-black */
  --cursor-glow-stop-1: rgba(147, 51, 234, 0.9);   /* strong purple inner */
  --cursor-glow-stop-2: rgba(76, 29, 149, 0.7);    /* darker purple mid */

  --cursor-glow-shadow-1: rgba(168, 85, 247, 0.9); /* bright purple edge */
  --cursor-glow-shadow-2: rgba(46, 16, 101, 0.85); /* deep violet */
  --cursor-glow-shadow-3: rgba(3, 7, 18, 1);       /* near black shadow */
}

/* NEON – pink core, cyan ring, purple neon glow */
body.cursor-neon {
  /* Core: same neon magenta */
  --cursor-core: #f973e5; /* neon pink core */

  /* Inner glow: soft pink → lilac */
  --cursor-main-glow-1: rgba(244, 114, 182, 0.95); /* pink */
  --cursor-main-glow-2: rgba(196, 181, 253, 0.9);  /* lilac/indigo */

  /* RING: sharper, shinier cyan */
  --cursor-trail-border: rgba(56, 189, 248, 1);      /* bright cyan edge */
  --cursor-trail-glow-1: rgba(125, 211, 252, 0.95);  /* light cyan glow */
  --cursor-trail-glow-2: rgba(59, 130, 246, 0.7);    /* softer blue depth */

  /* Outer halo: purple neon cloud around it */
  --cursor-glow-stop-1: rgba(216, 180, 254, 0.9);    /* light purple inner */
  --cursor-glow-stop-2: rgba(168, 85, 247, 0.85);    /* richer purple mid */

  --cursor-glow-shadow-1: rgba(217, 70, 239, 0.95);  /* magenta/purple */
  --cursor-glow-shadow-2: rgba(147, 51, 234, 0.95);  /* solid purple */
  --cursor-glow-shadow-3: rgba(76, 29, 149, 0.9);    /* deep violet */
}


/* ============================================================
   2. Neon cursor visuals + cursor behavior (desktop only)
   ------------------------------------------------------------ */

@media (pointer: fine) {
  /* 1) Cursify mode: hide native cursor for everything by default */
  * ,
  *::before,
  *::after {
    cursor: none !important;
  }

  /* 2) I-beam on body text (entry content) */
  .entry-content,
  .entry-content * {
    cursor: text !important;
  }

  /* 3) But NOT on images inside posts – keep them neon-only */
  .entry-content img,
  .entry-content figure,
  .entry-content .wp-block-image {
    cursor: none !important;
  }

  /* 4) I-beam on search fields */
  .search-form input,
  .s-search input,
  input[type="search"] {
    cursor: none !important;
  }

  /* Neon cursor layers */

  .neon-cursor-main,
  .neon-cursor-trail,
  .neon-cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
  }

  /* Main dot – tight bright core */
  .neon-cursor-main {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--cursor-core);
    box-shadow:
      0 0 6px var(--cursor-main-glow-1),
      0 0 12px var(--cursor-main-glow-2);
    transition:
      transform 0.12s ease-out,
      box-shadow 0.12s ease-out,
      opacity 0.12s ease-out;
  }

  /* Trail ring – bigger circle that lags slightly */
  .neon-cursor-trail {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 2px solid var(--cursor-trail-border);
    box-shadow:
      0 0 10px var(--cursor-trail-glow-1),
      0 0 22px var(--cursor-trail-glow-2);
    transition:
      transform 0.16s ease-out,
      box-shadow 0.16s ease-out,
      opacity 0.16s ease-out;
  }

  /* Outer glow – soft halo */
  .neon-cursor-glow {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: radial-gradient(
      circle,
      var(--cursor-glow-stop-1) 0,
      var(--cursor-glow-stop-2) 40%,
      transparent 70%
    );
    filter: blur(2px);
    box-shadow:
      0 0 20px var(--cursor-glow-shadow-1),
      0 0 40px var(--cursor-glow-shadow-2),
      0 0 60px var(--cursor-glow-shadow-3);
    mix-blend-mode: screen;
    transition:
      transform 0.2s ease-out,
      box-shadow 0.2s ease-out,
      opacity 0.2s ease-out;
  }

  /* Click compression */
  .neon-cursor-main.is-clicking {
    transform: scale(0.8);
  }

  .neon-cursor-trail.is-clicking,
  .neon-cursor-glow.is-clicking {
    transform: scale(0.9);
  }

  /* Hover highlight (JS adds .is-hovering) */
  .neon-cursor-main.is-hovering,
  .neon-cursor-trail.is-hovering,
  .neon-cursor-glow.is-hovering {
    box-shadow:
      0 0 16px var(--cursor-main-glow-1),
      0 0 32px var(--cursor-main-glow-2),
      0 0 72px var(--cursor-glow-shadow-3);
  }
}