/* Logo container stays the same */
.logo {
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
  }


  .logo-image {
    font-size: 60px;
    transition: font-size 0.4s ease, transform 0.4s ease;
    color: var(--ink);
    cursor: pointer;
    animation: slideDown 1s ease forwards, 
               softBounce 2.5s ease-in-out infinite 1s;
    transition: color 0.3s ease;
    padding: 10px;
    margin-top: 15px;
    margin-left: 20px;
  }
  
  
  @keyframes softBounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-6px); /* Small, elegant lift */
    }
  }
  
  
  /* Optional hover effect for refinement */
  .logo-image:hover {
    color: var(--accent-2);
  }

  header.shrunk .logo-image {
    font-size: 40px;
  }

  header.shrunk .logo {
    top: -10px;
  }
  
  @keyframes slideDown {
    from {
    opacity: 0;
    transform: translateY(-100px); 
    }
    to {
    opacity: 1;
    transform: translateY(0); 
    }
    }