/* All stages share one clock, including the progress indicators and pause control. */
.auth-scene {
  --auth-process-duration: 16s;
  position: relative;
  width: 100%;
}

.auth-scene-art { display: block; width: 100%; height: auto; overflow: visible; }
.auth-art-heading { fill: var(--color-ink-strong); font-size: 13px; font-weight: 500; }
.auth-art-value { fill: var(--color-ink); font-size: 12px; }
.auth-art-total { fill: var(--color-ink-strong); font-size: 21px; font-weight: 500; }
.auth-art-button { fill: white; font-size: 12px; font-weight: 500; }

.auth-scene-control {
  position: absolute;
  right: 0;
  top: 8px;
  z-index: 1;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  color: var(--color-ink-muted);
  background: var(--color-cream);
  cursor: pointer;
}

.auth-scene-control:hover { color: var(--color-brand); }
.auth-scene-toggle:focus-visible + .auth-scene-control {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
}
.auth-scene-play { display: none; }
.auth-scene-toggle:checked + label .auth-scene-pause { display: none; }
.auth-scene-toggle:checked + label .auth-scene-play { display: block; }
.auth-scene-toggle:checked ~ .auth-scene-art *,
.auth-scene-toggle:checked ~ .auth-process-steps * { animation-play-state: paused; }

.auth-phase-upload { --phase-offset: 0s; }
.auth-phase-extract { --phase-offset: -12s; }
.auth-phase-review { --phase-offset: -8s; }
.auth-phase-export { --phase-offset: -4s; }
.auth-process-phase {
  opacity: 0;
  animation: auth-process-phase var(--auth-process-duration) linear var(--phase-offset) infinite;
}

.auth-process-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 0 0;
  list-style: none;
}
.auth-process-step {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 10px;
  border-top: 2px solid var(--color-line);
  color: var(--color-ink-muted);
  font-size: 12px;
  animation: auth-process-step var(--auth-process-duration) linear var(--phase-offset) infinite;
}
.auth-process-number { font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }

.auth-upload-paper { animation: auth-paper-arrive var(--auth-process-duration) ease-out infinite; }
.auth-upload-middle { animation-delay: 0.35s; }
.auth-upload-front { animation-delay: 0.7s; }
.auth-upload-arrow { animation: auth-upload-arrow var(--auth-process-duration) ease-in-out infinite; }
.auth-process-scan { animation: auth-process-scan var(--auth-process-duration) linear infinite; }
.auth-data-link { animation: auth-data-reveal var(--auth-process-duration) ease-out infinite; }
.auth-data-row { animation: auth-data-reveal var(--auth-process-duration) ease-out infinite; }
.auth-data-number { animation-delay: 0.55s; }
.auth-data-amount { animation-delay: 1.1s; }
.auth-process-cursor { animation: auth-review-cursor var(--auth-process-duration) ease-in-out infinite; }
.auth-review-field { animation: auth-review-field var(--auth-process-duration) linear infinite; }
.auth-review-warning { animation: auth-review-warning var(--auth-process-duration) linear infinite; }
.auth-review-check { animation: auth-review-check var(--auth-process-duration) linear infinite; }
.auth-review-button { animation: auth-review-button var(--auth-process-duration) linear infinite; }
.auth-export-files { animation: auth-package-arrive var(--auth-process-duration) ease-out infinite; }
.auth-export-seal { animation: auth-package-ready var(--auth-process-duration) ease-out infinite; }
.auth-download-arrow { animation: auth-download-arrow var(--auth-process-duration) ease-in-out infinite; }

@keyframes auth-process-phase {
  0%, 22% { opacity: 1; }
  25%, 97% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes auth-process-step {
  0%, 22% { color: var(--color-brand); border-color: var(--color-brand); }
  25%, 97% { color: var(--color-ink-muted); border-color: var(--color-line); }
  100% { color: var(--color-brand); border-color: var(--color-brand); }
}
@keyframes auth-paper-arrive {
  0% { opacity: 0; transform: translate(-32px, -52px); }
  8%, 24% { opacity: 1; transform: translate(0, 0); }
  27%, 100% { opacity: 0; transform: translate(0, 12px); }
}
@keyframes auth-upload-arrow {
  0%, 8%, 16%, 24%, 100% { transform: translateY(0); }
  4%, 12%, 20% { transform: translateY(-5px); }
}
@keyframes auth-process-scan {
  0%, 26% { opacity: 0; transform: translateY(36px); }
  29% { opacity: 1; transform: translateY(36px); }
  44% { opacity: 1; transform: translateY(121px); }
  47%, 100% { opacity: 0; transform: translateY(121px); }
}
@keyframes auth-data-reveal {
  0%, 30% { opacity: 0; transform: translateX(-8px); }
  34%, 49% { opacity: 1; transform: translateX(0); }
  52%, 100% { opacity: 0; transform: translateX(0); }
}
@keyframes auth-review-cursor {
  0%, 52% { opacity: 0; transform: translate(24px, 22px); }
  55% { opacity: 1; transform: translate(24px, 22px); }
  62%, 65% { opacity: 1; transform: translate(-28px, -3px); }
  71%, 100% { opacity: 0; transform: translate(-14px, 10px); }
}
@keyframes auth-review-field {
  0%, 64%, 100% { fill: #fefaec; stroke: #f8d552; }
  65%, 95% { fill: #eff8ee; stroke: #55b150; }
}
@keyframes auth-review-warning {
  0%, 64%, 100% { opacity: 1; }
  65%, 95% { opacity: 0; }
}
@keyframes auth-review-check {
  0%, 64%, 100% { opacity: 0; }
  65%, 95% { opacity: 1; }
}
@keyframes auth-review-button {
  0%, 63%, 66%, 100% { fill: #d92268; }
  64%, 65% { fill: #a71950; }
}
@keyframes auth-package-arrive {
  0%, 75% { opacity: 0; transform: translateY(18px); }
  80%, 97% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}
@keyframes auth-package-ready {
  0%, 81% { opacity: 0; }
  85%, 97% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes auth-download-arrow {
  0%, 83%, 90%, 97%, 100% { transform: translateY(0); }
  86%, 93% { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce), (max-width: 47.999rem) {
  .auth-scene-art *, .auth-process-steps * { animation: none; }
  .auth-process-phase { opacity: 0; }
  .auth-phase-export, .auth-export-files, .auth-export-seal { opacity: 1; }
  .auth-scene-toggle, .auth-scene-control { display: none; }
}