.gradient-bg {
            background: linear-gradient(135deg, #000000 0%, #b8b3bd 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }
        .typing-animation {
            border-right: 2px solid #070707;
            animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
        }
        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }
        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: #667eea; }
        }
        .animate-fade-in-up {
            animation: fadeInUp 1s cubic-bezier(.23,1,.32,1) forwards;
        }
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(40px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .profile-image {
            width: 200px;
            height: 200px;
            object-fit: cover;
            border-radius: 50%;
            border: 4px solid white;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }


        /* Background gradient animation (optional) */
.gradient-bg {
  background: linear-gradient(-45deg, #0a0f1d, #16213e, #1a1a2e, #0f3460);
  background-size: 400% 400%;
  animation: gradientShift 12s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

#matrixCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}
/* Optional typing animation */
.typing-animation {
  border-right: 2px solid #fff;
  white-space: nowrap;
  overflow: hidden;
  animation: blink 0.8s step-end infinite alternate;
}

/* Smooth progress bar animation */
.bg-green-500 {
  transition: width 1s ease-in-out;
}


@keyframes blink {
  50% { border-color: transparent; }
}

.profile-image {
  position: relative;
  overflow: hidden;
}

.profile-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,255,136,0.05) 0px,
    rgba(0,255,136,0.05) 2px,
    transparent 2px,
    transparent 4px
  );
  background-size: 100% 4px;
  opacity: 0;
  animation: pixelSweep 6s infinite;
}

@keyframes pixelSweep {
  0%, 85%, 100% { transform: translateX(-100%); opacity: 0; }
  90% { transform: translateX(0); opacity: 1; filter: blur(0.8px) contrast(150%); }
  95% { transform: translateX(100%); opacity: 0; }
}