:root {
  --ink: #211b3d;
  --yellow: #ffe55c;
  --pink: #fa518f;
  --blue: #3074f5;
  --mint: #55e3c3;
  color-scheme: dark;
  background: var(--ink);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  overflow: hidden;
  touch-action: manipulation;
  background:
    radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgb(255 245 137 / .25), transparent 19rem),
    radial-gradient(ellipse at 14% 18%, var(--pink), transparent 27%),
    radial-gradient(ellipse at 84% 78%, var(--mint), transparent 30%),
    linear-gradient(125deg, #5a2b98, #f75c93 47%, #3372e9 100%);
  transition: background-position .25s ease-out;
}

main {
  position: relative;
  display: grid;
  min-height: 100svh;
  overflow: hidden;
  place-items: center;
  isolation: isolate;
}

.sticker-zone { display: grid; justify-items: center; }

.chant {
  z-index: 2;
  margin: 0 0 clamp(.2rem, 1.5vh, .8rem);
  color: var(--yellow);
  font: 900 clamp(1.55rem, 5vw, 3.5rem)/.95 ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  letter-spacing: -.055em;
  text-align: center;
  text-shadow: .14rem .14rem 0 var(--ink), 0 0 1.7rem rgb(255 230 92 / .75);
  transform: rotate(-2deg);
}

.sticker-button {
  position: relative;
  display: grid;
  width: min(70vw, 590px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  perspective: 700px;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .16s ease-out;
}

.sticker-button:focus-visible { outline: .28rem solid #fff; outline-offset: .35rem; border-radius: 1rem; }
.sticker-button:active { transform: scale(.95); }

.sticker-stage {
  position: relative;
  display: grid;
  place-items: center;
  animation: bob 2.7s ease-in-out infinite;
}

.sticker-stage::before {
  position: absolute;
  z-index: -1;
  width: 80%;
  aspect-ratio: 1;
  border-radius: 48% 52% 54% 46%;
  background: conic-gradient(var(--yellow), var(--pink), var(--blue), var(--mint), var(--yellow));
  filter: blur(20px);
  opacity: .82;
  content: "";
  animation: spin 7s linear infinite, blob 4s ease-in-out infinite alternate;
}

.sticker {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 1.2rem 1.2rem rgb(33 27 61 / .42));
  transform-origin: 50% 62%;
  animation: wiggle 4.5s ease-in-out infinite;
}

.spark { position: absolute; color: #fff9bd; font: 900 clamp(1.3rem, 4vw, 2.8rem)/1 system-ui, sans-serif; text-shadow: 0 0 1rem var(--yellow); animation: twinkle 1.5s ease-in-out infinite alternate; }
.spark-one { top: 8%; left: 2%; }
.spark-two { right: 1%; bottom: 15%; animation-delay: -.5s; }
.spark-three { top: 18%; right: 5%; animation-delay: -1s; }

.egg-field { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.egg, .confetti-egg { display: block; width: 1.05rem; aspect-ratio: .76; border-radius: 50% 50% 47% 47% / 60% 60% 40% 40%; background: linear-gradient(135deg, #fff7ce, var(--yellow) 54%, #f4a51f); box-shadow: inset -.16rem -.18rem 0 rgb(122 71 22 / .22); }
.egg { position: absolute; animation: egg-drift var(--speed, 13s) ease-in-out infinite alternate; }
.egg:nth-child(1) { top: 9%; left: 7%; --speed: 12s; }
.egg:nth-child(2) { top: 25%; left: 20%; --speed: 17s; transform: scale(.7) rotate(25deg); }
.egg:nth-child(3) { top: 12%; right: 11%; --speed: 14s; transform: scale(1.25) rotate(-18deg); }
.egg:nth-child(4) { top: 73%; left: 9%; --speed: 16s; transform: scale(1.4) rotate(24deg); }
.egg:nth-child(5) { top: 67%; right: 14%; --speed: 11s; transform: scale(.8) rotate(-21deg); }
.egg:nth-child(6) { top: 41%; left: 4%; --speed: 15s; transform: scale(.55); }
.egg:nth-child(7) { top: 43%; right: 4%; --speed: 12s; transform: scale(.62) rotate(22deg); }
.egg:nth-child(8) { top: 85%; left: 48%; --speed: 18s; transform: scale(.9) rotate(-9deg); }

.halo { position: absolute; z-index: -2; width: 38vmax; aspect-ratio: 1; border-radius: 50%; opacity: .32; filter: blur(5px); animation: drift 12s ease-in-out infinite alternate; }
.halo-one { background: var(--pink); transform: translate(-35vw, -22vh); }
.halo-two { right: 0; bottom: 0; background: var(--mint); animation-delay: -5s; }

.confetti-egg { position: absolute; top: 50%; left: 50%; z-index: 5; pointer-events: none; animation: egg-pop .9s cubic-bezier(.12,.83,.22,1) var(--delay) forwards; }
.is-celebrating .sticker-stage { animation: bob 2.7s ease-in-out infinite, party .5s ease-out; }

@keyframes bob { 50% { transform: translateY(-1.75vh); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blob { to { border-radius: 61% 39% 42% 58%; } }
@keyframes wiggle { 0%, 100% { transform: rotate(-2deg) scale(1); } 50% { transform: rotate(2deg) scale(1.035); } }
@keyframes twinkle { to { transform: scale(1.55) rotate(24deg); opacity: .35; } }
@keyframes drift { to { transform: translate(20vw, 15vh) scale(1.35); } }
@keyframes egg-drift { to { translate: 3rem -2rem; rotate: 24deg; } }
@keyframes egg-pop { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(0); } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--spin)); } }
@keyframes party { 30% { transform: rotate(-7deg) scale(1.08); } 65% { transform: rotate(7deg) scale(.98); } }

@media (max-width: 430px) { .sticker-button { width: min(84vw, 520px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }