/* ==========================================
   HerValentine — Keyframes & Particle Styles
   ========================================== */

/* ---- Pulse ---- */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* ---- Glow pulse ---- */
@keyframes glowPulse {
  0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.2); }
}

/* ---- Gradient shift ---- */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---- Flicker (candles/chandelier) ---- */
@keyframes flicker {
  0% { opacity: 0.8; transform: scaleY(1); }
  25% { opacity: 1; transform: scaleY(1.05); }
  50% { opacity: 0.85; transform: scaleY(0.95); }
  75% { opacity: 1; transform: scaleY(1.02); }
  100% { opacity: 0.9; transform: scaleY(1); }
}

/* ---- Shimmer (water) ---- */
@keyframes shimmer {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}

/* ==========================================
   CANDLE FLAME SVG
   ========================================== */

@keyframes flame-svg-flicker {
  0%, 100% { opacity: 0.8; transform: scaleY(1) scaleX(1); }
  25% { opacity: 1; transform: scaleY(1.1) scaleX(0.95); }
  50% { opacity: 0.85; transform: scaleY(0.9) scaleX(1.05); }
  75% { opacity: 0.95; transform: scaleY(1.05) scaleX(0.98); }
}

.candle-flame-svg {
  animation: flame-svg-flicker 1.5s ease-in-out infinite alternate;
  transform-origin: center bottom;
}

/* ==========================================
   BIRD WING FLAP
   ========================================== */

@keyframes bird-flap {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.6); }
}

.bird-anim {
  animation: bird-flap 0.6s ease-in-out infinite;
}
.b-2 { animation-delay: 0.1s; }
.b-3 { animation-delay: 0.2s; }
.b-4 { animation-delay: 0.15s; }
.b-5 { animation-delay: 0.25s; }

/* ==========================================
   PARTICLE KEYFRAMES
   ========================================== */

/* ---- Floating heart ---- */
@keyframes floatHeart {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-250px) translateX(var(--drift, 20px)) rotate(var(--rotation, 15deg)) scale(0.3);
    opacity: 0;
  }
}

/* ---- Cherry petal fall ---- */
@keyframes petalFall {
  0% {
    transform: translateY(-20px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% { opacity: var(--petal-opacity, 0.7); }
  100% {
    transform: translateY(calc(100vh + 20px)) translateX(var(--sway, 60px)) rotate(var(--spin, 360deg));
    opacity: 0;
  }
}

/* ---- Sparkle ---- */
@keyframes sparkle {
  0% { transform: scale(0) rotate(0deg); opacity: 0; }
  50% { transform: scale(1) rotate(180deg); opacity: 1; }
  100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

/* ---- Firefly ---- */
@keyframes firefly {
  0%, 100% { opacity: 0; transform: translate(0, 0); }
  20% { opacity: 0.8; }
  50% { opacity: 1; transform: translate(var(--fx, 30px), var(--fy, -20px)); }
  80% { opacity: 0.6; }
}

/* ---- Shooting star ---- */
@keyframes shootingStar {
  0% { transform: translateX(0) translateY(0) rotate(-35deg); opacity: 0; }
  5% { opacity: 1; }
  70% { opacity: 0.6; }
  100% { transform: translateX(300px) translateY(200px) rotate(-35deg); opacity: 0; }
}

/* ---- Star twinkle ---- */
@keyframes twinkle {
  0%, 100% { opacity: var(--star-base, 0.3); }
  50% { opacity: var(--star-peak, 1); }
}

/* ---- Musical note float ---- */
@keyframes noteFloat {
  0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  15% { opacity: 0.7; }
  100% { transform: translateY(-200px) translateX(var(--note-drift, 40px)) rotate(var(--note-rotate, 20deg)); opacity: 0; }
}

/* ---- Butterfly ---- */
@keyframes butterflyFly {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(var(--bx1, 50px), var(--by1, -30px)) rotate(-5deg); }
  50% { transform: translate(var(--bx2, 100px), var(--by2, -10px)) rotate(3deg); }
  75% { transform: translate(var(--bx3, 150px), var(--by3, -40px)) rotate(-2deg); }
  100% { transform: translate(var(--bx4, 200px), var(--by4, -20px)) rotate(0deg); }
}

@keyframes butterflyWings {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.3); }
}

/* ---- Season leaf fall ---- */
@keyframes leafFall {
  0% { transform: translateY(-10px) translateX(0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.8; }
  100% { transform: translateY(calc(80vh)) translateX(var(--leaf-drift, 40px)) rotate(var(--leaf-spin, 180deg)); opacity: 0; }
}

/* ---- Snowfall ---- */
@keyframes snowfall {
  0% { transform: translateY(-10px) translateX(0); opacity: 0; }
  10% { opacity: 0.8; }
  100% { transform: translateY(calc(80vh)) translateX(var(--snow-drift, 30px)); opacity: 0; }
}

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

/* ---- Ambient bokeh float ---- */
@keyframes bokehFloat {
  0% { transform: translate(0, 0) scale(1); opacity: var(--bokeh-opacity, 0.3); }
  25% { transform: translate(var(--bokeh-dx1, 15px), var(--bokeh-dy1, -20px)) scale(1.1); }
  50% { transform: translate(var(--bokeh-dx2, -10px), var(--bokeh-dy2, -40px)) scale(0.9); opacity: calc(var(--bokeh-opacity, 0.3) * 1.5); }
  75% { transform: translate(var(--bokeh-dx3, 20px), var(--bokeh-dy3, -25px)) scale(1.05); }
  100% { transform: translate(0, 0) scale(1); opacity: var(--bokeh-opacity, 0.3); }
}

/* ---- Ambient heart drift ---- */
@keyframes ambientHeartDrift {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  15% { opacity: var(--ah-opacity, 0.3); }
  85% { opacity: var(--ah-opacity, 0.3); }
  100% { transform: translateY(var(--ah-dy, -150px)) translateX(var(--ah-dx, 20px)) scale(0.6); opacity: 0; }
}

/* ==========================================
   Particle element styles
   ========================================== */

.floating-heart {
  position: absolute;
  bottom: 0;
  pointer-events: none;
  animation: floatHeart var(--duration, 4s) var(--delay, 0s) ease-out forwards;
  will-change: transform, opacity;
}

.floating-heart svg {
  width: var(--size, 20px);
  height: var(--size, 20px);
}

.cherry-petal {
  position: absolute;
  top: -10px;
  width: var(--petal-size, 12px);
  height: var(--petal-size, 12px);
  border-radius: 50% 0 50% 0;
  transform-origin: center center;
  pointer-events: none;
  animation: petalFall var(--fall-duration, 6s) var(--fall-delay, 0s) linear forwards;
  will-change: transform, opacity;
}

.sparkle {
  position: absolute;
  width: var(--spark-size, 6px);
  height: var(--spark-size, 6px);
  pointer-events: none;
  animation: sparkle var(--spark-duration, 1.5s) var(--spark-delay, 0s) ease-in-out forwards;
  will-change: transform, opacity;
}

.sparkle::before,
.sparkle::after {
  content: '';
  position: absolute;
  background: var(--spark-color, #FFE5B4);
}

.sparkle::before {
  width: 100%;
  height: 2px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.sparkle::after {
  width: 2px;
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.firefly {
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, rgba(255, 229, 180, 0.9) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: firefly var(--ff-duration, 4s) var(--ff-delay, 0s) ease-in-out infinite;
  box-shadow: 0 0 6px rgba(255, 229, 180, 0.5);
  will-change: transform, opacity;
}

.star {
  position: absolute;
  width: var(--star-size, 3px);
  height: var(--star-size, 3px);
  background: rgba(255, 255, 255, var(--star-peak, 0.8));
  border-radius: 50%;
  animation: twinkle var(--twinkle-dur, 3s) var(--twinkle-delay, 0s) ease-in-out infinite;
}

.shooting-star {
  position: absolute;
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.8), transparent);
  border-radius: 2px;
  animation: shootingStar 1.5s ease-out forwards;
  opacity: 0;
}

.music-note {
  position: absolute;
  font-size: var(--note-size, 20px);
  color: rgba(255, 215, 0, 0.6);
  pointer-events: none;
  animation: noteFloat var(--note-dur, 4s) var(--note-delay, 0s) ease-out forwards;
  will-change: transform, opacity;
}

.butterfly {
  position: absolute;
  pointer-events: none;
  animation: butterflyFly var(--bf-dur, 6s) var(--bf-delay, 0s) ease-in-out forwards;
  will-change: transform;
}

.butterfly-wing {
  display: inline-block;
  width: 10px;
  height: 14px;
  border-radius: 50%;
  animation: butterflyWings 0.3s ease-in-out infinite;
}

.butterfly-wing.left {
  background: rgba(255, 182, 193, 0.7);
  margin-right: -3px;
}

.butterfly-wing.right {
  background: rgba(255, 209, 220, 0.7);
  margin-left: -3px;
  animation-delay: 0.05s;
}

.leaf-particle {
  position: absolute;
  top: -10px;
  pointer-events: none;
  animation: leafFall var(--leaf-dur, 5s) var(--leaf-delay, 0s) ease-in forwards;
  will-change: transform, opacity;
}

.snow-particle {
  position: absolute;
  top: -10px;
  width: var(--snow-size, 5px);
  height: var(--snow-size, 5px);
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  pointer-events: none;
  animation: snowfall var(--snow-dur, 5s) var(--snow-delay, 0s) linear forwards;
  will-change: transform, opacity;
}

.typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--text);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink 0.8s ease-in-out infinite;
}

.bokeh-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: bokehFloat var(--bokeh-dur, 8s) var(--bokeh-delay, 0s) ease-in-out infinite;
  will-change: transform, opacity;
}

.ambient-heart {
  position: absolute;
  pointer-events: none;
  animation: ambientHeartDrift var(--ah-dur, 10s) var(--ah-delay, 0s) ease-in-out infinite;
  will-change: transform, opacity;
}

.ambient-heart svg {
  width: var(--ah-size, 16px);
  height: var(--ah-size, 16px);
}

/* ---- Scroll indicator bounce ---- */
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.8; }
  50% { transform: translateY(10px); opacity: 1; }
}