/* The fallback lives on the wrapper rather than on the canvas itself, so the canvas can
   cross-fade in over it once the shader has actually drawn a frame.

   Its palette is matched to the hero section's own colours. It used to be
   linear-gradient(135deg, #16254b, #23418a, #aadfd9, #e64f0f) - navy through cyan to orange -
   so first paint showed a blue field that snapped to green the instant WebGL produced its
   first frame. That colour pop was the most visible thing about a cold load.

   The 0.7 opacity sits here, on the wrapper, and applies to the composited subtree. So the
   fallback shows at 0.7 before the shader is ready and the canvas (opacity 1 when revealed)
   also lands at 0.7 - identical to the previous behaviour, but now with a single fade. */
[data-controller="gradient"] {
  position: fixed;
  inset: 0;
  z-index: 0;
  /* This wrapper now spans the viewport (the canvas used to), so it must never intercept a
     click in any region <main> does not cover. Pointer tracking for the shader listens on
     window, not on the canvas, so nothing needs events here. */
  pointer-events: none;
  /* Keeps this a background element rather than something that competes with foreground
     text and CTAs for attention. */
  opacity: 0.7;
  background: linear-gradient(135deg, #EDE6D5, #8FBF7A 40%, #9DD98F 70%, #E64F0F);
}

.dark [data-controller="gradient"] {
  background: linear-gradient(135deg, #0E2418, #1E5E3A 40%, #9DD98F 70%, #E64F0F);
}

[data-controller="gradient"] > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Revealed by gradient_controller#draw once there is genuinely something on the canvas.
     Starting at 0 also means a browser without WebGL2 simply keeps showing the wrapper's
     fallback forever, which is the same outcome as before. */
  opacity: 0;
  transition: opacity 600ms ease;
}

[data-controller="gradient"] > canvas[data-ready] {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  [data-controller="gradient"] > canvas {
    transition: none;
  }
}

/* This app's sections use Tailwind utilities, not a literal .section class - target the
   layout's <main> instead so every page's content stacks above the fixed canvas, not just
   elements that happen to already carry their own position/z-index utility. */
main { position: relative; z-index: 1; }