/* Muted purple + turquoise HUD circle behind the hero cube. No shadows. */
.hero-tech-circle {
  --tc-t: 174 38% 55%;
  --tc-p: 266 30% 64%;
  position: absolute; left: 50%; top: 50%;
  width: 130%; height: 130%;
  max-width: none !important; max-height: none !important;
  transform: translate(-50%, -50%);
  z-index: 0; pointer-events: none; overflow: hidden;
  opacity: .65;
}
@media (min-width: 861px) { .hero-tech-circle { overflow: visible; } }
.hero-tech-circle * { fill: none; }
.hero-cube canvas { z-index: 1; }
.hero-cube .hero-cube__status { z-index: 2; }
body.frame-page.home-page #home.hero > .hero-copy { position: relative; z-index: 3 !important; }

.hero-tech-circle .tc-t { stroke: hsl(var(--tc-t)); }
.hero-tech-circle .tc-p { stroke: hsl(var(--tc-p)); }
.tc-dots { stroke: hsl(var(--tc-t)); stroke-width: 4; stroke-linecap: round; stroke-dasharray: .01 .99; opacity: .55; }
.tc-orbit-dot {
  stroke: #ff6600; stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: .01 179.99; opacity: 1;
  animation: tc-dot-orbit calc(12s / var(--hero-animation-speed, 1)) steps(180, end) infinite;
}
@keyframes tc-dot-orbit { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -180; } }
.tc-line { stroke-width: 1.6; opacity: .5; }
.tc-ticks { stroke-width: 16; stroke-dasharray: .12 .88; opacity: .55; }
.tc-major { stroke-width: 34; stroke-dasharray: .035 .965; opacity: .75; }
/* A single yellow tick steps backward while the orange outer dot steps forward. */
.tc-tick-highlight {
  stroke: #ffe600; stroke-width: 16; stroke-linecap: butt;
  stroke-dasharray: .12 119.88; opacity: 1;
  animation: tc-tick-orbit calc(12s / var(--hero-animation-speed, 1)) steps(120, end) infinite;
}
@keyframes tc-tick-orbit { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 120; } }
.tc-arc { stroke-width: 9; opacity: .6; }
.tc-arc2 { stroke-width: 5; opacity: .6; }
.tc-arc3 { stroke-width: 4; opacity: .55; }
.tc-fine { stroke-width: 14; opacity: .4; }
.tc-blocks { stroke-width: 36; opacity: .22; }
.tc-blocks-hi { stroke-width: 36; opacity: .4; }

/* Rings are drawn around SVG coordinate (0, 0) in the centered negative viewBox. */
.tc-rotor { transform-box: view-box; transform-origin: 0px 0px; animation: tc-spin calc(120s / var(--hero-animation-speed, 1)) linear infinite; }
.tc-r1 { animation-duration: calc(260s / var(--hero-animation-speed, 1)); }
.tc-r2 { animation-duration: calc(180s / var(--hero-animation-speed, 1)); animation-direction: reverse; }
.tc-r3 { animation-duration: calc(95s / var(--hero-animation-speed, 1)); }
.tc-r4 { animation-duration: calc(140s / var(--hero-animation-speed, 1)); animation-direction: reverse; }
.tc-r5 { animation-duration: calc(70s / var(--hero-animation-speed, 1)); }
.tc-r6 { animation-duration: calc(110s / var(--hero-animation-speed, 1)); animation-direction: reverse; }
@keyframes tc-spin { to { transform: rotate(360deg); } }

.tc-blink-a { animation: tc-blink calc(11s / var(--hero-animation-speed, 1)) ease-in-out infinite; }
.tc-blink-b { animation: tc-blink calc(15s / var(--hero-animation-speed, 1)) ease-in-out calc(-4s / var(--hero-animation-speed, 1)) infinite; }
.tc-blink-c { animation: tc-blink calc(19s / var(--hero-animation-speed, 1)) ease-in-out calc(-9s / var(--hero-animation-speed, 1)) infinite; }
@keyframes tc-blink { 0%, 70%, 100% { opacity: .4; } 82% { opacity: .08; } 90% { opacity: .5; } }

/* Sparse highlights: one existing block or tick, never a whole illuminated ring. */
.tc-pulse {
  opacity: 0;
  animation: tc-sparse-pulse
    calc(var(--tc-pulse-period) / var(--hero-animation-speed, 1))
    ease-in-out
    calc(var(--tc-pulse-delay) / var(--hero-animation-speed, 1))
    infinite;
}
.tc-pulse--cool { stroke: #98fff0; }
.tc-pulse--warm { stroke: #ff8a25; }
.tc-pulse--block { stroke-width: 36; stroke-dasharray: .86 47.14; }
.tc-pulse--tick { stroke-width: 14; stroke-dasharray: .5 99.5; }
.tc-pulse--inner { stroke-width: 3; stroke-linecap: round; }
@keyframes tc-sparse-pulse {
  0%, 55%, 76%, 100% { opacity: 0; }
  60% { opacity: .18; }
  64% { opacity: 1; }
  69% { opacity: .65; }
  74% { opacity: 0; }
}

.hero-tech-circle.is-paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .hero-tech-circle * { animation: none !important; }
}