/* ════════════════════════════════════════════════════
   MOTION.CSS — Modern Animation Layer
   Injected on top of the preserved original theme.
   Compatible with Bootstrap 5.3.8 dark/light theme.
   ════════════════════════════════════════════════════ */

/* ── Scroll Reveal (staggered fade-up + slide-up) ── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delay utility classes */
.reveal-delay-1 { transition-delay: 0.05s; }
.reveal-delay-2 { transition-delay: 0.10s; }
.reveal-delay-3 { transition-delay: 0.15s; }
.reveal-delay-4 { transition-delay: 0.20s; }
.reveal-delay-5 { transition-delay: 0.25s; }
.reveal-delay-6 { transition-delay: 0.30s; }
.reveal-delay-7 { transition-delay: 0.35s; }
.reveal-delay-8 { transition-delay: 0.40s; }

/* Slide from left variant */
.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide from right variant */
.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale-up variant */
.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* ── Spring Button Animations ── */
.spring-btn {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}
.spring-btn:active {
  transform: scale(0.94);
}
.spring-btn:hover {
  transform: scale(1.04);
}

/* Bouncier variant for primary CTAs */
.spring-btn-bouncy {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.spring-btn-bouncy:active {
  transform: scale(0.92);
}
.spring-btn-bouncy:hover {
  transform: scale(1.06);
}

/* ── Parallax Layers ── */
.parallax-slow {
  will-change: transform;
}
.parallax-medium {
  will-change: transform;
}

/* ── Welcome Overlay Animation ── */
#welcome {
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
#welcome.welcome-hide {
  opacity: 0;
  filter: blur(8px);
  pointer-events: none;
}

/* ── Floating hearts (subtle, decorative) ── */
@keyframes floatUp {
  0% { transform: translateY(0) scale(0.4); opacity: 0; }
  15% { opacity: 0.7; }
  85% { opacity: 0.7; }
  100% { transform: translateY(-120px) scale(1); opacity: 0; }
}
.float-heart {
  position: absolute;
  pointer-events: none;
  animation: floatUp 4s ease-in forwards;
  font-size: 1rem;
  z-index: 10;
}

/* ── Progressive image reveal ── */
.img-reveal {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.img-reveal-loading {
  clip-path: inset(100% 0 0 0);
}

/* ── Pulse glow on couple image ring ── */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.3); }
  50% { box-shadow: 0 0 0 14px rgba(var(--bs-primary-rgb), 0); }
}
.couple-ring-glow {
  animation: pulseGlow 3s ease-in-out infinite;
}

/* ── Copy feedback ripple ── */
@keyframes copyRipple {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}
.copy-ripple {
  animation: copyRipple 0.6s ease-out forwards;
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  width: 20px; height: 20px;
  margin-top: -10px; margin-left: -10px;
  pointer-events: none;
}

/* ── Skeleton loading shimmer ── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    rgba(var(--bs-secondary-rgb), 0.1) 25%,
    rgba(var(--bs-secondary-rgb), 0.2) 50%,
    rgba(var(--bs-secondary-rgb), 0.1) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 0.5rem;
}

/* ── Section enter animation ── */
.section-appear {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.section-appear.in-view {
  opacity: 1;
  transform: translateY(0);
}