/* SAFE hero grid — V2 VARIANT overrides.
   Loaded alongside hero-grid.css, which is enqueued globally for every v2 page
   and carries the original layer styles. Everything here is scoped to
   `.has-hero-grid-v2`, a class hero-grid-v2.mjs puts on its container, so this
   sheet is inert on the pages still running the original module.

   Toggle the variants by changing which module a page imports:
     hero-grid.mjs      original      51.1px pitch, radial CSS mask
     hero-grid-v2.mjs   round 4       68px pitch, Figma 828:58360 gradient
*/

/* The radial mask is dropped in v2: `ellipse 78% 72%` is a viewport fraction,
   so it scaled with the window and clipped the field on short viewports. Only
   the bottom fade into the product void is kept, and with one mask layer there
   is nothing left to composite. */
.has-hero-grid-v2 .hero-grid-canvas,
.has-hero-grid-v2 .hero-grid-fallback {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 90%);
  mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 90%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

/* the no-WebGL fallback tracks the v2 pitch */
.has-hero-grid-v2 .hero-grid-fallback {
  background-size: 100% 100%, 68px 68px, 68px 68px;
}