/* ================================================================
   MinusNow — Flowing Animations & Visual Enhancements v1
   Animated gradients, wave dividers, flowing backgrounds,
   seamless section transitions, particle effects
   ================================================================ */

/* === ANIMATED GRADIENT BACKGROUNDS === */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-12px) rotate(1deg); }
  66% { transform: translateY(6px) rotate(-1deg); }
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

@keyframes ripple {
  0% { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}

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

@keyframes rotateGradient {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.15); opacity: 1; }
}

@keyframes flowLine {
  0% { stroke-dashoffset: 1000; }
  100% { stroke-dashoffset: 0; }
}

/* === GLOBAL SMOOTH FLOW — NO GAPS === */
body {
  overflow-x: hidden;
}

.section {
  position: relative;
  overflow: hidden;
}

/* Remove hard borders between sections — seamless flow */
.section + .section {
  margin-top: -1px;
}

/* === HERO SECTION ENHANCEMENTS === */
.hero-v2 {
  position: relative;
  overflow: hidden;
}

/* Animated mesh gradient behind hero */
.hero-v2::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: 
    radial-gradient(ellipse at 20% 50%, rgba(220,38,38,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(249,115,22,0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(245,158,11,0.04) 0%, transparent 50%);
  animation: rotateGradient 60s linear infinite;
  pointer-events: none;
  z-index: 0;
}

/* Hero metric pulse animation */
.hero-v2-metric-value {
  position: relative;
}

/* Animated underline on hero title accent */
.hero-v2-title-accent {
  position: relative;
}

.hero-v2-title-accent::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #dc2626, #f97316, #f59e0b, #dc2626);
  background-size: 200% 100%;
  animation: gradientShift 4s ease infinite;
  border-radius: 2px;
}

/* === WAVE SECTION DIVIDERS === */
.wave-divider {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 80px;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}

.wave-divider.top {
  top: -1px;
}

.wave-divider.bottom {
  bottom: -1px;
}

.wave-divider svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* === SECTION FLOWING BACKGROUNDS === */

/* Gradient animated mesh for feature sections */
.features::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle 800px at 20% 30%, rgba(220,38,38,0.03), transparent),
    radial-gradient(circle 600px at 80% 70%, rgba(249,115,22,0.03), transparent),
    radial-gradient(circle 400px at 50% 50%, rgba(245,158,11,0.02), transparent);
  z-index: 0;
  pointer-events: none;
}

/* Flowing Orb Enhancements */
.hero-orb {
  animation: floatSlow 20s ease-in-out infinite !important;
}

.hero-orb:nth-child(2) {
  animation-delay: -7s !important;
  animation-duration: 25s !important;
}

.hero-orb:nth-child(3) {
  animation-delay: -14s !important;
  animation-duration: 30s !important;
}

/* === CARD HOVER EFFECTS — ENHANCED === */
.feat-v2-card,
.feature-card,
.pricing-card,
.testimonial-card,
.uniq-card,
.blueprint-v2-card,
.step-v2-card,
.qr-card {
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
  overflow: hidden;
}

/* Shimmer effect on card hover */
.feat-v2-card::after,
.feature-card::after,
.uniq-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.15),
    transparent
  );
  transition: none;
  pointer-events: none;
}

.feat-v2-card:hover::after,
.feature-card:hover::after,
.uniq-card:hover::after {
  animation: shimmer 0.8s ease-in-out;
}

/* Glow ring on featured pricing card */
.pricing-card.featured {
  position: relative;
}

.pricing-card.featured::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #dc2626, #f97316, #f59e0b, #dc2626);
  background-size: 300% 300%;
  animation: gradientShift 6s ease infinite;
  z-index: -1;
  opacity: 0.8;
}

/* === STATS SECTION — COUNTER ANIMATION ENHANCEMENT === */
.stats {
  position: relative;
  overflow: hidden;
}

.stats::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(220,38,38,0.08) 0%,
    rgba(249,115,22,0.05) 25%,
    transparent 50%,
    rgba(245,158,11,0.05) 75%,
    rgba(220,38,38,0.08) 100%
  );
  background-size: 200% 200%;
  animation: gradientShift 12s ease infinite;
  pointer-events: none;
}

.stat-value.gradient {
  background-size: 200% 200% !important;
  animation: gradientShift 4s ease infinite;
}

.stat-item {
  position: relative;
}

/* Divider lines between stat items */
.stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 25%;
  height: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.15), transparent);
}

/* === CTA SECTION ENHANCEMENTS === */
.cta, [class*="cta"] {
  position: relative;
}

/* Animated dot grid */
.cta::after {
  background-size: 32px 32px;
  animation: gradientShift 20s linear infinite;
}

/* === BUTTON ENHANCEMENTS === */
.btn-primary {
  position: relative;
  overflow: hidden;
  background-size: 200% 200% !important;
  animation: gradientShift 6s ease infinite;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: width 0.6s ease, height 0.6s ease, top 0.6s ease, left 0.6s ease;
}

.btn-primary:hover::before {
  width: 300px;
  height: 300px;
  top: calc(50% - 150px);
  left: calc(50% - 150px);
}

/* === ENHANCED FLOATING PARTICLES === */
.mn-particle {
  border-radius: 50%;
  position: absolute;
  pointer-events: none;
  width: 6px;
  height: 6px;
  animation: floatSlow 15s ease-in-out infinite;
}

.mn-particle--blue {
  background: rgba(59,130,246,0.4);
  box-shadow: 0 0 20px rgba(59,130,246,0.3);
}

.mn-particle--purple {
  background: rgba(139,92,246,0.4);
  box-shadow: 0 0 20px rgba(139,92,246,0.3);
}

.mn-particle--cyan {
  background: rgba(6,182,212,0.4);
  box-shadow: 0 0 20px rgba(6,182,212,0.3);
}

.mn-particle--emerald {
  background: rgba(16,185,129,0.4);
  box-shadow: 0 0 20px rgba(16,185,129,0.3);
}

/* === SMOOTH FADE-UP TRANSITIONS === */
.fade-up.fade-ready {
  opacity: 0 !important;
  transform: translateY(24px) !important;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.fade-up.fade-ready.visible {
  opacity: 1 !important;
  transform: none !important;
}

.fade-up.delay-1 { transition-delay: 0.15s !important; }
.fade-up.delay-2 { transition-delay: 0.3s !important; }
.fade-up.delay-3 { transition-delay: 0.45s !important; }

/* === SECTION HEADER ANIMATIONS === */
.section-eyebrow {
  position: relative;
  overflow: hidden;
}

.section-eyebrow::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: shimmer 3s ease-in-out infinite;
}

/* === ANIMATED GRADIENT TEXT === */
.hero-v2-title-accent,
.section-title .gradient-text,
h1 .gradient-text,
h2 .gradient-text {
  background-size: 200% 200% !important;
  animation: gradientShift 5s ease infinite;
}

/* === SCROLL INDICATOR === */
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(8px); opacity: 1; }
}

/* === FOOTER ENHANCEMENTS === */
.footer {
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220,38,38,0.3), rgba(249,115,22,0.3), rgba(245,158,11,0.3), transparent);
}

/* Footer social icons pulse on hover */
.footer-social a:hover {
  animation: pulseGlow 0.6s ease;
}

/* === SHOWCASE SECTION — FLOWING BG === */
.showcase {
  position: relative;
}

.showcase::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 10% 50%, rgba(74,174,155,0.04), transparent 40%),
    radial-gradient(circle at 90% 30%, rgba(103,114,229,0.03), transparent 40%);
  pointer-events: none;
}

/* === LIVE INDICATOR PULSE === */
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(22,163,106,0.4); }
  70% { box-shadow: 0 0 0 10px rgba(22,163,106,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,106,0); }
}

.hero-v2-badge-dot,
.hero-badge-dot {
  animation: livePulse 2s ease infinite !important;
}

/* === NAVIGATION ENHANCEMENTS === */
.nav {
  transition: all 0.3s ease !important;
}

.nav.scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,0.06) !important;
}

/* Nav dropdown entrance animation */
.nav-dropdown {
  transform: translateX(-50%) translateY(12px) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nav-item:hover .nav-dropdown {
  transform: translateX(-50%) translateY(0) !important;
}

/* === IMAGE & VISUAL ENHANCEMENTS === */
.showcase-visual {
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.showcase-visual:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}

/* Showcase visual row entrance */
.showcase-visual-row {
  transition: all 0.3s ease;
}

.showcase-visual-row:hover {
  transform: translateX(4px);
  background: rgba(0,0,0,0.02);
}

/* === PRICING CARD ENHANCED HOVER === */
.pricing-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 48px rgba(0,0,0,0.12) !important;
}

/* === IMPLEMENTATION BLUEPRINT CARDS === */
.blueprint-v2-card {
  transition: all 0.4s ease;
}

.blueprint-v2-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.1);
}

/* === RESPONSIVE ADJUSTMENTS === */
@media (max-width: 768px) {
  .hero-v2-title-accent::after {
    display: none;
  }
  
  .stat-item:not(:last-child)::after {
    display: none;
  }
  
  .wave-divider {
    height: 40px;
  }
}

/* === SMOOTH SCROLL PROGRESS BAR === */
@keyframes progressGrow {
  from { width: 0; }
  to { width: 100%; }
}

/* === PREFERS REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .hero-orb,
  .mn-particle {
    animation: none !important;
  }
}