@keyframes bubblePop {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.95;
  }
  30% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}
@keyframes moon {
  0% {
    transform: translate(-50%, calc(-50% + 20px)) scale(0.5) rotate(-45deg);
    opacity: 0;
  }
  25% {
    transform: translate(calc(-50% - 15px), calc(-50% - 10px)) scale(1.3) rotate(20deg);
    opacity: 1;
  }
  50% {
    transform: translate(calc(-50% + 15px), calc(-50% - 20px)) scale(1.1) rotate(-15deg);
  }
  75% {
    transform: translate(calc(-50% - 5px), calc(-50% - 25px)) scale(1.2) rotate(10deg);
  }
  100% {
    transform: translate(-50%, calc(-50% - 30px)) scale(1.1) rotate(0deg);
    opacity: 1;
  }
}
/* =========================================================================
   PERFECTLY CENTERED & INNER-INSET SEAMLESS STACK
   ========================================================================= */
.egg {
  position: relative !important;
  width: clamp(1.8rem, 2.5vw, 2.5rem);
  height: clamp(1.8rem, 2.5vw, 2.5rem);
  aspect-ratio: 1/1;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.egg .egg-box,
.egg .egg-cracked {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}
.egg {
  /* -------------------------------------------------------------------------
     LOCKED DEFAULT STATE & HOVER LOGIC
     ------------------------------------------------------------------------- */
}
.egg:not(.cracking):not(.unlocked) .egg-box:hover {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.05);
}
.egg:not(.cracking):not(.unlocked) .egg-cracked {
  z-index: 1;
  visibility: visible !important;
  transform: translate(-50%, -50%) scale(0.7);
  opacity: 0.8;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.egg {
  /* -------------------------------------------------------------------------
     CRACKING POP SEQUENCE
     ------------------------------------------------------------------------- */
}
.egg.cracking .egg-box {
  animation: bubblePop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.egg.cracking .egg-cracked {
  z-index: 3;
  opacity: 1 !important;
  visibility: visible !important;
  animation: moon 1.8s ease forwards;
}
.egg {
  /* -------------------------------------------------------------------------
     PERMANENT UNLOCKED STATE
     ------------------------------------------------------------------------- */
}
.egg.unlocked .egg-box,
.egg.unlocked .egg-cracked {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}
.egg.unlocked .egg-reward {
  opacity: 1;
  visibility: visible;
}/*# sourceMappingURL=eggs.css.map */