/* Shared bee artwork */

.bee {
  display: block;
  overflow: visible;
}

.bee--flying .bee__wings {
  transform-box: fill-box;
  transform-origin: 50% 95%;
  animation: bee-flap 0.11s ease-in-out infinite alternate;
}

@keyframes bee-flap {
  to {
    transform: scaleY(0.45);
  }
}

/* Bee cursor */

html.has-bee-cursor,
html.has-bee-cursor * {
  cursor: none !important;
}

html.has-bee-cursor :is(input:not([type="range"]), textarea, select, [contenteditable]) {
  cursor: text !important;
}

html.has-bee-cursor:has(dialog[open]),
html.has-bee-cursor:has(dialog[open]) * {
  cursor: auto !important;
}

html:not(.has-bee-cursor) .cursor-bee,
html:not(.has-bee-cursor) .cursor-dot,
html:has(dialog[open]) .cursor-bee,
html:has(dialog[open]) .cursor-dot {
  opacity: 0 !important;
}

.cursor-dot,
.cursor-bee,
.cursor-trail {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  pointer-events: none;
}

.cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 2px rgb(23 21 45 / 0.6);
  transition: width var(--duration-s) var(--ease-out), height var(--duration-s) var(--ease-out), margin var(--duration-s) var(--ease-out), background-color var(--duration-s) var(--ease-out), opacity var(--duration-s);
}

.cursor-bee {
  width: 2.1rem;
  height: 1.7rem;
  margin: -0.85rem 0 0 -1.05rem;
  transition: opacity var(--duration-m) var(--ease-out);
}

.cursor-bee__body {
  width: 100%;
  height: 100%;
  transition: transform var(--duration-m) var(--ease-out);
  filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.45));
}

.cursor-bee[data-idle] .cursor-bee__body {
  animation: bee-hover 1.6s ease-in-out infinite;
}

@keyframes bee-hover {
  50% {
    translate: 0 -4px;
  }
}

html[data-cursor="link"] .cursor-dot {
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background: transparent;
  box-shadow: 0 0 0 2px var(--gold);
}

html[data-cursor="link"] .cursor-bee__body {
  transform: scale(1.18);
}

html[data-cursor="text"] .cursor-dot,
html[data-cursor="text"] .cursor-bee,
html[data-cursor="hidden"] .cursor-dot,
html[data-cursor="hidden"] .cursor-bee {
  opacity: 0;
}

.cursor-trail {
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--gold-soft);
  opacity: 0;
}

/* Honey-coloured dot field that lights up around the bee */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, rgb(247 200 119 / 0.55) 1.1px, transparent 1.7px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle 13rem at var(--cursor-x, -50rem) var(--cursor-y, -50rem), #000, rgb(0 0 0 / 0.35) 45%, transparent 100%);
  mask-image: radial-gradient(circle 13rem at var(--cursor-x, -50rem) var(--cursor-y, -50rem), #000, rgb(0 0 0 / 0.35) 45%, transparent 100%);
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}

.backdrop[data-active] {
  opacity: 0.6;
}

/* Hero greeting bees */

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

.greeting__bee {
  position: absolute;
  width: var(--size, 2.4rem);
  opacity: 0;
  transform: scale(0.2) rotate(var(--tilt, 0deg));
  transition: opacity 0.35s var(--ease-out), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--delay, 0ms);
}

.greeting__bee .bee {
  width: 100%;
  animation: bee-loop var(--loop, 2.4s) ease-in-out infinite;
  animation-play-state: paused;
}

.greeting__bee:nth-child(1) { --size: 3rem; --tilt: -12deg; --delay: 60ms; --loop: 2.2s; top: -14%; right: -24%; }
.greeting__bee:nth-child(2) { --size: 2.3rem; --tilt: 10deg; --delay: 140ms; --loop: 2.8s; bottom: -4%; right: -30%; }
.greeting__bee:nth-child(3) { --size: 2rem; --tilt: -6deg; --delay: 220ms; --loop: 2.5s; bottom: -44%; left: 46%; }
.greeting__bee:nth-child(4) { --size: 2.6rem; --tilt: 14deg; --delay: 300ms; --loop: 3.1s; bottom: -38%; left: 4%; }

.greeting:is([data-flipped], :hover) .greeting__bee {
  opacity: 1;
  transform: scale(1) rotate(var(--tilt, 0deg));
}

.greeting:is([data-flipped], :hover) .greeting__bee .bee {
  animation-play-state: running;
}

@keyframes bee-loop {
  25% { translate: 6px -8px; rotate: 6deg; }
  50% { translate: 0 -12px; rotate: -4deg; }
  75% { translate: -6px -5px; rotate: 3deg; }
}

@media (hover: none) {
  .greeting:hover .greeting__bee {
    opacity: 0;
  }

  .greeting[data-flipped]:hover .greeting__bee {
    opacity: 1;
  }
}

/* Bee hunt */

.hunt-counter,
.hunt-invite,
.hunt-bee {
  display: none;
}

.js .hunt-counter {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: var(--space-m);
  padding: 0.35rem 0.7rem 0.35rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--mist);
  font-family: var(--font-display);
  font-size: var(--text-s);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--duration-s) var(--ease-out), color var(--duration-s) var(--ease-out);
}

.hunt-counter:hover,
.hunt-counter[data-complete] {
  border-color: var(--gold);
  color: var(--gold);
}

.hunt-counter__bee {
  width: 1.45rem;
  height: 1.15rem;
  flex: none;
}

.hunt-counter[data-bump] {
  animation: counter-bump 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes counter-bump {
  40% { transform: scale(1.18); }
}

@media (max-width: 52rem) {
  .js .hunt-counter {
    order: 2;
    margin-left: 0.5rem;
  }

  .js .menu-button {
    order: 1;
  }
}

.js .hunt-invite {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--space-xl);
  color: var(--mist);
  font-family: var(--font-display);
  font-size: var(--text-s);
}

.hunt-invite__bee {
  width: 1.7rem;
  height: 1.35rem;
  flex: none;
}

.js .hunt-bee {
  position: absolute;
  z-index: 4;
  display: block;
  width: 1.9rem;
  height: 1.5rem;
  padding: 0;
  opacity: 0.85;
  rotate: var(--tilt, 0deg);
  transition: opacity var(--duration-s) var(--ease-out), scale var(--duration-s) var(--ease-out);
}

.js .hunt-bee[hidden] {
  display: none;
}

.hunt-bee svg {
  width: 100%;
  height: 100%;
}

.hunt-bee:hover,
.hunt-bee:focus-visible {
  opacity: 1;
  scale: 1.15;
}

.hunt-bee[data-near] svg {
  animation: bee-wiggle 0.5s ease-in-out infinite;
}

@keyframes bee-wiggle {
  25% { transform: rotate(-9deg) translateY(-1px); }
  75% { transform: rotate(9deg) translateY(1px); }
}

.outcome,
.showcase__text,
.flow,
.toolkit {
  position: relative;
}

.hunt-bee--outcome { --tilt: -14deg; right: 6%; top: calc(50% + 0.5rem); }
.hunt-bee--showcase { --tilt: 12deg; right: -2.5rem; bottom: 0; }
.hunt-bee--flow { --tilt: -8deg; right: 0.6rem; top: 0.45rem; width: 1.4rem; height: 1.1rem; }
.hunt-bee--gallery { --tilt: 18deg; right: 9%; top: 14%; }
.hunt-bee--toolkit { --tilt: -20deg; right: 0.25rem; top: 1.75rem; }

@media (max-width: 60rem) {
  .hunt-bee--showcase { right: 0; }
}

.hunt-flyer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 95;
  width: 1.9rem;
  height: 1.5rem;
  pointer-events: none;
}

.hunt-toast {
  position: fixed;
  top: calc(var(--header-height) + 0.75rem);
  right: var(--gutter);
  z-index: 70;
  max-width: min(22rem, calc(100vw - 2 * var(--gutter)));
  padding: 0.7rem 1rem;
  border: 1px solid rgb(242 169 59 / 0.5);
  border-radius: var(--radius-m);
  background: rgb(31 29 58 / 0.96);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--text-s);
  box-shadow: 0 1rem 2rem -1rem rgb(0 0 0 / 0.7);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: opacity var(--duration-m) var(--ease-out), transform var(--duration-m) var(--ease-out), visibility 0s linear var(--duration-m);
}

.hunt-toast[data-visible] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.hunt-toast:empty {
  display: none;
}

/* Reward */

.hunt-reward {
  width: min(92vw, 30rem);
  max-width: none;
  margin: auto;
  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
  overflow: visible;
  border: 1px solid rgb(242 169 59 / 0.5);
  border-radius: var(--radius-l);
  background:
    radial-gradient(circle at 50% 0%, rgb(242 169 59 / 0.16), transparent 60%),
    var(--ink-raised);
  color: var(--paper);
  text-align: center;
}

.hunt-reward[open] {
  animation: reward-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes reward-in {
  from {
    opacity: 0;
    scale: 0.85;
  }
}

.hunt-reward::backdrop {
  background: rgb(8 7 20 / 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.hunt-reward__title {
  margin-bottom: var(--space-m);
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
}

.hunt-reward p {
  color: var(--mist);
}

.hunt-reward__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s);
  margin-top: var(--space-xl);
}

.hunt-reward__close-form {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}

.hunt-reward__close {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--mist);
}

.hunt-reward__close:hover {
  border-color: var(--gold);
  color: var(--gold);
}

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

.reward-bee {
  position: absolute;
  width: var(--size, 2.2rem);
  animation: reward-orbit var(--loop, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.reward-bee:nth-child(1) { --size: 2.6rem; --loop: 2.6s; top: -1.6rem; left: 12%; }
.reward-bee:nth-child(2) { --size: 2rem; --loop: 3.2s; --delay: -0.8s; top: -1.2rem; right: 16%; }
.reward-bee:nth-child(3) { --size: 2.3rem; --loop: 2.9s; --delay: -1.4s; top: 40%; right: -1.4rem; }
.reward-bee:nth-child(4) { --size: 1.8rem; --loop: 3.4s; --delay: -0.3s; bottom: -1.1rem; right: 30%; }
.reward-bee:nth-child(5) { --size: 2.1rem; --loop: 2.7s; --delay: -2s; bottom: 18%; left: -1.3rem; }
.reward-bee:nth-child(6) { --size: 1.6rem; --loop: 3.6s; --delay: -1.1s; top: 20%; left: -1rem; }

@keyframes reward-orbit {
  25% { translate: 8px -10px; rotate: 8deg; }
  50% { translate: 0 -16px; rotate: -6deg; }
  75% { translate: -8px -6px; rotate: 4deg; }
}

@media (prefers-reduced-motion: reduce) {
  .reward-bee,
  .greeting__bee .bee,
  .hunt-bee[data-near] svg,
  .bee--flying .bee__wings {
    animation: none !important;
  }
}