/* ============================================================
   RIGEL Digital Solutions — animations.css
   ============================================================ */

/* ── Keyframes ─────────────────────────────────────────────── */

@keyframes meshMove1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(60px,-40px) scale(1.1); }
  66%     { transform: translate(-40px,60px) scale(0.95); }
}
@keyframes meshMove2 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(-80px,50px) scale(1.05); }
  66%     { transform: translate(50px,-60px) scale(1.1); }
}
@keyframes meshMove3 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(40px,80px) scale(0.9); }
}
@keyframes meshMove4 {
  0%,100% { transform: translate(0,0) scale(1); }
  40%     { transform: translate(-60px,-50px) scale(1.08); }
  80%     { transform: translate(70px,30px) scale(0.92); }
}

@keyframes gradientRotate {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

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

@keyframes shimmer {
  0%   { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX(300%) skewX(-15deg); }
}

@keyframes pulseGlow {
  0%,100% { box-shadow: 0 0 20px rgba(108,63,245,0.3); }
  50%     { box-shadow: 0 0 40px rgba(108,63,245,0.7), 0 0 80px rgba(0,212,255,0.2); }
}

@keyframes floatY {
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(-12px); }
}

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

@keyframes fadeSlideLeft {
  from { opacity:0; transform:translateX(-40px); }
  to   { opacity:1; transform:translateX(0); }
}

@keyframes scaleIn {
  from { opacity:0; transform:scale(0.85); }
  to   { opacity:1; transform:scale(1); }
}

@keyframes badgePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(108,63,245,0); }
  50%     { box-shadow: 0 0 0 8px rgba(108,63,245,0.12); }
}

@keyframes blinkCursor {
  0%,100% { opacity:1; }
  50%     { opacity:0; }
}

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

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

@keyframes ctaGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes waPulse {
  0%,100% { transform:translateY(0); box-shadow:0 4px 20px rgba(37,211,102,.4); }
  50%     { transform:translateY(-5px); box-shadow:0 12px 32px rgba(37,211,102,.6); }
}

@keyframes navbarIn {
  from { opacity:0; transform:translateY(-20px); }
  to   { opacity:1; transform:translateY(0); }
}

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

/* ── Mesh Background ───────────────────────────────────────── */
.mesh-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.mesh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
  opacity: 0.55;
}
.mesh-blob-1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(108,63,245,0.45) 0%, transparent 70%);
  top: -200px; right: -100px;
  animation: meshMove1 18s ease-in-out infinite;
}
.mesh-blob-2 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(0,212,255,0.35) 0%, transparent 70%);
  bottom: -150px; left: -100px;
  animation: meshMove2 22s ease-in-out infinite;
}
.mesh-blob-3 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,61,255,0.25) 0%, transparent 70%);
  top: 40%; left: 35%;
  animation: meshMove3 15s ease-in-out infinite;
}
.mesh-blob-4 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(108,63,245,0.2) 0%, transparent 70%);
  top: 60%; right: 10%;
  animation: meshMove4 20s ease-in-out infinite;
}

/* ── Reveal Animations ─────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.75s cubic-bezier(.22,1,.36,1), transform 0.75s cubic-bezier(.22,1,.36,1);
}
.reveal.revealed { opacity:1; transform:translateY(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.75s cubic-bezier(.22,1,.36,1), transform 0.75s cubic-bezier(.22,1,.36,1);
}
.reveal-left.revealed { opacity:1; transform:translateX(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.6s cubic-bezier(.22,1,.36,1), transform 0.6s cubic-bezier(.22,1,.36,1);
}
.reveal-scale.revealed { opacity:1; transform:scale(1); }

/* delay helpers */
.d1 { transition-delay:0.05s !important; }
.d2 { transition-delay:0.12s !important; }
.d3 { transition-delay:0.19s !important; }
.d4 { transition-delay:0.26s !important; }
.d5 { transition-delay:0.33s !important; }
.d6 { transition-delay:0.40s !important; }
.d7 { transition-delay:0.47s !important; }
.d8 { transition-delay:0.54s !important; }
.d9 { transition-delay:0.61s !important; }

/* ── Service card glow border ──────────────────────────────── */
.service-card-wrap {
  position: relative;
  border-radius: 18px;
  padding: 1.5px;
  background: rgba(255,255,255,0.06);
  transition: background 0.4s;
  overflow: hidden;
}
.service-card-wrap::before {
  content: '';
  position: absolute;
  inset: -100%;
  width: 300%; height: 300%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    #6C3FF5 60deg,
    #00D4FF 120deg,
    #FF3DFF 180deg,
    transparent 240deg
  );
  opacity: 0;
  transition: opacity 0.4s;
  animation: borderSpin 3s linear infinite paused;
  will-change: transform;
}
.service-card-wrap:hover::before {
  opacity: 1;
  animation-play-state: running;
}
.service-card-wrap:hover {
  background: transparent;
}

/* ── Button Shimmer ────────────────────────────────────────── */
.btn-shimmer {
  position: relative;
  overflow: hidden;
}
.btn-shimmer::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: translateX(-100%) skewX(-15deg);
}
.btn-shimmer:hover::after {
  animation: shimmer 0.6s ease forwards;
}

/* ── Float animation for hero graphic ─────────────────────── */
.float-anim { animation: floatY 4s ease-in-out infinite; }

/* ── Typing cursor ─────────────────────────────────────────── */
.typing-cursor {
  display: inline-block;
  width: 3px;
  height: 1.1em;
  background: #00D4FF;
  margin-left: 3px;
  vertical-align: middle;
  border-radius: 2px;
  animation: blinkCursor 1s step-end infinite;
}

/* ── Navbar entrance ───────────────────────────────────────── */
.navbar { animation: navbarIn 0.6s ease forwards; }

/* ── Logo marquee ──────────────────────────────────────────── */
.marquee-outer {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.marquee-track.fwd  { animation: logoScroll    35s linear infinite; }
.marquee-track.rev  { animation: logoScrollRev 42s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }

/* ── CTA gradient button ───────────────────────────────────── */
.btn-gradient-anim {
  background: linear-gradient(270deg, #6C3FF5, #00D4FF, #FF3DFF, #6C3FF5);
  background-size: 300% 300%;
  animation: ctaGradient 5s ease infinite;
}

/* ── Stats count up ────────────────────────────────────────── */
.stat-num.counting { animation: countUp 0.4s ease; }

/* ── WhatsApp float ────────────────────────────────────────── */
.wa-float { animation: waPulse 3s ease-in-out infinite; }