:root {
  color-scheme: light;
  --ink: #2b181c;
  --muted: #775f61;
  --paper: #fff8ef;
  --shadow: rgba(84, 27, 38, 0.14);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background:
    radial-gradient(circle at 24% 18%, rgba(242, 105, 127, 0.14), transparent 28%),
    radial-gradient(circle at 78% 80%, rgba(85, 113, 69, 0.11), transparent 28%),
    linear-gradient(145deg, #fffaf4 0%, var(--paper) 56%, #f8eadb 100%);
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family:
    "Avenir Next", Avenir, "Helvetica Neue", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

button {
  font: inherit;
}

.site-shell {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 100vh;
  width: min(960px, calc(100vw - 32px));
  margin: 0 auto;
  padding: clamp(1.5rem, 4vh, 3rem) 0;
  text-align: center;
}

.stack {
  display: grid;
  justify-items: center;
  width: min(960px, 100%);
  row-gap: clamp(0.45rem, 1.2vh, 0.8rem);
}

h1 {
  display: block;
  width: 100%;
  margin: 0;
  font-family:
    "Avenir Next", Avenir, "Helvetica Neue", Inter, ui-sans-serif, system-ui,
    sans-serif;
  font-size: clamp(3.1rem, 7vw, 7rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 0.92;
  overflow-wrap: anywhere;
  text-align: center;
}

h1 span {
  display: inline;
}

.raspberry-button {
  display: grid;
  place-items: center;
  width: min(36vh, 30vw, 320px);
  aspect-ratio: 1;
  justify-self: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  will-change: transform, filter;
  filter: drop-shadow(0 18px 24px var(--shadow));
  transform: perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
  transition:
    filter 220ms ease,
    transform 220ms ease;
}

.raspberry-button.is-hovering,
.raspberry-button:focus-visible {
  filter: drop-shadow(0 24px 32px rgba(84, 27, 38, 0.22));
}

.raspberry-button:focus-visible {
  outline: 3px solid rgba(201, 31, 79, 0.3);
  outline-offset: 8px;
}

.raspberry-button.is-happy .raspberry {
  animation: berry-pop 520ms cubic-bezier(0.2, 1.45, 0.32, 1);
}

.raspberry {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center 72%;
  transition:
    transform 220ms ease,
    filter 220ms ease;
}

.raspberry-button.is-hovering .raspberry,
.raspberry-button:focus-visible .raspberry {
  transform: scale(1.035) rotate(-1.2deg);
  filter: brightness(1.02) saturate(1.04);
}

.raspberry-button.is-wobbling .raspberry {
  animation: berry-wobble 1s ease-in-out;
}

.microcopy {
  width: 100%;
  max-width: 100%;
  min-height: 1.6em;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.45vw, 1.18rem);
  line-height: 1.45;
}

@keyframes berry-pop {
  0% { transform: scale(1) rotate(0deg); }
  42% { transform: scale(1.055) rotate(-1.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes berry-wobble {
  0% { transform: translateX(0) rotate(0deg) scale(1); }
  12% { transform: translateX(-1.5px) rotate(-1.2deg) scale(1.01); }
  24% { transform: translateX(1.8px) rotate(1.4deg) scale(1.015); }
  36% { transform: translateX(-1.2px) rotate(-1deg) scale(1.01); }
  48% { transform: translateX(1.2px) rotate(0.9deg) scale(1.008); }
  60% { transform: translateX(-0.8px) rotate(-0.6deg) scale(1.004); }
  72% { transform: translateX(0.7px) rotate(0.4deg) scale(1.003); }
  100% { transform: translateX(0) rotate(0deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  .raspberry-button.is-wobbling .raspberry {
    animation: none !important;
  }
}

@media (max-width: 640px) {
  .site-shell {
    width: min(320px, calc(100vw - 32px));
    padding: 1.25rem 0;
  }

  .stack {
    width: 100%;
    row-gap: 0.55rem;
  }

  h1 {
    font-size: clamp(2.4rem, 11.6vw, 3rem);
    line-height: 0.95;
  }

  h1 span {
    display: block;
  }

  .raspberry-button {
    width: min(54vw, 180px);
  }

  .microcopy {
    max-width: 260px;
  }
}