/* Copyright (c) 2026, CTO Resources LLC
 *
 * Homepage hero exhibit: "From Architecture Chaos to Action".
 *
 * The default styles below ARE the static, resolved composition (three work
 * products, their connections and the Useful EA logo). That is what renders
 * first, without JavaScript, and when reduced motion is requested.
 * /hero-anim.js adds .is-animating to run the 12-second loop. Every moving
 * part uses one 12s timeline with the same delay, so they stay in step, and
 * pausing (button, off-screen, hidden tab) freezes them all where they are.
 *
 * Timeline (percent of 12s):
 *   0–17   disconnected inputs          50–62  real product output visible
 *   17–38  relationships appear          62–75  work products align, outputs
 *   38–50  groups move into panels       75–88  resolve into the logo
 *                                         88–100 lines extend back out
 */

/* Beside the copy on wide screens; when the hero stacks, kept to a modest
   exhibit size rather than filling the column. */
.ha-figure { margin: 0 auto; width: 100%; max-width: 600px; }
.ha {
  --ha-dur: 12s;
  --ha-offset: 0s;
  position: relative;
  aspect-ratio: 5 / 4;
  background: #fbfaf7;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
.ha-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ── Static (resolved) composition ───────────────────────── */
.ha-grid, .ha-stubs, .ha-chain, .ha-cards { opacity: 0; }
.ha-stub { fill: none; stroke: #94a3b8; stroke-width: 1.2; }
.ha-link { fill: none; stroke: #1D9E75; stroke-width: 1.4; }

.ha-panel-outline { fill: #fff; stroke: #cbd5e1; stroke-width: 1; }
.ha-sketch rect { fill: #e2e8f0; }
.ha-sketch path { fill: none; stroke: #cbd5e1; stroke-width: 1; }
.ha-sketch { opacity: 0; }
.ha-panel-cm .ha-sketch rect.gap { fill: #e8a25a; }
.ha-panel-cm .ha-sketch rect.warn { fill: #f6d58e; }
.ha-panel-apm .ha-sketch rect { fill: #e1f5ee; stroke: #1D9E75; stroke-width: .8; }
.ha-panel-apm .ha-sketch rect.focus { fill: #085041; stroke: #085041; }
.ha-panel-apm .ha-sketch path { stroke: #94a3b8; }

.ha-shot {
  position: absolute;
  display: block;
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
}
.ha-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

.ha-flow-link { fill: none; stroke: #1D9E75; stroke-width: 1.4; }
.ha-chip rect { fill: #e1f5ee; stroke: #1D9E75; stroke-width: .6; }
.ha-chip text {
  font-size: 6.2px; font-weight: 700; letter-spacing: .3px;
  fill: #085041; text-anchor: middle;
}
.ha-guide { fill: none; stroke: #9fd6c2; stroke-width: 1.3; }

.ha-card rect { fill: #fff; stroke: #94a3b8; stroke-width: 1; }
.ha-card text {
  font-size: 6.6px; font-weight: 700; letter-spacing: .4px;
  fill: #64748b; text-anchor: middle;
}
.ha-card circle { fill: #f59e0b; opacity: 0; }

/* ── Animated loop ───────────────────────────────────────── */
.ha.is-animating * {
  animation-duration: var(--ha-dur);
  animation-delay: var(--ha-offset);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}
.ha.is-paused *,
.ha.is-offscreen *,
.ha.is-tab-hidden * { animation-play-state: paused !important; }

.ha.is-animating .ha-grid { animation-name: ha-grid; }
.ha.is-animating .ha-stubs, .ha.is-animating .ha-chain, .ha.is-animating .ha-cards { opacity: 1; }
.ha.is-animating .ha-stub { stroke-dasharray: 1; animation-name: ha-stub; }
.ha.is-animating .ha-link { stroke-dasharray: 1; }
.ha.is-animating .ha-link-a { animation-name: ha-link-a; }
.ha.is-animating .ha-link-b { animation-name: ha-link-b; }
.ha.is-animating .ha-link-c { animation-name: ha-link-c; }

.ha.is-animating .ha-card { transform-box: fill-box; transform-origin: center; animation-name: ha-card; }
.ha.is-animating .ha-card rect { animation-name: ha-card-rect; }
.ha.is-animating .ha-card text { animation-name: ha-card-text; }
.ha.is-animating .ha-card circle { animation-name: ha-gap; }

/* The panels arrive slightly out of line and settle into a row in stage 4.
   The SVG outline moves in scene units; the image overlay by the same
   amount as a share of its own height (6 / 69). */
.ha-panel-bdn, .ha-shot-bdn { --dy: -6px; --dyp: -8.7%; }
.ha-panel-cm,  .ha-shot-cm  { --dy: 6px;  --dyp: 8.7%; }
.ha-panel-apm, .ha-shot-apm { --dy: -6px; --dyp: -8.7%; }
.ha.is-animating .ha-panel { animation-name: ha-panel-shift; }
.ha.is-animating .ha-shot { animation-name: ha-shot; }
.ha.is-animating .ha-panel-outline { stroke-dasharray: 1; animation-name: ha-outline; }
.ha.is-animating .ha-sketch { animation-name: ha-sketch; }

.ha.is-animating .ha-flow-link { stroke-dasharray: 1; animation-name: ha-flow; }
.ha.is-animating .ha-chip { animation-name: ha-chip; }
.ha.is-animating .ha-guide { stroke-dasharray: 1; animation-name: ha-guide; }

.ha.is-animating .ha-logo { animation-name: ha-logo; }
.ha.is-animating #logo-track { stroke-dasharray: 1; animation-name: ha-track; }
.ha.is-animating #logo-terminal-left,
.ha.is-animating #logo-station-center,
.ha.is-animating #logo-station-right { transform-box: fill-box; transform-origin: center; }
.ha.is-animating #logo-terminal-left { animation-name: ha-terminal; }
.ha.is-animating #logo-station-center { animation-name: ha-station-center; }
.ha.is-animating #logo-station-right { animation-name: ha-station-right; }
.ha.is-animating #logo-word-useful { animation-name: ha-word-useful; }
.ha.is-animating #logo-word-architecture { animation-name: ha-word-architecture; }

@keyframes ha-grid { 0%, 18% { opacity: 0 } 28%, 40% { opacity: .6 } 47%, 100% { opacity: 0 } }
@keyframes ha-stub {
  0%, 15% { opacity: 1; stroke-dashoffset: 0 }
  24%, 87% { opacity: 0; stroke-dashoffset: 1 }
  88% { opacity: 1; stroke-dashoffset: 1 }
  96%, 100% { opacity: 1; stroke-dashoffset: 0 }
}
@keyframes ha-link-a { 0%, 16% { opacity: 1; stroke-dashoffset: 1 } 23%, 40% { opacity: 1; stroke-dashoffset: 0 } 45%, 100% { opacity: 0; stroke-dashoffset: 0 } }
@keyframes ha-link-b { 0%, 20% { opacity: 1; stroke-dashoffset: 1 } 27%, 40% { opacity: 1; stroke-dashoffset: 0 } 45%, 100% { opacity: 0; stroke-dashoffset: 0 } }
@keyframes ha-link-c { 0%, 24% { opacity: 1; stroke-dashoffset: 1 } 33%, 40% { opacity: 1; stroke-dashoffset: 0 } 45%, 100% { opacity: 0; stroke-dashoffset: 0 } }

@keyframes ha-card {
  0%, 14% { opacity: 1; transform: translate(var(--x1), var(--y1)) scale(1) }
  28%, 40% { opacity: 1; transform: translate(var(--x2), var(--y2)) scale(1) }
  50% { opacity: 0; transform: translate(var(--x3), var(--y3)) scale(.55) }
  89% { opacity: 0; transform: translate(var(--x1), var(--y1)) scale(1) }
  98%, 100% { opacity: 1; transform: translate(var(--x1), var(--y1)) scale(1) }
}
@keyframes ha-card-rect {
  0%, 18% { fill: #fff; stroke: #94a3b8 }
  28%, 86% { fill: #f0faf6; stroke: #1D9E75 }
  87%, 100% { fill: #fff; stroke: #94a3b8 }
}
@keyframes ha-card-text { 0%, 18% { fill: #64748b } 28%, 86% { fill: #085041 } 87%, 100% { fill: #64748b } }
@keyframes ha-gap { 0%, 22% { opacity: 0 } 30%, 86% { opacity: 1 } 87%, 100% { opacity: 0 } }

@keyframes ha-panel-shift { 0%, 60% { transform: translate(0, var(--dy)) } 68%, 100% { transform: translate(0, 0) } }
@keyframes ha-outline {
  0%, 38% { opacity: 0; stroke-dashoffset: 1; fill-opacity: 0 }
  39% { opacity: 1; stroke-dashoffset: 1; fill-opacity: 0 }
  47% { opacity: 1; stroke-dashoffset: 0; fill-opacity: 1 }
  90% { opacity: 1; stroke-dashoffset: 0; fill-opacity: 1 }
  96%, 100% { opacity: 0; stroke-dashoffset: 0; fill-opacity: 1 }
}
@keyframes ha-sketch { 0%, 41% { opacity: 0 } 45%, 50% { opacity: 1 } 54%, 100% { opacity: 0 } }
@keyframes ha-shot {
  0%, 47% { opacity: 0; transform: translateY(var(--dyp, 0)) }
  53% { opacity: 1; transform: translateY(var(--dyp, 0)) }
  60% { opacity: 1; transform: translateY(var(--dyp, 0)) }
  68%, 74% { opacity: 1; transform: translateY(0) }
  79%, 90% { opacity: .35; transform: translateY(0) }
  95%, 100% { opacity: 0; transform: translateY(0) }
}
@keyframes ha-flow { 0%, 62% { opacity: 0; stroke-dashoffset: 1 } 63% { opacity: 1; stroke-dashoffset: 1 } 69%, 78% { opacity: 1; stroke-dashoffset: 0 } 84%, 100% { opacity: 0; stroke-dashoffset: 0 } }
@keyframes ha-chip { 0%, 64% { opacity: 0; transform: translateY(3px) } 69%, 77% { opacity: 1; transform: translateY(0) } 82%, 100% { opacity: 0; transform: translateY(0) } }
@keyframes ha-guide { 0%, 72% { opacity: 0; stroke-dashoffset: 1 } 73% { opacity: 1; stroke-dashoffset: 1 } 78%, 90% { opacity: 1; stroke-dashoffset: 0 } 95%, 100% { opacity: 0; stroke-dashoffset: 0 } }

@keyframes ha-logo { 0%, 74% { opacity: 0 } 75%, 90% { opacity: 1 } 96%, 100% { opacity: 0 } }
@keyframes ha-track { 0%, 75% { stroke-dashoffset: 1 } 80%, 100% { stroke-dashoffset: 0 } }
@keyframes ha-terminal { 0%, 79.5% { opacity: 0; transform: scale(.4) } 81%, 100% { opacity: 1; transform: scale(1) } }
@keyframes ha-station-center { 0%, 81% { opacity: 0; transform: scale(.4) } 82.5%, 100% { opacity: 1; transform: scale(1) } }
@keyframes ha-station-right { 0%, 82.5% { opacity: 0; transform: scale(.4) } 84%, 100% { opacity: 1; transform: scale(1) } }
@keyframes ha-word-useful { 0%, 84% { opacity: 0 } 86%, 100% { opacity: 1 } }
@keyframes ha-word-architecture { 0%, 85.5% { opacity: 0 } 87.5%, 100% { opacity: 1 } }

/* Reduced motion: never animate, whatever the script does. */
@media (prefers-reduced-motion: reduce) {
  .ha.is-animating * { animation: none !important; }
  .ha.is-animating .ha-stubs, .ha.is-animating .ha-chain, .ha.is-animating .ha-cards { opacity: 0; }
}

/* Caption and the pause/play control */
.ha-caption {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .75rem;
}
.ha-caption p { font-size: .75rem; color: #94a3b8; line-height: 1.55; }
.ha-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  color: #e2e8f0;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.35);
  border-radius: 8px;
  padding: .35rem .75rem;
  cursor: pointer;
}
.ha-toggle:hover { border-color: #fff; color: #fff; }
.ha-toggle:focus-visible { outline: 3px solid #60a5fa; outline-offset: 2px; }
.ha-toggle[hidden] { display: none; }
.ha-toggle-icon { width: 10px; height: 10px; display: inline-block; }
.ha-toggle[data-state="playing"] .ha-toggle-icon {
  border-left: 3px solid currentColor; border-right: 3px solid currentColor; width: 9px;
}
.ha-toggle[data-state="paused"] .ha-toggle-icon {
  width: 0; height: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
}

/* Small screens: the static composition; output indicators would be too
   small to read, so they are left out. */
@media (max-width: 699px) {
  .ha-chips { display: none; }
  .ha-caption { flex-direction: column; gap: .5rem; }
}