/* ===== Keyframe Animations ===== */
@keyframes heartPop {
  0%   { transform: scale(0.6) translate(0, 0); opacity: 0; }
  15%  { transform: scale(1.1) translate(0, -10px); opacity: 0.8; }
  30%  { transform: scale(0.9) translate(var(--x-offset, 0px), -30px); opacity: 0.7; }
  100% { transform: scale(1.0) translate(calc(var(--x-offset, 0px) * 2), -120px); opacity: 0; }
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes particleSubtleRise {
  0%   { transform: translateY(0); opacity: 0; }
  20%  { opacity: 0.25; }
  100% { transform: translateY(-160px); opacity: 0; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}
@keyframes revealUp {
  from { opacity: 0; transform: translateY(30px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes revealScale {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== Utility Classes ===== */
.animate-heart-pop       { animation: heartPop 2.1s ease-out forwards; }
.animate-marquee         { animation: marquee 60s linear infinite; }
.animate-particle-subtle { animation: particleSubtleRise 4s linear infinite; }
.animate-pulse-bg        { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }

/* ===== Scroll Reveal ===== */
.reveal, .reveal-scale {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;
  filter: blur(4px);
}
.reveal-scale {
  transform: scale(0.95);
}
.reveal.visible, .reveal-scale.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ===== FAQ Accordion ===== */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.35s ease;
}
.faq-answer.open {
  max-height: 500px;
  opacity: 1;
}
.faq-chevron {
  transition: transform 0.3s ease;
}
.faq-chevron.open {
  transform: rotate(180deg);
}

/* ===== Pulse Metric ===== */
.pulse-metric {
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.pulse-active {
  transform: scale(1.15);
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.3));
}
.pulse-active-pink {
  transform: scale(1.15);
  color: #ff007c;
  filter: drop-shadow(0 0 10px rgba(255,0,124,0.4));
}

/* ===== Mobile Menu ===== */
#mobile-menu {
  display: none !important;
}
#mobile-menu.open {
  display: block !important;
  animation: slideDown 0.25s ease forwards;
}
.hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: white;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}
#hamburger-btn.open .hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
#hamburger-btn.open .hamburger-line:nth-child(2) {
  opacity: 0;
}
#hamburger-btn.open .hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ===== Misc ===== */
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
body { overflow-x: hidden; }
::selection { background: #ff007c; color: white; }

/* ===== Responsive Helpers ===== */
/* Hero metrics bar — keep inside card on small screens */
.hero-metrics-bar {
  position: absolute;
  bottom: -48px;
  left: -12px;
  right: -12px;
  display: flex;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  z-index: 30;
}
@media (min-width: 1024px) {
  .hero-metrics-bar {
    bottom: -64px;
    left: -32px;
    right: -32px;
    gap: 12px;
  }
}

/* Comparison table scroll */
.comparison-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.comparison-scroll::-webkit-scrollbar {
  height: 4px;
}
.comparison-scroll::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
}
.comparison-scroll::-webkit-scrollbar-thumb {
  background: #ff007c;
  border-radius: 2px;
}

/* Flow step connector line */
.flow-connector {
  display: none;
}
@media (min-width: 1024px) {
  .flow-connector {
    display: block;
  }
}

/* Pricing standard plan scale */
@media (max-width: 1023px) {
  .pricing-featured {
    transform: none !important;
  }
}