/* ==========================================================================
   animations.css: 3D Keyframe Animations, Tilt Effects & Hover Dynamics
   ========================================================================== */

/* Global Smooth Transitions */
body, .navbar, .card, .btn, .social-icon-btn, .form-control {
  transition: all var(--transition-normal);
}

a, .nav-link {
  transition: color var(--transition-fast);
}

/* 3D Hover Actions */
.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-hover) 0%, var(--accent) 100%);
  box-shadow: 0 14px 28px -6px rgba(37, 99, 235, 0.45), 0 0 15px var(--accent-glow);
  transform: translateY(-3px) translateZ(10px);
}

.btn-secondary:hover {
  background: #FFFFFF;
  border-color: var(--accent);
  color: var(--primary);
  box-shadow: 0 10px 22px -6px rgba(15, 23, 42, 0.12);
  transform: translateY(-3px) translateZ(10px);
}

.card:hover {
  border-color: var(--card-depth-border);
  box-shadow: var(--shadow-3d-hover);
}

.social-icon-btn:hover { 
  background: #FFFFFF; 
  border-color: var(--accent); 
  color: var(--primary); 
  transform: translateY(-4px) translateZ(15px) rotateY(10deg); 
  box-shadow: 0 10px 20px -4px rgba(37, 99, 235, 0.2);
}

/* Focus Actions */
.form-control:focus { 
  outline: none; 
  border-color: var(--accent); 
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15), 0 8px 16px -4px rgba(37, 99, 235, 0.1); 
  transform: translateY(-2px);
}

/* Nav Hover */
.nav-link:hover { color: var(--primary); }
.dropdown-content .dropdown-item:hover {
  background-color: rgba(37, 99, 235, 0.08); 
  color: var(--primary);
  transform: translateX(4px);
}

.nav-dropdown:hover .dropdown-content {
  display: block;
}

/* 3D Keyframe Animations */
@keyframes dropdown3D {
  0% {
    opacity: 0;
    transform: perspective(600px) rotateX(-15deg) translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: perspective(600px) rotateX(0deg) translateY(0);
  }
}

@keyframes float3D {
  0%, 100% {
    transform: translateY(0px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: translateY(-10px) rotateX(2deg) rotateY(-2deg);
  }
}

.float-3d {
  animation: float3D 6s ease-in-out infinite;
}