/* Ambient movement stays behind the established cinematic hero. */
.living-mascot-float {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  --living-bob: -4px;
  animation: living-mascot-breathe 7s ease-in-out infinite;
  animation-play-state: paused;
}
.anime-mascot-health .living-mascot-float { align-items: flex-start; }
.living-motion-ready .anime-mascot-aura {
  animation: living-aura-breathe 9s ease-in-out infinite;
  animation-play-state: paused;
}
.living-sky { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.living-sky-particle {
  position: absolute;
  left: calc(56% + var(--particle-index) * 6.7%);
  top: calc(19% + var(--particle-index) * 9%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #baf3ff;
  box-shadow: 0 0 10px #8defff66;
  opacity: .26;
  animation: living-particle-drift 12s ease-in-out infinite;
  animation-delay: calc(var(--particle-index) * -1.9s);
  animation-play-state: paused;
}
.living-motion-hero-active .living-mascot-float,
.living-motion-hero-active .anime-mascot-aura,
.living-motion-hero-active .living-sky-particle { animation-play-state: running; }
.anime-hero .living-motion-control {
  position: absolute;
  top: 108px;
  right: max(40px, calc((100% - 1280px) / 2));
  z-index: 6;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  color: #c6dce9;
  background: #07111e9c;
  border: 1px solid #607d8d85;
  border-radius: 20px;
  font: 11px/18px var(--mono);
  cursor: pointer;
}
.anime-hero .living-motion-control:hover { border-color: var(--anime-cyan); color: var(--anime-ink); }
.anime-hero .living-motion-control:disabled { cursor: default; color: #bfd0dc; }
.living-motion-symbol { display: inline-block; width: 12px; font-size: 12px; text-align: center; }
.living-motion-ready #architecture .route-glow { animation: none; opacity: 0; }
.living-route-dot { fill: var(--action); stroke: var(--surface); stroke-width: 1.5; pointer-events: none; }
.living-motion-ready #architecture .route.living-route-active { opacity: 1; stroke-width: 2; }
.living-motion-ready #architecture .living-node-active { border-color: var(--action); background: var(--ice); }
.living-network-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0 0;
  margin: 5px 0 0;
  border-top: 1px solid var(--border);
}
.living-network-controls > div { flex: 1; min-width: 0; }
.living-network-context { font: 9px/16px var(--mono); color: var(--action); letter-spacing: .09em; }
.living-network-status { min-height: 38px; margin: 3px 0 0; font: 12px/19px var(--sans); color: var(--muted); }
.living-network-replay {
  /* Keep the interactive control on the left, clear of the fixed music launcher. */
  order: -1;
  flex-shrink: 0;
  min-height: 38px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  border-radius: 7px;
  padding: 8px 12px;
  font: 11px/18px var(--mono);
  cursor: pointer;
}
.living-network-replay:hover { border-color: var(--action); color: var(--action); }
.living-network-replay:focus-visible { outline: 2px solid var(--action); outline-offset: 4px; }
.living-network-complete .node-client { border-color: var(--action); }
.living-motion-paused .anime-mascot,
.living-motion-paused .anime-scene-copy,
.living-motion-reduced .anime-mascot,
.living-motion-reduced .anime-scene-copy { animation: none; }
.living-motion-reduced .living-mascot-float,
.living-motion-reduced .anime-mascot-aura,
.living-motion-reduced .living-sky-particle { animation: none; }
.living-motion-reduced .living-sky { display: none; }
@keyframes living-mascot-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(var(--living-bob)); }
}
@keyframes living-aura-breathe {
  0%, 100% { opacity: .58; }
  50% { opacity: 1; }
}
@keyframes living-particle-drift {
  0%, 100% { transform: translateY(7px); opacity: .12; }
  50% { transform: translateY(-9px); opacity: .4; }
}
@media (max-width: 900px) {
  .anime-hero .living-motion-control { top: 112px; right: 32px; }
}
@media (max-width: 520px) {
  .living-mascot-float { --living-bob: -2px; }
  .living-sky-particle:nth-child(n+4) { display: none; }
  .living-sky-particle { left: calc(61% + var(--particle-index) * 9%); top: calc(16% + var(--particle-index) * 9%); width: 2px; height: 2px; }
  .anime-hero .living-motion-control { top: 86px; right: 20px; min-height: 34px; padding: 6px 9px; font-size: 9px; gap: 6px; }
  .living-network-controls { gap: 12px; }
  .living-network-status { min-height: 34px; font-size: 10px; line-height: 17px; }
  .living-network-context { font-size: 8px; }
  .living-network-replay { padding: 7px 9px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .living-mascot-float,
  .living-motion-ready .anime-mascot-aura,
  .living-sky-particle { animation: none; }
  .living-sky { display: none; }
  .living-motion-ready #architecture .route-glow { animation: none; }
}