/**
 * LinkCoo.asia - Micro-animations & Keyframes
 * Tối ưu hóa GPU (transform, opacity) theo Tiêu chí 3 (Performance)
 */

@keyframes floatOrb1 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(40px, -30px) scale(1.08);
  }
}

@keyframes floatOrb2 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-30px, 35px) scale(0.95);
  }
}

@keyframes pulseSubtle {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.03);
  }
}

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

@keyframes shineEffect {
  0% {
    transform: translateX(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(200%) rotate(45deg);
  }
}

/* Reusable animation utility classes */
.anim-fade-in-up {
  animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.orb-blue {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.18) 0%, rgba(2, 132, 199, 0.04) 70%, transparent 100%);
  top: -120px;
  left: 10%;
  animation: floatOrb1 14s ease-in-out infinite;
}

.orb-coral {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.14) 0%, rgba(251, 146, 60, 0.03) 70%, transparent 100%);
  top: 60px;
  right: 8%;
  animation: floatOrb2 16s ease-in-out infinite;
}

.orb-purple {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.12) 0%, rgba(139, 92, 246, 0.02) 70%, transparent 100%);
  bottom: -100px;
  left: 40%;
  animation: floatOrb1 18s ease-in-out infinite reverse;
}