/* Vector circuits and circular lights only; the original photo is unchanged. */
.hero-scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.trace-effects { opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.circuit-line { fill: none; stroke: #d5b575; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .65; }
.circuit-terminal { fill: none; stroke: #e4c184; stroke-width: 2; opacity: .85; }
.motion-orb { animation: frontier-orb-fade 6s linear infinite; animation-delay: var(--delay, 0s); }
.orb-aura { fill: url(#frontier-orb-glow); }
.orb-core { fill: #ffedb6; stroke: #fff6d8; stroke-width: .6; }
.terminal-bloom, .terminal-ring { transform-box: fill-box; transform-origin: center; animation: frontier-arrival 6s ease-out infinite; animation-delay: var(--delay, 0s); }
.terminal-bloom { fill: url(#frontier-orb-glow); }
.terminal-ring { fill: none; stroke: #fff1c0; stroke-width: 2; }
@keyframes frontier-orb-fade {
  0% { opacity: 0; }
  7%, 80% { opacity: 1; }
  84% { opacity: .8; }
  93%, 100% { opacity: 0; }
}
@keyframes frontier-arrival {
  0%, 73% { opacity: 0; transform: scale(.65); }
  84% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.65); }
}
.hero-media[data-variant="animated"] .trace-effects { opacity: 1; }
.hero-media[data-variant="static"] .hero-scene { visibility: hidden; }
.motion-orb, .terminal-bloom, .terminal-ring { animation-play-state: paused; }
.hero-media[data-variant="animated"][data-paused="false"] .motion-orb,
.hero-media[data-variant="animated"][data-paused="false"] .terminal-bloom,
.hero-media[data-variant="animated"][data-paused="false"] .terminal-ring { animation-play-state: running; }
.hero-motion-toggle { position: absolute; right: 1.25rem; bottom: 1rem; z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .55rem .8rem; border: 1px solid #c6ae7c; border-radius: 2px; background: rgb(8 37 30 / .88); color: #fcfaf5; font: .75rem/1.3 Arial, Helvetica, sans-serif; cursor: pointer; }
.hero-motion-toggle:hover { background: #08251e; }
.hero-motion-toggle:focus-visible { outline: 3px solid #efc67e; outline-offset: 3px; }
.hero-motion-toggle[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .trace-effects { opacity: 0 !important; transition: none; }
  .motion-orb, .terminal-bloom, .terminal-ring { animation-play-state: paused !important; }
  .hero-motion-toggle { display: none !important; }
}
