/* ============================================================
   CUSTOM CURSOR — dot + scroll-progress ring
   Desktop / fine pointer only
   ============================================================ */

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.25s ease, width 0.3s ease, height 0.3s ease, background-color 0.3s ease;
  will-change: transform, opacity, width, height;
}

.custom-cursor.is-visible {
  opacity: 1;
}

.custom-cursor.is-hidden {
  opacity: 0;
}

.custom-cursor__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.custom-cursor__track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1;
}

.custom-cursor__progress {
  fill: none;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 2;
  stroke-linecap: round;
  transform-origin: 22px 22px;
  transform: rotate(-90deg);
  transition: stroke-dashoffset 0.08s linear;
}

.custom-cursor__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.45);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Light background state -> Dark Cursor */
.custom-cursor.is-dark-cursor .custom-cursor__track {
  stroke: rgba(0, 0, 0, 0.28);
}
.custom-cursor.is-dark-cursor .custom-cursor__progress {
  stroke: rgba(0, 0, 0, 0.95);
}
.custom-cursor.is-dark-cursor .custom-cursor__dot {
  background: #000000;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.45);
}

.custom-cursor__text {
  display: none;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 0.52rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
  opacity: 0;
  transition: opacity 0.3s ease;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

/* CTA Section Hover State */
.custom-cursor.is-cta-hover {
  width: 100px;
  height: 100px;
  background-color: #ff5a00;
  border-radius: 50%;
}

.custom-cursor.is-cta-hover .custom-cursor__svg,
.custom-cursor.is-cta-hover .custom-cursor__dot {
  display: none;
}

.custom-cursor.is-cta-hover .custom-cursor__text {
  display: block;
  opacity: 1;
}

/* Hide system cursor when custom cursor is active */
body.custom-cursor--active,
body.custom-cursor--active a,
body.custom-cursor--active button,
body.custom-cursor--active .btn,
body.custom-cursor--active input,
body.custom-cursor--active textarea,
body.custom-cursor--active select,
body.custom-cursor--active label,
body.custom-cursor--active .hero-globe,
body.custom-cursor--active .hero-globe canvas {
  cursor: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .custom-cursor {
    display: none !important;
  }

  body.custom-cursor--active,
  body.custom-cursor--active * {
    cursor: auto !important;
  }
}

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

  body.custom-cursor--active,
  body.custom-cursor--active * {
    cursor: auto !important;
  }
}