/* ==========================================================================
   Ailygence Animation System - Micro-Interactions & Kinetic Polish
   High-performance GPU accelerated animations (60 FPS)
   Clean, Crisp Readability - Zero Awkward Opacity Dips
   ========================================================================== */

/* Keyframe Animations */
@keyframes orbBreathe {
  0% {
    transform: translateX(-50%) scale(0.96);
    opacity: 0.8;
  }
  100% {
    transform: translateX(-50%) scale(1.08);
    opacity: 1;
  }
}

@keyframes violetPulse {
  0%, 100% {
    box-shadow: 0 0 16px rgba(123, 43, 249, 0.25);
    border-color: rgba(143, 71, 255, 0.35);
  }
  50% {
    box-shadow: 0 0 28px rgba(123, 43, 249, 0.55);
    border-color: rgba(143, 71, 255, 0.7);
  }
}

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

@keyframes subtleRadar {
  0% {
    transform: scale(0.97);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.03);
    opacity: 1;
  }
  100% {
    transform: scale(0.97);
    opacity: 0.85;
  }
}

/* Utility Animation Classes */
.animate-pulse-violet {
  animation: violetPulse 3.5s infinite ease-in-out;
}

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

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

/* --------------------------------------------------------------------------
   Interactive Spotlight Hover Effect (Stripe/Linear Agency signature)
   -------------------------------------------------------------------------- */
.spotlight-card {
  position: relative;
  overflow: hidden;
  transition: transform 250ms var(--ease-out-expo), border-color 250ms ease, box-shadow 250ms ease;
}

.spotlight-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    400px circle at var(--mouse-x, -500px) var(--mouse-y, -500px),
    rgba(143, 71, 255, 0.15),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 250ms ease;
  pointer-events: none;
  z-index: 1;
}

.spotlight-card:hover::before {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Card & Element Micro-Hover Physics
   -------------------------------------------------------------------------- */
.card, .offering-card, .responsible-card, .atlas-card {
  transition: transform 260ms var(--ease-out-expo), border-color 260ms ease, box-shadow 260ms ease;
}

.card:hover, .offering-card:hover, .responsible-card:hover, .atlas-card:hover {
  transform: translateY(-4px);
}

/* --------------------------------------------------------------------------
   Interactive 3D Perspective Tilt on Hover
   -------------------------------------------------------------------------- */
.tilt-card {
  transition: transform 250ms var(--ease-out-expo), box-shadow 250ms var(--ease-out-expo);
  transform-style: preserve-3d;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   Pill & Badge Micro-Glow
   -------------------------------------------------------------------------- */
.badge-interactive {
  transition: all var(--transition-fast);
}

.badge-interactive:hover {
  background: var(--color-violet-tint);
  border-color: var(--color-violet-border);
  color: var(--color-violet-soft);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Accessibility: Reduced Motion Handling
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .spotlight-card::before {
    display: none !important;
  }
}