/* --- CUSTOM CURSOR CSS --- */
@media screen and (min-width: 768px) {
    body, html { cursor: none; }
}

/* Force system pointer on interactive elements */
a, button, input, textarea, .w-button, [role="button"], .clickable {
    cursor: pointer !important;
}

.cursor-dot, .cursor-ring {
    position: fixed; top: 0; left: 0;
    z-index: 9999; pointer-events: none;
    border-radius: 50%; transform: translate(-50%, -50%);
}

.cursor-dot {
    width: 8px; height: 8px; background-color: #FFFFFF;
    transition: opacity 0.2s;
}

.cursor-ring {
    width: 50px; height: 50px;
    border: 1px solid rgba(255, 255, 255, 1);
    background-color: transparent;
    transition: width 0.3s, height 0.3s, background-color 0.3s, border-color 0.3s, opacity 0.2s;
}

.cursor-ring.active, .cursor-dot.active { opacity: 0; }

/* Hide custom cursor on Mobile */
@media screen and (max-width: 767px), screen and (hover: none) and (pointer: coarse) {
    .cursor-dot, .cursor-ring { display: none !important; }
    body, html { cursor: auto !important; }
}



/* --- SCROLL ANIMATED ICON --- */
.scroll-indicator {
  width: 17px;
  height: 64px;
  position: relative;
  }

/* arrows pinned */
.arrow {
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
}

.arrow.top {
  top: 0;
  border-bottom: 6px solid #fff;
}

.arrow.bottom {
  bottom: 0;
  border-top: 6px solid #fff;
}

/* split lines */
.line {
  position: absolute;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: #fff;
  pointer-events: none;
}

.line.top-line {
  top: 6px;
  height: 0px;
}

.line.bottom-line {
  bottom: 6px;
  height: 0px;
}

/* moving circle - positioned from TOP edge, not center */
.dot {
  width: 17px;
  height: 17px;
  border: 1px solid #fff;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 6px; /* Start at arrow bottom */
  transform: translateX(-50%); /* Only center horizontally */
  pointer-events: none;
}