/* ============================================================
   WILDSTREAM — HERO component  (+ shared motion tokens)
   Atmospheric mesh + breath canvas hero, reused across pages.
   Built only from tokens + .ws-* / .mk- atoms. Portable: no
   page-specific dependencies. The breath canvas itself is driven
   by shared/hero-breath.js (looks for #heroBreath).
   ============================================================ */

/* ---- shared motion tokens — driven by the host Tweaks panel ----
   Defined here so every page that loads the hero (and the
   .ws-contact / .ws-panel-glow atmospheres) reads the same values. */
:root {
  /* mesh intensity */
  --d-mesh-opacity: 0.72;   /* subtle (default) */
  --d-mesh-blur: 40px;
  --d-grain-opacity: 0.42;

  /* motion multiplier — 0 = paused, 1 = slow (default), 2 = lively */
  --d-motion: 1;
  --d-drift-dur: calc(40s / max(var(--d-motion), 0.0001));
  --d-flow-dur: calc(6s / max(var(--d-motion), 0.0001));
  --d-pulse-dur: calc(3.6s / max(var(--d-motion), 0.0001));
  --d-drift-state: running;
  --d-flow-state: running;
  --d-pulse-state: running;
}

.hero {
  position: relative;
  padding: 144px 0 0;
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  background: var(--ws-tan-900);
  min-height: 86vh;
  display: flex;
  flex-direction: column;
}
.hero__bg {
  position: absolute; inset: 0;
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  z-index: 0;
}
/* Breath · Story atmosphere background */
.hero__breath {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; display: block;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, transparent 52%, color-mix(in oklab, var(--ws-tan-900) 58%, transparent) 100%),
    linear-gradient(90deg, color-mix(in oklab, var(--ws-tan-900) 38%, transparent) 0%, transparent 48%);
}
/* hero runs in the DS dark-mode token scope; --accent-deep already lifts to ws-purple-300 there */
.hero[data-theme="dark"] {
  --fg-on-dark: var(--ws-tan-50);
}
.hero__mesh {
  position: absolute; inset: -15%;
  pointer-events: none;
  background:
    radial-gradient(38% 30% at 14% 20%, color-mix(in oklab, var(--accent) 42%, transparent), transparent 62%),
    radial-gradient(36% 30% at 84% 70%, color-mix(in oklab, var(--accent-deep) 50%, transparent), transparent 62%),
    radial-gradient(28% 24% at 60% 16%, color-mix(in oklab, var(--ws-red-tint) 38%, transparent), transparent 62%);
  filter: blur(var(--d-mesh-blur));
  opacity: var(--d-mesh-opacity);
  animation: drift var(--d-drift-dur) ease-in-out infinite alternate;
  animation-play-state: var(--d-drift-state);
  z-index: 0;
  transition: opacity var(--dur-base) var(--ease-out-soft), filter var(--dur-base) var(--ease-out-soft);
}
.hero__grain {
  position: absolute; inset: 0;
  background-image: var(--grain);
  background-size: 220px 220px;
  opacity: var(--d-grain-opacity);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}
.hero__rules {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--grid-pad);
  right: var(--grid-pad);
  max-width: var(--grid-max);
  margin: 0 auto;
  pointer-events: none;
  z-index: 1;
}
.hero__rules::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc(100%/12 - 1px),
      color-mix(in oklab, var(--fg) 7%, transparent) calc(100%/12 - 1px),
      color-mix(in oklab, var(--fg) 7%, transparent) calc(100%/12)
    );
  mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
}
.hero__crosshair {
  position: absolute;
  top: 124px; right: 0;
  width: 56px; height: 56px;
  pointer-events: none;
  z-index: 2;
  color: color-mix(in oklab, var(--fg) 24%, transparent);
}
.hero__inner { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; padding-bottom: 0; }

/* hero grid — the component owns alignment + column placement (no inline styles on
   pages). ONE construction for every hero, home included: columns top-aligned. */
.hero .mk-grid { align-items: start; }
.hero__head { grid-column: 1 / span 8; }

/* content rhythm — one consistent gap stacks eyebrow → headline → leads → CTAs;
   the rhythm container neutralizes default element margins so gap is the sole spacing */
.hero__head,
.hero__body { display: flex; flex-direction: column; gap: var(--space-6); }
.hero__head > *,
.hero__body > * { margin: 0; }
.hero__body {
  grid-column: 7 / span 6;
  /* extra breathing room between the title block and the lead paragraphs */
  margin-top: var(--space-6);
}
.hero__ctas { display: flex; flex-direction: row; gap: 10px; flex-wrap: wrap; }

/* ---- Plain hero — content-page variant ----
   Same structure/rhythm as the hero, but a simple LIGHT section: no
   atmospheric background, no min-height, content top-aligned. Pair with a
   light nav (drop `ws-dark` on .nav-fixed) and omit the .hero__bg + data-theme.
   The top padding clears the fixed nav; the bottom uses section rhythm. */
.hero--plain {
  background: transparent;
  min-height: 0;
  padding: 144px 0 var(--section-py);
  border-radius: 0;
}

/* ---- Aurora hero — full-bleed LIGHT atmosphere (industry detail pages) ----
   Same two-layer structure as the main hero: a full-bleed .hero__bg that runs
   up behind the nav with a rounded BOTTOM only, and a transparent content
   .mk-panel on top. Here the bg layer carries the portable aurora surface
   (.mk-panel--aurora + tint) instead of the dark breath canvas. Height + rhythm
   mirror the homepage hero (min-height:86vh from base .hero — a floor that grows
   with content). */
.hero--aurora { background: transparent; padding-bottom: var(--section-py); }
/* Fill the bg layer + re-assert absolute placement over the aurora component's
   default position:relative (host placement is the page's job). Drop the
   component's iOS corner mask: it's needed only on fully-rounded panels, and on
   a full-bleed layer (square top, rounded bottom) it would vignette the area —
   overflow-clip alone is correct here, matching the homepage hero. */
.hero--aurora .hero__bg { position: absolute; inset: 0; -webkit-mask-image: none; mask-image: none; }

/* scrolling logo strip */
.logo-strip { overflow: hidden; border-top: 1px solid color-mix(in oklab, white 14%, transparent); padding: var(--space-10) 0; -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent); mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent); }
.logo-strip__track { display: flex; align-items: center; width: max-content; animation: logo-scroll 30s linear infinite; }
.logo-strip__set { display: flex; align-items: center; gap: var(--space-20); padding-right: var(--space-20); }
/* three identical sets; sliding exactly one set width (1/3 of track) loops seamlessly */
@keyframes logo-scroll { to { transform: translateX(calc(-100% / 3)); } }
@media (prefers-reduced-motion: reduce) { .logo-strip__track { animation: none; } }
/* logo files are the dark (#18181c) variants — render white on the dark hero.
   Reversible: drop the filter if white logo files are supplied instead. */
.logo-strip__logo { flex: none; height: 28px; width: auto; opacity: 0.8; filter: brightness(0) invert(1); }

/* mesh drift + motion-state classes (toggled by shared/site.js from host Tweaks) */
@keyframes drift {
  0%   { transform: translate(-2%, -1%) scale(1); }
  50%  { transform: translate(2%, 2%) scale(1.06); }
  100% { transform: translate(-1%, 3%) scale(1.10); }
}
.anim-paused .hero__mesh,
.anim-paused .ws-contact__glow { animation-play-state: paused !important; }
.anim-lively .hero__mesh { animation-duration: calc(var(--d-drift-dur) / 2) !important; }

@media (max-width: 980px) {
  .hero__head { grid-column: 1 / -1; }
  .hero__body { grid-column: 1 / -1; }
  /* Mobile + tablet: the aurora hero hugs its content instead of holding 86vh,
     so the tinted background no longer trails a tall empty band below the CTA. */
  .hero--aurora { min-height: auto; }
}