:root {
  --cursor-ink: #111827;
  --cursor-ring-border: rgba(17,24,39,0.58);
  --cursor-hover-border: rgba(17,24,39,0.88);
  --cursor-hover-bg: rgba(17,24,39,0.08);
  --cursor-trail-glow: rgba(59,130,246,0.46);
  --cursor-trail-core: rgba(96,165,250,0.80);
}

:root[data-theme="dark"] {
  --cursor-ink: #ffffff;
  --cursor-ring-border: rgba(255,255,255,0.60);
  --cursor-hover-border: rgba(255,255,255,0.90);
  --cursor-hover-bg: rgba(255,255,255,0.08);
  --cursor-trail-glow: rgba(96,165,250,0.66);
  --cursor-trail-core: rgba(191,219,254,0.84);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --cursor-ink: #ffffff;
    --cursor-ring-border: rgba(255,255,255,0.60);
    --cursor-hover-border: rgba(255,255,255,0.90);
    --cursor-hover-bg: rgba(255,255,255,0.08);
    --cursor-trail-glow: rgba(96,165,250,0.66);
    --cursor-trail-core: rgba(191,219,254,0.84);
  }
}

.cursor-reactive {
  --refract-scale: 1;
  --refract-skew: 0deg;
  --refract-x: 0px;
  --refract-y: 0px;
  transform-origin: center;
  transition: transform 0.24s cubic-bezier(0.22,1,0.36,1), filter 0.2s ease, text-shadow 0.2s ease;
}

.fade-in.cursor-reactive { transform: translateY(30px); }
.fade-in.cursor-reactive.visible { transform: translateY(0); }

.cursor-reactive.is-refracting,
.fade-in.cursor-reactive.is-refracting {
  filter: brightness(var(--refract-brightness,1)) saturate(var(--refract-saturation,1));
  text-shadow: var(--refract-shadow-x,0px) var(--refract-shadow-y,0px) 0 rgba(147,197,253,0.26);
  transform: perspective(280px) translate3d(var(--refract-x),var(--refract-y),0) rotateX(var(--refract-rotate-x,0deg)) rotateY(var(--refract-rotate-y,0deg)) skewX(var(--refract-skew)) scale(var(--refract-scale));
  transition-duration: 0.08s;
}

.cursor-layer {
  display: none;
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 1000;
}

.cursor-layer.is-active { display: block; }

.cursor-ring,
.cursor-dot {
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
}

.pointer-trail-surface {
  display: block;
  height: 100%;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity 0.12s ease;
  width: 100%;
  will-change: opacity;
  z-index: 0;
}

.pointer-trail-surface.is-drawing { opacity: 1; }

.pointer-trail-surface,
.cursor-ring,
.cursor-dot { backface-visibility: hidden; }

.cursor-ring {
  --ring-scale: 1;
  border: 1.5px solid var(--cursor-ring-border);
  border-radius: 50%;
  height: 36px;
  margin-left: -18px;
  margin-top: -18px;
  opacity: 0;
  scale: var(--ring-scale);
  transition: scale 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.35s ease, background-color 0.35s ease, opacity 0.3s ease;
  width: 36px;
  will-change: translate, opacity, scale;
  z-index: 1;
}

.cursor-dot {
  background: var(--cursor-ink);
  border-radius: 50%;
  height: 5px;
  margin-left: -2.5px;
  margin-top: -2.5px;
  opacity: 0;
  transition: opacity 0.3s ease;
  width: 5px;
  will-change: translate, opacity;
  z-index: 1;
}

.cursor-layer.is-visible .cursor-ring,
.cursor-layer.is-visible .cursor-dot { opacity: 1; }

.cursor-layer.is-hovering .cursor-ring {
  --ring-scale: 1.5556;
  background-color: var(--cursor-hover-bg);
  border-color: var(--cursor-hover-border);
}

.cursor-layer.is-pressed .cursor-ring { --ring-scale: 0.82; }

@media (hover: hover) and (pointer: fine) {
  body.custom-cursor,
  body.custom-cursor * { cursor: none !important; }

  body.custom-cursor input,
  body.custom-cursor textarea { cursor: text !important; }
}

@media (hover: none), (pointer: coarse), (max-width: 640px) {
  .cursor-layer { display: none !important; }
}