/* Rotate a round track in compressed space to trace an ellipse with transforms. */
.orbit {
  --tilt: -23deg;
  --flatten: .38;
  --restore: 2.632;
  --traveler-size: clamp(17px, 2.2vw, 30px);
  position: absolute;
  z-index: 0;
  left: 49%;
  top: 52%;
  width: 89%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(var(--tilt)) scaleY(var(--flatten));
  pointer-events: none;
}

.orbit::before {
  content: "";
  position: absolute;
  inset: 0;
  border: solid #59689999;
  border-width: 2px 1px;
  border-radius: 50%;
}

.orbit-traveler {
  position: absolute;
  inset: 0;
}

.orbit-traveler i {
  position: absolute;
  left: 100%;
  top: 50%;
  width: 0;
  height: 0;
}

.orbit-traveler i::before,
.orbit-traveler i::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--traveler-size);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scaleY(var(--restore));
  clip-path: polygon(50% 0, 61% 35%, 100% 50%, 62% 61%, 50% 100%, 39% 63%, 0 50%, 38% 38%);
}

.orbit-traveler i::before { background: #324722; }

.orbit-traveler i::after {
  width: calc(var(--traveler-size) * .85);
  background: #c8e65d;
}

/* Each span is precisely one repeat. The window never affects the stub height. */
.stub-window {
  flex: 1 1 0;
  width: 1.15em;
  min-height: 0;
  margin-block: 13px;
  position: relative;
  overflow: hidden;
  font: 750 11px/1.15 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  mask-image: linear-gradient(transparent, black 7px, black calc(100% - 7px), transparent);
}

.stub-tape {
  display: flex;
  align-items: center;
  flex-direction: column;
  position: absolute;
  inset: 0 0 auto;
}

.stub-tape > span {
  flex: none;
  white-space: pre;
  writing-mode: vertical-rl;
}

.barcode {
  position: relative;
  overflow: hidden;
}

.barcode::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to bottom, transparent 40%, #fff4b1b3 48%, #f77738 50%, #fff4b185 53%, transparent 61%);
  transform: translateY(-55%);
}

@media (max-width: 860px) {
  .orbit { width: 92%; --flatten: .45; --restore: 2.222; }
}

@media (max-width: 620px) {
  .orbit {
    left: 50%;
    --tilt: -27deg;
    --flatten: .50;
    --restore: 2;
    --traveler-size: 13px;
  }
  .stub-window { margin-block: 9px; font-size: 8px; letter-spacing: .14em; }
}

@media screen {
  @keyframes pass-orbit {
    from { transform: rotate(0turn); }
    to { transform: rotate(1turn); }
  }
  @keyframes pass-typeset {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
  }
  @keyframes pass-ink-beat {
    0%, 61%, 100% { transform: rotate(11deg) scale(1); }
    68% { transform: rotate(-9deg) scale(.92); }
    77% { transform: rotate(32deg) scale(1.16); }
    89% { transform: rotate(7deg) scale(1); }
  }
  @keyframes pass-code-scan {
    0% { opacity: 0; transform: translateY(-55%); }
    18%, 76% { opacity: 1; }
    100% { opacity: 0; transform: translateY(55%); }
  }
  html[data-motion="playing"] .orbit-traveler,
  html[data-motion="playing"] .orbit-traveler i {
    animation: pass-orbit 8s linear infinite;
  }
  html[data-motion="playing"] .orbit-traveler i {
    animation-direction: reverse;
  }
  html[data-motion="playing"] .stub-tape {
    animation: pass-typeset 13s linear infinite;
  }
  html[data-motion="playing"] .spark-a {
    animation: pass-ink-beat 5.2s -3.2s var(--ease-out) infinite;
  }
  html[data-motion="playing"] .ticket:has(.input-shell:focus-within) .barcode::after {
    animation: pass-code-scan .75s var(--ease-io);
  }
  html[data-motion="playing"] .ticket:has([data-tone="ready"]) .barcode::after {
    animation: pass-code-scan .75s var(--ease-io) 2;
  }
}