/* =========================================================
   OPUS Studio — cursor.css
   Cursor "OPUS Lens": un punto preciso + una lente suave que
   cambia de forma según lo que hay debajo:
     - base   -> punto + lente fina que lo sigue con inercia
     - snap   -> la lente se "posa" sobre botones y links,
                 tomando su forma y su radio (estilo iPadOS)
     - label  -> sobre proyectos: disco con etiqueta ("Ver sitio")
     - text   -> sobre texto: el punto se vuelve un caret
   Solo con mouse real (hover:hover + pointer:fine).
   En touch no se inyecta nada y el cursor nativo queda intacto.
   ========================================================= */

/* El cursor nativo se oculta recién cuando el mouse se movió
   (cursor.js agrega la clase), así nunca queda la pantalla sin puntero. */
html.opus-cursor-on,
html.opus-cursor-on *{cursor:none;}
html.opus-cursor-on input,
html.opus-cursor-on textarea,
html.opus-cursor-on select,
html.opus-cursor-on [contenteditable]{cursor:auto;}

.oc{
  position:fixed;top:0;left:0;width:0;height:0;
  pointer-events:none;
  z-index:2147483647;
  opacity:0;
  transition:opacity .35s ease;
}
.oc.is-ready{opacity:1;}
.oc.is-hidden,
.oc.is-native{opacity:0;}

/* ---------- Punto: posición 1:1 con el mouse ---------- */
.oc-dot{
  --caret-h:22px;
  position:fixed;top:0;left:0;
  will-change:transform;
}
.oc-dot::before{
  content:"";
  position:absolute;
  left:-4px;top:-4px;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--text);
  box-shadow:0 0 12px color-mix(in srgb, var(--accent-2) 70%, transparent);
  transition:
    left .25s var(--motion-ease, ease), top .25s var(--motion-ease, ease),
    width .25s var(--motion-ease, ease), height .25s var(--motion-ease, ease),
    border-radius .25s ease, opacity .2s ease, transform .2s ease, background .25s ease;
}
/* texto: el punto se estira en un caret del alto de la tipografía */
.oc.is-text .oc-dot::before{
  left:-1px;
  top:calc(var(--caret-h) / -2);
  width:2px;
  height:var(--caret-h);
  border-radius:2px;
  background:var(--accent-2);
  animation:oc-caret 1.1s ease-in-out .3s infinite;
}
@keyframes oc-caret{0%,100%{opacity:1;}50%{opacity:.35;}}

/* sobre botones/links y proyectos el punto se retira: la lente es el puntero */
.oc.is-snap .oc-dot::before,
.oc.is-label .oc-dot::before{transform:scale(0);opacity:0;}
.oc.is-down .oc-dot::before{transform:scale(.6);}

/* ---------- Lente: posición, tamaño y radio los anima cursor.js ---------- */
.oc-lens{
  position:fixed;top:0;left:0;
  width:34px;height:34px;
  border-radius:17px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid color-mix(in srgb, var(--text) 26%, transparent);
  background:transparent;
  will-change:transform, width, height;
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease, opacity .3s ease;
}

/* snap sobre links sin fondo: pastilla tintada */
.oc.is-snap .oc-lens{
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  border-color:color-mix(in srgb, var(--accent-2) 42%, transparent);
  box-shadow:0 0 26px -6px color-mix(in srgb, var(--accent-2) 55%, transparent);
}
/* snap sobre botones con fondo propio: solo un halo que los rodea */
.oc.is-snap.is-ring .oc-lens{
  background:transparent;
  border-color:color-mix(in srgb, var(--accent-2) 60%, transparent);
  box-shadow:0 0 30px -4px color-mix(in srgb, var(--accent-2) 55%, transparent);
}
.oc.is-snap.is-primary .oc-lens{
  border-color:color-mix(in srgb, var(--accent-2) 80%, transparent);
  box-shadow:0 0 38px -2px color-mix(in srgb, var(--accent-2) 65%, transparent);
}

/* texto: la lente se esconde, queda solo el caret */
.oc.is-text .oc-lens{opacity:0;}

/* proyectos: disco con etiqueta */
.oc.is-label .oc-lens{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), transparent 55%),
    linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color:transparent;
  box-shadow:0 14px 34px -10px rgba(0,123,255,0.7);
}
.oc-label{
  display:inline-flex;align-items:center;gap:5px;
  font-family:'Inter',system-ui,sans-serif;
  font-size:0.68rem;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;
  color:#fff;white-space:nowrap;
  opacity:0;transform:scale(.6);
  transition:opacity .2s ease, transform .3s var(--motion-ease, ease);
}
.oc-label svg{width:11px;height:11px;}
.oc.is-label .oc-label{opacity:1;transform:scale(1);transition-delay:.06s;}

/* ---------- Seguridad: nunca en touch ---------- */
@media (hover:none), (pointer:coarse){
  .oc{display:none !important;}
}
@media (prefers-reduced-motion: reduce){
  .oc.is-text .oc-dot::before{animation:none;}
}