.page-crease-shadow {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  opacity: 0.45;
  transition: opacity 0.5s ease;
}

.left-page .page-crease-shadow {
  background: var(--shadow-page-crease-left);
}

.right-page .page-crease-shadow {
  background: var(--shadow-page-crease-right);
}

.cover-front .page-crease-shadow,
.cover-back .page-crease-shadow {
  background: none;
}

.fold-shadow {
  position: absolute;
  top: 0;
  width: 40%;
  height: 100%;
  pointer-events: none;
  z-index: 15;
  opacity: 0;
}

.face.front .fold-shadow {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
  transform-origin: right center;
}

.face.back .fold-shadow {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
  transform-origin: left center;
}

.fold-highlight {
  position: absolute;
  top: 0;
  width: 25%;
  height: 100%;
  pointer-events: none;
  z-index: 16;
  opacity: 0;
}

.face.front .fold-highlight {
  left: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
  transform-origin: left center;
}

.face.back .fold-highlight {
  right: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
  transform-origin: right center;
}

.sheet.turning .face.front .fold-shadow {
  animation: front-fold-shadow var(--timing-page-turn) var(--easing-page-turn);
}

.sheet.turning .face.back .fold-shadow {
  animation: back-fold-shadow var(--timing-page-turn) var(--easing-page-turn);
}

.sheet.turning .face.front .fold-highlight {
  animation: front-fold-highlight var(--timing-page-turn) var(--easing-page-turn);
}

.sheet.turning .face.back .fold-highlight {
  animation: back-fold-highlight var(--timing-page-turn) var(--easing-page-turn);
}

@keyframes front-fold-shadow {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  30% {
    opacity: 0.7;
    transform: scaleX(1.8);
  }
  70% {
    opacity: 0.3;
    transform: scaleX(0.8);
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}

@keyframes back-fold-shadow {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  30% {
    opacity: 0.3;
    transform: scaleX(0.8);
  }
  70% {
    opacity: 0.7;
    transform: scaleX(1.8);
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}

@keyframes front-fold-highlight {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  30% {
    opacity: 0.4;
    transform: scaleX(1.5);
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}

@keyframes back-fold-highlight {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  70% {
    opacity: 0.4;
    transform: scaleX(1.5);
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0) rotate(0deg);
  }
  15% {
    transform: translateX(-0.8cqw) rotate(-1.5deg);
  }
  30% {
    transform: translateX(0.6cqw) rotate(1.2deg);
  }
  45% {
    transform: translateX(-0.4cqw) rotate(-0.8deg);
  }
  60% {
    transform: translateX(0.3cqw) rotate(0.6deg);
  }
  75% {
    transform: translateX(-0.15cqw) rotate(-0.3deg);
  }
}

.shake {
  animation: shake 0.6s ease-in-out;
}

@keyframes correct-pop {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.06);
    box-shadow: 0 0.6cqw 1.5cqw rgba(44, 114, 71, 0.4);
  }
  70% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
  }
}

.option-button.correct {
  animation: correct-pop 0.5s ease-in-out;
}

@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(1.5cqw) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.sheet.active .illustration {
  animation: fade-in-up 1.2s cubic-bezier(0.215, 0.610, 0.355, 1) both;
}

@keyframes dynamic-crease {
  0%, 100% {
    opacity: 0.45;
  }
  50% {
    opacity: 0.95;
  }
}

.sheet.turning .page-crease-shadow {
  animation: dynamic-crease var(--timing-page-turn) var(--easing-page-turn);
}

@keyframes dance-title {
  0%, 100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  25% {
    transform: translateY(-0.8cqw) scale(1.03) rotate(-1.5deg);
  }
  50% {
    transform: translateY(0.2cqw) scale(0.97) rotate(1.2deg);
  }
  75% {
    transform: translateY(-0.4cqw) scale(1.01) rotate(-0.8deg);
  }
}

.cover-title-image {
  animation: dance-title 4s ease-in-out infinite;
}

@keyframes pulse-start {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.08) rotate(1.5deg);
  }
}

.start-image {
  animation: pulse-start 2.2s ease-in-out infinite;
}

@keyframes dance-result {
  0%, 100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  25% {
    transform: translateY(-0.6cqw) scale(1.04) rotate(1.2deg);
  }
  50% {
    transform: translateY(0.3cqw) scale(0.96) rotate(-1deg);
  }
  75% {
    transform: translateY(-0.3cqw) scale(1.02) rotate(0.6deg);
  }
}

.result-text-image {
  animation: dance-result 3.5s ease-in-out infinite;
}

@keyframes smooth-elegant-pulse {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-0.5cqw) scale(1.02);
  }
}

.illustration.pulse-active {
  transition: none;
  animation: smooth-elegant-pulse 5s ease-in-out infinite;
}

@keyframes confetti-fall {
  0% {
    transform: translate3d(var(--x-start), var(--y-start), 0) rotate(0deg);
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--x-end), var(--y-end), 0) rotate(var(--rot-end));
    opacity: 0.6;
  }
}

.confetti-particle {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--width);
  height: var(--height);
  background-color: var(--color);
  border-radius: var(--radius);
  pointer-events: none;
  z-index: 1000;
  animation: confetti-fall var(--duration) cubic-bezier(0.1, 0.8, 0.25, 1) forwards;
}

.confetti-particle.rain {
  animation: confetti-rain-fall var(--duration) linear forwards;
}

@keyframes confetti-rain-fall {
  0% {
    transform: translate3d(var(--x-start), var(--y-start), 0) rotate(0deg);
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--x-end), var(--y-end), 0) rotate(var(--rot-end));
    opacity: 0.6;
  }
}

.wand-sparkle {
  position: fixed;
  background-color: var(--color);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1002;
  box-shadow: 0 0 8px var(--color), 0 0 15px var(--color);
}

@keyframes sparkle-fade {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(calc(var(--dx) * 0.5 + var(--curve-x, 0px)), calc(var(--dy) * 0.5 + var(--curve-y, 0px))) scale(0.65);
    opacity: 0.85;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(0);
    opacity: 0;
  }
}