/* ═══════════════════════════════════════════════════
   Keyframe Animations
   ═══════════════════════════════════════════════════ */

/* --- Preloader --- */
@keyframes preloaderPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
}

.preloader-heart {
  animation: preloaderPulse 1s ease-in-out infinite;
}

/* --- Click hearts --- */
@keyframes clickHeartRise {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  50% {
    opacity: 0.8;
    transform: translate(var(--dx), -60px) scale(1.3) rotate(var(--rot));
  }
  100% {
    opacity: 0;
    transform: translate(var(--ddx), -130px) scale(0.6) rotate(var(--rot2));
  }
}

.click-heart {
  animation: clickHeartRise 1.5s ease-out forwards;
}

/* --- Rose petals --- */
@keyframes petalFall {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.8); }
  10% { opacity: 0.7; }
  90% { opacity: 0.5; }
  100% { opacity: 0; transform: translate(var(--drift), 110vh) rotate(var(--spin)) scale(0.4); }
}

/* --- General fades --- */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes softFadeIn {
  to { opacity: 0.9; }
}

@keyframes gentleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes gentlePulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* --- Stars --- */
@keyframes twinkle {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5); }
}

@keyframes moonGlow {
  0%, 100% { opacity: 0.2; filter: drop-shadow(0 0 8px rgba(232, 199, 119, 0.3)); }
  50% { opacity: 0.35; filter: drop-shadow(0 0 20px rgba(232, 199, 119, 0.5)); }
}

/* --- Hero name --- */
@keyframes nameReveal {
  0% { opacity: 0; transform: translateY(30px) scale(0.9); filter: blur(10px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes lineExpand {
  to { width: 60%; }
}

/* --- Scroll hint --- */
@keyframes scrollBounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50% { transform: rotate(45deg) translate(5px, 5px); }
}

/* --- Adjective tags --- */
@keyframes tagFadeIn {
  from { opacity: 0; transform: translateY(10px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Forever heading gradient --- */
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* --- Closing infinity --- */
@keyframes infinitySpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* --- Closing hearts --- */
@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.25); }
  30% { transform: scale(1); }
  45% { transform: scale(1.15); }
  60% { transform: scale(1); }
}

/* --- Typewriter cursor --- */
@keyframes blink {
  50% { opacity: 0; }
}

/* --- Greeting mode animations --- */
@keyframes greetNameReveal {
  0% { opacity: 0; transform: translateY(25px) scale(0.92); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes greetFadeIn {
  from { opacity: 0; }
  to { opacity: 0.9; }
}

@keyframes greetFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cardEntrance {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Greeting card border rotation --- */
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes borderRotate {
  to { --border-angle: 360deg; }
}

/* --- Atmosphere animations --- */
@keyframes sunriseBreath {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.06); }
}

@keyframes goldenPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes auroraDrift {
  0%, 100% { transform: translateX(-5%) skewX(-2deg); opacity: 0.5; }
  50% { transform: translateX(5%) skewX(2deg); opacity: 1; }
}

/* --- Shooting stars --- */
@keyframes shootingStar {
  0% { opacity: 0; transform: translate(0, 0); box-shadow: 0 0 4px 1px rgba(200, 220, 255, 0.6); }
  8% { opacity: 1; }
  100% { opacity: 0; transform: translate(250px, 160px); box-shadow: 0 0 2px 0px rgba(200, 220, 255, 0.2); }
}

/* --- Flowers / decorative elements --- */
@keyframes flowerBob {
  0%, 100% { transform: translateY(0) rotate(var(--fr)); }
  50% { transform: translateY(-10px) rotate(calc(var(--fr) + 6deg)); }
}

@keyframes flowerFadeIn {
  from { opacity: 0; transform: scale(0.4) translateY(10px); }
  to { opacity: var(--fo, 0.5); transform: scale(1) translateY(0); }
}

/* --- Fullscreen player --- */
@keyframes fullPlayerIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes discSpin {
  to { transform: rotate(360deg); }
}

/* --- Parallax clock --- */
@keyframes clockFadeIn {
  to { opacity: 1; }
}

@keyframes sepPulse {
  0%, 100% { opacity: 0.035; }
  50% { opacity: 0.065; }
}

/* --- Cursor trail --- */
@keyframes trailFade {
  0% { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.1) translateY(-20px); }
}

/* --- Name facts button --- */
@keyframes giftAppear {
  0% { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}