/* Custom CSS for animations and effects */
/* Custom cursor styles */
html {
    cursor: none;
  }
  
  .custom-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgba(59, 130, 246, 0.5);
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
    transition: transform 0.1s ease, width 0.2s ease, height 0.2s ease;
  }
  
  .cursor-follower {
    position: fixed;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(99, 102, 241, 0.3);
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: transform 0.6s ease, width 0.4s ease, height 0.4s ease;
  }
  
  .cursor-hover {
    transform: scale(2);
    background-color: rgba(59, 130, 246, 0.7);
  }
  
  /* Ensure no global opacity: 0 is hiding content */
  body {
      transition: background-color 0.3s ease;
  }
  
  /* Card Hover Effect */
  .card-hover {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  }
  
  .card-hover:hover {
    transform: translateY(-2px);
  }
  .skill-bar {
      transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .experience-toggle {
      transition: background-color 0.3s ease;
  }
  
  .experience-toggle:hover {
      background-color: #f8fafc;
  }
  
  .experience-content {
      overflow: hidden;
      will-change: height, opacity;
  }
  
  /* --- Existing Animations --- */
  .fade-in {
      animation: fadeIn 0.8s ease-in forwards;
  }
  @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
  }
  .float {
      animation: float 6s ease-in-out infinite;
  }
  @keyframes float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-15px); }
      100% { transform: translateY(0px); }
  }
  .pulse {
      animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
  }
  .rotate {
      animation: rotate 10s linear infinite;
  }
  @keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
  }
  
  /* Animation initial state for Project cards */
  .project-card-animate {
      opacity: 0;
      /* This starting transform matches the anime.js animation */
      transform: translateY(100px); 
  }
  
  /* --- New Animations --- */
  
  /* Slide-in from the left */
  .slide-in-left {
      animation: slideInLeft 0.7s ease-out forwards;
  }
  @keyframes slideInLeft {
      from { opacity: 0; transform: translateX(-50px); }
      to { opacity: 1; transform: translateX(0); }
  }
  
  /* Spin Once - useful for quick clicks or success states */
  .spin-once {
      animation: spinOnce 0.5s ease-out;
  }
  @keyframes spinOnce {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }