/* ------------------------------
    CURSOR VARIABLES & MIXINS
------------------------------ */
:root {
  --cursor-color: #ffffff;
}

/* ------------------------------
    SHARED CURSOR STYLES
------------------------------ */
.sv-cursor-outline, .sv-cursor-dot {
  pointer-events: none;
  position: fixed;
  border-radius: 50%;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  z-index: 9999;
}

/* ------------------------------
    CURSOR DOT (Inner)
------------------------------ */
.sv-cursor-dot {
  width: 8px;
  height: 8px;
  background: var(--cursor-color);
  z-index: 10000;
}

/* ------------------------------
    CURSOR OUTLINE (Outer)
------------------------------ */
.sv-cursor-outline {
  border: 2px solid var(--cursor-color);
  background: transparent;
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
  z-index: 9999;
}

/* ------------------------------
    STYLES (Applied to Outline)
------------------------------ */
/* Style: None (Dot only) */
.sv-cursor-outline.style-none {
  opacity: 0;
  display: none;
}

/* Style: Solid Circle (filled trail) */
.sv-cursor-outline.style-solid-circle {
  background: var(--cursor-color);
  opacity: 0.15;
  border: none !important;
}

/* ------------------------------
    STYLE TWO: SQUEEZE
------------------------------ */
.sv-cursor-squeeze {
  --circle-size: 40px;
  position: fixed;
  height: var(--circle-size);
  width: var(--circle-size);
  border: 1px solid var(--cursor-color);
  border-radius: 100%;
  top: calc(var(--circle-size) / 2 * -1);
  left: calc(var(--circle-size) / 2 * -1);
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
}

/* ------------------------------
    STYLE THREE: GRID REVEAL
------------------------------ */
.sv-cursor-grid-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: grid;
  pointer-events: none;
  z-index: 9998;
}

.sv-cursor-grid-item {
  width: 50px;
  height: 50px;
  border: 1px solid transparent;
  border-radius: 10px;
  box-sizing: border-box;
  transition: border-color 0.5s ease;
  pointer-events: auto;
}

.sv-cursor-grid-item.active {
  border-color: var(--cursor-color);
  background-color: transparent;
  transition: border-color 0s;
}

/* ------------------------------
    STYLE FOUR: MULTI TRAIL
------------------------------ */
.sv-cursor-trail-main {
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cursor-color);
  box-shadow: 0 0 20px var(--cursor-color), 0 0 40px var(--cursor-color);
  transform: translate(-50%, -50%);
  pointer-events: none;
  mix-blend-mode: difference;
  z-index: 10000;
  transition: width 0.2s, height 0.2s;
}

.sv-cursor-trail-main.expand {
  width: 40px;
  height: 40px;
}

.sv-cursor-trail-dot {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7); /* Could use var, but opacity needs handling */
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease-out, opacity 0.3s ease-out;
}

/* ------------------------------
    STYLE FIVE: FLUID BLOB
------------------------------ */
.sv-cursor-blob {
  animation: sv-rotate360 20s infinite;
  background: var(--cursor-color);
  filter: blur(20px);
  width: 200px;
  height: 200px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -2;
}

@keyframes sv-rotate360 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.15) rotate(180deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.sv-cursor-blob-blur {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  backdrop-filter: blur(100px);
  pointer-events: none;
}

/* ------------------------------
    HOVER EFFECTS
------------------------------ */
.sv-title-cursor:hover ~ .sv-cursor-outline {
  transform: translate(-50%, -50%) scale(1.5);
  background: var(--cursor-color);
  opacity: 0.1;
  border-color: transparent;
}/*# sourceMappingURL=sv-cursor.css.map */