/* ---------- Motion variant: dark hero with a code-drawn, animated isometric site ---------- */
.hero--motion {
  --scene-line: var(--c-accent-dark);
  --scene-strong: var(--c-accent);
  --scene-glow: var(--c-accent);
  --scene-hz: var(--c-warn);
  background: radial-gradient(120% 90% at 70% 40%, var(--c-dark-2) 0%, var(--c-dark) 45%, var(--c-dark-deep) 100%);
  color: var(--c-dark-text);
  min-height: min(760px, calc(100svh - 104px));
  display: flex; align-items: center;
}
.hero--motion .hero-light { display: none; }
.hero-scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-scene-svg { width: 100%; height: 100%; display: block; }
/* Left-hand scrim keeps the headline readable over the drawing */
.hero-scene::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--c-dark-deep) 0%, color-mix(in srgb, var(--c-dark-deep) 82%, transparent) 30%, transparent 62%),
    linear-gradient(0deg, color-mix(in srgb, var(--c-dark-deep) 70%, transparent) 0%, transparent 30%);
}
.hero--motion .container { width: 100%; }
.hero--motion h1 { color: #fff; }
.hero--motion h1 span + span { color: var(--c-accent-dark); }
.hero--motion .hero-lead { color: var(--c-dark-muted); }
.hero--motion .eyebrow { background: var(--c-accent-soft-dark); color: var(--c-accent-dark); }
.hero--motion .pillars { background: rgba(255,255,255,.06); border-color: var(--c-dark-line); color: var(--c-dark-text); }
.hero--motion .pillars span::before { background: var(--c-accent-dark); }
.hero--motion :focus-visible { outline-color: var(--c-focus-dark); }
.hero--motion .decide { box-shadow: 0 30px 60px -20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.85); --glass-bg: color-mix(in srgb, var(--c-surface) 88%, transparent); }
.scene-note { position: absolute; right: var(--gutter); bottom: 16px; margin: 0; font-size: 0.75rem; color: var(--c-dark-muted); opacity: .7; }

/* Scene strokes */
.sc-grid { fill: none; stroke: var(--scene-line); stroke-opacity: .09; stroke-width: 1; }
.sc-face { fill: var(--scene-line); fill-opacity: .07; stroke: none; }
.sc-ln { fill: none; stroke: var(--scene-line); stroke-opacity: .7; stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.sc-lane { fill: none; stroke: var(--scene-hz); stroke-opacity: .45; stroke-width: 1.4; stroke-dasharray: 10 8; }
.sc-pipe { fill: none; stroke: var(--scene-strong); stroke-opacity: .55; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.sc-flow { fill: none; stroke: #fff; stroke-opacity: .85; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 3 22; }
.sc-cable { fill: none; stroke: var(--scene-hz); stroke-opacity: .8; stroke-width: 1.6; }
.sc-spill { fill: var(--scene-strong); fill-opacity: .18; stroke: var(--scene-strong); stroke-opacity: .6; stroke-width: 1; }
.sc-hz-dot { fill: var(--scene-hz); }
.sc-hz-ring { fill: none; stroke: var(--scene-hz); stroke-width: 1.5; }
.sc-scan { stroke: var(--scene-strong); stroke-opacity: 0; stroke-width: 1; }

@media (prefers-reduced-motion: no-preference) {
  /* 1. Draw in */
  .sc-ln, .sc-pipe { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sc-draw 1.4s cubic-bezier(.4,0,.2,1) forwards; animation-delay: calc(var(--i) * 18ms); }
  .sc-pipe { animation-delay: calc(1.3s + var(--i) * 200ms); }
  .sc-cable { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sc-draw 1.2s ease-out 2s forwards; }
  .sc-grid, .sc-face, .sc-lane, .sc-spill { opacity: 0; animation: sc-fade 1.2s ease-out .2s forwards; }
  .sc-face { animation-delay: 1.1s; }
  .sc-spill { animation-delay: 2.2s; }
  /* 2. Live: flow along pipes, hazard pulses, slow camera drift, scan line */
  .sc-flow { opacity: 0; animation: sc-fade .6s ease-out forwards, sc-flow 1.6s linear infinite; animation-delay: calc(2s + var(--i) * 200ms), 0s; }
  .sc-hz { opacity: 0; animation: sc-fade .4s ease-out forwards; animation-delay: calc(2.6s + var(--i) * 350ms); }
  .sc-hz-ring { transform-box: fill-box; transform-origin: center; animation: sc-pulse 2.4s ease-out infinite; animation-delay: calc(var(--i) * 400ms); }
  .sc-drift { transform-box: view-box; transform-origin: 65% 45%; animation: sc-drift 26s ease-in-out infinite alternate; }
  .sc-scan { animation: sc-scan 7s linear 3s infinite; }
}
@keyframes sc-draw { to { stroke-dashoffset: 0; } }
@keyframes sc-fade { to { opacity: 1; } }
@keyframes sc-flow { to { stroke-dashoffset: -25; } }
@keyframes sc-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes sc-drift { from { transform: translate(0,0) scale(1); } to { transform: translate(-36px, 14px) scale(1.06); } }
@keyframes sc-scan { 0% { transform: translateY(80px); stroke-opacity: 0; } 10% { stroke-opacity: .35; } 90% { stroke-opacity: .35; } 100% { transform: translateY(700px); stroke-opacity: 0; } }

/* Pause the loop when the hero is off screen (class set by script) */
.hero--motion.is-offscreen * { animation-play-state: paused !important; }

@media (max-width: 1023px) {
  .hero--motion { min-height: 0; }
  .hero-scene::after { background: linear-gradient(180deg, color-mix(in srgb, var(--c-dark-deep) 55%, transparent) 0%, color-mix(in srgb, var(--c-dark-deep) 80%, transparent) 55%, var(--c-dark-deep) 100%); }
  .scene-note { display: none; }
}
.variant-dot--motion { background: conic-gradient(#2563ff, #7fa3ff, #2563ff); box-shadow: 0 0 0 2px rgba(127,163,255,.3); }

/* Hero is copy-only here; the decision card moves to its own band below */
.hero--motion .hero-grid { grid-template-columns: minmax(0, 1fr); }
.hero--motion .hero-copy { max-width: 600px; }
.decide-band-grid { display: grid; gap: var(--space-lg); align-items: center; }
@media (min-width: 1024px) { .decide-band-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-2xl); } }
.decide-band .decide { --glass-bg: var(--c-surface); box-shadow: var(--shadow-lg); }
@media (max-width: 1023px) {
  .hero--motion { min-height: 0; padding-top: clamp(290px, 66vw, 460px); }
  .hero-scene-svg { position: absolute; top: 0; left: 50%; --sh: clamp(390px, 90vw, 600px); height: var(--sh); width: calc(var(--sh) * 1.579); max-width: none; transform: translateX(-60%); }
  .hero-scene::after { background: linear-gradient(180deg, transparent 0%, transparent 30%, color-mix(in srgb, var(--c-dark-deep) 85%, transparent) 55%, var(--c-dark-deep) 100%); }
}
.decide-band-copy .muted { margin-top: var(--space-12); }
.palette-green .hero--motion { --scene-glow: #3fae86; } .palette-green #sc-glow stop:first-child { stop-opacity: .32; }