@import url("https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Luckiest+Guy&family=Fredericka+the+Great&family=Caveat:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* Surfaces */
  --parchment: #F5F4ED;
  --ivory: #FAF9F5;
  --sand: #E8E6DC;
  --border-cream: #F0EEE6;
  --border-warm: #E8E6DC;
  --ring-warm: #D1CFC5;
  --ring-deep: #C2C0B6;

  /* Text */
  --near-black: #141413;
  --charcoal: #4D4C48;
  --dark-warm: #3D3D3A;
  --olive: #5E5D59;
  --stone: #87867F;
  --silver: #B0AEA5;

  /* Brand */
  --terracotta: #C96442;
  --coral: #D97757;

  /* Aliases the rest of the file uses */
  --bg: var(--parchment);
  --fg: var(--near-black);
  --fg-soft: var(--olive);
  --fg-muted: var(--stone);
  --card-bg: var(--ivory);
  --rule-color: var(--border-warm);
  --rule-strong: var(--olive);
  --hoopy: var(--terracotta);
  --hoopy-soft: #EFD8CE;

  --shadow-card: 0 0 0 1px var(--border-cream), rgba(0,0,0,0.05) 0px 4px 24px;
  --shadow-lift: 0 0 0 1px var(--ring-warm), rgba(0,0,0,0.08) 0px 12px 32px;
}

[data-theme="dark"] {
  --parchment: #141413;
  --ivory: #1F1F1D;
  --sand: #30302E;
  --border-cream: #30302E;
  --border-warm: #30302E;
  --ring-warm: #3D3D3A;
  --ring-deep: #4D4C48;

  --bg: #141413;
  --fg: #FAF9F5;
  --fg-soft: var(--silver);
  --fg-muted: #87867F;
  --card-bg: #1F1F1D;
  --rule-color: #30302E;
  --rule-strong: #87867F;
  --hoopy-soft: #4A2D22;

  --shadow-card: 0 0 0 1px #30302E, rgba(0,0,0,0.4) 0px 4px 24px;
  --shadow-lift: 0 0 0 1px #4D4C48, rgba(0,0,0,0.6) 0px 16px 36px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg) !important;
  color: var(--fg);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color 200ms ease, color 200ms ease;
}

body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(20,20,19,0.022) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: var(--paper, 1);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.app { position: relative; z-index: 1; min-height: 100vh; }

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--rule-color);
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px;
}
.topbar .brand {
  display: flex; align-items: center; gap: 12px;
  font-family: "Caveat", "Bradley Hand", cursive;
  font-size: 26px;
  font-weight: 700;
  color: var(--fg);
  cursor: pointer;
  letter-spacing: -0.01em;
}
.topbar .brand .mark {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--stone);
  border: 1px solid var(--rule-color);
  padding: 3px 7px;
  border-radius: 6px;
}
.topbar .nav {
  display: flex; align-items: center; gap: 22px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: var(--olive);
}
.topbar .nav a:hover { color: var(--terracotta); }
.topbar .nav .num { color: var(--fg); font-weight: 500; }
.theme-toggle {
  background: transparent;
  border: 1px solid var(--rule-color);
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--fg);
  transition: background 150ms, color 150ms, box-shadow 150ms;
}
.theme-toggle:hover { box-shadow: 0 0 0 1px var(--ring-warm); background: var(--sand); }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* Hero */
.hero {
  position: relative;
  padding: 96px 0 56px;
}
.hero .eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--stone);
  margin-bottom: 24px;
  display: flex; align-items: center; gap: 10px;
}
.hero .eyebrow .dot {
  width: 6px; height: 6px; background: var(--terracotta); border-radius: 50%;
}
.hero h1 {
  font-family: "Fredericka the Great", "Luckiest Guy", serif;
  font-weight: 400;
  font-size: clamp(72px, 10vw, 128px);
  line-height: 1.0;
  margin: 0;
  letter-spacing: -0.005em;
  color: var(--fg);
  max-width: 14ch;
  text-shadow: 0 1px 0 var(--ivory), 0 2px 0 var(--ring-warm), 0 6px 12px rgba(0,0,0,0.08);
}
.hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.hero-row .sprite-corner {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  transform: scale(1.5);
  transform-origin: right bottom;
  margin-right: 24px;
}
.hero-row .arrow-anno {
  font-family: "Caveat", "Bradley Hand", cursive;
  font-size: 26px;
  font-weight: 600;
  color: var(--olive);
  white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 28px;
}
.hero h1 .ellip { color: var(--terracotta); text-shadow: 0 1px 0 var(--ivory), 0 2px 0 var(--ring-warm), 0 6px 12px rgba(0,0,0,0.08); }
.hero .hand-tag {
  display: block;
  font-family: "Caveat", "Bradley Hand", cursive;
  font-weight: 600;
  font-size: 28px;
  color: var(--olive);
  margin-top: 14px;
  letter-spacing: 0;
  text-shadow: none;
}
.hero .lede {
  display: flex;
  justify-content: flex-end;
  gap: 48px;
  margin-top: 32px;
  align-items: end;
}
.hero .blurb {
  max-width: 560px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 18px;
  color: var(--olive);
  line-height: 1.6;
}
.hero .blurb b { color: var(--fg); font-weight: 500; }
.hero .sprite-corner {
  position: relative;
  display: flex; align-items: flex-end; gap: 10px;
}
.hero .arrow-anno {
  font-family: "Caveat", "Bradley Hand", cursive;
  font-style: normal;
  font-size: 22px;
  font-weight: 600;
  color: var(--olive);
  margin-bottom: 24px;
  white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
}
.hero .arrow-anno .scribble {
  display: inline-block; width: 60px; height: 22px;
  color: var(--stone);
}

/* Strip */
.strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--rule-color);
  border-radius: 16px;
  background: var(--ivory);
  margin: 0;
  overflow: hidden;
}
.strip .cell {
  padding: 22px 24px;
  border-right: 1px solid var(--rule-color);
  display: flex; flex-direction: column; gap: 6px;
}
.strip .cell:last-child { border-right: none; }
.strip .cell .k {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--stone);
}
.strip .cell .v {
  font-family: "Fredericka the Great", "Luckiest Guy", serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.05;
  color: var(--fg);
  letter-spacing: 0;
  text-shadow: 2px 2px 0 rgba(201,100,66,0.18);
}

/* Gallery */
.gallery-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 80px 0 28px;
}
.gallery-head h2 {
  font-family: "Fredericka the Great", "Luckiest Guy", serif;
  font-size: 64px;
  font-weight: 400;
  margin: 0;
  letter-spacing: 0;
  color: var(--fg);
  text-shadow: none;
}
.gallery-head h2 .ellip { color: var(--terracotta); }
.gallery-head .meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--stone);
}

/* Gallery filters */
.filters {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 8px 0 28px;
  padding: 16px 18px;
  background: var(--card-bg);
  border: 1px solid var(--border-cream);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-row.chips { gap: 6px; }
.chip {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--ring-warm);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.chip:hover { border-color: var(--terracotta); color: var(--terracotta); }
.chip.is-active {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--ivory);
}
.chip .chip-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  opacity: 0.7;
}
.chip.is-active .chip-count { opacity: 0.9; }
.filter-search {
  flex: 1 1 220px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--ring-warm);
  border-radius: 8px;
  padding: 8px 12px;
}
.filter-search:focus {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(201,100,66,0.15);
}
.filter-sort {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--ring-warm);
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
}
.filter-reset {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  background: transparent;
  color: var(--fg-soft);
  border: 1px solid var(--ring-warm);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
}
.filter-reset:hover { color: var(--fg); border-color: var(--rule-strong); }
.filter-reset.inline {
  padding: 2px 8px;
  font-size: 13px;
  border: none;
  text-decoration: underline;
  color: var(--terracotta);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding-bottom: 96px;
}
@media (max-width: 960px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .gallery { grid-template-columns: 1fr; } }

.card {
  background: var(--card-bg);
  border: 1px solid var(--border-cream);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  display: flex; flex-direction: column;
  transform-origin: center;
  transition:
    transform 220ms cubic-bezier(.22,.7,.28,1),
    box-shadow 220ms cubic-bezier(.22,.7,.28,1);
}
.card:hover {
  transform: rotate(var(--tilt, 1.6deg)) translateY(-4px);
  box-shadow: var(--shadow-lift);
}
.card:nth-child(2n):hover { transform: rotate(calc(var(--tilt, 1.6deg) * -1)) translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }

.card .thumb {
  aspect-ratio: 4/3;
  border-bottom: 1px solid var(--rule-color);
  position: relative; overflow: hidden;
  background: var(--parchment);
}
.card .body {
  padding: 18px 20px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.card .topic {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: var(--stone);
  display: flex; justify-content: space-between;
  letter-spacing: 0.02em;
}
.card .topic .pcount::before { content: "· "; color: var(--stone); }
.card h3 {
  font-family: "Caveat", "Bradley Hand", cursive;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
  margin: 0;
  color: var(--fg);
  text-wrap: pretty;
  letter-spacing: -0.01em;
  padding-bottom: 4px;
}
.card .hook {
  font-size: 14px;
  color: var(--olive);
  line-height: 1.55;
  text-wrap: pretty;
  margin: 0;
}
.card .view {
  margin-top: 6px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: var(--fg);
  display: inline-flex; align-items: center; gap: 6px;
  border-top: 1px solid var(--border-cream);
  padding-top: 12px;
  font-weight: 500;
}
.card:hover .view { color: var(--terracotta); }
.card .view .arr { transition: transform 180ms; }
.card:hover .view .arr { transform: translateX(3px); }

/* Empty state */
.empty-card {
  border: 1px solid var(--rule-color);
  border-radius: 16px;
  padding: 24px 26px;
  margin-bottom: 28px;
  display: flex; align-items: center; gap: 18px;
  background: var(--ivory);
  box-shadow: var(--shadow-card);
}

/* Footer */
.foot {
  border-top: 1px solid var(--rule-color);
  padding: 36px 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: var(--stone);
  margin-top: 32px;
}
.foot .made { display: flex; align-items: center; gap: 16px; }
.foot .credits a:hover { color: var(--terracotta); }

/* COMIC PAGE */
.comic-page { padding: 56px 0 96px; }
.crumbs {
  display: flex; align-items: center; gap: 12px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: var(--stone);
  margin-bottom: 32px;
}
.crumbs a:hover { color: var(--terracotta); }
.crumbs .sep { opacity: 0.5; }

.comic-meta {
  display: grid; grid-template-columns: minmax(0,1fr) auto auto;
  align-items: end; gap: 32px;
  border-bottom: 1px solid var(--rule-color);
  padding-bottom: 28px;
  margin-bottom: 32px;
}
.comic-meta h1 {
  font-family: "Fredericka the Great", "Luckiest Guy", serif;
  font-size: clamp(52px, 7.5vw, 92px);
  margin: 0 0 14px;
  line-height: 1.0;
  font-weight: 400;
  text-wrap: balance;
  letter-spacing: 0;
  color: var(--fg);
  text-shadow: none;
}
.comic-meta h1 .ellip { color: var(--terracotta); }
.comic-meta .topicline {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: var(--stone);
  display: flex; gap: 18px; flex-wrap: wrap;
}
.comic-meta .actions { display: flex; gap: 10px; }
.comic-mascot {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding-bottom: 4px;
}
.comic-mascot-anno {
  font-family: "Caveat", "Bradley Hand", cursive;
  font-weight: 600; font-size: 18px; color: var(--olive);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.comic-mascot-anno svg { transform: scaleX(-1); }
@media (max-width: 720px) {
  .comic-meta { grid-template-columns: 1fr; }
  .comic-mascot { align-items: flex-start; }
  .comic-mascot-anno svg { transform: none; }
}

.btn {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--rule-color);
  background: var(--sand);
  color: var(--fg);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 150ms, color 150ms, box-shadow 150ms;
}
.btn:hover { box-shadow: 0 0 0 1px var(--ring-warm); }
.btn.ghost { background: transparent; }
.btn.primary {
  background: var(--terracotta);
  color: var(--ivory);
  border-color: var(--terracotta);
}
.btn.primary:hover { background: var(--coral); border-color: var(--coral); box-shadow: 0 0 0 1px var(--coral); }

.poster-frame {
  background: var(--ivory);
  border: 1px solid var(--rule-color);
  padding: 24px;
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  cursor: zoom-in;
  max-width: 1200px;
  margin: 0 auto;
}
.poster-frame .poster {
  border-radius: 12px;
  overflow: hidden;
}

.comic-controls {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 32px;
  border-top: 1px solid var(--rule-color);
  padding-top: 24px;
  gap: 16px; flex-wrap: wrap;
}
.comic-controls .pn { display: flex; gap: 10px; }
.kbd {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  border: 1px solid var(--rule-color);
  border-radius: 4px;
  padding: 1px 5px;
  margin: 0 2px;
  color: var(--stone);
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(20,20,19,0.88);
  z-index: 100;
  display: grid; place-items: center;
  padding: 40px;
  animation: fadein 200ms ease;
}
.lightbox .lb-inner { max-width: 96vw; max-height: 92vh; overflow: auto; }
.lightbox .close {
  position: absolute; top: 18px; right: 18px;
  background: var(--parchment); color: var(--fg);
  border: 1px solid var(--rule-color);
  padding: 8px 14px; border-radius: 12px;
  font-family: "Inter", sans-serif;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.route { animation: pagefade 220ms ease; }
@keyframes pagefade { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .route { animation: none; } }

.marker-u {
  text-decoration: underline;
  text-decoration-color: var(--terracotta);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.tag {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: var(--stone);
  border: 1px solid var(--rule-color);
  border-radius: 6px;
  padding: 2px 8px;
}

/* Hoopy sprite system v2 — single 1600×400 sheets (4 frames, 400×400 each, no gutter).
   For a display size S, background-size = (S*4) S, and the keyframe slides by S per step.
   Sizes: xs 32, sm 48, md 64, lg 96, xl 128. */

.hoopy-wave, .hoopy-nod, .hoopy-think, .hoopy-jump {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 0 0;
  vertical-align: middle;
  image-rendering: auto;
}

/* ——— WAVE ——— */
.hoopy-wave      { width: 64px;  height: 64px;  background-image: url("assets/v2/hoopy-wave.png?v=1");
                   background-size: 256px 64px;
                   animation: hoopy-wave-md 1s steps(4) infinite; }
.hoopy-wave.xs   { width: 32px;  height: 32px;  background-size: 128px 32px;
                   animation-name: hoopy-wave-xs; }
.hoopy-wave.sm   { width: 48px;  height: 48px;  background-size: 192px 48px;
                   animation-name: hoopy-wave-sm; }
.hoopy-wave.lg   { width: 96px;  height: 96px;  background-size: 384px 96px;
                   animation-name: hoopy-wave-lg; }
.hoopy-wave.xl   { width: 128px; height: 128px; background-size: 512px 128px;
                   animation-name: hoopy-wave-xl; }
@keyframes hoopy-wave-md { from { background-position: 0 0; } to { background-position: -256px 0; } }
@keyframes hoopy-wave-xs { from { background-position: 0 0; } to { background-position: -128px 0; } }
@keyframes hoopy-wave-sm { from { background-position: 0 0; } to { background-position: -192px 0; } }
@keyframes hoopy-wave-lg { from { background-position: 0 0; } to { background-position: -384px 0; } }
@keyframes hoopy-wave-xl { from { background-position: 0 0; } to { background-position: -512px 0; } }

/* ——— NOD (yes — uses thumbsup sheet for "approval") ——— */
.hoopy-nod      { width: 64px;  height: 64px;  background-image: url("assets/v2/hoopy-nod.png?v=1");
                  background-size: 256px 64px;
                  animation: hoopy-nod-md 1.0s steps(4) infinite; }
.hoopy-nod.xs   { width: 32px;  height: 32px;  background-size: 128px 32px;
                  animation-name: hoopy-nod-xs; }
.hoopy-nod.sm   { width: 48px;  height: 48px;  background-size: 192px 48px;
                  animation-name: hoopy-nod-sm; }
.hoopy-nod.lg   { width: 96px;  height: 96px;  background-size: 384px 96px;
                  animation-name: hoopy-nod-lg; }
.hoopy-nod.xl   { width: 128px; height: 128px; background-size: 512px 128px;
                  animation-name: hoopy-nod-xl; }
@keyframes hoopy-nod-md { from { background-position: 0 0; } to { background-position: -256px 0; } }
@keyframes hoopy-nod-xs { from { background-position: 0 0; } to { background-position: -128px 0; } }
@keyframes hoopy-nod-sm { from { background-position: 0 0; } to { background-position: -192px 0; } }
@keyframes hoopy-nod-lg { from { background-position: 0 0; } to { background-position: -384px 0; } }
@keyframes hoopy-nod-xl { from { background-position: 0 0; } to { background-position: -512px 0; } }

/* ——— THINK (? marks baked in) ——— */
.hoopy-think      { width: 64px;  height: 64px;  background-image: url("assets/v2/hoopy-thinking.png?v=1");
                    background-size: 256px 64px;
                    animation: hoopy-think-md 1.4s steps(4) infinite; }
.hoopy-think.xs   { width: 32px;  height: 32px;  background-size: 128px 32px;
                    animation-name: hoopy-think-xs; }
.hoopy-think.sm   { width: 48px;  height: 48px;  background-size: 192px 48px;
                    animation-name: hoopy-think-sm; }
.hoopy-think.lg   { width: 96px;  height: 96px;  background-size: 384px 96px;
                    animation-name: hoopy-think-lg; }
.hoopy-think.xl   { width: 128px; height: 128px; background-size: 512px 128px;
                    animation-name: hoopy-think-xl; }
@keyframes hoopy-think-md { from { background-position: 0 0; } to { background-position: -256px 0; } }
@keyframes hoopy-think-xs { from { background-position: 0 0; } to { background-position: -128px 0; } }
@keyframes hoopy-think-sm { from { background-position: 0 0; } to { background-position: -192px 0; } }
@keyframes hoopy-think-lg { from { background-position: 0 0; } to { background-position: -384px 0; } }
@keyframes hoopy-think-xl { from { background-position: 0 0; } to { background-position: -512px 0; } }

/* ——— JUMP (excited — uses presenting sheet) ——— */
.hoopy-jump      { width: 64px;  height: 64px;  background-image: url("assets/v2/hoopy-presenting.png?v=1");
                   background-size: 256px 64px;
                   animation: hoopy-jump-md 1.6s steps(4) infinite; }
.hoopy-jump.xs   { width: 32px;  height: 32px;  background-size: 128px 32px;
                   animation-name: hoopy-jump-xs; }
.hoopy-jump.sm   { width: 48px;  height: 48px;  background-size: 192px 48px;
                   animation-name: hoopy-jump-sm; }
.hoopy-jump.lg   { width: 96px;  height: 96px;  background-size: 384px 96px;
                   animation-name: hoopy-jump-lg; }
.hoopy-jump.xl   { width: 128px; height: 128px; background-size: 512px 128px;
                   animation-name: hoopy-jump-xl; }
@keyframes hoopy-jump-md { from { background-position: 0 0; } to { background-position: -256px 0; } }
@keyframes hoopy-jump-xs { from { background-position: 0 0; } to { background-position: -128px 0; } }
@keyframes hoopy-jump-sm { from { background-position: 0 0; } to { background-position: -192px 0; } }
@keyframes hoopy-jump-lg { from { background-position: 0 0; } to { background-position: -384px 0; } }
@keyframes hoopy-jump-xl { from { background-position: 0 0; } to { background-position: -512px 0; } }

@media (prefers-reduced-motion: reduce) {
  .hoopy-wave, .hoopy-nod, .hoopy-think, .hoopy-jump {
    animation: none !important; background-position: 0 0 !important;
  }
}