/* ============================================================
   SkyTree Education — Custom Cursor Styles v2.1.0
   Controlled via Customizer: skytree_cursor_style + skytree_cursor_color
   ============================================================ */

/* Hide default OS cursor sitewide when custom cursor enabled */
body.skytree-cursor-on,
body.skytree-cursor-on *,
body.skytree-cursor-on a,
body.skytree-cursor-on button,
body.skytree-cursor-on input,
body.skytree-cursor-on textarea,
body.skytree-cursor-on select {
  cursor: none !important;
}

/* ── CURSOR OUTER RING ── */
#skytree-cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%);
  transition: transform 0.12s cubic-bezier(.23,1,.32,1),
              width 0.25s ease, height 0.25s ease,
              background 0.25s ease, border-color 0.25s ease,
              opacity 0.2s ease;
  opacity: 0;
  mix-blend-mode: normal;
}
#skytree-cursor-ring.visible { opacity: 1; }

/* ── CURSOR DOT (inner) ── */
#skytree-cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1000000;
  transform: translate(-50%, -50%);
  transition: width 0.15s ease, height 0.15s ease,
              background 0.2s ease, opacity 0.15s ease;
  opacity: 0;
}
#skytree-cursor-dot.visible { opacity: 1; }

/* ── HOVER STATE: cursor grows on links/buttons ── */
body.skytree-cursor-on.cursor-hover #skytree-cursor-ring {
  width: 58px !important;
  height: 58px !important;
  opacity: 0.85;
}
body.skytree-cursor-on.cursor-hover #skytree-cursor-dot {
  width: 5px !important;
  height: 5px !important;
}

/* ── CLICK STATE ── */
body.skytree-cursor-on.cursor-click #skytree-cursor-ring {
  width: 32px !important;
  height: 32px !important;
  opacity: 0.95;
}

/* ============================================================
   CURSOR STYLE 1: default — ring + dot (sky blue)
   ============================================================ */
body.skytree-cursor-on.cursor-style-default #skytree-cursor-ring {
  border: 2px solid var(--cursor-color, #00b4d8);
  background: transparent;
}
body.skytree-cursor-on.cursor-style-default #skytree-cursor-dot {
  background: var(--cursor-color, #00b4d8);
  box-shadow: 0 0 8px var(--cursor-color, #00b4d8);
}

/* ============================================================
   CURSOR STYLE 2: glow — filled glowing circle
   ============================================================ */
body.skytree-cursor-on.cursor-style-glow #skytree-cursor-ring {
  background: rgba(0,180,216,0.15);
  border: 1.5px solid var(--cursor-color, #00b4d8);
  box-shadow: 0 0 18px var(--cursor-color, #00b4d8),
              0 0 36px rgba(0,180,216,0.25);
  width: 46px; height: 46px;
}
body.skytree-cursor-on.cursor-style-glow #skytree-cursor-dot {
  background: var(--cursor-color, #00b4d8);
  box-shadow: 0 0 12px var(--cursor-color, #00b4d8),
              0 0 24px var(--cursor-color, #00b4d8);
  width: 10px; height: 10px;
}

/* ============================================================
   CURSOR STYLE 3: sakura — ring with sakura emoji label
   ============================================================ */
body.skytree-cursor-on.cursor-style-sakura #skytree-cursor-ring {
  border: 2px solid var(--cursor-color, #ff4e88);
  background: rgba(255,78,136,0.08);
  box-shadow: 0 0 14px rgba(255,78,136,0.3);
}
body.skytree-cursor-on.cursor-style-sakura #skytree-cursor-dot {
  background: var(--cursor-color, #ff4e88);
  box-shadow: 0 0 10px var(--cursor-color, #ff4e88);
  width: 10px; height: 10px;
}
body.skytree-cursor-on.cursor-style-sakura #skytree-cursor-ring::after {
  content: '🌸';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  line-height: 1;
  opacity: 0.85;
}

/* ============================================================
   CURSOR STYLE 4: crosshair — thin + lines
   ============================================================ */
body.skytree-cursor-on.cursor-style-crosshair #skytree-cursor-ring {
  border: 1.5px solid var(--cursor-color, #00b4d8);
  background: transparent;
  border-radius: 50%;
  width: 34px; height: 34px;
}
body.skytree-cursor-on.cursor-style-crosshair #skytree-cursor-ring::before,
body.skytree-cursor-on.cursor-style-crosshair #skytree-cursor-ring::after {
  content: '';
  position: absolute;
  background: var(--cursor-color, #00b4d8);
  opacity: 0.8;
}
body.skytree-cursor-on.cursor-style-crosshair #skytree-cursor-ring::before {
  width: 1.5px; height: 14px;
  top: -18px; left: 50%; transform: translateX(-50%);
}
body.skytree-cursor-on.cursor-style-crosshair #skytree-cursor-ring::after {
  width: 14px; height: 1.5px;
  left: -18px; top: 50%; transform: translateY(-50%);
}
body.skytree-cursor-on.cursor-style-crosshair #skytree-cursor-dot {
  background: var(--cursor-color, #00b4d8);
  width: 5px; height: 5px;
  box-shadow: 0 0 6px var(--cursor-color, #00b4d8);
}

/* ============================================================
   CURSOR STYLE 5: neon — thick neon border, big glow
   ============================================================ */
body.skytree-cursor-on.cursor-style-neon #skytree-cursor-ring {
  border: 3px solid var(--cursor-color, #00b4d8);
  background: transparent;
  box-shadow: 0 0 10px var(--cursor-color, #00b4d8),
              inset 0 0 10px rgba(0,180,216,0.12),
              0 0 30px rgba(0,180,216,0.2);
  width: 44px; height: 44px;
}
body.skytree-cursor-on.cursor-style-neon #skytree-cursor-dot {
  background: #fff;
  box-shadow: 0 0 8px var(--cursor-color, #00b4d8),
              0 0 18px var(--cursor-color, #00b4d8);
  width: 6px; height: 6px;
}

/* ============================================================
   CURSOR STYLE 6: minimal — tiny dot only, no ring
   ============================================================ */
body.skytree-cursor-on.cursor-style-minimal #skytree-cursor-ring {
  display: none !important;
}
body.skytree-cursor-on.cursor-style-minimal #skytree-cursor-dot {
  width: 12px; height: 12px;
  background: var(--cursor-color, #00b4d8);
  box-shadow: 0 0 10px var(--cursor-color, #00b4d8);
  border-radius: 50%;
}
body.skytree-cursor-on.cursor-style-minimal.cursor-hover #skytree-cursor-dot {
  width: 20px !important;
  height: 20px !important;
}

/* ============================================================
   CURSOR TRAIL DOTS (appended by JS)
   ============================================================ */
.skytree-trail-dot {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999998;
  transform: translate(-50%, -50%);
  animation: trailFade 0.6s ease forwards;
}
@keyframes trailFade {
  0%   { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(0); }
}

/* ── Disable on touch devices ── */
@media (hover: none) and (pointer: coarse) {
  body.skytree-cursor-on,
  body.skytree-cursor-on * {
    cursor: auto !important;
  }
  #skytree-cursor-ring,
  #skytree-cursor-dot { display: none !important; }
}