/* ============================================================
   Lorixen — Hero square grid (additive, revertible)
   A clean, clearly-visible grid laid over the dark green hero.
   Uses pure CSS linear-gradients (no SVG, no inherited blur)
   so the lines render crisply at any viewport size.
   To revert: delete this file + its <link> in index.html.
   ============================================================ */

.hero-band {
  isolation: isolate;
  position: relative;
}

/* Use ::before (the motion layer claims ::after for its glow).
   !important on every property defeats anything any other
   stylesheet might leak (filter / animation / mask / opacity). */
.hero-band::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  /* Two stacked linear-gradients = vertical + horizontal grid
     lines. Very soft mint-green — present as texture, never
     prominent. Low saturation + low opacity keeps it refined. */
  background-image:
    linear-gradient(to right,  hsla(172, 22%, 78%, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, hsla(172, 22%, 78%, 0.055) 1px, transparent 1px) !important;
  background-size: 48px 48px, 48px 48px !important;
  background-position: 0 0, 0 0 !important;
  background-repeat: repeat, repeat !important;
  background-color: transparent !important;
  background-attachment: scroll !important;

  /* Defeat any inherited blur / animation / mask / transform
     from other stylesheets — these would otherwise dissolve or
     reposition the grid lines. */
  filter: none !important;
  animation: none !important;
  transform: none !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
}

/* Larger viewports — slightly larger cells for proportion. */
@media (min-width: 1280px) {
  .hero-band::before {
    background-size: 56px 56px, 56px 56px !important;
  }
}

/* Mobile — tighter rhythm. */
@media (max-width: 720px) {
  .hero-band::before {
    background-size: 40px 40px, 40px 40px !important;
  }
}