/* Reading loader (GOOD-43), shared by the free result and the paid reading. Colors follow the host's `color`. */

.loader {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2rem;
  padding: 1.5rem;
  text-align: center;
}

.loader-figure {
  display: block;
  width: min(46vw, 210px);
  height: auto;
  overflow: visible;
}

.loader-ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  opacity: 0.22;
}

.loader-ring-draw {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: loader-draw 2000ms cubic-bezier(0.5, 0, 0.2, 1) both;
}

/* A real wait of unknown length: the ring keeps closing and reopening. It appears only after a second, so opening
   a reading at normal network speed shows nothing in between. */
.loader.is-waiting {
  animation: loader-appear 240ms ease 1000ms both;
}

.loader.is-waiting .loader-ring-draw {
  animation: loader-draw 2000ms cubic-bezier(0.5, 0, 0.2, 1) infinite alternate;
}

/* --step spreads any constellation, 3 to 29 lines, over the same ~1.15 s. */
.loader-edge {
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.7;
  animation: loader-draw 550ms ease-out both;
  animation-delay: calc(var(--i) * var(--step) + 250ms);
}

.loader-star {
  fill: currentColor;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: loader-pop 280ms cubic-bezier(0.2, 1.6, 0.4, 1) both;
  animation-delay: calc(var(--i) * var(--step) + 200ms);
}

.loader-star.is-bright {
  filter: drop-shadow(0 0 4px currentColor);
}

.loader-caption p {
  margin: 0;
}

/* Status text for screen readers only; defined here because the paid page does not load styles.css. */
.loader-caption .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.loader-name {
  font-family: "Cinzel", "Times New Roman", serif;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.66;
}

.loader-message {
  margin-top: 0.6rem !important;
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  font-stretch: 86%;
  font-weight: 620;
  letter-spacing: -0.03em;
  animation: loader-fade 520ms ease both;
}

@keyframes loader-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes loader-pop {
  from { opacity: 0; transform: scale(0.2); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes loader-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes loader-fade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* Reduced motion: the finished figure appears at once and the loader is shorter. */
@media (prefers-reduced-motion: reduce) {
  .loader-ring-draw,
  .loader-edge,
  .loader-star,
  .loader-message {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
}