/*!
 * gravity-loading.css — tool loading animation
 */

/* Sits in a tool's results area while the server is working. Fixed height so
   every tool reserves the same space and it always lands in the same place,
   whatever that tool's form looks like. */
.gt-tool-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

/* Geometry and timing come from the source animation: a ring at r=45 with a
   15px stroke — carried in the viewBox so the shape stays exact at any size —
   turning once every 2s while the arc trims. */
.gt-spinner {
  width: 64px;
  height: 64px;
  animation: gt-spin 2s linear infinite;
}

/* Same token the GRAVITY wordmark uses, so the two cannot drift apart. */
.gt-spinner__track {
  stroke: var(--c-brand-teal);
  opacity: .3;
}

.gt-spinner__arc {
  stroke: var(--c-brand-teal);
  stroke-linecap: round;
  stroke-dasharray: 70 213;
  animation: gt-spin-dash 2s cubic-bezier(.333, 0, .667, 1) infinite;
}

/* The source's rotation easing sits on the diagonal, which is linear. */
@keyframes gt-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Offsets are fractions of the r=45 path's 282.7 circumference, so the arc
   grows to about a third of the ring and closes again on every turn. */
@keyframes gt-spin-dash {
  0% {
    stroke-dasharray: 2.8 279.9;
    stroke-dashoffset: 0;
  }

  41.7% {
    stroke-dasharray: 89.6 193.1;
    stroke-dashoffset: -53.2;
  }

  58.3% {
    stroke-dasharray: 89.1 193.6;
    stroke-dashoffset: -140;
  }

  83.3% {
    stroke-dasharray: 31.1 251.6;
    stroke-dashoffset: -251.6;
  }

  100% {
    stroke-dasharray: 2.8 279.9;
    stroke-dashoffset: -279.9;
  }
}

@media (prefers-reduced-motion: reduce) {

  .gt-spinner,
  .gt-spinner__arc {
    animation: none;
  }
}