/* ==========================================================================
   hero.css — hero system
   --------------------------------------------------------------------------
   Milestone 7 · Hero System

   Spec: Phase 1 §4.2 (section rhythm) / §2.1 (Display type) · Phase 5 §2.9
   (SplitLayout) · Phase 2 §1.4.1 (full-bleed content rail) · Phase 3 §1.2
   (hero copy).

   Reusable asymmetric hero: content left, visual right on desktop (60/40);
   balanced stacked layout on tablet (media width-capped and centred); single
   column text-first on mobile. CTAs reuse the Button System (primary CTA is
   the Large CTA variant — hero is one of its two permitted surfaces).

   The visual uses the approved hero asset supplied in Phase R1.
   Hero Network Redesign: the section surface is the warm
   off-white brand background with a large soft brand-yellow radial accent and
   a CSS/SVG-only animated network background (industrial Ethernet bus, field
   devices, switch hubs, fibre-optic ring, travelling data pulses — see
   .hero__bg). The company name is the dominant typographic element (display
   scale, weight 800, primary rule). All colours derive from the global tokens;
   the approved site theme is untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section — vertical rhythm per breakpoint (Phase 1 §4.2 / §5 spacing).
   Hero Network Redesign: the base is the approved warm off-white background
   with a large, soft brand-yellow radial accent (top right) and a faint
   primary tint (bottom left). Purple and green appear as the network diagram
   and typographic accents. Dark typography keeps strong contrast on the
   light field. All colours derive from the global tokens; nothing is
   hardcoded.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-40) var(--space-48);
  background-color: var(--color-background);
  background-image:
    radial-gradient(
      ellipse 78% 62% at 70% 6%,
      color-mix(in srgb, var(--color-brand-yellow) 52%, transparent),
      transparent 64%
    ),
    radial-gradient(
      ellipse 40% 40% at 6% 98%,
      color-mix(in srgb, var(--color-primary) 8%, transparent),
      transparent 72%
    );
}

/* --------------------------------------------------------------------------
   Animated network background — Hero Network Redesign.
   A single inline SVG layer, absolutely positioned, no layout impact. It
   draws an industrial network map: an Ethernet bus with field devices, a
   central switch hub, a fibre-optic ring, and a substation switch.

   Motion is CSS/SVG only — no JavaScript, no canvas, no video, no particles:
     1. .net-pulse   — bright data packets marching along trunks/branches.
     2. .net-draw    — communication paths illuminating sequentially (draw
                       in, hold lit, release) via animated stroke-dashoffset.
     3. .net-glow    — nodes briefly glowing as data arrives; staggered
                       delays make the light travel across the network.
     4. .net-led     — switch link LEDs blinking.

   Lines are purple (trunk) and green (branch); pulses and glows use the
   amber accent (fibre light) and secondary green (data). The layer is clearly
   visible by design; individual stroke opacities keep the text readable.
   prefers-reduced-motion is handled by the global kill-switch in
   utilities.css (the topology then remains visible as a static diagram).
   -------------------------------------------------------------------------- */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  isolation: isolate;
  overflow: hidden;
}

.hero__bg-svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

/* Two inline SVG layers tuned to the hero's shape per breakpoint. The wide
   1440×800 viewBox (desktop ≥1024) flows around the media column; the
   portrait 400×1000 viewBox (tablet/mobile) puts the network spine in the
   visible strip when `preserveAspectRatio="slice"` crops horizontally. */
.hero__bg-svg--wide { display: none; }

@media (min-width: 1024px) {
  .hero__bg-svg--wide { display: block; }
  .hero__bg-svg--portrait { display: none; }
}

/* Topology — static structure */
.net-trunk   { fill: none; stroke: var(--color-primary);  stroke-width: 1.5; opacity: 0.45; }
.net-branch  { fill: none; stroke: var(--color-secondary); stroke-width: 1.25; opacity: 0.5; }
.net-ring    { fill: none; stroke: var(--color-primary);  stroke-width: 2;   opacity: 0.5; }
.net-device  { fill: var(--color-primary);  opacity: 0.92; }
.net-switch  { fill: var(--color-primary);  opacity: 0.95; }
.net-slot    { fill: color-mix(in srgb, var(--color-white) 45%, var(--color-primary)); }
.net-junction { fill: var(--color-secondary); opacity: 0.95; }
.net-node    { fill: var(--color-primary);  opacity: 0.9; }

/* 1. Data pulses — short bright dashes marching along the lines */
.net-pulse {
  fill: none;
  stroke-linecap: round;
  stroke-width: 3;
  stroke-dasharray: 4 56;
  animation: net-march 6s linear infinite;
}
.net-pulse--amber { stroke: var(--color-accent); }
.net-pulse--green { stroke: var(--color-secondary); }

/* 2. Sequential path illumination — draw in, hold lit, release */
.net-draw {
  fill: none;
  stroke-linecap: round;
  stroke-width: 2;
  stroke-dasharray: var(--draw-len, 700);
  stroke-dashoffset: var(--draw-len, 700);
  animation: net-draw 14s ease-in-out infinite;
}
.net-draw--amber { stroke: var(--color-accent); }
.net-draw--green { stroke: var(--color-secondary); }

/* 3. Node glow — devices light up as data arrives */
.net-glow {
  opacity: 0;
  animation: net-glow-pulse 7s ease-out infinite;
}
.net-glow--amber { fill: var(--color-accent); }
.net-glow--green { fill: var(--color-secondary); }

/* 4. Switch link LEDs */
.net-led {
  fill: var(--color-secondary);
  animation: net-led-blink 1.8s ease-in-out infinite;
}

@keyframes net-march {
  to { stroke-dashoffset: -60; }
}

@keyframes net-draw {
  0%   { stroke-dashoffset: var(--draw-len, 700); opacity: 0; }
  10%  { opacity: 0.95; }
  48%  { stroke-dashoffset: 0; opacity: 0.95; }
  86%  { opacity: 0.95; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes net-glow-pulse {
  0%, 100% { opacity: 0; }
  10%      { opacity: 0.95; }
  16%      { opacity: 0.45; }
  34%      { opacity: 0.15; }
  55%      { opacity: 0; }
}

@keyframes net-led-blink {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 1; }
}

@media (min-width: 768px) {
  .hero {
    padding-block: var(--space-48) var(--space-64);
  }
}

@media (min-width: 1024px) {
  .hero {
    padding-block: var(--space-80) var(--space-96);
  }
}

/* Inner — self-contained width: same container rhythm as layout.css so the
   hero works full-bleed or nested. */
.hero__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

@media (min-width: 768px) {
  .hero__inner {
    padding-inline: var(--container-padding-tablet);
  }
}

@media (min-width: 1024px) {
  .hero__inner {
    padding-inline: var(--container-padding-laptop);
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: center;
    gap: var(--space-32);
  }
}

@media (min-width: 1280px) {
  .hero__inner {
    padding-inline: var(--container-padding-desktop);
  }
}

/* --------------------------------------------------------------------------
   Content column — eyebrow, company-name title, value proposition,
   subheadline, CTAs, optional trust line
   -------------------------------------------------------------------------- */
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero__eyebrow {
  margin: 0 0 var(--space-16);
  color: var(--color-primary);
}

.hero__title {
  margin: 0;
  color: var(--color-primary);
}

/* Brand logo as the hero title (Phase R1) — logos/logo.svg. The asset is an
   A4 canvas; the img box is sized to the visible lockup (wordmark + service
   banner, ~3.6:1) so the empty canvas is cropped via object-fit cover without
   stretching the artwork. The logo is the primary visual focus of the hero. */
.hero .hero__logo {
  display: block;
  width: min(100%, 920px);
  height: auto;
  aspect-ratio: 3.6 / 1;
  object-fit: cover;
  object-position: 50% 46%;
}

/* Hero title scale for the component-page demos only (the site hero title is
   now the brand logo image). Kept scoped to .hero .hero__title so the demos
   continue to render a primary heading. */
.hero .hero__title {
  margin: var(--space-8) 0 var(--space-32);
  width: 100%;
  font-weight: 800;
  font-size: clamp(42px, calc(5vw + 23px), 95px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-shadow: 0 1px 1px color-mix(in srgb, var(--color-background) 55%, transparent);
}

/* Subtle emphasis — short brand-yellow rule under the wordmark. */
.hero .hero__title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-block-start: var(--space-8);
  background: var(--color-primary);
  border-radius: 2px;
}

/* Value proposition — secondary to the company name. Rendered with the u-h2
   scale utility; this scoped rule reduces its visual weight (semibold, wider
   tracking) so it supports the wordmark instead of competing with it. */
.hero .hero__value {
  margin: var(--space-8) 0 0;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  color: var(--color-primary);
}

.hero__subhead {
  margin: var(--space-16) 0 0;
  color: var(--color-body);
}

.hero__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  margin-block-start: var(--space-24);
}

.hero__ctas .button {
  width: 100%;
}

@media (min-width: 768px) {
  .hero__ctas {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    margin-block-start: var(--space-32);
  }

  .hero__ctas .button {
    width: auto;
  }
}

/* Optional trust indicators — microcopy line under the CTAs (Phase 3 §1.2) */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-24);
  margin: var(--space-24) 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-body);
}

.hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-small-current);
  line-height: var(--lh-small);
}

.hero__trust-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--color-primary);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Media — hero visual frame (Phase R1 asset).
   Hero Refinement Pass 2: soft radius, subtle elevation, and a gentle
   brand-yellow-tinted border so the image complements the company identity.
   -------------------------------------------------------------------------- */
.hero__media {
  margin: var(--space-24) 0 0;
}

.hero__media-frame {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-brand-yellow) 45%, var(--color-border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
}

.hero__media-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero__media-caption {
  margin: var(--space-8) 0 0;
  color: var(--color-body);
}

@media (min-width: 768px) {
  .hero__media {
    max-width: 640px;
    margin-inline: auto;
  }

  .hero__media-frame {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 1024px) {
  .hero__media {
    max-width: none;
    margin: 0;
  }

  .hero__media-frame {
    aspect-ratio: 4 / 3;
  }
}

/* --------------------------------------------------------------------------
   Quick statistics — optional metric rail (Phase 2 §1.4.1). Mono numbers,
   2×2 on tablet/mobile, 4-across on desktop.
   -------------------------------------------------------------------------- */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24);
  margin: var(--space-40) 0 0;
  padding: var(--space-24) 0 0;
  border-top: 1px solid var(--color-border);
}

.hero__stat {
  list-style: none;
}

.hero__stat-number {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-stat-current);
  font-weight: var(--weight-regular);
  line-height: var(--lh-h1);
  color: var(--color-primary);
}

.hero__stat-label {
  margin: var(--space-4) 0 0;
  color: var(--color-body);
  font-size: var(--text-small-current);
  line-height: var(--lh-small);
}

@media (min-width: 1024px) {
  .hero__stats {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-block-start: var(--space-48);
  }
}