/* ============================================================
   VELIX CONSULTING — Animations Stylesheet
   Keyframes + scroll-reveal utilities. GPU-accelerated
   (transform / opacity only) for smooth 60fps performance.
   ============================================================ */

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

@keyframes float {
  0%,100% { transform: translateY(0) translateX(0); }
  50%     { transform: translateY(-18px) translateX(6px); }
}

@keyframes ping {
  0%   { transform: scale(1); opacity: .7; }
  75%,100% { transform: scale(2.4); opacity: 0; }
}

@keyframes ripple { to { transform: scale(3.2); opacity: 0; } }

@keyframes marquee { to { transform: translateX(-50%); } }

@keyframes loadbar {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(360%); }
}

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

@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}

/* Animated gradient mesh (hero / dark bands) */
@keyframes meshShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Slow drifting technology grid */
@keyframes gridPan {
  from { background-position: 0 0; }
  to   { background-position: 60px 60px; }
}

/* Floating geometric shapes */
@keyframes drift {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-30px) rotate(180deg); }
  100% { transform: translateY(0) rotate(360deg); }
}

/* Counter shimmer for stat underline */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Gentle pulse-glow */
@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(59,99,240,.4); }
  50%     { box-shadow: 0 0 0 14px rgba(59,99,240,0); }
}

/* ---------- Decorative layers ---------- */

/* Animated technology grid overlay */
.tech-grid-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(59,99,240,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,99,240,.06) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridPan 18s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

/* Animated gradient mesh */
.mesh-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background: linear-gradient(120deg, #eef4ff, #dbe7ff, #ede9ff, #e0f7ff, #eef4ff);
  background-size: 300% 300%;
  animation: meshShift 18s var(--ease) infinite;
}

/* Floating geometric shapes */
.shape { position: absolute; z-index: -1; opacity: .5; pointer-events: none; animation: drift 16s ease-in-out infinite; }
.shape.sq { border-radius: 12px; border: 2px solid rgba(59,99,240,.3); }
.shape.ci { border-radius: 50%; background: radial-gradient(circle, rgba(124,92,252,.25), transparent 70%); }
.shape.tr { width:0; height:0; border-left: 24px solid transparent; border-right: 24px solid transparent; border-bottom: 40px solid rgba(34,211,238,.25); }

/* Floating icon chips (decorative) */
.float-icon {
  position: absolute; width: 54px; height: 54px; border-radius: 16px;
  background: rgba(255,255,255,.85); backdrop-filter: blur(8px);
  border: 1px solid var(--border); box-shadow: var(--shadow-md);
  display: grid; place-items: center; color: var(--blue-500); font-size: 1.3rem;
  animation: float 7s var(--ease) infinite; z-index: 0;
}

/* Glowing particles handled in JS canvas; CSS fallback dot */
.glow-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan-400); box-shadow: 0 0 12px var(--cyan-400); animation: float 9s var(--ease) infinite; }

/* ---------- Scroll Reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].revealed { opacity: 1; transform: none; }

[data-reveal="left"]  { transform: translateX(-44px); }
[data-reveal="right"] { transform: translateX(44px); }
[data-reveal="zoom"]  { transform: scale(.9); }
[data-reveal="fade"]  { transform: none; }

/* Staggered children delays */
[data-stagger] > * { opacity: 0; transform: translateY(30px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
[data-stagger].revealed > * { opacity: 1; transform: none; }
[data-stagger].revealed > *:nth-child(1){ transition-delay: .05s; }
[data-stagger].revealed > *:nth-child(2){ transition-delay: .13s; }
[data-stagger].revealed > *:nth-child(3){ transition-delay: .21s; }
[data-stagger].revealed > *:nth-child(4){ transition-delay: .29s; }
[data-stagger].revealed > *:nth-child(5){ transition-delay: .37s; }
[data-stagger].revealed > *:nth-child(6){ transition-delay: .45s; }
[data-stagger].revealed > *:nth-child(7){ transition-delay: .53s; }
[data-stagger].revealed > *:nth-child(8){ transition-delay: .61s; }
[data-stagger].revealed > *:nth-child(9){ transition-delay: .69s; }
[data-stagger].revealed > *:nth-child(10){ transition-delay: .77s; }
[data-stagger].revealed > *:nth-child(11){ transition-delay: .85s; }
[data-stagger].revealed > *:nth-child(12){ transition-delay: .93s; }

/* Progress bars (animate width on reveal) */
.progress { height: 8px; border-radius: var(--r-pill); background: var(--ink-100); overflow: hidden; }
.progress > span { display: block; height: 100%; width: 0; border-radius: var(--r-pill); background: var(--grad-primary); transition: width 1.3s var(--ease-out); }
.progress-row { margin-bottom: 20px; }
.progress-row .plabel { display: flex; justify-content: space-between; font-size: .9rem; font-weight: 600; margin-bottom: 8px; color: var(--ink-700); }

/* Hover micro-interaction helpers */
.hover-lift { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.hover-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.hover-glow:hover { animation: glowPulse 1.4s var(--ease) infinite; }

/* Image soft-zoom wrapper */
.img-zoom { overflow: hidden; border-radius: var(--r-lg); }
.img-zoom img { transition: transform .7s var(--ease); }
.img-zoom:hover img { transform: scale(1.06); }

/* Page fade-in on load */
body { animation: fadeIn .6s var(--ease) both; }

/* Reduced motion: kill decorative loops */
@media (prefers-reduced-motion: reduce) {
  .tech-grid-bg, .mesh-bg, .shape, .float-icon, .glow-dot, .hero-orb,
  .hero-float, .marquee-track, .loader-ring, .loader-bar span { animation: none !important; }
  [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; }
}