/* =========================================================================
   VERCHO — shared interaction styles
   Custom cursor, click-ripple feedback, card tilt, grabbable water canvases.
   Loaded on every page alongside interactions.js.
   ========================================================================= */

/* ---- custom cursor (desktop / fine-pointer only) ---- */
.vf-cursor-on, .vf-cursor-on *{cursor:none;}
.vf-cursor-on input, .vf-cursor-on textarea, .vf-cursor-on select{cursor:auto;}
.vf-cursor-dot, .vf-cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:99999;
  border-radius:50%; will-change:transform; opacity:0;
  transition:opacity .25s ease;
}
.vf-cursor-dot{
  width:6px; height:6px; background:var(--red,#e8192c);
  transform:translate(-50%,-50%);
}
.vf-cursor-ring{
  width:32px; height:32px; border:1.5px solid rgba(232,25,44,.55);
  transform:translate(-50%,-50%);
  transition:width .2s ease,height .2s ease,border-color .2s ease,background-color .2s ease,opacity .25s ease;
}
.vf-cursor-ring.vf-hover{width:54px; height:54px; background:rgba(232,25,44,.09); border-color:rgba(232,25,44,.9);}
.vf-cursor-ring.vf-down{width:24px; height:24px; background:rgba(232,25,44,.28);}
.vf-cursor-dot.vf-down{opacity:0;}
.vf-cursor-visible .vf-cursor-dot,.vf-cursor-visible .vf-cursor-ring{opacity:1;}

/* ---- click ripple (material-style tactile feedback) ---- */
.vf-ripple-host{position:relative; overflow:hidden;}
.vf-ripple-wave{
  position:absolute; border-radius:50%; pointer-events:none; z-index:5;
  background:rgba(255,255,255,.55);
  transform:scale(0); opacity:1;
  animation:vfRippleAnim .65s cubic-bezier(.25,.6,.3,1) forwards;
}
.vf-ripple-wave.vf-dark{background:rgba(232,25,44,.32);}
@keyframes vfRippleAnim{ to{ transform:scale(2.6); opacity:0; } }

/* ---- 3D tilt targets ---- */
.vf-tilt{transform-style:preserve-3d; will-change:transform;}

/* ---- grabbable water-ripple canvases ---- */
.vf-grab{cursor:grab;}
.vf-grab.vf-dragging{cursor:grabbing;}

@media (pointer:coarse){
  .vf-cursor-dot,.vf-cursor-ring{display:none !important;}
  .vf-cursor-on, .vf-cursor-on *{cursor:auto !important;}
}
@media (prefers-reduced-motion:reduce){
  .vf-cursor-dot,.vf-cursor-ring{display:none !important;}
  .vf-cursor-on, .vf-cursor-on *{cursor:auto !important;}
  .vf-tilt{transition:none !important;}
}