/* Section art — white line geometry on pure black. No grain. */

.art-stage {
  position: relative;
  width: 100%;
  min-height: 560px;
  overflow: hidden;
  border-radius: inherit;
  background: #000;
}
@media (min-width: 768px) { .art-stage { min-height: 680px; } }

.art-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* The "How it works" band ships with leftover rules from the removed 3D engine:
   a fixed 360px height, a poster background, and `canvas { display:none !important }`.
   Beat them so the live art canvas is visible and drives its own height. */
.research-canvas-wrap:has(.art-stage) {
  height: auto !important;
  background-image: none !important;
  border: 0;
}
.research-canvas-wrap canvas.art-canvas {
  display: block !important;
  opacity: 1 !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* square variant for the "Made for" media slot */
.human-img:has(.art-canvas--square) {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 640px;
  overflow: hidden;
  border-radius: 18px;
  background: #000;
}
.art-canvas--square { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }


/* ===== EVIE liquid hero — 4-layer recipe (reference_webgl_liquid_panel) ===== */
/* Layer 1: brand-gradient fallback. The canvas stays in the DOM (transparent when
   WebGL is off), so this shows through under reduced-motion or GL failure. */
.hero-liquid {
  background:
    radial-gradient(120% 90% at 62% 42%, rgba(var(--accent-rgb), 0.30), transparent 60%),
    radial-gradient(90% 80% at 30% 82%, rgba(var(--accent-rgb), 0.18), transparent 65%),
    linear-gradient(160deg, var(--accent-dark) 0%, #000 70%);
}
/* Layer 3: soft radial light, low veil (0.16) per recipe — the first pass reads
   washed-out otherwise. */
.hero-liquid-light {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(70% 60% at 68% 40%, rgba(255, 236, 214, 0.16), transparent 60%);
  mix-blend-mode: screen;
}
/* Page background: one fixed liquid canvas behind every section (created by
   hero-liquid.js, not the template). z-index:-1 keeps it behind all content but
   in front of the body's flat colour; text sections sit over it, opaque cards
   cover it. Dimmed in-shader so light copy stays legible. The gradient here is
   the reduced-motion / no-WebGL fallback. */
.page-liquid {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: none; display: block;
  background:
    radial-gradient(100% 80% at 60% 30%, rgba(var(--accent-rgb), 0.18), transparent 62%),
    linear-gradient(160deg, var(--accent-dark) 0%, #000 72%);
}
/* liquid-page scope (class added by hero-liquid.js, EVIE only): the template
   paints every .section rgb(2,2,3) opaque, which would hide the fixed canvas.
   Make sections transparent so the one liquid background shows through them all.
   Content cards keep their own #060709 fill, which reads as depth over the flow. */
.liquid-page .section { background-color: transparent; }
/* The body paints rgb(2,2,3) opaque and, being static, its box paints OVER a
   z-index:-1 child — which hid the fixed canvas everywhere except the hero (that
   has its own canvas). Make the body transparent; <html> keeps the black base
   behind the canvas, so the liquid shows through every transparent section. */
.liquid-page body { background-color: transparent; }