/* PixelLoom — Elevation & effects
   "Tonal layering + luminous glassmorphism" instead of black drop shadows.
   Depth reads through cyan-tinted borders, backdrop blur, and glow. */

:root {
  --blur-panel: 12px;
  --glass-panel-bg: rgba(20, 27, 33, 0.7);
  --glass-panel-border: rgba(0, 229, 255, 0.1);

  --shadow-glow-sm: 0 0 15px var(--glow-accent);
  --shadow-glow-lg: 0 0 32px var(--glow-accent);

  --circuit-dot-color: rgba(0, 229, 255, 0.05);
  --circuit-dot-size: 32px;
}

/* Reusable utility classes used across cards */
.pl-glass-panel {
  background: var(--glass-panel-bg);
  backdrop-filter: blur(var(--blur-panel));
  -webkit-backdrop-filter: blur(var(--blur-panel));
  border: 1px solid var(--glass-panel-border);
}

.pl-glow-on-hover {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.pl-glow-on-hover:hover {
  box-shadow: var(--shadow-glow-sm);
}

.pl-circuit-bg {
  background-image: radial-gradient(circle at 2px 2px, var(--circuit-dot-color) 1px, transparent 0);
  background-size: var(--circuit-dot-size) var(--circuit-dot-size);
}