/* The woodland characters by the arches: the game's approved avatar atlases, 4 x 5 frames of 2:3.
   .pal is one frame's window; its img is the whole sheet, stepped through with transforms. */
.pal {
  --w: 72px;
  --d: 2700ms;
  --o: 0ms;
  position: absolute;
  bottom: calc(var(--w) * -0.168 - 3px); /* The frame's floor is 88.8% down: feet stand on the arch's bottom edge. */
  z-index: 1;
  width: var(--w);
  height: calc(var(--w) * 1.5);
  overflow: hidden;
  transform-origin: 50% 88.8%;
  filter: drop-shadow(0 3px 4px rgba(4, 12, 8, 0.5));
  animation: pal-breath var(--d) ease-in-out var(--o) infinite;
}
.pal img { position: absolute; left: 0; top: 0; width: 400%; height: 500%; max-width: none; animation: pal-idle var(--d) steps(1, end) var(--o) infinite; }
.pal.is-happy { animation: pal-hop 1315ms linear 1 both; }
.pal.is-happy img { animation: pal-happy 1315ms steps(1, end) 1 both; }
.pal-r { right: calc(var(--w) * -0.18 - var(--out, 8px)); }
.pal-l { left: calc(var(--w) * -0.16 - var(--out, 8px)); }
.arch-wrap { position: relative; display: block; }

/* Independent idle clocks: staggered phases, and speeds of 0.85 to 1.15 x whose periods never line up. */
.t1 { --d: 2860ms; --o: -1328ms; }
.t2 { --d: 2543ms; --o: -2360ms; }
.t3 { --d: 3055ms; --o: -691ms; }
.t4 { --d: 2739ms; --o: -1722ms; }
.t5 { --d: 2423ms; --o: -54ms; }
.t6 { --d: 2934ms; --o: -1085ms; }
.t7 { --d: 2618ms; --o: -2116ms; }
.t8 { --d: 3130ms; --o: -447ms; }
.t9 { --d: 2814ms; --o: -1479ms; }
.t10 { --d: 2497ms; --o: -2510ms; }
.t11 { --d: 3009ms; --o: -841ms; }
.t12 { --d: 2693ms; --o: -1873ms; }
.t13 { --d: 2377ms; --o: -204ms; }
.t14 { --d: 2888ms; --o: -1235ms; }
.t15 { --d: 2572ms; --o: -2267ms; }
.t16 { --d: 3084ms; --o: -598ms; }
.t17 { --d: 2767ms; --o: -1629ms; }
@keyframes pal-breath { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.006); } }
/* frames:start */
/* Generated by tools/site-art/build_characters.py: the frame clocks of AnimatedAvatar.cs. */
@keyframes pal-idle { 0% { transform: translate(0%, 0%); } 62.963% { transform: translate(-25%, 0%); } 71.111% { transform: translate(-50%, 0%); } 74.815% { transform: translate(-75%, 0%); } 77.778% { transform: translate(0%, -20%); } 81.481% { transform: translate(-25%, -20%); } 84.444% { transform: translate(-50%, -20%); } 88.148% { transform: translate(0%, 0%); } 100% { transform: translate(0%, 0%); } }
@keyframes pal-happy { 0% { transform: translate(-25%, -40%); } 8.365% { transform: translate(-50%, -40%); } 16.730% { transform: translate(-75%, -40%); } 23.194% { transform: translate(0%, -60%); } 29.658% { transform: translate(-25%, -60%); } 36.122% { transform: translate(-50%, -60%); } 45.247% { transform: translate(-75%, -60%); } 51.711% { transform: translate(0%, -80%); } 58.175% { transform: translate(-25%, -80%); } 66.540% { transform: translate(-50%, -80%); } 78.707% { transform: translate(-75%, -80%); } 100% { transform: translate(-75%, -80%); } }
@keyframes pal-hop { 0.0% { transform: translateY(0.00%); } 3.0% { transform: translateY(0.00%); } 6.1% { transform: translateY(0.00%); } 9.1% { transform: translateY(0.00%); } 12.1% { transform: translateY(0.00%); } 15.2% { transform: translateY(0.00%); } 18.2% { transform: translateY(-0.19%); } 21.2% { transform: translateY(-1.74%); } 24.2% { transform: translateY(-1.08%); } 27.3% { transform: translateY(-4.57%); } 30.3% { transform: translateY(-0.69%); } 33.3% { transform: translateY(-3.37%); } 36.4% { transform: translateY(-0.05%); } 39.4% { transform: translateY(0.18%); } 42.4% { transform: translateY(1.96%); } 45.5% { transform: translateY(0.23%); } 48.5% { transform: translateY(3.76%); } 51.5% { transform: translateY(7.12%); } 54.5% { transform: translateY(2.31%); } 57.6% { transform: translateY(3.43%); } 60.6% { transform: translateY(0.00%); } 63.6% { transform: translateY(0.00%); } 66.7% { transform: translateY(0.00%); } 69.7% { transform: translateY(0.00%); } 72.7% { transform: translateY(0.00%); } 75.8% { transform: translateY(0.00%); } 78.8% { transform: translateY(0.00%); } 81.8% { transform: translateY(0.00%); } 84.8% { transform: translateY(0.00%); } 87.9% { transform: translateY(0.00%); } 90.9% { transform: translateY(0.00%); } 93.9% { transform: translateY(0.00%); } 97.0% { transform: translateY(0.00%); } 100.0% { transform: translateY(0.00%); } }
/* frames:end */

/* Sizes, in proportion to each arch. */
.gate .pal { --w: 52px; --out: 7px; }
.gate .pal-l { left: auto; right: calc(var(--w) * -0.18 - var(--out)); } /* The compact list: always on the side of the words' gap. */
.family .pal { --w: 68px; --out: 5px; }
.logic { width: 124px; margin: -26px auto 0; }
.logic .arch { width: 100%; height: 150px; }
.logic .pal { --w: 80px; --out: 16px; }

/* The no-account card: three friends in a row, standing over its top edge. */
.friends { --f: 104px; display: flex; justify-content: center; margin: calc(var(--f) * -0.73) 0 calc(var(--f) * -0.1); }
.friends .pal { position: relative; right: auto; bottom: auto; flex: none; --w: var(--f); margin: 0 calc(var(--f) * -0.09); }
.friends .pal:nth-child(2) { --w: calc(var(--f) * 1.15); z-index: 2; margin-top: calc(var(--f) * -0.08); }

@media (min-width: 760px) {
  .gate .pal { --w: 92px; --out: 8px; }
  .gate .pal-l { right: auto; left: calc(var(--w) * -0.16 - var(--out)); }
  .friends { --f: 82px; }
}
@media (min-width: 1100px) { .friends { --f: 112px; } }
@media (prefers-reduced-motion: reduce) {
  .pal, .pal img, .pal.is-happy, .pal.is-happy img { animation: none; }
}