/* Wordmark controls are siblings of the h1, which is still read exactly once. */
.logo-playground { position: relative; display: inline-block; }
.logo-rush-trigger,
.logo-nibble-trigger {
  position: absolute;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  border-radius: 14px;
}
.logo-rush-trigger { inset: -8px; z-index: 1; }
.logo-nibble-trigger { z-index: 2; min-width: 44px; min-height: 44px; }
.logo-rush-trigger:focus-visible,
.logo-nibble-trigger:focus-visible { outline: 3px solid var(--lemon); outline-offset: 4px; }
.logo-nibble-trigger[aria-disabled="true"] { cursor: wait; }

.letters span[data-nibbles="1"] {
  clip-path: polygon(0 0,100% 0,100% 12%,86% 12%,78% 18%,78% 26%,84% 33%,100% 36%,100% 100%,0 100%);
}
.letters span[data-nibbles="2"] {
  clip-path: polygon(0 0,68% 0,65% 15%,50% 20%,47% 31%,61% 40%,55% 57%,72% 66%,63% 79%,75% 100%,0 100%);
}
.letters span[data-nibbles="3"] {
  clip-path: polygon(0 0,35% 0,29% 13%,37% 25%,20% 32%,18% 47%,31% 57%,17% 65%,25% 79%,17% 100%,0 100%);
}
.letters span[data-nibbles="4"] { opacity: 0; }

body.sugar-rush { background-color: #38223f; }
.sugar-rush .wordmark { filter: saturate(1.7) brightness(1.22); }
.sugar-rush .stage::before,
.sugar-rush .stage::after { opacity: 0.4; }
.sugar-rush .letters span { animation: sugar-letter-dance 0.55s ease-in-out infinite; }
#candy-stage.is-sugar-rush .candy-bob { animation: sugar-candy-dance 0.48s ease-in-out infinite; }
#candy-stage.is-sugar-rush .candy-wiggle { animation: sugar-candy-wiggle 0.48s ease-in-out infinite; }
@keyframes sugar-letter-dance {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.12em); }
}
@keyframes sugar-candy-dance {
  0%, 100% { transform: translateY(0) scale(1.08, 0.92); }
  50% { transform: translateY(-14px) scale(0.96, 1.06); }
}
@keyframes sugar-candy-wiggle {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}
#candy-stage.is-sugar-rush { filter: saturate(1.6) brightness(1.15); }
#candy-stage .candy.is-resting .candy-bob,
#candy-stage .candy.is-resting .candy-wiggle { animation: none; }
#candy-stage .candy.is-resting .candy-flair { transform: rotate(75deg); }
#candy-stage .candy.is-resting::after {
  content: 'z z z'; position: absolute; left: 40%; bottom: 80%;
  color: var(--mint); font: 600 13px var(--font-body); white-space: nowrap;
}
.logo-crumb {
  position: fixed; width: 5px; height: 5px; border-radius: 2px;
  background: var(--lemon); pointer-events: none; z-index: 9001;
  animation: logo-crumb-fall 0.9s ease-out forwards;
}
@keyframes logo-crumb-fall {
  to { transform: translate(var(--crumb-x), var(--crumb-y)) rotate(90deg); opacity: 0; }
}
.logo-courier {
  position: fixed; width: 64px; height: 40px; z-index: 9001;
  pointer-events: none; animation: logo-delivery 1.6s cubic-bezier(.2,.7,.3,1) forwards;
}
.logo-courier svg { display: block; width: 100%; height: 100%; overflow: visible; }
.logo-parcel {
  position: absolute; left: 24px; bottom: 28px; color: var(--bubblegum);
  font: 700 30px/1 var(--font-display);
}
.logo-courier.is-delivered { animation: logo-courier-leave 0.7s ease-in forwards; }
.logo-courier.is-delivered .logo-parcel { opacity: 0; }
@keyframes logo-delivery {
  from { transform: translate(-70px, var(--delivery-rise)) rotate(-12deg); }
  70% { transform: translate(0, -8px) rotate(8deg); }
  to { transform: translate(0, 0) rotate(0); }
}
@keyframes logo-courier-leave {
  to { transform: translate(80px, var(--delivery-rise)) rotate(12deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sugar-rush .letters span { animation: none; }
  .logo-crumb { animation: none; }
  .logo-courier, .logo-courier.is-delivered { animation: none; }
  #candy-stage .candy.is-resting .candy-flair { transform: none; }
}