/* Custom animations and transitions */
@keyframes wave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(20deg); }
  75% { transform: rotate(-10deg); }
}

@keyframes spin_slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

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

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

.animate-wave {
  animation: wave 2s ease-in-out infinite;
}

.animate-spin_slow {
  animation: spin_slow 20s linear infinite;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* Fade in animation */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* Navigation styles */
.nav-link {
  @apply text-gray-700 hover:text-purple-600 transition-colors duration-300 font-medium;
}

.mobile-nav-link {
  @apply text-gray-700 hover:text-purple-600 transition-colors duration-300 font-medium text-lg py-2;
}

/* Button styles */
.cta-button {
  @apply group px-12 py-3 border rounded-full bg-gradient-to-r from-purple-600 to-orange-500 text-white flex items-center gap-2 hover:shadow-xl hover:scale-105 transition-all duration-300 font-semibold;
}

.secondary-button {
  @apply group px-12 py-3 border rounded-full border-gray-300 bg-white flex items-center gap-2 hover:bg-gray-50 hover:scale-105 hover:shadow-lg transition-all duration-300 font-semibold;
}

.social-link {
  @apply flex items-center gap-2 text-gray-600 hover:text-purple-600 transition-colors duration-300 font-medium;
}

/* Gradient text */
.gradient-text {
  @apply bg-gradient-to-r from-purple-600 via-blue-600 to-orange-500 bg-clip-text text-transparent;
}

/* Skill cards */
.skill-card {
  @apply border border-gray-200 rounded-2xl p-6 cursor-pointer hover:bg-gradient-to-br hover:from-purple-50 hover:to-orange-50 hover:-translate-y-2 hover:shadow-xl hover:border-purple-200 transition-all duration-500;
}

.skill-icon {
  @apply w-12 h-12 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300;
}

.skill-title {
  @apply my-4 font-semibold text-gray-700 font-Ovo transition-colors duration-300;
}

.skill-description {
  @apply text-gray-600 text-sm leading-relaxed;
}

/* Tool icons */
.tool-icon {
  @apply flex items-center justify-center w-12 sm:w-14 aspect-square border border-gray-300 rounded-xl cursor-pointer hover:-translate-y-2 hover:shadow-lg hover:border-purple-300 hover:bg-purple-50 transition-all duration-300;
}

/* Certification card */
.certification-card {
  @apply border-2 border-gray-100 flex md:flex-row flex-col justify-center items-center gap-10 py-8 rounded-3xl pt-10 bg-gradient-to-br from-purple-50 to-orange-50 shadow-lg hover:shadow-xl transition-shadow duration-300;
}

/* Experience cards */
.experience-card {
  @apply aspect-square bg-no-repeat bg-center bg-cover rounded-2xl border border-gray-300 relative cursor-pointer group hover:scale-105 hover:shadow-xl transition-all duration-300;
}

.experience-overlay {
  @apply bg-white/95 backdrop-blur-sm w-10/12 rounded-xl border border-gray-100 absolute bottom-5 left-1/2 -translate-x-1/2 py-4 px-5 flex items-center justify-between duration-500 group-hover:bottom-7 group-hover:shadow-lg;
}

.experience-icon {
  @apply w-10 h-10 bg-gradient-to-r from-purple-500 to-orange-500 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform duration-300;
}

/* Project cards */
.project-card {
  @apply group relative overflow-hidden aspect-square bg-no-repeat bg-cover bg-center rounded-2xl border border-gray-300 cursor-pointer hover:scale-105 hover:shadow-xl transition-all duration-300;
}

.project-card::before {
  @apply absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300;
  content: '';
}

.project-overlay {
  @apply absolute bottom-5 left-1/2 -translate-x-1/2 w-10/12 bg-white/95 backdrop-blur-sm rounded-xl p-4 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300 flex items-start justify-between border border-gray-100;
}

.project-icon {
  @apply w-10 h-10 bg-gradient-to-r from-purple-500 to-orange-500 rounded-full flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300;
}

.tech-tag {
  @apply px-2 py-1 text-xs rounded-full font-medium;
}

/* Form styles */
.form-group {
  @apply relative;
}

.form-input {
  @apply w-full p-4 pr-12 outline-none border-2 border-gray-200 rounded-xl bg-white focus:border-purple-500 focus:shadow-lg focus:ring-2 focus:ring-purple-100 transition-all duration-300;
}

.form-icon {
  @apply absolute inset-y-0 right-4 flex items-center pointer-events-none;
}

.submit-button {
  @apply group py-4 px-12 flex items-center justify-center gap-3 bg-gradient-to-r from-purple-600 to-orange-500 text-white rounded-full mx-auto hover:shadow-xl hover:scale-105 transition-all duration-300 font-semibold;
}

/* Footer styles */
.footer-social-link {
  @apply flex items-center gap-2 text-gray-600 hover:text-purple-600 transition-colors duration-300;
}

/* Responsive grid */
@media (min-width: 640px) {
  .grid-cols-auto {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #5a67d8 0%, #667eea 100%);
}

/* Smooth transitions for all elements */
* {
  transition-property: transform, opacity, box-shadow, background-color, border-color;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes shimmer {
  0% { 
    transform: translateX(-100%); 
  }
  100% { 
    transform: translateX(100%); 
  }
}

.animate-shimmer {
  animation: shimmer 2s ease-in-out infinite;
}

/* Optional: Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .animate-shimmer,
  .animate-pulse,
  .animate-bounce {
    animation: none;
  }
  
  .group-hover\:scale-105:hover {
    transform: none;
  }
}


/* Custom animations */
@keyframes bounce-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

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

@keyframes float-delayed {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
}

@keyframes pulse-delayed {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.3; }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wave {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  30% { transform: rotate(14deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
  60% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

/* Animation classes */
.animate-bounce-slow {
  animation: bounce-slow 3s ease-in-out infinite;
}

.animate-spin-slow {
  animation: spin-slow 8s linear infinite;
}

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

.animate-float-delayed {
  animation: float-delayed 4s ease-in-out infinite 2s;
}

.animate-pulse-delayed {
  animation: pulse-delayed 3s ease-in-out infinite 1s;
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out forwards;
  opacity: 0;
}

.animate-wave {
  animation: wave 2s ease-in-out infinite;
}

/* Animation delays */
.animation-delay-200 {
  animation-delay: 0.2s;
}

.animation-delay-400 {
  animation-delay: 0.4s;
}

.animation-delay-600 {
  animation-delay: 0.6s;
}

.animation-delay-800 {
  animation-delay: 0.8s;
}

.animation-delay-1000 {
  animation-delay: 1s;
}