/* ============================================================
   LIQUID SYSTEM — cursor wake + environment-specific behavior
   Two fixed canvases rendered by js/motion/liquid.js:
     #liquid-canvas → mix-blend-mode: screen  (colored LIGHT —
                      visible on dark surfaces: hero, footer,
                      page-hero, dark cards)
     #liquid-ink    → mix-blend-mode: multiply (watercolor INK —
                      visible on light surfaces: page background,
                      white cards)
   Together the field reads on every environment without ever
   washing out text. Intensity & color change per environment.
   Palette-locked: deep #252525 → lighter #252525 → sparse gold.
   ============================================================ */

#liquid-canvas,
#liquid-ink {
  position: fixed;
  inset: 0;
  z-index: 3;             /* above body/section backgrounds — under header (900) */
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-slow) var(--ease-soft);
}
#liquid-canvas { mix-blend-mode: screen; }
#liquid-ink    { mix-blend-mode: multiply; }

#liquid-canvas.active,
#liquid-ink.active { opacity: 1; }

/* Click burst ripple (DOM element, canvas-independent) */
.liquid-burst {
  position: fixed;
  z-index: 4;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(200, 169, 81, 0.55) 0%,
    rgba(20, 108, 110, 0.28) 42%,
    transparent 70%);
  animation: liquidBurst 0.7s var(--ease-out-expo) forwards;
}
@keyframes liquidBurst {
  0%   { transform: scale(0.4); opacity: 0.9; }
  100% { transform: scale(7);   opacity: 0; }
}

/* Touch devices: never show the cursor field */
@media (hover: none), (pointer: coarse) {
  #liquid-canvas, #liquid-ink, .liquid-burst { display: none; }
}

/* Reduced motion: fully off */
@media (prefers-reduced-motion: reduce) {
  #liquid-canvas, #liquid-ink, .liquid-burst { display: none; }
}

/* Print: never */
@media print {
  #liquid-canvas, #liquid-ink, .liquid-burst,
  #cursor-aura, #scroll-progress, #transition-veil { display: none !important; }
}