/* Keyframes from your React component */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes float {
      0%,100% { transform: translateY(0px) rotate(0deg); }
      50%     { transform: translateY(-20px) rotate(5deg); }
    }
    @keyframes blob {
      0%,100% { transform: translate(0,0) scale(1); }
      33%     { transform: translate(30px,-50px) scale(1.1); }
      66%     { transform: translate(-20px,20px) scale(0.9); }
    }
    @keyframes slideInRight {
      from { opacity: 0; transform: translateX(20px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes shimmer {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }

    .animate-blob { animation: blob 7s infinite; }
    .animation-delay-2000 { animation-delay: 2s; }
    .animation-delay-4000 { animation-delay: 4s; }

    /* small helper for reveal */
    .reveal { transition: all 0.9s ease; opacity: 0; transform: translateY(10px); }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    /* small shimmer overlay for skill bars */
    .shimmer {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0) 100%);
      animation: shimmer 2s ease-out infinite;
    }

    /* Mobile menu animation simple CSS fallback */
    @media (max-width: 767px) {
      .mobile-menu-enter { transform: translateX(20px); opacity: 0; }
      .mobile-menu-enter.show { transform: translateX(0); opacity: 1; transition: all .3s ease-out; }
    }

    /* Visual touches */
    .backdrop-blur-xl { backdrop-filter: blur(8px); }

        /* Keyframes from your React component */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes float {
      0%,100% { transform: translateY(0px) rotate(0deg); }
      50%     { transform: translateY(-20px) rotate(5deg); }
    }
    @keyframes blob {
      0%,100% { transform: translate(0,0) scale(1); }
      33%     { transform: translate(30px,-50px) scale(1.1); }
      66%     { transform: translate(-20px,20px) scale(0.9); }
    }
    @keyframes slideInRight {
      from { opacity: 0; transform: translateX(20px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes shimmer {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }
    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
      40% { transform: translateY(-10px) translateX(-50%); }
      60% { transform: translateY(-5px) translateX(-50%); }
    }

    .animate-blob { animation: blob 7s infinite; }
    .animation-delay-2000 { animation-delay: 2s; }
    .animation-delay-4000 { animation-delay: 4s; }

    /* small helper for reveal */
    .reveal { transition: all 0.9s ease; opacity: 0; transform: translateY(10px); }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    /* small shimmer overlay for skill bars */
    .shimmer {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0) 100%);
      animation: shimmer 2s ease-out infinite;
    }

    /* Mobile menu animation simple CSS fallback */
    @media (max-width: 767px) {
      .mobile-menu-enter { transform: translateX(20px); opacity: 0; }
      .mobile-menu-enter.show { transform: translateX(0); opacity: 1; transition: all .3s ease-out; }
    }

    /* Visual touches */
    .backdrop-blur-xl { backdrop-filter: blur(8px); }

        /* Keyframes from your React component */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes float {
      0%,100% { transform: translateY(0px) rotate(0deg); }
      50%     { transform: translateY(-20px) rotate(5deg); }
    }
    @keyframes blob {
      0%,100% { transform: translate(0,0) scale(1); }
      33%     { transform: translate(30px,-50px) scale(1.1); }
      66%     { transform: translate(-20px,20px) scale(0.9); }
    }
    @keyframes slideInRight {
      from { opacity: 0; transform: translateX(20px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes shimmer {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }
    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
      40% { transform: translateY(-10px) translateX(-50%); }
      60% { transform: translateY(-5px) translateX(-50%); }
    }

    .animate-blob { animation: blob 7s infinite; }
    .animation-delay-2000 { animation-delay: 2s; }
    .animation-delay-4000 { animation-delay: 4s; }

    /* small helper for reveal */
    .reveal { transition: all 0.9s ease; opacity: 0; transform: translateY(10px); }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    /* small shimmer overlay for skill bars */
    .shimmer {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0) 100%);
      animation: shimmer 2s ease-out infinite;
    }

    /* Mobile menu animation simple CSS fallback */
    @media (max-width: 767px) {
      .mobile-menu-enter { transform: translateX(20px); opacity: 0; }
      .mobile-menu-enter.show { transform: translateX(0); opacity: 1; transition: all .3s ease-out; }
    }

    /* Visual touches */
    .backdrop-blur-xl { backdrop-filter: blur(8px); }
    
    /* Enhanced skill bar styles */
    .skill-bar {
      transition: width 1.5s cubic-bezier(0.22, 0.61, 0.36, 1);
      position: relative;
      overflow: hidden;
    }
    
    .skill-percentage {
      transition: all 0.8s ease-out;
      opacity: 0;
      transform: translateY(10px);
    }
    
    .skill-percentage.visible {
      opacity: 1;
      transform: translateY(0);
    }
    
    .skill-item {
      transition: all 0.5s ease;
    }
    
    .skill-item:hover {
      transform: translateY(-5px);
    }