/* ════════════════════════════════════════════════════════════
   EPIC HORIZONS — TWO SIGNATURE MOTIONS  (pairs with js/roller.js)

   1. .eh-lay        the herringbone paver band behind a heading phrase
   2. .eh-stems      the growing line-drawn stem in each page gutter

   Everything here is decorative: pointer-events are off throughout and
   the markup carries aria-hidden, so selection and reading order are
   exactly what they were.

   No filter: blur() anywhere — banned on this project.
   No transition is declared on anything GSAP touches; a stylesheet
   transition on a GSAP-animated element makes the browser re-ease every
   frame, which is the stutter this project has hit repeatedly.
   ════════════════════════════════════════════════════════════ */

/* ── 1. THE LAYDOWN ─────────────────────────────────────────── */

/* Inline + position:relative only. An inline box with relative
   positioning does not alter line breaking, line height or flow, so
   wrapping a phrase in this cannot move a single pixel of layout. */
.eh-lay {
  position: relative;
  display: inline;
}

/* The text has to be positioned too: an absolutely positioned sibling
   paints above the parent's ordinary inline content, so without this
   the band would cover the words it is meant to sit behind. */
.eh-lay__t {
  position: relative;
  z-index: 1;
}

.eh-lay__band {
  position: absolute;
  z-index: 0;
  display: block;
  pointer-events: none;
  transition: none;
}

.eh-lay__band svg {
  display: block;
  overflow: visible;
}

/* GSAP writes transform + opacity on these; keep the stylesheet out of
   both properties entirely. */
.eh-lay__blk,
.eh-lay__settle {
  transition: none;
  animation: none;
}

/* Blocks start hidden so there is never a flash of the finished field
   before the timeline takes over. Reduced motion re-shows them below,
   where the band is simply already laid. */
/* No shape-rendering:crispEdges here. The field is rotated 45°, and
   snapping rotated edges to the pixel grid made the 1px sand joints
   read as an uneven 1–2px quilt instead of as joints. Default
   antialiasing keeps every joint the same width. */
.eh-lay__blk {
  opacity: 0;
}

/* No GSAP (or reduced motion): the field is already down. */
.eh-lay__band--static .eh-lay__blk { opacity: 1; }


/* ── 2. THE GROWING LINE ────────────────────────────────────── */

/* Absolutely positioned, full document height, and sized by script to
   exactly the measured document height so its bottom coincides with the
   page bottom — document.body.scrollHeight cannot change.

   z-index 4 sits above the ordinary sections (z 2) and the wall-of-work
   (z 3), whose opaque near-black background would otherwise cover the
   gutters, and well below the sticky header. */
.eh-stems {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint;
}

.eh-stem {
  position: absolute;
  top: 0;
  display: block;
  pointer-events: none;
  overflow: visible;
}

.eh-stem__line,
.eh-frond {
  transition: none;
  animation: none;
}

/* Fronds are revealed by script as the growing tip reaches them; they
   start closed so nothing is visible ahead of the line. */
.eh-frond {
  opacity: 0;
}


/* ── PHONES ─────────────────────────────────────────────────────
   No stem at all at or below 767px. There is no room for it outside a
   1200px content column on a phone, and a decorative line squeezed into
   a 4px margin reads as a rendering bug. The gutters simply are not
   there and the page is finished without it. */
@media (max-width: 767px) {
  .eh-stems { display: none !important; }
}


/* ── REDUCED MOTION ─────────────────────────────────────────────
   The stem is a scroll-driven drawing with no static state worth
   showing, so it is removed outright. The paver band has a perfectly
   good static state — a laid field — so it stays, fully laid, and only
   the laying animation is skipped (js/roller.js never builds the
   timeline in this mode). */
@media (prefers-reduced-motion: reduce) {
  .eh-stems { display: none !important; }
  .eh-lay__blk { opacity: 1; }
}