@layer utilities {
    .scrollbar::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
  
    .scrollbar::-webkit-scrollbar-track {
      border-radius: 100vh;
      background: #f7f4ed;
    }
  
    .scrollbar::-webkit-scrollbar-thumb {
      background: #a0a0a0;
      border-radius: 100vh;
      border: 2px solid #f7f4ed;
    }
  
    .scrollbar::-webkit-scrollbar-thumb:hover {
      background: #888888;
    }

    @media (prefers-color-scheme: dark) {
        .scrollbar::-webkit-scrollbar-track {
            background: #2e2e2e;
        }
        .scrollbar::-webkit-scrollbar-thumb {
            background: #555555;
            border: 2px solid #2e2e2e;
        }
        .scrollbar::-webkit-scrollbar-thumb:hover {
            background: #444444;
        }
    }

    /* Organization cards entrance animation */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .fade-in-up { animation: fadeInUp 280ms ease-out both; }
    .org-card { will-change: opacity, transform; }
}