:root {
  --bg: #ffffff;
  --ink: #000000;
  --accent: #d8a900;
  --muted: rgba(0, 0, 0, 0.25);
  --bee-size: 44px;
  --headline-size: 16px;
  --headline-lh: 18px;
  --footer-size: 16px;
  --footer-bottom: 24px;
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Geist", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 0 16px;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Bee keeps its layout slot; the image floats inside it via transform */
.bee-zone {
  width: var(--bee-size);
  height: var(--bee-size);
  position: relative;
}

.bee {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  transform-origin: 50% 50%;
}

/* Layers cut from the original photo, stacked in the same frame */
.bee-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Joint pivots, in % of the 360px source image. bee.js drives the angles. */
[data-joint] { will-change: transform; }
.bee-abdomen       { transform-origin: 57.5% 47.8%; }
[data-joint="breath"] { transform-origin: 57.5% 47.8%; }
.bee-leg--front    { transform-origin: 30.6% 46.1%; }
.bee-knee--front   { transform-origin: 25.6% 54.4%; }
.bee-leg--middle   { transform-origin: 39.4% 52.8%; }
.bee-knee--middle  { transform-origin: 35.6% 61.7%; }
.bee-leg--hind     { transform-origin: 57.5% 51.7%; }
.bee-knee--hind    { transform-origin: 61.7% 68.9%; }
.bee-head          { transform-origin: 30% 41.7%; }
.bee-antenna       { transform-origin: 19.4% 36.7%; }

/* Wings beat from their root on the thorax */
.bee-wings {
  transform-origin: 56% 35%;
  animation: wing-beat 80ms linear infinite alternate;
  will-change: transform;
}

/* Opposite-phase blurred copy reads as motion blur */
.bee-wings--ghost {
  opacity: 0.45;
  filter: blur(0.6px);
  animation-delay: -80ms;
}

@keyframes wing-beat {
  from { transform: rotate(-30deg) scaleY(0.75); }
  to   { transform: rotate(12deg) scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .bee-wings { animation: none; }
  .bee-wings--ghost { display: none; }
}

.headline {
  font-family: "Geist", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: var(--headline-size);
  line-height: var(--headline-lh);
  letter-spacing: -1px;
  text-align: center;
  white-space: nowrap;
}

.accent { color: var(--accent); }

/* Pinned to the bottom so the title stays centred on screen, as in the design */
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--footer-bottom);
  display: flex;
  justify-content: center;
  padding: 0 16px;
}

.copyright {
  font-family: "Geist", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: var(--footer-size);
  line-height: 20px;
  letter-spacing: -1px;
  color: var(--muted);
  white-space: nowrap;
}

/* Tablet */
@media (min-width: 768px) {
  :root {
    --bee-size: 64px;
    --headline-size: 22px;
    --headline-lh: 26px;
    --footer-bottom: 32px;
  }
  .hero { gap: 12px; }
}

/* Desktop */
@media (min-width: 1200px) {
  :root {
    --bee-size: 80px;
    --headline-size: 28px;
    --headline-lh: 32px;
    --footer-bottom: 40px;
  }
  .headline { letter-spacing: -1.5px; }
  .hero { gap: 16px; }
}