/* ==========================================================================
   Animations — keyframes, scroll reveal, transitions
   ========================================================================== */

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

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(14px, -18px) rotate(8deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.floating-paw--1 { animation: drift 9s ease-in-out infinite; }
.floating-paw--2 { animation: drift 11s ease-in-out infinite reverse; }
.floating-paw--3 { animation: drift 7.5s ease-in-out infinite; }

/* -- Scroll reveal: elements fade+rise into view once, via JS toggling .is-visible -- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-standard), transform 0.8s var(--ease-standard);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .floating-paw--1, .floating-paw--2, .floating-paw--3 {
    animation: none;
  }
  .scroll-cue { animation: none; }
}

/* -- RSVP followups expand -- */

.rsvp-followups {
  max-height: 0;
  opacity: 0;
  transition: max-height 0.6s var(--ease-standard), opacity 0.5s var(--ease-standard);
}

.rsvp-followups.is-open {
  max-height: 2000px;
  opacity: 1;
}

/* -- Confirmation swap -- */

.rsvp-form, .rsvp-confirmation {
  animation: fadeIn 0.5s var(--ease-standard);
}

/* -- Floral highlight shimmer (wedding section) --
   Gold ovals gently brighten to a light champagne gold and back, with a
   faint twinkle in scale/opacity. Speed is controlled by --shimmer-speed
   via the animation-duration calc() in layout.css. */
@keyframes shimmer {
  0%, 100% {
    fill: #e3a240;
    opacity: 0.55;
    transform: scale(0.9);
  }
  50% {
    fill: #ffe9c2;
    opacity: 1;
    transform: scale(1.15);
  }
}

@media (prefers-reduced-motion: reduce) {
  .flower-highlight circle,
  .flower-highlight ellipse {
    animation: none;
    fill: #e3a240;
    opacity: 0.8;
  }
}