/* team: the cards ride the drawing's dotted lines, from one screen into Par and out to the others.
   Written by reference/site-landing/art/prompts/relay.py from the drawing's measured points; edit there, not here. */
.relay { position: relative; display: block; container-type: inline-size; }
.relay > img { display: block; width: 100%; height: auto; }
.relay .relay-card { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; pointer-events: none;
  animation: var(--relay-name) 16.5s linear 2 both; animation-play-state: paused; }
.relay .relay-card img { position: absolute; width: max(28px, 4.6cqw); height: auto; max-width: none; translate: -50% -50%; }
.relay[data-relay="playing"] .relay-card { animation-play-state: running; }
.relay[data-relay="done"] .relay-card { translate: var(--relay-rest); animation: relay-rest .5s ease-out both; }
.relay[data-relay="done"] .relay-copy { display: none; }
@keyframes relay-rest { from { scale: .5; opacity: 0; } to { scale: 1; opacity: 1; } }
.relay .relay-toggle { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.relay .relay-toggle:focus-visible { outline: 2px solid #496c99; outline-offset: 3px; border-radius: 4px; }
.relay-1 { --relay-name: relay-team-1; --relay-rest: 69.91cqw 16.78cqw; }
@keyframes relay-team-1 {
  0.00% { translate: 23.11cqw 15.30cqw; scale: 0.5; opacity: 0; animation-timing-function: ease-out; }
  2.42% { translate: 23.11cqw 15.30cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  4.33% { translate: 28.78cqw 16.67cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  6.58% { translate: 40.17cqw 24.41cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  10.92% { translate: 49.61cqw 33.72cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  15.77% { translate: 49.61cqw 33.72cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  20.29% { translate: 59.77cqw 24.35cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  22.96% { translate: 72.85cqw 14.58cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  24.24% { translate: 75.65cqw 11.85cqw; scale: 1; opacity: 1; animation-timing-function: ease-in; }
  26.67% { translate: 75.65cqw 11.85cqw; scale: 0.5; opacity: 0; animation-timing-function: linear; }
  100% { translate: 75.65cqw 11.85cqw; scale: .5; opacity: 0; }
}
.relay-2 { --relay-name: relay-team-2; }
@keyframes relay-team-2 {
  0.00% { translate: 23.11cqw 15.30cqw; scale: 0.5; opacity: 0; animation-timing-function: ease-out; }
  2.42% { translate: 23.11cqw 15.30cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  4.33% { translate: 28.78cqw 16.67cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  6.58% { translate: 40.17cqw 24.41cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  10.92% { translate: 49.61cqw 33.72cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  15.77% { translate: 49.61cqw 33.72cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  19.10% { translate: 39.84cqw 36.59cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  20.30% { translate: 33.98cqw 41.02cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  22.93% { translate: 26.37cqw 43.62cqw; scale: 1; opacity: 1; animation-timing-function: ease-in; }
  25.36% { translate: 26.37cqw 43.62cqw; scale: 0.5; opacity: 0; animation-timing-function: linear; }
  100% { translate: 26.37cqw 43.62cqw; scale: .5; opacity: 0; }
}
.relay-3 { --relay-name: relay-team-3; }
@keyframes relay-team-3 {
  0.00% { translate: 23.11cqw 15.30cqw; scale: 0.5; opacity: 0; animation-timing-function: ease-out; }
  2.42% { translate: 23.11cqw 15.30cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  4.33% { translate: 28.78cqw 16.67cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  6.58% { translate: 40.17cqw 24.41cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  10.92% { translate: 49.61cqw 33.72cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  15.77% { translate: 49.61cqw 33.72cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  19.34% { translate: 60.22cqw 36.33cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  22.04% { translate: 73.11cqw 46.61cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  24.00% { translate: 78.78cqw 48.50cqw; scale: 1; opacity: 1; animation-timing-function: ease-in; }
  26.42% { translate: 78.78cqw 48.50cqw; scale: 0.5; opacity: 0; animation-timing-function: linear; }
  100% { translate: 78.78cqw 48.50cqw; scale: .5; opacity: 0; }
}
.relay-4 { --relay-name: relay-team-4; --relay-rest: 36.54cqw 39.08cqw; }
@keyframes relay-team-4 {
  0% { translate: 75.65cqw 11.85cqw; scale: .5; opacity: 0; }
  24.24% { translate: 75.65cqw 11.85cqw; scale: 0.5; opacity: 0; animation-timing-function: ease-out; }
  26.67% { translate: 75.65cqw 11.85cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  27.95% { translate: 72.85cqw 14.58cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  30.62% { translate: 59.77cqw 24.35cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  35.14% { translate: 49.61cqw 33.72cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  39.99% { translate: 49.61cqw 33.72cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  43.32% { translate: 39.84cqw 36.59cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  44.52% { translate: 33.98cqw 41.02cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  47.15% { translate: 26.37cqw 43.62cqw; scale: 1; opacity: 1; animation-timing-function: ease-in; }
  49.58% { translate: 26.37cqw 43.62cqw; scale: 0.5; opacity: 0; animation-timing-function: linear; }
  100% { translate: 26.37cqw 43.62cqw; scale: .5; opacity: 0; }
}
.relay-5 { --relay-name: relay-team-5; --relay-rest: 70.53cqw 44.56cqw; }
@keyframes relay-team-5 {
  0% { translate: 26.37cqw 43.62cqw; scale: .5; opacity: 0; }
  48.48% { translate: 26.37cqw 43.62cqw; scale: 0.5; opacity: 0; animation-timing-function: ease-out; }
  50.91% { translate: 26.37cqw 43.62cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  53.54% { translate: 33.98cqw 41.02cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  54.74% { translate: 39.84cqw 36.59cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  58.07% { translate: 49.61cqw 33.72cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  62.92% { translate: 49.61cqw 33.72cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  66.50% { translate: 60.22cqw 36.33cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  69.19% { translate: 73.11cqw 46.61cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  71.15% { translate: 78.78cqw 48.50cqw; scale: 1; opacity: 1; animation-timing-function: ease-in; }
  73.57% { translate: 78.78cqw 48.50cqw; scale: 0.5; opacity: 0; animation-timing-function: linear; }
  100% { translate: 78.78cqw 48.50cqw; scale: .5; opacity: 0; }
}
.relay-6 { --relay-name: relay-team-6; --relay-rest: 31.40cqw 18.45cqw; }
@keyframes relay-team-6 {
  0% { translate: 78.78cqw 48.50cqw; scale: .5; opacity: 0; }
  72.73% { translate: 78.78cqw 48.50cqw; scale: 0.5; opacity: 0; animation-timing-function: ease-out; }
  75.15% { translate: 78.78cqw 48.50cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  77.10% { translate: 73.11cqw 46.61cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  79.80% { translate: 60.22cqw 36.33cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  83.38% { translate: 49.61cqw 33.72cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  88.23% { translate: 49.61cqw 33.72cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  92.56% { translate: 40.17cqw 24.41cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  94.82% { translate: 28.78cqw 16.67cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  96.72% { translate: 23.11cqw 15.30cqw; scale: 1; opacity: 1; animation-timing-function: ease-in; }
  99.15% { translate: 23.11cqw 15.30cqw; scale: 0.5; opacity: 0; animation-timing-function: linear; }
  100% { translate: 23.11cqw 15.30cqw; scale: .5; opacity: 0; }
}
.relay-7 { --relay-name: relay-team-7; }
@keyframes relay-team-7 {
  0% { translate: 78.78cqw 48.50cqw; scale: .5; opacity: 0; }
  72.73% { translate: 78.78cqw 48.50cqw; scale: 0.5; opacity: 0; animation-timing-function: ease-out; }
  75.15% { translate: 78.78cqw 48.50cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  77.10% { translate: 73.11cqw 46.61cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  79.80% { translate: 60.22cqw 36.33cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  83.38% { translate: 49.61cqw 33.72cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  88.23% { translate: 49.61cqw 33.72cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  92.75% { translate: 59.77cqw 24.35cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  95.42% { translate: 72.85cqw 14.58cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  96.70% { translate: 75.65cqw 11.85cqw; scale: 1; opacity: 1; animation-timing-function: ease-in; }
  99.12% { translate: 75.65cqw 11.85cqw; scale: 0.5; opacity: 0; animation-timing-function: linear; }
  100% { translate: 75.65cqw 11.85cqw; scale: .5; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .relay .relay-card { animation: none; opacity: 1; translate: var(--relay-rest); }
  .relay .relay-copy, .relay .relay-toggle { display: none; }
}