/* ============================================================
   CURSOR CUSTOM
   ============================================================ */

/*
  SVG cursor aplicado via CSS — funciona em produção (GoDaddy) pois é
  referência de arquivo estático. Hotspot em (7,7): ponta da seta no
  espaço do SVG (viewBox 0 0 100 100, renderizado a 36×36px → 20/100×36 ≈ 7).
  Fallback: 'auto' para navegadores sem suporte a SVG em cursor.
*/
*, *::before, *::after {
  cursor: url('../assets/svg/cursor.svg') 7 7, auto !important;
}

/* Esconde o dot: o SVG já é o cursor */
#cursor-dot {
  display: none;
}

#cursor-dot,
#cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  will-change: transform;
}

/* Dot interno — segue o mouse sem delay */
#cursor-dot {
  width: 8px;
  height: 8px;
  background: var(--white);
  border-radius: 50%;
  transition: width 0.2s var(--ease-out-expo),
              height 0.2s var(--ease-out-expo),
              background 0.2s ease,
              opacity 0.2s ease;
}

/* Ring externo — segue com lerp (via JS) */
#cursor-ring {
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--electric-blue);
  border-radius: 50%;
  transition: width 0.3s var(--ease-out-expo),
              height 0.3s var(--ease-out-expo),
              border-color 0.3s ease,
              border-radius 0.3s ease,
              background 0.3s ease,
              opacity 0.3s ease;
}

/* Estado: hover em link/botão */
body.cursor--link #cursor-ring {
  width: 60px;
  height: 60px;
  border-color: var(--white);
}

body.cursor--link #cursor-dot {
  opacity: 0;
}

/* Estado: hover em vídeo (PLAY) */
body.cursor--play #cursor-ring {
  width: 80px;
  height: 80px;
  background: var(--electric-blue);
  border-color: var(--electric-blue);
}

body.cursor--play #cursor-dot {
  opacity: 0;
}

#cursor-label {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  color: var(--white);
  opacity: 0;
  transition: opacity 0.2s ease;
  will-change: transform;
}

body.cursor--play #cursor-label,
body.cursor--drag #cursor-label {
  opacity: 1;
}

/* Estado: drag (seção projects) */
body.cursor--drag #cursor-ring {
  width: 80px;
  height: 40px;
  border-color: var(--white);
  border-radius: 40px;
}

/* Estado: sobre texto */
body.cursor--text #cursor-ring {
  width: 4px;
  height: 4px;
  border-radius: 2px;
}

body.cursor--text #cursor-dot {
  opacity: 0;
}