/* many-ais: 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) 13.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-many-ais-1; --relay-rest: 25.12cqw 19.96cqw; }
@keyframes relay-many-ais-1 {
  0.00% { translate: 84.64cqw 8.33cqw; scale: 0.5; opacity: 0; animation-timing-function: ease-out; }
  2.96% { translate: 84.64cqw 8.33cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  6.30% { translate: 75.13cqw 11.13cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  8.87% { translate: 61.20cqw 17.32cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  13.45% { translate: 48.83cqw 22.92cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  19.38% { translate: 48.83cqw 22.92cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  23.46% { translate: 36.98cqw 20.44cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  25.91% { translate: 22.46cqw 19.86cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  28.98% { translate: 13.35cqw 19.86cqw; scale: 1; opacity: 1; animation-timing-function: ease-in; }
  31.94% { translate: 13.35cqw 19.86cqw; scale: 0.5; opacity: 0; animation-timing-function: linear; }
  100% { translate: 13.35cqw 19.86cqw; scale: .5; opacity: 0; }
}
.relay-2 { --relay-name: relay-many-ais-2; }
@keyframes relay-many-ais-2 {
  0.00% { translate: 84.64cqw 8.33cqw; scale: 0.5; opacity: 0; animation-timing-function: ease-out; }
  2.96% { translate: 84.64cqw 8.33cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  6.30% { translate: 75.13cqw 11.13cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  8.87% { translate: 61.20cqw 17.32cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  13.45% { translate: 48.83cqw 22.92cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  19.38% { translate: 48.83cqw 22.92cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  24.12% { translate: 62.70cqw 25.20cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  27.12% { translate: 78.52cqw 33.33cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  29.63% { translate: 85.29cqw 36.46cqw; scale: 1; opacity: 1; animation-timing-function: ease-in; }
  32.59% { translate: 85.29cqw 36.46cqw; scale: 0.5; opacity: 0; animation-timing-function: linear; }
  100% { translate: 85.29cqw 36.46cqw; scale: .5; opacity: 0; }
}
.relay-3 { --relay-name: relay-many-ais-3; --relay-rest: 50.96cqw 36.00cqw; }
@keyframes relay-many-ais-3 {
  0% { translate: 13.35cqw 19.86cqw; scale: .5; opacity: 0; }
  33.33% { translate: 13.35cqw 19.86cqw; scale: 0.5; opacity: 0; animation-timing-function: ease-out; }
  36.30% { translate: 13.35cqw 19.86cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  39.37% { translate: 22.46cqw 19.86cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  41.82% { translate: 36.98cqw 20.44cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  45.90% { translate: 48.83cqw 22.92cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  51.83% { translate: 48.83cqw 22.92cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  53.60% { translate: 50.39cqw 27.93cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  55.48% { translate: 51.17cqw 39.06cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  57.50% { translate: 52.47cqw 44.92cqw; scale: 1; opacity: 1; animation-timing-function: ease-in; }
  60.46% { translate: 52.47cqw 44.92cqw; scale: 0.5; opacity: 0; animation-timing-function: linear; }
  100% { translate: 52.47cqw 44.92cqw; scale: .5; opacity: 0; }
}
.relay-4 { --relay-name: relay-many-ais-4; --relay-rest: 72.03cqw 12.51cqw; }
@keyframes relay-many-ais-4 {
  0% { translate: 52.47cqw 44.92cqw; scale: .5; opacity: 0; }
  66.67% { translate: 52.47cqw 44.92cqw; scale: 0.5; opacity: 0; animation-timing-function: ease-out; }
  69.63% { translate: 52.47cqw 44.92cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  71.65% { translate: 51.17cqw 39.06cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  73.53% { translate: 50.39cqw 27.93cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  75.31% { translate: 48.83cqw 22.92cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  81.23% { translate: 48.83cqw 22.92cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, 0, .67, .33); }
  85.81% { translate: 61.20cqw 17.32cqw; scale: 1; opacity: 1; animation-timing-function: linear; }
  88.38% { translate: 75.13cqw 11.13cqw; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.33, .67, .67, 1); }
  91.72% { translate: 84.64cqw 8.33cqw; scale: 1; opacity: 1; animation-timing-function: ease-in; }
  94.68% { translate: 84.64cqw 8.33cqw; scale: 0.5; opacity: 0; animation-timing-function: linear; }
  100% { translate: 84.64cqw 8.33cqw; 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; }
}