/* ═══════════════════════════════════════════════════════════════
   SS BUILDERS MVS — Keyframe Animations
   ═══════════════════════════════════════════════════════════════ */

/* ── Blueprint Grid Draw ──────────────────────────────────────── */
@keyframes blueprintDraw {
  0% {
    stroke-dashoffset: 1000;
    opacity: 0;
  }
  30% {
    opacity: 0.4;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0.15;
  }
}

@keyframes blueprintFade {
  0%, 100% { opacity: 0.05; }
  50% { opacity: 0.12; }
}

/* ── Pulse ─────────────────────────────────────────────────────── */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 143, 124, 0.5);
  }
  50% {
    box-shadow: 0 0 20px 10px rgba(245, 143, 124, 0);
  }
}

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

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

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

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

/* ── Glow ──────────────────────────────────────────────────────── */
@keyframes glowPulse {
  0%, 100% {
    filter: drop-shadow(0 0 5px rgba(245, 143, 124, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(245, 143, 124, 0.6));
  }
}

@keyframes glowLine {
  0% {
    stroke-dashoffset: 2000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* ── Route Animation ──────────────────────────────────────────── */
@keyframes routeDraw {
  0% {
    stroke-dashoffset: 2000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

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

@keyframes routeGlow {
  0%, 100% {
    opacity: 0.3;
    filter: blur(2px);
  }
  50% {
    opacity: 0.8;
    filter: blur(4px);
  }
}

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

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

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

/* ── Scale Bounce ──────────────────────────────────────────────── */
@keyframes scaleBounce {
  0% { transform: scale(0); }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* ── Star Rating ───────────────────────────────────────────────── */
@keyframes starFill {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.2) rotate(10deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* ── Counter ───────────────────────────────────────────────────── */
@keyframes counterPop {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ── Gradient Background Animation ─────────────────────────────── */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes heroGradient {
  0% {
    opacity: 0.3;
    transform: translate(-10%, -10%) scale(1.2);
  }
  50% {
    opacity: 0.5;
    transform: translate(5%, 5%) scale(1.1);
  }
  100% {
    opacity: 0.3;
    transform: translate(-10%, -10%) scale(1.2);
  }
}

/* ── Particle Float ────────────────────────────────────────────── */
@keyframes particleFloat {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-100px) rotate(720deg);
    opacity: 0;
  }
}

/* ── Line Scan ─────────────────────────────────────────────────── */
@keyframes lineScan {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    opacity: 0.1;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

/* ── Slide In ──────────────────────────────────────────────────── */
@keyframes slideInUp {
  0% {
    transform: translateY(60px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInDown {
  0% {
    transform: translateY(-60px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  0% {
    transform: translateX(-60px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  0% {
    transform: translateX(60px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ── Fade ───────────────────────────────────────────────────────── */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeInBlur {
  0% {
    opacity: 0;
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

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

/* ── Marquee ───────────────────────────────────────────────────── */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Geometric Shapes ──────────────────────────────────────────── */
@keyframes morphShape {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  25% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
  50% {
    border-radius: 50% 60% 30% 60% / 30% 40% 70% 60%;
  }
  75% {
    border-radius: 40% 60% 60% 40% / 60% 40% 40% 60%;
  }
}

/* ── Spin Border ───────────────────────────────────────────────── */
@keyframes spinBorder {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ── Wave ───────────────────────────────────────────────────────── */
@keyframes wave {
  0%, 100% { transform: scaleY(0.5); }
  50% { transform: scaleY(1.5); }
}

/* ── Map Pin Drop ──────────────────────────────────────────────── */
@keyframes pinDrop {
  0% {
    transform: translateY(-40px);
    opacity: 0;
  }
  60% {
    transform: translateY(5px);
    opacity: 1;
  }
  80% {
    transform: translateY(-3px);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ── Tooltip Appear ────────────────────────────────────────────── */
@keyframes tooltipAppear {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Quote Mark Animation ──────────────────────────────────────── */
@keyframes quoteReveal {
  0% {
    transform: scale(0) rotate(-30deg);
    opacity: 0;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.15;
  }
}

/* ── Carousel Slide ────────────────────────────────────────────── */
@keyframes carouselSlideIn {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes carouselSlideOut {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-100px);
    opacity: 0;
  }
}