:root {
  --hero-teal: var(--teal, #39e7db);
  --hero-amber: var(--amber, #e4b8ae);
  --hero-bg: var(--bg, #001D21);
}

.hero-center {
  --teal: var(--hero-teal);
  --amber: var(--hero-amber);
  --bg: var(--hero-bg);
  perspective: 920px;
  transform-style: preserve-3d;
  user-select: none;
}

.hero-center .iface-label {
  font-family: var(--font-mono);
  font-size: var(--text-ui-xs);
  letter-spacing: var(--tracking-ui-wide);
  color: var(--tx2);
  margin-bottom: 0;
  text-align: left;
  flex: 1;
  min-width: 0;
  font-weight: var(--font-mono-weight);
}

.hero-center-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  margin-bottom: 14px;
  align-self: stretch;
}

.hero-score-panel {
  flex-shrink: 0;
  text-align: right;
  padding: 6px 10px;
  border: 0.5px solid color-mix(in srgb, var(--teal) 35%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--teal) 6%, transparent);
  line-height: 1.1;
}

.hero-score-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-ui-xs);
  letter-spacing: var(--tracking-ui-wide);
  color: var(--tx2);
  margin-bottom: 3px;
  font-weight: var(--font-mono-weight);
}

.hero-score-value {
  display: block;
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 300;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-ui-tight);
}

#hero-score-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.hero-radar-wrap {
  position: relative;
  width: 256px;
  height: 256px;
  transform-style: preserve-3d;
  isolation: isolate;
  align-self: center;
}

.radar-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-style: preserve-3d;
  filter: drop-shadow(0 8px 26px rgba(0, 0, 0, 0.28));
  will-change: transform;
}

.tilt-layer {
  transform-origin: 160px 160px;
  transform-box: fill-box;
  will-change: transform;
}

.radar-pixi-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.radar-pixi-overlay canvas {
  width: 100%;
  height: 100%;
  opacity: 0.92;
  mix-blend-mode: screen;
}

.pulse-ring {
  transform-origin: 160px 160px;
  animation: radar-pulse 3s ease-out infinite;
}

.orbit-orb {
  transform-origin: 160px 160px;
  transform-box: fill-box;
  animation: radar-orbit 11s linear infinite;
}

.orbit-orb:nth-of-type(2) {
  animation-duration: 8.5s;
  animation-direction: reverse;
}

.orbit-orb:nth-of-type(3) {
  animation-duration: 13.5s;
}

.flow-track {
  animation: flow-dash 2.8s linear infinite;
}

.blink-soft {
  animation-name: radar-orbit, soft-blink;
  animation-duration: 11s, 2.3s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}

.radar-axis {
  cursor: pointer;
}

.radar-axis line,
.radar-axis circle,
.radar-axis .axis-label {
  transition: opacity 0.28s ease, stroke-width 0.28s ease;
}

.hero-center.has-axis-focus .radar-axis.is-dimmed line,
.hero-center.has-axis-focus .radar-axis.is-dimmed circle,
.hero-center.has-axis-focus .radar-axis.is-dimmed .axis-label {
  opacity: 0.18;
}

.hero-center.has-axis-focus .radar-axis.is-active line {
  opacity: 1;
  stroke-width: 1.65;
}

.hero-center.has-axis-focus .radar-axis.is-active circle {
  opacity: 1;
}

.hero-center.has-axis-focus .radar-axis.is-active .axis-label {
  opacity: 1;
}

.hero-center.has-axis-focus .layer-orbits {
  opacity: 0.55;
  transition: opacity 0.28s ease;
}

.radar-axis:hover line,
.radar-axis:hover circle,
.radar-axis:hover .axis-label {
  opacity: 1;
}

.stat-chips {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  flex-wrap: wrap;
  justify-content: center;
  align-self: center;
}

.chip {
  padding: 3px 9px;
  border: 0.5px solid var(--b2);
  border-radius: 20px;
  font-family: var(--font-ui);
  font-size: var(--text-ui-xs);
  color: var(--text-ui-muted);
  letter-spacing: var(--tracking-ui);
}

.chip.on {
  border-color: color-mix(in srgb, var(--teal) 55%, transparent);
  color: var(--teal);
}

.chip.chip-warn {
  border-color: color-mix(in srgb, var(--amber) 50%, transparent);
  color: var(--amber);
}

@keyframes radar-pulse {
  0% {
    transform: scale(1);
    opacity: 0.44;
  }
  70% {
    transform: scale(1.14);
    opacity: 0;
  }
  100% {
    transform: scale(1.14);
    opacity: 0;
  }
}

@keyframes radar-orbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes soft-blink {
  0%,
  100% {
    opacity: 0.38;
  }
  50% {
    opacity: 0.9;
  }
}

@keyframes flow-dash {
  0% {
    stroke-dashoffset: 28;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-ring,
  .orbit-orb,
  .flow-track,
  .blink-soft {
    animation: none !important;
  }
}

/* ── Hero timeline: trajectory draw 2025 → 2030+ ── */
.hero-tl--animate:not(.is-visible) .tl-icon:not(.dim) {
  opacity: 0;
  transform: scale(0);
}

.hero-tl--animate:not(.is-visible) .tl-yr:not(.dim),
.hero-tl--animate:not(.is-visible) .tl-lbl {
  opacity: 0;
  transform: translateY(7px);
}

.hero-tl--animate:not(.is-visible) .tl-item:nth-child(5) .tl-icon,
.hero-tl--animate:not(.is-visible) .tl-item:nth-child(5) .tl-yr,
.hero-tl--animate:not(.is-visible) .tl-item:nth-child(5) .tl-lbl,
.hero-tl--animate:not(.is-visible) .tl-item:nth-child(7) .tl-icon,
.hero-tl--animate:not(.is-visible) .tl-item:nth-child(7) .tl-yr,
.hero-tl--animate:not(.is-visible) .tl-item:nth-child(7) .tl-lbl {
  opacity: 0;
  transform: translateY(5px);
}

.hero-tl--animate .tl-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.hero-tl--animate .tl-line:nth-child(4)::after,
.hero-tl--animate .tl-line:nth-child(6)::after {
  background: color-mix(in srgb, var(--teal) 32%, transparent);
}

.hero-tl--animate .tl-line:nth-child(2)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--teal) 55%, transparent);
  opacity: 0;
  pointer-events: none;
}

.hero-tl.is-visible .tl-item:nth-child(1) .tl-icon {
  animation:
    tl-dot-arrive 0.6s cubic-bezier(0.34, 1.45, 0.64, 1) 0s forwards,
    tl-icon-breathe 3.2s ease-in-out 2.1s infinite;
}

.hero-tl.is-visible .tl-item:nth-child(1) .tl-icon::after {
  animation: tl-dot-ring 0.75s ease 0.18s forwards;
}

.hero-tl.is-visible .tl-item:nth-child(3) .tl-icon {
  animation:
    tl-dot-arrive 0.6s cubic-bezier(0.34, 1.45, 0.64, 1) 1.28s forwards,
    tl-icon-breathe 3.2s ease-in-out 2.5s infinite;
}

.hero-tl.is-visible .tl-item:nth-child(3) .tl-icon::after {
  animation: tl-dot-ring 0.75s ease 1.46s forwards;
}

.hero-tl.is-visible .tl-line:nth-child(2)::after {
  animation: tl-line-draw 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.32s forwards;
}

.hero-tl.is-visible .tl-line:nth-child(2)::before {
  animation: tl-pulse-travel 1.15s cubic-bezier(0.42, 0, 0.58, 1) 0.32s forwards;
}

.hero-tl.is-visible .tl-line:nth-child(4)::after {
  animation: tl-line-draw 0.85s cubic-bezier(0.22, 1, 0.36, 1) 1.62s forwards;
}

.hero-tl.is-visible .tl-line:nth-child(6)::after {
  animation: tl-line-draw 0.75s cubic-bezier(0.22, 1, 0.36, 1) 2.28s forwards;
}

.hero-tl.is-visible .tl-item:nth-child(1) .tl-yr {
  animation: tl-text-in 0.55s ease 0.12s forwards;
}

.hero-tl.is-visible .tl-item:nth-child(1) .tl-lbl {
  animation: tl-text-in 0.55s ease 0.22s forwards;
}

.hero-tl.is-visible .tl-item:nth-child(3) .tl-yr {
  animation: tl-text-in 0.55s ease 1.42s forwards;
}

.hero-tl.is-visible .tl-item:nth-child(3) .tl-lbl {
  animation: tl-text-in 0.55s ease 1.54s forwards;
}

.hero-tl.is-visible .tl-item:nth-child(5) .tl-icon,
.hero-tl.is-visible .tl-item:nth-child(5) .tl-yr,
.hero-tl.is-visible .tl-item:nth-child(5) .tl-lbl {
  animation: tl-future-in 0.7s ease 2.05s forwards;
}

.hero-tl.is-visible .tl-item:nth-child(7) .tl-icon,
.hero-tl.is-visible .tl-item:nth-child(7) .tl-yr,
.hero-tl.is-visible .tl-item:nth-child(7) .tl-lbl {
  animation: tl-future-in 0.7s ease 2.72s forwards;
}

.tl-icon::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--teal) 45%, transparent);
  opacity: 0;
  transform: scale(0.6);
}

@keyframes tl-dot-arrive {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  65% {
    transform: scale(1.35);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes tl-dot-ring {
  0% {
    opacity: 0.7;
    transform: scale(0.55);
  }
  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}

@keyframes tl-icon-breathe {
  0%,
  100% {
    filter: drop-shadow(0 0 0 transparent);
  }
  50% {
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--teal) 35%, transparent));
  }
}

@keyframes tl-line-draw {
  to {
    transform: scaleX(1);
  }
}

@keyframes tl-pulse-travel {
  0% {
    left: 0;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    left: calc(100% - 5px);
    opacity: 0;
  }
}

@keyframes tl-text-in {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tl-future-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-tl--animate:not(.is-visible) .tl-icon,
  .hero-tl--animate:not(.is-visible) .tl-yr,
  .hero-tl--animate:not(.is-visible) .tl-lbl {
    opacity: 1;
    transform: none;
  }

  .hero-tl--animate .tl-line::after {
    transform: scaleX(1);
  }

  .hero-tl.is-visible .tl-icon,
  .hero-tl.is-visible .tl-yr,
  .hero-tl.is-visible .tl-lbl,
  .hero-tl.is-visible .tl-line::before,
  .hero-tl.is-visible .tl-line::after {
    animation: none !important;
  }
}

/* Light theme — radar SVG hardcodes #39e7db; remap teal/amber to near-black */
html.theme-light .hero-center,
html[data-theme="light"] .hero-center {
  --hero-teal: #1a2426;
  --hero-amber: #3d3530;
}

html.theme-light .hero-center .radar-svg,
html[data-theme="light"] .hero-center .radar-svg {
  filter: drop-shadow(0 6px 18px rgba(10, 48, 51, 0.1));
}

html.theme-light .hero-center .radar-svg :is([stroke="#39e7db"], [stroke="#39E7DB"]),
html[data-theme="light"] .hero-center .radar-svg :is([stroke="#39e7db"], [stroke="#39E7DB"]) {
  stroke: #1a2426;
}

html.theme-light .hero-center .radar-svg :is([fill="#39e7db"], [fill="#39E7DB"]),
html[data-theme="light"] .hero-center .radar-svg :is([fill="#39e7db"], [fill="#39E7DB"]) {
  fill: #1a2426;
}

html.theme-light .hero-center .radar-svg :is([stroke="#E4B8AE"], [stroke="#e4b8ae"]),
html[data-theme="light"] .hero-center .radar-svg :is([stroke="#E4B8AE"], [stroke="#e4b8ae"]) {
  stroke: #3d3530;
}

html.theme-light .hero-center .radar-svg :is([fill="#E4B8AE"], [fill="#e4b8ae"]),
html[data-theme="light"] .hero-center .radar-svg :is([fill="#E4B8AE"], [fill="#e4b8ae"]) {
  fill: #3d3530;
}

html.theme-light .hero-center .radar-svg text.axis-label,
html[data-theme="light"] .hero-center .radar-svg text.axis-label {
  fill: #1a2426 !important;
  opacity: 0.88 !important;
}

html.theme-light .hero-center .radar-svg .radar-axis[data-axis-key="stress"] text.axis-label,
html[data-theme="light"] .hero-center .radar-svg .radar-axis[data-axis-key="stress"] text.axis-label {
  fill: #3d3530 !important;
}

html.theme-light .hero-center #hero-radar-bg stop:first-child,
html[data-theme="light"] .hero-center #hero-radar-bg stop:first-child {
  stop-color: #1a2426;
  stop-opacity: 0.1;
}

html.theme-light .hero-center #hero-core-glow stop:first-child,
html[data-theme="light"] .hero-center #hero-core-glow stop:first-child {
  stop-color: #1a2426;
  stop-opacity: 0.28;
}

html.theme-light .hero-center .layer-core circle[fill="#02101a"],
html[data-theme="light"] .hero-center .layer-core circle[fill="#02101a"] {
  fill: var(--bg);
}

html.theme-light .hero-center .radar-pixi-overlay canvas,
html[data-theme="light"] .hero-center .radar-pixi-overlay canvas {
  mix-blend-mode: multiply;
  opacity: 0.45;
}