/* ============================================
   SUPPORTIXIT - Animations & Motion
   ============================================ */

/* ─── Blob Background ─── */
.blob-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.blob {
  position: absolute;
  border-radius: var(--r-full);
  filter: blur(80px);
  opacity: 0;
  animation: blob-appear 1s forwards, blob-float var(--blob-dur, 20s) ease-in-out infinite var(--blob-delay, 0s);
}

.blob-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(172, 209, 38, 0.18) 0%, transparent 70%);
  top: -150px;
  left: -100px;
  --blob-dur: 22s;
  --blob-delay: 0s;
  --blob-tx1: 40px;
  --blob-ty1: 60px;
  --blob-tx2: -20px;
  --blob-ty2: 30px;
}

.blob-2 {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(90, 70, 200, 0.18) 0%, transparent 70%);
  top: 100px;
  right: -200px;
  --blob-dur: 25s;
  --blob-delay: -5s;
  --blob-tx1: -60px;
  --blob-ty1: 80px;
  --blob-tx2: 30px;
  --blob-ty2: -40px;
}

.blob-3 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(230, 53, 53, 0.12) 0%, transparent 70%);
  bottom: 100px;
  left: 30%;
  --blob-dur: 18s;
  --blob-delay: -10s;
  --blob-tx1: 80px;
  --blob-ty1: -60px;
  --blob-tx2: -40px;
  --blob-ty2: 40px;
}

.blob-4 {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(50, 150, 255, 0.12) 0%, transparent 70%);
  bottom: -100px;
  right: 10%;
  --blob-dur: 30s;
  --blob-delay: -15s;
  --blob-tx1: -50px;
  --blob-ty1: -80px;
  --blob-tx2: 60px;
  --blob-ty2: 30px;
}

@keyframes blob-appear {
  to {
    opacity: 1;
  }
}

@keyframes blob-float {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(var(--blob-tx1), var(--blob-ty1)) scale(1.08);
  }

  66% {
    transform: translate(var(--blob-tx2), var(--blob-ty2)) scale(0.94);
  }
}

/* ─── Grid Dot Pattern ─── */
.blob-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(172, 209, 38, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

/* ─── Scroll-reveal Animations ─── */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-reveal="left"] {
  transform: translateX(-40px);
}

[data-reveal="right"] {
  transform: translateX(40px);
}

[data-reveal="scale"] {
  transform: scale(0.9) translateY(20px);
}

[data-reveal].revealed {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Stagger delays */
[data-delay="1"] {
  transition-delay: 0.1s;
}

[data-delay="2"] {
  transition-delay: 0.2s;
}

[data-delay="3"] {
  transition-delay: 0.3s;
}

[data-delay="4"] {
  transition-delay: 0.4s;
}

[data-delay="5"] {
  transition-delay: 0.5s;
}

[data-delay="6"] {
  transition-delay: 0.6s;
}

/* ─── Entrance Animation (hero) ─── */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  animation: fade-up 0.7s ease forwards;
}

.animate-fade-in {
  animation: fade-in 0.6s ease forwards;
}

.animate-slide-down {
  animation: slide-down 0.5s ease forwards;
}

.anim-delay-1 {
  animation-delay: 0.1s;
  opacity: 0;
}

.anim-delay-2 {
  animation-delay: 0.25s;
  opacity: 0;
}

.anim-delay-3 {
  animation-delay: 0.4s;
  opacity: 0;
}

.anim-delay-4 {
  animation-delay: 0.55s;
  opacity: 0;
}

.anim-delay-5 {
  animation-delay: 0.7s;
  opacity: 0;
}

/* ─── Pulse Glow ─── */
@keyframes pulse-glow {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(172, 209, 38, 0.2);
  }

  50% {
    box-shadow: 0 0 45px rgba(172, 209, 38, 0.45);
  }
}

@keyframes pulse-glow-red {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(230, 53, 53, 0.2);
  }

  50% {
    box-shadow: 0 0 45px rgba(230, 53, 53, 0.45);
  }
}

.pulse-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}

.pulse-glow-red {
  animation: pulse-glow-red 3s ease-in-out infinite;
}

/* ─── Float Animation (hero visual) ─── */
@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

/* ─── Shimmer (loading skeleton optional) ─── */
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 200% center;
  }
}

/* ─── Number Counter ─── */
@keyframes count-in {
  from {
    opacity: 0;
    transform: scale(0.5);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.counter-val {
  animation: count-in 0.5s ease forwards;
}

/* ─── Spinner ─── */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ─── WhatsApp Pulse ─── */
@keyframes wa-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
  }

  70% {
    box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* ─── Typewriter cursor ─── */
@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* ─── Gradient Text Shimmer ─── */
@keyframes gradient-shift {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

.gradient-text {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 30%, #fff 50%, var(--accent-light) 70%, var(--accent) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 4s ease infinite;
}

/* ─── Navbar Shrink ─── */
#navbar.scrolled {
  padding-block: 0.6rem;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}

/* ─── Mobile Menu ─── */
@keyframes menu-slide-in {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.mobile-menu.open {
  animation: menu-slide-in 0.25s ease forwards;
}

/* ─── Tooltip fade ─── */
@keyframes tooltip-fade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Progress Bar ─── */
#page-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  z-index: 9999;
  transition: width 0.1s ease;
  box-shadow: 0 0 10px var(--accent-glow);
}