/* ══════════════════════════════════════════════════════════════════
   Vively Technology Solutions — Living Icon Design System (Whole Site)
   ══════════════════════════════════════════════════════════════════ */

/* SVG fill/stroke transform coordinate box */
[class*=" an-"], [class^="an-"],
.living-icon [class*=" an-"], .living-icon [class^="an-"] {
  transform-box: fill-box;
  transform-origin: center;
}

/* 1. Continuous Slow Spin (gears, atom rings, orbital hubs) */
.an-spin {
  animation: ispin 8s linear infinite;
}
.an-spin-f {
  animation: ispin 3.2s linear infinite;
}
.an-spin-rev {
  animation: ispin 9s linear infinite reverse;
}
@keyframes ispin {
  to { transform: rotate(360deg); }
}

/* 2. Gentle Pulse (AI sparkles, nodes, status beacons, shields) */
.an-pulse {
  animation: ipulse 3s ease-in-out infinite;
}
.an-pulse-fast {
  animation: ipulse 1.8s ease-in-out infinite;
}
@keyframes ipulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.22); opacity: 0.72; }
}

/* 3. Stepped Blink (status lights, terminal indicators) */
.an-blink {
  animation: iblink 3.5s steps(1) infinite;
}
@keyframes iblink {
  0%, 88%, 100% { opacity: 1; }
  92%, 96% { opacity: 0.2; }
}

/* 4. Flowing Dashed Lines (data streams, API connections, code paths) */
.an-flow {
  stroke-dasharray: 4 5;
  animation: iflow 1.8s linear infinite;
}
.an-flow-fast {
  stroke-dasharray: 3 4;
  animation: iflow 1.2s linear infinite;
}
.an-flow-rev {
  stroke-dasharray: 4 5;
  animation: iflow 1.8s linear infinite reverse;
}
@keyframes iflow {
  to { stroke-dashoffset: -9; }
}

/* 5. Gentle Vertical Bob (clouds, floating badges, rockets) */
.an-bob {
  animation: ibob 3.5s ease-in-out infinite;
}
.an-bob-slow {
  animation: ibob 5s ease-in-out infinite;
}
@keyframes ibob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3.5px); }
}

/* 6. Vertical Scale Wave (soundwaves, activity meters, charts) */
.an-wave {
  animation: iwave 2.6s ease-in-out infinite;
}
@keyframes iwave {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.6); }
}

/* 7. Horizontal Drift (checkout carts, transit lines) */
.an-cart {
  animation: icart 3.8s ease-in-out infinite;
}
@keyframes icart {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

/* 8. Circular Orbit (satellites, model nodes) */
.an-orbit {
  animation: iorbit 6s linear infinite;
}
@keyframes iorbit {
  to { transform: rotate(-360deg); }
}

/* Staggered animation delays for visual harmony */
.an-delay-1 { animation-delay: -0.6s; }
.an-delay-2 { animation-delay: -1.2s; }
.an-delay-3 { animation-delay: -1.8s; }
.an-delay-4 { animation-delay: -2.4s; }

/* Enhanced hover elevation on interactive cards */
.service-card:hover .an-spin,
.service-card:hover .an-spin-f,
.ai-cap-card:hover .an-spin {
  animation-duration: 4s;
}

.service-card:hover .an-flow,
.ai-cap-card:hover .an-flow {
  animation-duration: 1s;
}

.service-card:hover .an-pulse,
.ai-cap-card:hover .an-pulse {
  animation-duration: 1.5s;
}

/* Level C: Scoped interactive hover/focus elevation for secondary benefit and utility cards */
.motion-interactive svg,
.hl-item svg,
.why-card svg,
.profile-card svg,
.info-card svg,
.tech-card svg {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), filter 0.25s ease;
}

.hl-item:hover svg,
.hl-item:focus-within svg,
.why-card:hover svg,
.why-card:focus-within svg,
.profile-card:hover svg,
.profile-card:focus-within svg,
.info-card:hover svg,
.info-card:focus-within svg,
.tech-card:hover svg,
.tech-card:focus-within svg {
  transform: scale(1.06);
}

/* Accessibility: respect user reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .an-spin,
  .an-spin-f,
  .an-spin-rev,
  .an-pulse,
  .an-pulse-fast,
  .an-blink,
  .an-flow,
  .an-flow-fast,
  .an-flow-rev,
  .an-bob,
  .an-bob-slow,
  .an-wave,
  .an-cart,
  .an-orbit {
    animation: none !important;
  }
}