/* Animations for the Scrapbook Surprise Website */

/* Floating particles (hearts, stars, petals) */
@keyframes floatUp {
  0% {
    transform: translateY(100vh) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-10vh) translateX(var(--drift, 50px)) rotate(var(--rotation, 360deg));
    opacity: 0;
  }
}

/* Twinkling sparkles/stars */
@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Floating soft clouds */
@keyframes floatClouds {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(110vw); }
}

/* Heart Pulse for Countdown & Buttons */
@keyframes heartPulse {
  0% { transform: scale(1); }
  15% { transform: scale(1.15); }
  30% { transform: scale(1); }
  45% { transform: scale(1.15); }
  60% { transform: scale(1); }
  100% { transform: scale(1); }
}

/* Spinning Vinyl Record */
@keyframes spinVinyl {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Floating Music Notes */
@keyframes floatMusicNote {
  0% {
    transform: translate(0, 0) scale(0.5) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--dir-x, 80px), var(--dir-y, -120px)) scale(1.2) rotate(var(--rot, 45deg));
    opacity: 0;
  }
}

/* Sticky note entry animation */
@keyframes stickyPop {
  0% {
    transform: scale(0) rotate(-10deg);
    opacity: 0;
  }
  70% {
    transform: scale(1.1) rotate(var(--rotate, 3deg));
  }
  100% {
    transform: scale(1) rotate(var(--rotate, 3deg));
    opacity: 1;
  }
}

/* Sparkle click effect */
@keyframes clickSparkle {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

/* Envelope opening letter transition */
@keyframes letterSlideOut {
  0% {
    transform: translateY(0);
    z-index: 1;
  }
  50% {
    transform: translateY(-110%);
    z-index: 1;
  }
  100% {
    transform: translateY(-30%);
    z-index: 5;
  }
}

/* Page Transitions */
.page {
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.page.active {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

/* Envelope flap open */
@keyframes openFlap {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(180deg);
    z-index: 1;
  }
}

/* Typewriter cursor effect */
@keyframes blinkCursor {
  from, to { border-color: transparent }
  50% { border-color: var(--text-color); }
}