/* ============================================================
   liquid.css — liquid enhancements for portfolio.hmmzf.bond
   Backups in /var/www/portfolio/_backup-20260902/
   ============================================================ */

/* ---------- 1. Hero shadergradient canvas ---------- */
#hero-gradient-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
#hero-gradient-canvas.sg-ready { opacity: 1; }
.hero { position: relative; }
.hero-inner { position: relative; z-index: 1; }
.hero-orbs { z-index: 1; }

/* ---------- 2. Liquid-metal avatar ---------- */
.liquid-avatar-canvas {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
}
.avatar-ring { overflow: visible; }
.avatar-ring img { position: relative; z-index: 1; }
.avatar-ring.liquid-on::before { opacity: 0; } /* hide old spinning ring once liquid shader runs */

/* ---------- 3. Real liquid glass (liquid-glass-js) hosts ---------- */
.lg-host { position: relative; }
.lg-host .lg-frame {
  position: relative;
  display: inherit;
  flex-direction: inherit;
  align-items: inherit;
  gap: inherit;
  width: 100%;
  border-radius: inherit;
}
/* dock keeps its pill shape */
nav.dock.lg-host .lg-frame { display: flex; }
/* the lib's canvas sits behind children inside the frame */
.lg-frame canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}

/* ---------- 4. Fallbacks ---------- */
@media (prefers-reduced-motion: reduce) {
  #hero-gradient-canvas, .liquid-avatar-canvas { display: none; }
  .avatar-ring.liquid-on::before { opacity: 1; }
}
html.no-webgl #hero-gradient-canvas,
html.no-webgl .liquid-avatar-canvas { display: none; }
html.no-webgl .avatar-ring.liquid-on::before { opacity: 1; }