/* Shared by the initial document and React Suspense. No artificial delay. */
.corgi-loading { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; background: #e7ece3; }
html[data-app-theme="dark"] .corgi-loading, .corgi-loading[data-theme="dark"] { background: #222823; }
.corgi-loading[data-theme="light"] { background: #e7ece3; }
.corgi-scene { position: relative; isolation: isolate; width: 112px; height: 64px; }
.corgi-scene img { display: block; image-rendering: pixelated; }
/* Eight genuinely different drawings, 16 frames/sec. The filmstrip translates
   inside a fixed window, so no background-position repaint loop is needed. */
.corgi-scene__runner { position: absolute; left: 24px; top: 8px; width: 64px; height: 48px; animation: corgi-orbit 6s linear infinite, corgi-depth 6s steps(1, end) infinite; }
.corgi-scene__facing { width: 64px; height: 48px; animation: corgi-facing 6s steps(1, end) infinite; }
.corgi-scene__frames { width: 64px; height: 48px; overflow: hidden; }
.corgi-scene .corgi-scene__dog { width: 512px; max-width: none; height: 48px; animation: corgi-stride .5s steps(8, end) infinite; }
.corgi-scene__roll { position: absolute; z-index: 1; left: 49px; top: 28px; width: 16px; height: 16px; }
.corgi-scene__coin { width: 16px; height: 16px; transform-origin: 50% 90%; animation: corgi-coin 3s cubic-bezier(.77, 0, .175, 1) infinite; }
@keyframes corgi-stride { to { transform: translateX(-512px); } }
@keyframes corgi-facing { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
/* Switch draw order at the two ends of the oval, never while crossing the coin. */
@keyframes corgi-depth { 0%, 100% { z-index: 0; } 50% { z-index: 2; } }
@keyframes corgi-coin { 0%, 40%, 100% { transform: rotate(0deg); } 52% { transform: rotate(9deg); } 66% { transform: rotate(-5deg); } 82% { transform: rotate(2deg); } }

/* Sampled ellipse: a small continuous path, independent of the run cycle. */
@keyframes corgi-orbit {
  0% { transform: translate(-24.000px, -0.000px); }
  1.5625% { transform: translate(-23.884px, -0.784px); }
  3.125% { transform: translate(-23.539px, -1.561px); }
  4.6875% { transform: translate(-22.967px, -2.322px); }
  6.25% { transform: translate(-22.173px, -3.061px); }
  7.8125% { transform: translate(-21.166px, -3.771px); }
  9.375% { transform: translate(-19.955px, -4.445px); }
  10.9375% { transform: translate(-18.552px, -5.075px); }
  12.5% { transform: translate(-16.971px, -5.657px); }
  14.0625% { transform: translate(-15.225px, -6.184px); }
  15.625% { transform: translate(-13.334px, -6.652px); }
  17.1875% { transform: translate(-11.314px, -7.055px); }
  18.75% { transform: translate(-9.184px, -7.391px); }
  20.3125% { transform: translate(-6.967px, -7.656px); }
  21.875% { transform: translate(-4.682px, -7.846px); }
  23.4375% { transform: translate(-2.352px, -7.961px); }
  25% { transform: translate(-0.000px, -8.000px); }
  26.5625% { transform: translate(2.352px, -7.961px); }
  28.125% { transform: translate(4.682px, -7.846px); }
  29.6875% { transform: translate(6.967px, -7.656px); }
  31.25% { transform: translate(9.184px, -7.391px); }
  32.8125% { transform: translate(11.314px, -7.055px); }
  34.375% { transform: translate(13.334px, -6.652px); }
  35.9375% { transform: translate(15.225px, -6.184px); }
  37.5% { transform: translate(16.971px, -5.657px); }
  39.0625% { transform: translate(18.552px, -5.075px); }
  40.625% { transform: translate(19.955px, -4.445px); }
  42.1875% { transform: translate(21.166px, -3.771px); }
  43.75% { transform: translate(22.173px, -3.061px); }
  45.3125% { transform: translate(22.967px, -2.322px); }
  46.875% { transform: translate(23.539px, -1.561px); }
  48.4375% { transform: translate(23.884px, -0.784px); }
  50% { transform: translate(24.000px, -0.000px); }
  51.5625% { transform: translate(23.884px, 0.784px); }
  53.125% { transform: translate(23.539px, 1.561px); }
  54.6875% { transform: translate(22.967px, 2.322px); }
  56.25% { transform: translate(22.173px, 3.061px); }
  57.8125% { transform: translate(21.166px, 3.771px); }
  59.375% { transform: translate(19.955px, 4.445px); }
  60.9375% { transform: translate(18.552px, 5.075px); }
  62.5% { transform: translate(16.971px, 5.657px); }
  64.0625% { transform: translate(15.225px, 6.184px); }
  65.625% { transform: translate(13.334px, 6.652px); }
  67.1875% { transform: translate(11.314px, 7.055px); }
  68.75% { transform: translate(9.184px, 7.391px); }
  70.3125% { transform: translate(6.967px, 7.656px); }
  71.875% { transform: translate(4.682px, 7.846px); }
  73.4375% { transform: translate(2.352px, 7.961px); }
  75% { transform: translate(0.000px, 8.000px); }
  76.5625% { transform: translate(-2.352px, 7.961px); }
  78.125% { transform: translate(-4.682px, 7.846px); }
  79.6875% { transform: translate(-6.967px, 7.656px); }
  81.25% { transform: translate(-9.184px, 7.391px); }
  82.8125% { transform: translate(-11.314px, 7.055px); }
  84.375% { transform: translate(-13.334px, 6.652px); }
  85.9375% { transform: translate(-15.225px, 6.184px); }
  87.5% { transform: translate(-16.971px, 5.657px); }
  89.0625% { transform: translate(-18.552px, 5.075px); }
  90.625% { transform: translate(-19.955px, 4.445px); }
  92.1875% { transform: translate(-21.166px, 3.771px); }
  93.75% { transform: translate(-22.173px, 3.061px); }
  95.3125% { transform: translate(-22.967px, 2.322px); }
  96.875% { transform: translate(-23.539px, 1.561px); }
  98.4375% { transform: translate(-23.884px, 0.784px); }
  100% { transform: translate(-24.000px, 0.000px); }
}
@media (prefers-reduced-motion: reduce) {
  .corgi-scene__runner, .corgi-scene__facing, .corgi-scene__dog,
  .corgi-scene__coin { animation: none !important; transform: none; }
  .corgi-scene__runner { left: 6px; z-index: 2; }
  .corgi-scene__roll { left: 76px; top: 34px; }
}