/* ===========================================================
   CREMA galiano · Cursor de café
   SÓLO ESCRITORIO. No se activa si:
     · el dispositivo es táctil / el puntero es grueso
     · el usuario pide movimiento reducido
     · la ventana mide menos de 861 px de ancho (formato móvil/tablet)
   En esos casos el cursor del sistema funciona con total normalidad.
   =========================================================== */

/* El breakpoint tiene que coincidir con MIN_WIDTH de cursor-cafe.js */
@media (min-width: 861px) {
  /* La clase .cc-on la añade cursor-cafe.js sólo cuando procede.
     Fuera de esta media query la regla NI SIQUIERA EXISTE, así que en
     formato móvil se conservan los cursores nativos (flecha, manita en
     los enlaces, cursor de texto en los campos…). */
  html.cc-on,
  html.cc-on *,
  html.cc-on a,
  html.cc-on button,
  html.cc-on input,
  html.cc-on textarea,
  html.cc-on select,
  html.cc-on label,
  html.cc-on summary,
  html.cc-on [role="button"] {
    cursor: none !important;
  }
}

#cc-canvas{
  position:fixed; inset:0; z-index:9998;
  pointer-events:none;
  contain:strict;
}

#cc-cup{
  position:fixed; left:0; top:0; z-index:9999;
  pointer-events:none;
  will-change:transform;
  transform:translate3d(-999px,-999px,0);
  filter:drop-shadow(0 4px 7px rgba(42,33,27,.34));
  /* La posición la mueve requestAnimationFrame; sólo se transiciona el filtro */
  transition:filter .35s cubic-bezier(.22,.61,.36,1);
}

/* Sobre un enlace o botón: el vaso se ilumina un poco y desprende algo de calor */
#cc-cup.hot{
  filter:
    drop-shadow(0 4px 9px rgba(42,33,27,.34))
    drop-shadow(0 0 14px rgba(216,203,184,.75))
    brightness(1.14) saturate(1.06);
}

/* Red de seguridad: aunque el JS fallara o estuviera a medio redimensionar,
   en formato móvil el vaso y las gotas no se pintan. */
@media (max-width: 860px){
  #cc-cup, #cc-canvas{ display:none !important; }
}

/* Movimiento reducido: nada de vaso ni de gotas. */
@media (prefers-reduced-motion: reduce){
  #cc-cup, #cc-canvas{ display:none !important; }
}