/* ==========================================================================
   NIVIX STUDIO - ANIMATIONS & KEYFRAMES
   ========================================================================== */

@keyframes pulseGlow {
  0%, 100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(2deg);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

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

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Applied Animation Classes */
.animate-float {
  animation: floatSlow 6s ease-in-out infinite;
}

.animate-glow {
  animation: pulseGlow 4s ease-in-out infinite;
}

.fade-in-up {
  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Staggered Portfolio Card Appearance */
.portfolio-card {
  animation: scaleIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* Background Ambient Canvas */
#ambient-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.65;
}

/* Interactive Cursor Ambient Glow */
.cursor-glow {
  position: fixed;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 87, 34, 0.12) 0%, rgba(255, 145, 0, 0) 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  transition: width 0.3s, height 0.3s, opacity 0.3s;
  mix-blend-mode: screen;
}