.hero #hero-signals.living-field { inset: 0; }
.living-place { position: absolute; width: 36px; height: 36px; transform: translate(-50%, -50%); }
.living-place[data-layer="0"] { width: 27px; height: 27px; }
.living-place[data-layer="2"] { width: 44px; height: 44px; }
.living-depth, .living-life { display: block; width: 100%; height: 100%; }
.living-life { animation: living-lifetime 14s var(--ease-in-out) infinite; }
.living-life svg { width: 100%; height: 100%; stroke: #9caaa7; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.living-life[data-accent] .signal-accent { stroke: var(--accent); }
@keyframes living-lifetime {
  0%, 7%, 96%, 100% { opacity: 0; transform: translate(-3px, 7px); }
  22% { opacity: .4; transform: translate(0, 2px); }
  68% { opacity: .4; transform: translate(4px, -5px); }
}
.living-place[data-layer="0"] .living-depth { opacity: .65; }
.living-life[data-kind="bars"] svg path:first-child {
  transform-origin: 50% 75%; animation: living-bars 800ms var(--ease-in-out) 1800ms both;
}
.living-life[data-kind="results"] svg .signal-accent {
  animation: living-row 800ms var(--ease-in-out) 1800ms both;
}
@keyframes living-bars { from { transform: scaleY(.7); } to { transform: scaleY(1); } }
@keyframes living-row { from { transform: translateX(-3px); } to { transform: translateX(0); } }
.living-field[data-paused] .living-life, .living-field[data-paused] svg path { animation-play-state: paused !important; }
@media (max-width: 850px) {
  .living-place, .living-place[data-layer] { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .living-life, .living-life svg path { animation: none !important; transform: none; }
  .living-life { opacity: .26; }
}