@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,200..800&display=swap");

:root {
  --cobalt: #2f45f5;
  --night: #14163f;
  --tomato: #ff5436;
  --marigold: #ffb627;
  --pink: #ff9ec4;
  --mint: #5fd9a5;
  --lavender: #b9a7ff;
  --paper: #f6f4ee;
  --ink: #14163f;

  --font: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  font-family: var(--font);
  font-optical-sizing: auto;
  color: var(--ink);
  background: var(--cobalt);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--marigold);
  outline-offset: 3px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 1.125rem;
  font-weight: 650;
  background: var(--marigold);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.25s var(--ease-spring);
}
.btn:active {
  transform: scale(0.95);
}
.btn.quiet {
  background: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 2px currentColor;
}

/* Animal drawings (core/animals.js) */
.animal-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.animal-svg .eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: bloom-blink 4.4s infinite;
}
.animal-svg .w {
  transform-box: fill-box;
}
.alive .animal-svg .w-rot {
  animation: bloom-rot 0.7s ease-in-out infinite alternate;
}
.alive .animal-svg .w-flap {
  animation: bloom-flap 0.5s ease-in-out infinite alternate;
}
.alive .animal-svg .w-hop {
  animation: bloom-hop 0.55s var(--ease-out) infinite alternate;
}
.alive .animal-svg .w-spin {
  animation: bloom-spin 1.4s ease-in-out infinite alternate;
}
@keyframes bloom-blink {
  0%, 91%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.08); }
}
@keyframes bloom-rot {
  from { transform: rotate(-9deg); }
  to { transform: rotate(9deg); }
}
@keyframes bloom-flap {
  from { transform: scaleX(1); }
  to { transform: scaleX(0.72); }
}
@keyframes bloom-hop {
  from { transform: translateY(0); }
  to { transform: translateY(-9%); }
}
@keyframes bloom-spin {
  from { transform: rotate(-14deg); }
  to { transform: rotate(14deg); }
}

@media (prefers-reduced-motion: reduce) {
  .animal-svg .eye,
  .alive .animal-svg .w {
    animation: none;
  }
}