/* ==========================================================================
   HAMZA QUDRAT PORTFOLIO - #10B981 EMERALD GREEN ANIMATIONS
   ========================================================================== */

@keyframes emeraldPulseGlow {
  0%, 100% {
    opacity: 0.35;
    transform: scale(1);
    filter: drop-shadow(0 0 25px rgba(16, 185, 129, 0.35));
  }
  50% {
    opacity: 0.65;
    transform: scale(1.06);
    filter: drop-shadow(0 0 45px rgba(52, 211, 153, 0.65));
  }
}

@keyframes characterFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes auraSpin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.04);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes circleGlowPulse {
  0%, 100% {
    filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(52, 211, 153, 0.85));
  }
}

@keyframes circleRotateDash {
  0% {
    transform: rotate(-90deg);
  }
  50% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(630deg);
  }
}

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

.hamza-hero-glow {
  animation: emeraldPulseGlow 7s ease-in-out infinite;
}

.hamza-avatar-glow-halo {
  animation: auraSpin 18s linear infinite;
}

.hamza-floating-character {
  animation: characterFloat 4s ease-in-out infinite;
}

.hamza-3d-card-wrapper {
  perspective: 1200px;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Typewriter Cursor in Vibrant Emerald */
.hamza-typewriter-text::after {
  content: '|';
  display: inline-block;
  margin-left: 4px;
  color: #10B981;
  font-weight: 300;
  animation: typewriterBlink 0.9s infinite;
}

/* Animated Sleek Skill Circles */
.hamza-progress-svg {
  animation: circleGlowPulse 3s ease-in-out infinite;
}

.hamza-progress-circle {
  transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.hamza-skill-card:hover .hamza-progress-circle {
  filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.9));
}

/* 3D Card Hover Glare with Emerald light */
.hamza-service-card, .hamza-portfolio-card, .hamza-skill-card {
  position: relative;
  will-change: transform, box-shadow;
}

.hamza-service-card::after, .hamza-portfolio-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(16, 185, 129, 0.12),
    transparent
  );
  transform: skewX(-20deg);
  transition: 0.75s;
  pointer-events: none;
}

.hamza-service-card:hover::after, .hamza-portfolio-card:hover::after {
  left: 150%;
}