/* Poweranimal — warm ink theme. Cards are cream anime portraits, so the page
   stays dark and warm and lets them glow. Tokens first, then layout, then
   each step of the flow in screen order. */

:root {
  color-scheme: dark;
  --bg: #15110d;
  --bg-glow: rgba(242, 140, 56, 0.16);
  --raised: #1f1812;
  --raised-2: #2a211a;
  --line: rgba(255, 236, 214, 0.12);
  --line-strong: rgba(255, 236, 214, 0.22);
  --text: #f6efe4;
  --muted: #b3a593;
  --faint: #9a8d7e;
  --accent: #f28c38;
  --accent-2: #ffb15c;
  --accent-ink: #1d0f04;
  --accent-soft: rgba(242, 140, 56, 0.14);
  --danger: #ff8a80;
  --danger-soft: rgba(255, 110, 100, 0.14);
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.35);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
}

/* Images carry width/height attributes for layout stability; CSS owns the final size. */
img,
video {
  max-width: 100%;
  height: auto;
}

body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(70rem 34rem at 50% -14rem, var(--bg-glow), transparent 65%),
    var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 36rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 7rem;
}

/* ---------- hero ---------- */


.wordmark {
  position: relative;
  display: inline-block;
}

/* Sits on the last letter. Decorative; the real animal name is in the card. */
.perch {
  position: absolute;
  right: -0.08em;
  top: -0.68em;
  font-size: 0.58em;
  line-height: 1;
  transform: rotate(-10deg);
  transform-origin: 50% 100%;
  animation: perch-bob 5s ease-in-out infinite;
  cursor: default;
  user-select: none;
  /* The wordmark's text is transparent under a clipped gradient; the glyph needs its own color to show. */
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.perch.land {
  animation:
    perch-land 0.7s var(--ease),
    perch-bob 5s ease-in-out 0.7s infinite;
}

.wordmark:hover .perch {
  animation: perch-hop 0.6s var(--ease);
}

@keyframes perch-bob {
  0%,
  100% {
    transform: rotate(-10deg) translateY(0);
  }
  50% {
    transform: rotate(-7deg) translateY(-0.08em);
  }
}

@keyframes perch-land {
  0% {
    opacity: 0;
    transform: rotate(-10deg) translateY(-1.2em) scale(0.6);
  }
  60% {
    opacity: 1;
    transform: rotate(-10deg) translateY(0.08em) scale(1.08);
  }
  100% {
    transform: rotate(-10deg) translateY(0) scale(1);
  }
}

@keyframes perch-hop {
  0%,
  100% {
    transform: rotate(-10deg) translateY(0);
  }
  40% {
    transform: rotate(-4deg) translateY(-0.5em);
  }
}

h1 {
  margin: 0.75rem 0 0;
  font-size: clamp(2.75rem, 11vw, 4.25rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.035em;
  background: linear-gradient(100deg, var(--text) 30%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h2 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.lede {
  margin: 0.9rem 0 0;
  font-size: 1.125rem;
  color: var(--muted);
  max-width: 28rem;
}

#balance {
  margin: 1rem 0 0;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--raised);
  font-size: 0.875rem;
  color: var(--muted);
}

#balance:empty {
  display: none;
}

#balance button.buy {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-2);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

#balance button.buy:hover {
  background: none;
  color: var(--text);
}

/* ---------- sections ---------- */

form,
section {
  display: grid;
  gap: 0.85rem;
  margin-top: 2rem;
}

/* Author display:grid beats the user-agent [hidden] rule unless this wins. */
form[hidden],
section[hidden],
[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.hint {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.panel {
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--raised-2), var(--raised));
  box-shadow: var(--shadow-sm);
}

/* ---------- buttons ---------- */

button,
a.download,
label.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.9rem;
  padding: 0.7rem 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--raised-2);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  width: fit-content;
  transition:
    transform 0.15s var(--ease),
    background-color 0.15s var(--ease),
    border-color 0.15s var(--ease),
    box-shadow 0.15s var(--ease);
}

button:hover,
a.download:hover,
label.button:hover {
  border-color: var(--line-strong);
  background: #342a21;
}

button:active,
a.download:active,
label.button:active {
  transform: translateY(1px) scale(0.99);
}

button:focus-visible,
a.download:focus-visible,
#photo:focus-visible + label.button {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
}

button:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

/* Primary: one per screen. */
#open-camera,
#download {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: var(--accent-ink);
  box-shadow: 0 8px 24px rgba(242, 140, 56, 0.28);
}

#open-camera:hover,
#download:hover {
  background: linear-gradient(135deg, #ffc077, #f79a4a);
  box-shadow: 0 10px 28px rgba(242, 140, 56, 0.38);
}


/* Quiet: undo-ish actions. */
#again,
#reset-wallet {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  padding-inline: 0.75rem;
}

#again:hover {
  background: var(--accent-soft);
  color: var(--text);
}

#reset-wallet {
  min-height: 0;
  padding: 0;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

#reset-wallet:hover {
  background: none;
  color: var(--text);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin: 0;
}

/* ---------- examples ---------- */

#examples {
  gap: 1.1rem;
  margin-top: 2.5rem;
}

.examples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 0.75rem 0.5rem 1rem;
}

.examples figure {
  margin: 0;
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  transition: transform 0.3s var(--ease);
}

.examples figure:nth-child(1) {
  transform: rotate(-7deg) translateY(0.6rem);
}

.examples figure:nth-child(2) {
  transform: scale(1.1);
  z-index: 1;
}

.examples figure:nth-child(3) {
  transform: rotate(7deg) translateY(0.6rem);
}

/* Display clip only. Stored files, downloads, and shares stay rectangular. */
.examples img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: #d6d3d1;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 236, 214, 0.9);
  box-shadow: var(--shadow);
}

.examples figcaption {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ---------- upload ---------- */

#upload {
  gap: 1rem;
}

#upload .panel-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

#sources {
  flex-wrap: wrap;
  gap: 0.6rem;
}

#sources > * {
  flex: 1 1 10rem;
}

.camera {
  display: grid;
  gap: 0.85rem;
  justify-items: center;
}

.viewfinder {
  position: relative;
  width: 100%;
  max-width: 24rem;
  /* room for the halo ring outside the square */
  margin: 3.2rem auto;
  container-type: inline-size;
}

.halo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.halo .halo-item {
  pointer-events: auto;
  cursor: pointer;
}

/* A tap pins this animal for the snap. Peek can still grow another one; the glow says which one will be the card. */
.halo .halo-item.chosen {
  z-index: 2;
  opacity: 1;
  filter:
    drop-shadow(0 0 0.4rem var(--accent-2))
    drop-shadow(0 0 0.15rem var(--accent-2))
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

.pose-hint {
  margin: 0;
  min-height: 1.4rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text);
}

.pose-hint:empty {
  display: none;
}

/* The same 30 spans sit in the menagerie strip while idle and in the halo while the camera is open. */
.menagerie {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.5rem;
  margin: 1.25rem 0 0;
  min-height: 1.5rem;
}

.halo-item {
  --p: 0;
  --dx: 0px;
  --dy: 0px;
  display: inline-block;
  font-size: 1.2rem;
  line-height: 1;
  transform: translate(var(--dx), var(--dy));
  transition:
    transform 0.7s var(--ease),
    opacity 0.6s var(--ease);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

.halo-item.no-anim {
  transition: none;
}

.halo .halo-item {
  position: absolute;
  top: 50%;
  left: 50%;
  /* ring radius: half the circle plus a little air; --dx/--dy carry the fly-in offset */
  /* --p is share of the leader (0..1): quiet animals sit at 0.6x, the leader at about 3.6x */
  transform: translate(var(--dx), var(--dy)) translate(-50%, -50%) rotate(var(--angle)) translateX(calc(50cqw + 1.8rem))
    rotate(calc(-1 * var(--angle))) scale(calc(0.6 + var(--p) * 3));
  opacity: calc(0.4 + var(--p) * 0.6);
}

.countdown {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  font-size: clamp(5rem, 30cqw, 9rem);
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  text-shadow:
    0 0 24px rgba(0, 0, 0, 0.8),
    0 2px 6px rgba(0, 0, 0, 0.8);
  opacity: 0;
}

.countdown:empty {
  display: none;
}

.countdown.pop {
  animation: count-pop 0.95s var(--ease) forwards;
}

@keyframes count-pop {
  0% {
    opacity: 0;
    transform: scale(1.6);
  }
  15% {
    opacity: 1;
    transform: scale(1);
  }
  80% {
    opacity: 0.9;
    transform: scale(0.92);
  }
  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}

.live-name {
  margin: 0;
  min-height: 1.5rem;
  text-align: center;
  font-weight: 700;
  color: var(--accent-2);
}

.live-name:empty {
  display: none;
}

.live-cost {
  margin: 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
}

.live-cost:empty {
  display: none;
}

/* A circle inside the ring of animals. Snap still takes the square frame. */
.camera video {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transform: scaleX(-1);
  background: #000;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

#snap {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: var(--accent-ink);
  box-shadow: 0 8px 24px rgba(242, 140, 56, 0.28);
}

#upload.dragging {
  outline: 2px dashed var(--accent);
  outline-offset: 6px;
  border-radius: var(--radius);
}




/* ---------- result card ---------- */

#card {
  position: relative;
  padding: 1.5rem 1.25rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid rgba(242, 140, 56, 0.35);
  background:
    radial-gradient(28rem 14rem at 50% -4rem, rgba(242, 140, 56, 0.22), transparent 70%),
    linear-gradient(180deg, var(--raised-2), var(--raised));
  box-shadow: var(--shadow);
  animation: rise 0.5s var(--ease);
}

#animal-name {
  scroll-margin-top: 1rem;
  font-size: clamp(2.5rem, 12vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent-2);
  text-shadow: 0 0 36px rgba(242, 140, 56, 0.35);
}

#animal-name:empty,
#reason:empty {
  display: none;
}

#reason {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.5;
}

.results {
  display: grid;
  gap: 1rem;
  margin-top: 0.5rem;
  align-items: start;
}

.results:empty {
  display: none;
}

.tile {
  position: relative;
  margin: 0;
  display: grid;
  gap: 0.6rem;
  justify-items: center;
}

.tile img,
.tile video {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 236, 214, 0.9);
  background: #d6d3d1;
  box-shadow: var(--shadow);
  transition: filter 0.4s var(--ease);
}

.tile .actions {
  justify-content: center;
  gap: 0.35rem 0.6rem;
}

.tile.working img,
.tile.working video {
  filter: saturate(0.6) brightness(0.7);
}

.tile .sound,
#library-list .actions button.sound {
  border-color: var(--line-strong);
  background: var(--raised-2);
  color: var(--text);
}

.tile .move {
  border-color: rgba(242, 140, 56, 0.5);
  color: var(--accent-2);
  background: var(--accent-soft);
}

.tile .move:hover {
  background: rgba(242, 140, 56, 0.24);
}

/* Only over the picture: the figure's top is the circular frame. */
.tile.working::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255, 177, 92, 0.22) 50%,
    transparent 70%
  );
  background-size: 250% 100%;
  animation: shimmer 1.6s linear infinite;
  pointer-events: none;
}

#again {
  justify-self: center;
}

/* ---------- gifts ---------- */

#claim {
  border-color: rgba(242, 140, 56, 0.45);
  animation: rise 0.5s var(--ease);
}

#claim-copy {
  margin: 0;
  font-size: 1.125rem;
}

#claim-button {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: var(--accent-ink);
  box-shadow: 0 8px 24px rgba(242, 140, 56, 0.28);
}

.gift {
  gap: 0.85rem;
  margin-top: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--raised);
}

.gift .panel-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

#gift-tokens {
  width: 5.5rem;
  min-height: 2.9rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
}

#gift-tokens:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

#gift-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

#gift-list:empty {
  display: none;
}

#gift-list li {
  display: grid;
  gap: 0.4rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: 0.9rem;
}

#gift-list li.claimed {
  color: var(--muted);
}

.gift-link {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  color: var(--accent-2);
  word-break: break-all;
  user-select: all;
}

.gift .actions button {
  min-height: 2.3rem;
  padding: 0.35rem 0.8rem;
  font-size: 0.85rem;
}

.gift .actions button.take-back {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

/* ---------- how it works ---------- */

#how h2,
#shop h2,
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 0.75rem;
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.75rem;
  align-items: start;
  color: var(--muted);
}

.steps li strong {
  color: var(--text);
  font-weight: 700;
}

.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-2);
  font-weight: 700;
  font-size: 0.9rem;
}

/* ---------- shop ---------- */

#packs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

#packs:empty {
  display: none;
}

#packs button {
  width: 100%;
  min-height: 0;
  padding: 0.95rem 0.5rem;
  border-radius: var(--radius-sm);
  display: grid;
  gap: 0.15rem;
  justify-items: center;
  text-align: center;
  background: linear-gradient(180deg, var(--raised-2), var(--raised));
}

#packs button:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

#packs .pack-tokens {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}

#packs .pack-price {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

#packs button.dev-credit {
  grid-column: 1 / -1;
  border-style: dashed;
  color: var(--muted);
  font-size: 0.85rem;
  padding: 0.6rem;
}

#packs .pack-each {
  font-size: 0.75rem;
  color: var(--faint);
}

/* ---------- library ---------- */

#library {
  margin-top: 3rem;
}

#library-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.75rem;
}

#library-list li {
  display: grid;
  gap: 0.5rem;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--raised);
}

#library-list img,
#library-list video {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  border-radius: 50%;
  overflow: hidden;
  background: #d6d3d1;
}

#library-list span {
  font-weight: 700;
  padding-inline: 0.2rem;
}


#library-list .actions {
  gap: 0.35rem;
}

#library-list .actions a,
#library-list .actions button {
  min-height: 2.1rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
}

#library-list .actions button {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  padding-inline: 0.5rem;
}

#library-list .actions button:hover {
  background: var(--accent-soft);
  color: var(--text);
}

#library-list .actions button.move {
  border-color: rgba(242, 140, 56, 0.5);
  color: var(--accent-2);
  background: var(--accent-soft);
}

#library-list li.empty {
  display: block;
  padding: 0.9rem 1rem;
  color: var(--muted);
  font-size: 0.9rem;
}

#library-list .confirm-copy {
  font-size: 0.8rem;
  color: var(--muted);
}

#reset-wallet,
#library-list button.remove,
#library-list button.keep {
  background: none;
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

#library-list button.remove,
#library-list button.keep {
  color: var(--muted);
  font-weight: 500;
}

#library-list button.remove {
  margin-left: auto;
}

#library-list button.remove-yes {
  background: none;
  border-color: transparent;
  color: var(--danger);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

#library-list button.remove-yes:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

/* ---------- status + error toasts ---------- */

.toasts {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  pointer-events: none;
  z-index: 10;
}

#status,
#error {
  margin: 0;
  max-width: 34rem;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(42, 33, 26, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  font-size: 0.95rem;
  pointer-events: auto;
  animation: rise 0.3s var(--ease);
}

#error:empty,
#status:empty {
  display: none;
}

#status.busy::before {
  content: "";
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.6rem;
  border-radius: 50%;
  background: var(--accent-2);
  vertical-align: 0.05em;
  animation: pulse 1.1s ease-in-out infinite;
}

#error {
  color: var(--danger);
  border-color: rgba(255, 110, 100, 0.4);
  background: rgba(60, 28, 26, 0.94);
}

/* ---------- footer ---------- */

.maker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.maker img {
  height: 0.65rem;
  width: auto;
  background: none;
  vertical-align: middle;
}

footer {
  margin-top: 4rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--faint);
}

/* ---------- motion ---------- */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes shimmer {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -120% 0;
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- wider screens ---------- */

@media (min-width: 40rem) {
  main {
    padding-top: 2.5rem;
  }

  #card {
    padding: 2rem 1.75rem 1.5rem;
  }

  .results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}