/* ==========================================================================
   CURSOR PERSONALIZADO
   Solo se activa en dispositivos con mouse: js/custom-cursor.js añade la
   clase "has-custom-cursor" al <html>. En táctil no cambia nada.

   - Normal: círculo negro pequeño.
   - Sobre una imagen de los portfolios: lupa de cristal (glassmorphism) que
     muestra la misma imagen un poco ampliada (efecto lente).
   ========================================================================== */


/* Variables del cursor  ✏️ EDITABLE (el aumento está en js/custom-cursor.js) */
.custom-cursor {
  --cursor-size: 12px;        /* círculo normal */
  --cursor-lens-size: 90px;  /* círculo del lente */
  --cursor-color: #232220;
}


/* Oculta la flecha del sistema solo cuando el cursor propio está activo */
html.has-custom-cursor,
html.has-custom-cursor * {
  cursor: none !important;
}


/* Capa fija que sigue al mouse. No recibe clics ni bloquea el arrastre. */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  will-change: transform;
}

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

/* El círculo está centrado en la punta del mouse */
.custom-cursor__circle {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cursor-size);
  height: var(--cursor-size);
  overflow: hidden;
  border: 1px solid var(--cursor-color);
  border-radius: 50%;
  background-color: var(--cursor-color);
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease,
              border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Modo lente: círculo grande de cristal translúcido. Su único contorno es el
   borde sólido de 1px del círculo (#232220): sin sombras ni filos que lo
   agrisen. */
.custom-cursor.is-lens .custom-cursor__circle {
  width: var(--cursor-lens-size);
  height: var(--cursor-lens-size);
  background-color: rgba(238, 232, 216, 0.25);        /* tinte crema (#EEE8D8) */
}

/* Esmerilado: desenfoca lo que queda detrás del cristal (por ejemplo, el
   espacio entre dos piezas). Solo en navegadores que lo admiten. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .custom-cursor.is-lens .custom-cursor__circle {
    -webkit-backdrop-filter: blur(8px) saturate(140%);
            backdrop-filter: blur(8px) saturate(140%);   /* ✏️ intensidad del esmerilado */
  }
}

/* Reflejo del cristal: brillo diagonal arriba a la izquierda. Va encima de
   la imagen ampliada y no recibe el mouse. */
.custom-cursor__circle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.08) 35%,
    rgba(255, 255, 255, 0) 60%);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.custom-cursor.is-lens .custom-cursor__circle::after {
  opacity: 1;
}

/* Copia ampliada de la imagen que está debajo, nítida (como una lupa real,
   sin desenfoque). Su esquina superior izquierda parte del centro del
   círculo y js/custom-cursor.js la desplaza para que el punto bajo el mouse
   quede justo en el centro. */
.custom-cursor__magnified {
  position: absolute;
  top: 50%;
  left: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.custom-cursor.is-lens .custom-cursor__magnified {
  opacity: 1;
}