/* Caltior hero canvas — shared layout for the brand's animated hero motifs.
   Motif-neutral on purpose: the Lattice (home page) and the Mesh (every other
   page) both use these classes, and the canvas's data attribute is what selects
   the motif. Single source of truth — do not fork these rules into page-local
   <style> blocks.

   Pairs with caltior-hero-canvas.js plus one motif file.

   ORDER MATTERS: base rules first, then variants. The variants share their base
   class's specificity, so a variant placed above its base silently loses. That
   bug shipped once — a `--page` overlay ended up at the base z-index and
   painted over the page text. Keep new variants in the variants section.

   Hero-scoped use: host element needs `position: relative` and
   `overflow: hidden`; content inside needs `position: relative; z-index: 2`.
   Page-scoped use (`--page`): no host requirements at all. */

/* ---------- base ---------- */

.hero-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Diagonal wash — default, for heroes with copy on the left. */
.hero-canvas-ov {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(12, 15, 18, .92) 0%,
    rgba(12, 15, 18, .74) 30%,
    rgba(12, 15, 18, .34) 58%,
    rgba(12, 15, 18, .5) 100%);
}

/* ---------- placement variants ---------- */

/* Page — a centred background for the whole page rather than one hero. Fixed to
   the viewport and pulled behind content with a negative z-index, so it needs
   no `position: relative` host and no per-page layout changes. Must stay a
   direct child of <body>: nesting it inside a transformed or filtered ancestor
   creates a stacking context and the negative index would trap it there. */
.hero-canvas--page,
.hero-canvas-ov--page {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* Band — for tall heroes (long copy, or an embedded demo video). Anchors the
   motif to a fixed-height band at the top instead of letting it scale against
   the full hero height. Apply to both canvas and overlay. */
.hero-canvas--band,
.hero-canvas-ov--band {
  inset: 0 0 auto 0;
  height: min(520px, 62vh);
}

/* ---------- overlay wash variants ---------- */

/* Centred heroes: fade the motif out under the middle, where the type sits, and
   let it survive at the edges. Use with --band and an off-centre data-mesh-cx. */
.hero-canvas-ov--center {
  background:
    radial-gradient(ellipse 46% 62% at 50% 44%, rgba(12, 15, 18, .95) 0%, rgba(12, 15, 18, .8) 60%, rgba(12, 15, 18, .5) 100%),
    linear-gradient(rgba(12, 15, 18, .42), rgba(12, 15, 18, .66));
}

/* Flat wash — for short, narrow heroes where there is no room for a
   directional gradient to read as anything but a smudge. */
.hero-canvas-ov--wash {
  background: linear-gradient(rgba(12, 15, 18, .78), rgba(12, 15, 18, .62));
}

/* Page wash — sits behind all body copy, so it is far lighter than the hero
   washes. It only needs to knock the motif back, not protect one headline. */
.hero-canvas-ov--page-wash {
  background: radial-gradient(ellipse 52% 46% at 50% 50%,
    rgba(12, 15, 18, .55) 0%,
    rgba(12, 15, 18, .34) 60%,
    rgba(12, 15, 18, .2) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .hero-canvas { display: none; }
}
