/* ==========================================================================
   ANIMATION & MICRO-INTERACTIONS STYLESHEET
   Mehedi Hasan - Premium 3D Portfolio
   ========================================================================== */

/* Keyframe Animations */
@keyframes pulseGlow {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 10px var(--accent-cyan);
  }
  50% {
    transform: scale(1.3);
    box-shadow: 0 0 20px var(--accent-cyan), 0 0 30px var(--accent-purple);
  }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

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

@keyframes spinGradient {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Custom Magnetic Cursor Styles */
.custom-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background-color: var(--accent-cyan);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, background-color 0.2s;
  box-shadow: 0 0 10px var(--accent-cyan);
}

.custom-cursor-follower {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(0, 245, 255, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease-out, width 0.3s, height 0.3s, border-color 0.3s;
}

body.hovering-link .custom-cursor-follower {
  width: 60px;
  height: 60px;
  border-color: var(--accent-purple);
  background: rgba(138, 43, 226, 0.08);
}

body.hovering-link .custom-cursor-dot {
  background-color: var(--accent-pink);
}

/* Floating element class */
.floating-element {
  animation: floatSlow 6s infinite ease-in-out;
}

/* Reveal Entrance Animations */
.reveal-hidden {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Tilt effect card styling */
.js-tilt {
  transform-style: preserve-3d;
  transform: perspective(1000px);
}