/* Container */
.cr-egg-container {
  margin: 20px 0;
  position: relative;
  display: inline-block;
}

/* Egg wrapper */
.cr-egg {
  width: 420px; /* tweak to match your image */
  height: 480px; /* tweak to match your image */
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}

/* Base images */
.cr-egg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

/* Start state: show closed pot, hide cracked */
.cr-egg-img-closed {
  opacity: 1;
  z-index: 1;
}

.cr-egg-img-open {
  opacity: 0;
  z-index: 2;
}

/* When we add "cr-egg-open", swap images */
.cr-egg-open .cr-egg-img-closed {
  opacity: 0;
}

.cr-egg-open .cr-egg-img-open {
  opacity: 1;
}

/* Shake animation when cracking */
.cr-egg-cracking {
  animation: cr-egg-shake 0.6s ease-out;
}

@keyframes cr-egg-shake {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-12px);
  }
  40% {
    transform: translateX(12px);
  }
  60% {
    transform: translateX(-8px);
  }
  80% {
    transform: translateX(8px);
  }
  100% {
    transform: translateX(0);
  }
}