/* ==========================================================================
   eQ8L — Hero (§1) — module-scoped styles.
   Every selector nests under .eq8l-hero (scoping rule). Tokens only — no
   brand hexes. NOTHING here hides content: the no-JS / reduced-motion /
   editor page is this finished frame (main.css owns the reveal states).
   Ground: --eq8l-paper + the 4%-navy dot grid (via .eq8l-dot-grid-bg on the
   root). No grid rules in the hero — the blank page acquires bones in §2.
   ========================================================================== */

.eq8l-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
}

/* Foot spacing (client 2026-07-10, retuned): a tasteful, proportionate band
   of white under the film before the navy difference section — enough to let
   the film card breathe, well short of the earlier bloated gap. Scales with
   viewport height. The TOP keeps the full section pad (the H1 needs air under
   the header). */
.eq8l-hero.eq8l-section {
  padding-bottom: clamp(48px, 6vh, 80px);
}

/* D-HERO-POP (client 2026-07-09): a faint static teal radial wash breaks the
   flat paper behind the type. Module-scoped so the shared .eq8l-dot-grid-bg
   elsewhere is untouched; the dot layer is re-declared here so the wash sits
   above the paper and below the dots. Alphas are derived teal/navy tints, not
   new brand hexes (the 94,186,168 pair is --eq8l-teal's rgb). Zero blocking
   assets; paints on the paper only. */
.eq8l-hero:not(.eq8l-hero--plain) {
  background-image:
    radial-gradient(120% 90% at 78% 30%, rgba(94, 186, 168, 0.05), transparent 60%),
    radial-gradient(circle at 1px 1px, var(--eq8l-dot-grid) 1px, transparent 0);
  background-size: auto, 24px 24px;
}

/* Content sits above the background image (z 0) and the tangle (z 0) */
.eq8l-hero .eq8l-container {
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
}

/* The key word ("Practitioner") is set in the brand gradient (client
   2026-07-09 hero-pop): static gradient ink everywhere — the flow animation
   lives in main.css's GATE. Teal→blue --eq8l-gradient, NOT the agent mint:
   this is display type on paper, and mint stays agent territory. @supports
   guard: engines without text-clip keep plain ink (the color fallback). */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .eq8l-hero .eq8l-hero__ruled {
    background: var(--eq8l-gradient);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* Right-field planet sketch (client 2026-07-09) — the logo's planet system
   as a pastel ink-wash diagram: teal/blue watercolor spheres with a white
   specular + navy terminator, one thin elliptical orbit rule. Static, no
   animation (nothing to gate). z 0 = above the paper wash, BELOW the
   journey line and its ray (client 2026-07-10: the flat side-on ring must
   show NO breaks, so in wisp mode the hero line svg rides at z 1 above
   this sketch, and the combined descent ray on the difference svg paints
   above it by document order). Content stays above everything here.
   Alphas derive from --eq8l-teal / --eq8l-blue / --eq8l-ink rgb values.
   MOBILE (decided 2026-07-20): stays hidden below 1024px on purpose — the
   phone hero is a single tight column of type + the film card; the sketch
   has no right-field to live in and would crowd it. The mobile through-line
   is the quiet spine authored in module.html (no tangle, no spheres). */
.eq8l-hero .eq8l-hero__planets {
  display: none;
  position: absolute;
  top: clamp(120px, 14vh, 220px);
  right: 4%;
  width: clamp(300px, 28vw, 520px);
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 0;
}

/* Wisp mode (client 2026-07-10): the journey line rides ABOVE the planet
   sketch so the flat ring loop shows NO breaks where it crosses the sphere
   face. Safe: the desktop wisp path is generated to clear every text box,
   the film card sits at z7, and the container's content is z1 but paints
   later in the DOM where they'd ever overlap (they don't by construction).
   Mobile keeps the authored tangle at the base z0 (this class is desktop-
   only, stamped by motion.js arm()). */
.eq8l-hero.eq8l-hero--wisp svg.eq8l-line-segment {
  z-index: 1;
}

@media (min-width: 1024px) {
  .eq8l-hero .eq8l-hero__planets { display: block; }
}

.eq8l-hero .eq8l-hero__planet {
  position: absolute;
  border-radius: 50%;
}

/* Gradient on the element (200% travel room for the gated eq8l-gradient-flow,
   declared in main.css's GATE); the fixed lighting lives on ::after so the
   specular doesn't slide when the surface flows. Static = first frame. */
.eq8l-hero .eq8l-hero__planet--main {
  top: 8%;
  right: 10%;
  width: 62%;
  aspect-ratio: 1;
  background: linear-gradient(135deg, rgba(94, 186, 168, 0.28), rgba(73, 112, 175, 0.22));
  background-size: 200% 200%;
}

.eq8l-hero .eq8l-hero__planet--main::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 42%),
    radial-gradient(circle at 70% 76%, rgba(28, 53, 63, 0.16) 0%, rgba(28, 53, 63, 0) 60%);
}

/* The orbit rule — a hand-drawn diagram ellipse around the main sphere.
   On desktop with motion armed, motion.js reroutes the through-line to LOOP
   around the sphere and stamps .eq8l-hero--wisp — the live loop replaces
   this static ring (client 2026-07-09). No-JS/editor/mobile keep the ring. */
.eq8l-hero--wisp .eq8l-hero__planet-ring {
  display: none;
}

.eq8l-hero .eq8l-hero__planet-ring {
  position: absolute;
  top: 30%;
  right: -3%;
  width: 96%;
  aspect-ratio: 2.6 / 1;
  border: 1px solid rgba(94, 186, 168, 0.35);
  border-radius: 50%;
  transform: rotate(-16deg);
}

/* Orbit rigs (client 2026-07-09) — circular tracks centred on the main
   sphere's centre (59%, 39%) of the square container. Static pose = the
   authored companion positions (base angles on spin + counter-rotation on
   the sphere keep the lighting upright); the slow orbit animation is gated
   in main.css §6b. */
.eq8l-hero .eq8l-hero__orbit {
  position: absolute;
  pointer-events: none;
}

.eq8l-hero .eq8l-hero__orbit--moon {
  top: 3.9%;
  left: 23.9%;
  width: 70.2%;
  aspect-ratio: 1;
}

.eq8l-hero .eq8l-hero__orbit--dot {
  top: -4.55%;
  left: 15.45%;
  width: 87.1%;
  aspect-ratio: 1;
}

.eq8l-hero .eq8l-hero__orbit-spin {
  position: absolute;
  inset: 0;
}

.eq8l-hero .eq8l-hero__orbit--moon .eq8l-hero__orbit-spin { transform: rotate(-63.8deg); }
.eq8l-hero .eq8l-hero__orbit--dot .eq8l-hero__orbit-spin { transform: rotate(127.1deg); }

/* Companion spheres — the logo's teal + mint satellites, each pinned to the
   top-centre of its spin box (sizes re-expressed as % of the orbit box so
   the rendered px match the old container-relative values). */
.eq8l-hero .eq8l-hero__planet--moon {
  top: -9.26%;
  left: 50%;
  width: 18.52%;
  margin-left: -9.26%;
  aspect-ratio: 1;
  transform: rotate(63.8deg);
  background: linear-gradient(135deg, #5EBAA8, #4970AF);
  background-size: 200% 200%;
  opacity: 0.55;
}

.eq8l-hero .eq8l-hero__planet--moon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 55%);
}

.eq8l-hero .eq8l-hero__planet--dot {
  top: -3.73%;
  left: 50%;
  width: 7.46%;
  margin-left: -3.73%;
  aspect-ratio: 1;
  transform: rotate(-127.1deg);
  background: linear-gradient(135deg, rgba(93, 255, 215, 0.7), rgba(73, 112, 175, 0.55));
  background-size: 200% 200%;
  opacity: 0.6;
}

.eq8l-hero .eq8l-hero__content {
  max-width: 46rem;
}

/* Optional background image — 10% opacity so the ink-on-paper AA contract
   holds regardless of what a marketer uploads. Never a hiding mechanism. */
.eq8l-hero .eq8l-hero__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
}

/* Hero fizz removed (client 2026-07-09): too much motion in the opener. */

/* THE CARET — appearance 1 of 6. Blinks alone at the H1 origin (blink
   keyframes + motion-off/reduced-motion solid state live in main.css). */
.eq8l-hero .eq8l-hero__caret {
  display: block;
  margin-bottom: var(--eq8l-space-2);
}

.eq8l-hero .eq8l-hero__h1 {
  margin-bottom: var(--eq8l-space-4);
}

/* The teal rule under the key word ("Practitioner") — a real element so
   motion.js can draw it (scaleX 0 -> 1, origin left). Default = drawn. */
.eq8l-hero .eq8l-hero__ruled {
  position: relative;
  white-space: nowrap;
}

/* D-HERO-POP (client 2026-07-09): the practitioner's word carries the
   practitioner's mark — the underline becomes the agent progress gradient
   (blue -> mint) at 200% field. The .eq8l-agent-flow class (main.css) animates
   background-position only when armed; static composed gradient at rest / no-JS
   / PRM. README §3.7 agent-territory list updated by Owner E. */
.eq8l-hero .eq8l-hero__h1-rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.08em;
  height: 3px;
  background: var(--eq8l-agent-progress);
  background-size: 200% 100%;
  transform-origin: left center;
  pointer-events: none;
}

.eq8l-hero .eq8l-hero__lead {
  max-width: 36em;
  margin-bottom: var(--eq8l-space-3);
}

.eq8l-hero .eq8l-hero__lead p:last-child {
  margin-bottom: 0;
}

/* Kicker — "Not another dashboard. Not another workflow. Not another
   chatbot." Display voice, one line on desktop; strikes are .eq8l-strike
   (main.css: struck by default, JS re-draws them in sequence). */
.eq8l-hero .eq8l-hero__kicker {
  font-family: var(--eq8l-font-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--eq8l-ink);
  margin: 0 0 var(--eq8l-space-4);
}

.eq8l-hero .eq8l-hero__kicker-phrase {
  display: inline-block;
  margin-right: var(--eq8l-space-2);
}

.eq8l-hero .eq8l-hero__kicker-phrase:last-child {
  margin-right: 0;
}

/* One primary action + its support line */
.eq8l-hero .eq8l-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--eq8l-space-2);
}

.eq8l-hero .eq8l-hero__support {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--eq8l-quiet);
}

/* "Watch the film" — a quiet mono TEXT link (scroll-cue voice, laid
   horizontal), never a second button: "Book a demo" stays the page's only
   conversion verb. Hidden by the template when no URL/embed is set. */
.eq8l-hero .eq8l-hero__film {
  margin-top: var(--eq8l-space-1);
  flex-direction: row;
}

/* Optional launch-spot embed at the hero's foot — only rendered when the
   embed field is set (empty default protects LCP). The hero keeps
   min-height 100svh and simply grows when the embed exists. The spot is
   white-background 16:9 by production design — the card shadow is the
   only chrome it gets. */
.eq8l-hero .eq8l-hero__film-embed {
  position: relative;
  z-index: 7; /* above the traveling planet (z6; client 2026-07-09: the
                 sphere passes UNDER the film), still below the header (z10).
                 Valid because neither .eq8l-section nor .eq8l-hero creates
                 a stacking context. */
  max-width: 880px;
  width: min(880px, calc(100% - 2 * var(--eq8l-margin)));
  margin: var(--eq8l-space-5) auto 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.eq8l-hero .eq8l-hero__film-embed iframe,
.eq8l-hero .eq8l-hero__film-video {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* Self-hosted launch spot: 16:9 fills the card exactly. preload="none"
   means only the poster paints until play — the H1 keeps LCP. */
.eq8l-hero .eq8l-hero__film-video {
  object-fit: cover;
  background: var(--eq8l-ink);
}

/* Scroll cue — centred at the foot of the viewport-height hero */
.eq8l-hero .eq8l-hero__cue {
  position: absolute;
  left: 50%;
  bottom: var(--eq8l-space-4);
  transform: translateX(-50%);
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Responsive — the two conventions breakpoints (1023px / 639px)
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .eq8l-hero .eq8l-hero__content {
    max-width: 40rem;
  }

  /* Through-line contract: --eq8l-line-x flips from 12vw to 24px below
     1024px. Below 1024 the hero segment becomes a FIXED 100px STRIP
     anchored so viewBox x=12 lands exactly on --eq8l-line-x — the same
     architecture every sibling segment uses (difference/team/proof strips).
     The authored meander is therefore true pixels at every mobile width,
     matching the siblings' amplitude instead of stretching with the
     viewport, and the hero→§2 seam stays continuous. (Desktop keeps the
     full-bleed svg: motion.js's wisp reroute generates its own path in
     pixel space up there.) Overflow is visible per main.css, so swings
     wider than the strip still paint. */
  .eq8l-hero > .eq8l-line-segment {
    left: calc(var(--eq8l-line-x) - 12px);
    width: 100px;
  }
}

@media (max-width: 639px) {
  .eq8l-hero .eq8l-hero__lead {
    margin-bottom: var(--eq8l-space-3);
  }

  /* Kicker phrases stack — three deadpan lines, not a squeezed sentence */
  .eq8l-hero .eq8l-hero__kicker-phrase {
    display: block;
    margin-right: 0;
  }

  /* Button support line stacks the same way (client 2026-07-20):
     "Thirty minutes." / "Bring a hard question." — two beats, two lines. */
  .eq8l-hero .eq8l-hero__support-sentence {
    display: block;
  }

  .eq8l-hero .eq8l-hero__cue {
    bottom: var(--eq8l-space-3);
  }
}