/* RippleGrid hero background (self-hosted React Bits port, raw WebGL) */
.ripple-grid-hero {
  position: relative;
  overflow: hidden;
}

.ripple-grid-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background: #0A0A0F;
}

.ripple-grid-container canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* gradient overlay keeps hero text legible over the animation (text sits on the left) */
.ripple-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,10,15,0.88) 0%, rgba(10,10,15,0.50) 45%, rgba(10,10,15,0.18) 100%),
    linear-gradient(180deg, transparent 55%, var(--bg, #0A0A0F) 100%);
}

.ripple-grid-hero .page-hero-inner {
  position: relative;
  z-index: 2;
}