/* ============================================
   Animations & Keyframes
   Modern Corporate Tech Theme
   ============================================ */

/* ---- Core Keyframes ---- */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

/* ---- Pulse for status indicators ---- */
@keyframes pulse-glow {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 4px rgba(53, 170, 242, 0.4);
  }
  50% {
    opacity: 0.7;
    box-shadow: 0 0 12px rgba(53, 170, 242, 0.6);
  }
}

/* ---- Floating elements ---- */
@keyframes float-subtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-8px) rotate(1deg); }
  66% { transform: translateY(4px) rotate(-1deg); }
}

/* ---- Soft breathing for orbs ---- */
@keyframes pulse-soft {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.05); }
}

/* ---- Grid pattern overlay ---- */
.grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(53, 170, 242, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 170, 242, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 0;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

/* ---- Circuit pattern (tech detail) ---- */
.circuit-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image:
    linear-gradient(90deg, transparent 49.5%, rgba(53, 170, 242, 0.06) 49.5%, rgba(53, 170, 242, 0.06) 50.5%, transparent 50.5%),
    linear-gradient(0deg, transparent 49.5%, rgba(53, 170, 242, 0.06) 49.5%, rgba(53, 170, 242, 0.06) 50.5%, transparent 50.5%);
  background-size: 120px 120px;
  mask-image: radial-gradient(ellipse at 50% 50%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 20%, transparent 70%);
}

/* ---- Decorative orbs ---- */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}

.orb--blue {
  width: 500px;
  height: 500px;
  background: rgba(53, 170, 242, 0.08);
  animation: pulse-soft 12s ease-in-out infinite;
}

.orb--green {
  width: 400px;
  height: 400px;
  background: rgba(97, 206, 112, 0.05);
  animation: pulse-soft 16s ease-in-out infinite reverse;
}

.orb--purple {
  width: 350px;
  height: 350px;
  background: rgba(124, 92, 252, 0.05);
  animation: pulse-soft 20s ease-in-out infinite;
}

/* ---- Gradient line decoration ---- */
.gradient-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent-cyan), var(--color-accent-green), transparent);
  opacity: 0.3;
}

/* ---- Reduce motion ---- */
@media (prefers-reduced-motion: reduce) {
  .orb,
  .orb--blue,
  .orb--green,
  .orb--purple,
  .hero__glow,
  .hero__pulse {
    animation: none;
  }
}