/* ============================================================
   ANIMATIONS.CSS — Keyframes & Global Animations
   ============================================================ */

/* ── Core Keyframes ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(60px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes slideLeft {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideRight {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Gate animations ── */
@keyframes gateOpenLeft {
  0%   { transform: perspective(1200px) rotateY(0deg); }
  100% { transform: perspective(1200px) rotateY(-120deg); }
}

@keyframes gateOpenRight {
  0%   { transform: perspective(1200px) rotateY(0deg); }
  100% { transform: perspective(1200px) rotateY(120deg); }
}

@keyframes ribbonFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  60%  { transform: translateY(60vh) rotate(15deg); opacity: 0.8; }
  100% { transform: translateY(100vh) rotate(25deg); opacity: 0; }
}

@keyframes ribbonSwing {
  0%, 100% { transform: rotate(-2deg) translateY(0px); }
  25%       { transform: rotate(2deg) translateY(-4px); }
  50%       { transform: rotate(-1.5deg) translateY(2px); }
  75%       { transform: rotate(1.5deg) translateY(-2px); }
}

@keyframes bowWiggle {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  50%       { transform: scaleX(1.04) scaleY(0.97); }
}

/* ── Birds ── */
@keyframes birdFly1 {
  0%   { transform: translate(0, 0) scaleX(1); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translate(40vw, -8vh) scaleX(1); }
  51%  { transform: translate(40vw, -8vh) scaleX(-1); }
  90%  { opacity: 1; }
  100% { transform: translate(-10vw, -16vh) scaleX(-1); opacity: 0; }
}

@keyframes birdFly2 {
  0%   { transform: translate(0, 0); opacity: 0; }
  15%  { opacity: 1; }
  50%  { transform: translate(35vw, -5vh); }
  100% { transform: translate(80vw, -14vh); opacity: 0; }
}

@keyframes birdFly3 {
  0%   { transform: translate(0, 0) scaleX(-1); opacity: 0; }
  20%  { opacity: 1; }
  60%  { transform: translate(-30vw, -10vh) scaleX(-1); }
  100% { transform: translate(-70vw, -5vh) scaleX(-1); opacity: 0; }
}

@keyframes birdWingFlap {
  0%, 100% { d: path('M0,0 Q5,-8 10,-2 Q15,-10 20,0'); }
  50%       { d: path('M0,0 Q5,3 10,0 Q15,4 20,0'); }
}

/* ── Falling elements (roses, leaves) ── */
@keyframes roseFall {
  0%   { transform: translateY(-10vh) rotate(0deg) scale(1); opacity: 0; }
  10%  { opacity: 0.9; }
  80%  { opacity: 0.7; }
  100% { transform: translateY(110vh) rotate(540deg) scale(0.8); opacity: 0; }
}

@keyframes leafFall {
  0%   { transform: translateY(-10vh) rotate(0deg) translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  30%  { transform: translateY(25vh) rotate(80deg) translateX(20px); }
  60%  { transform: translateY(55vh) rotate(200deg) translateX(-15px); }
  90%  { opacity: 0.6; }
  100% { transform: translateY(110vh) rotate(360deg) translateX(10px); opacity: 0; }
}

@keyframes petalFloat {
  0%   { transform: translateY(-5vh) rotate(0deg) translateX(0); opacity: 0; }
  10%  { opacity: 0.8; }
  40%  { transform: translateY(30vh) rotate(120deg) translateX(30px); }
  70%  { transform: translateY(65vh) rotate(240deg) translateX(-20px); }
  100% { transform: translateY(110vh) rotate(380deg) translateX(15px); opacity: 0; }
}

/* ── Countdown flip clock — 4-layer classic ── */
/* Top flap: starts flat, rotates down to -90° (edge-on = invisible) */
@keyframes fcFallTop {
  0%   { transform: rotateX(0deg);   box-shadow: 0 0 0 rgba(0,0,0,0); }
  50%  { box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
  100% { transform: rotateX(-90deg); box-shadow: 0 0 0 rgba(0,0,0,0); }
}

/* Bottom flap: starts edge-on (90°), rotates down to flat (0°) */
@keyframes fcRiseBottom {
  0%   { transform: rotateX(90deg);  box-shadow: 0 0 0 rgba(0,0,0,0); }
  50%  { box-shadow: 0 -6px 18px rgba(0,0,0,0.12); }
  100% { transform: rotateX(0deg);   box-shadow: 0 0 0 rgba(0,0,0,0); }
}

@keyframes digitPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ── Music pulse ── */
@keyframes musicPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(119,140,67,0.5), 0 0 0 0 rgba(119,140,67,0.4); }
  50%       { box-shadow: 0 8px 24px rgba(119,140,67,0.5), 0 0 0 12px rgba(119,140,67,0); }
}

/* ── Parallax leaves on hero ── */
@keyframes floatLeaf {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%       { transform: translate(8px, -12px) rotate(5deg); }
  50%       { transform: translate(15px, 0px) rotate(-3deg); }
  75%       { transform: translate(5px, 10px) rotate(8deg); }
}

/* ── Glow pulse ── */
@keyframes glowPulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.8; }
}

/* ── Shimmer ── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── Water wave ── */
@keyframes waterWave {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Confetti explosion ── */
@keyframes confettiPop {
  0%   { transform: translate(-50%,-50%) scale(0) rotate(0deg); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(1) rotate(var(--rot)); opacity: 0; }
}

/* ── Timeline dot pulse ── */
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(119,140,67,0.5); }
  50%       { box-shadow: 0 0 0 10px rgba(119,140,67,0); }
}

/* ── Bouquet sway ── */
@keyframes sway {
  0%, 100% { transform: rotate(-3deg); }
  50%       { transform: rotate(3deg); }
}

/* ── Video zoom in ── */
@keyframes heroZoom {
  0%   { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* ── Gate overlay fade out ── */
@keyframes gateFadeOut {
  0%   { opacity: 1; pointer-events: all; }
  100% { opacity: 0; pointer-events: none; }
}

/* ── Floating/bobbing ── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

/* ── Bounce ── */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* ── Spinner ── */
@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

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

/* ── Mailbox flag wiggle ── */
@keyframes flagWave {
  0%, 100% { transform: rotate(0deg) scaleY(1); }
  30%       { transform: rotate(-8deg) scaleY(0.95); }
  70%       { transform: rotate(5deg) scaleY(1.03); }
}

/* ── Envelope open ── */
@keyframes envelopeOpen {
  0%   { transform: scaleY(1) rotateX(0deg); }
  100% { transform: scaleY(0.3) rotateX(120deg); }
}

/* ── Stars twinkle ── */
@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%       { opacity: 1; transform: scale(1.3); }
}

/* ── Mountain parallax ── */
@keyframes cloudDrift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(40px); }
}

/* ── Constant Zoom (in and out) ── */
@keyframes constantZoom {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.1); }
}