/* Finish the formation before the route transition reveals its new content. */
#study .mito-loading {
  min-height: min(54vh, 420px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}
.mito-loading-visual {
  display: block;
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  overflow: visible;
  color: var(--app-accent, #3d6e8f);
  fill: currentColor;
  animation: mito-loading-breathe 2.8s ease-in-out 0.78s infinite;
}
#study .mito-loading-label {
  margin: 0;
  max-width: 28ch;
  font-size: 0.9375rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--app-secondary, #646669);
}
.mito-loading-body {
  transform-origin: 60px 59px;
  animation: mito-loading-form 0.78s cubic-bezier(0.22, 0.7, 0.24, 1) both;
}
.mito-loading-particles {
  transform-origin: 60px 59px;
  animation: mito-loading-orbit 0.78s cubic-bezier(0.22, 0.7, 0.24, 1) both;
}
.mito-loading-dot {
  opacity: var(--dot-opacity);
  animation: mito-loading-gather 0.78s cubic-bezier(0.22, 0.7, 0.24, 1) both;
}
.mito-loading-eyes {
  /* Mito's cream eyes stay part of the mascot in both appearances. */
  fill: #f5f4f0;
  transform-origin: 60px 57.5px;
  animation: mito-loading-open-eyes 0.78s cubic-bezier(0.22, 0.7, 0.24, 1) both;
}
@keyframes mito-loading-orbit {
  0% { transform: rotate(-14deg) scale(0.92); }
  42% { transform: rotate(5deg) scale(1.035); }
  100% { transform: rotate(0) scale(1); }
}
@keyframes mito-loading-gather {
  0%, 24% { opacity: var(--dot-opacity); transform: translate(0, 0); }
  44% { opacity: var(--dot-opacity); }
  100% { opacity: 0; transform: translate(var(--dot-x), var(--dot-y)); }
}
@keyframes mito-loading-form {
  0%, 18% { opacity: 0; transform: scale(0.6, 0.96); }
  56% { opacity: 0.8; transform: scale(0.92, 0.98); }
  82% { opacity: 1; transform: scale(1.015, 1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes mito-loading-open-eyes {
  0%, 46% { opacity: 0; transform: translateY(2px) scaleY(0.35); }
  84% { opacity: 1; transform: translateY(0) scaleY(1); }
  100% { opacity: 1; transform: scaleY(1); }
}
@keyframes mito-loading-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.025); }
}
@media (prefers-reduced-motion: reduce) {
  .mito-loading-visual,
  .mito-loading-body,
  .mito-loading-particles,
  .mito-loading-dot,
  .mito-loading-eyes { animation: none; transform: none; }
  .mito-loading-particles { display: none; }
  .mito-loading-body,
  .mito-loading-eyes { opacity: 1; }
}