::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #030712; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #334155; }

.bg-noise {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 50;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
}

.bg-grid {
  background-size: 50px 50px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #334155 #030712;
}

.sil-modal-panel {
  opacity: 0;
  transform: scale(.96) translateY(12px);
  transition: opacity 180ms ease, transform 180ms ease;
}

#sil-modal.is-open .sil-modal-panel {
  opacity: 1;
  transform: scale(1) translateY(0);
}

#sil-modal.is-open #sil-modal-backdrop {
  opacity: 1;
}

#sil-modal-backdrop {
  opacity: 0;
  transition: opacity 180ms ease;
}

.sil-input {
  width: 100%;
  background: #020617;
  border: 1px solid rgb(51 65 85);
  border-radius: 0.5rem;
  padding: 0.625rem 1rem;
  color: white;
  outline: none;
}

.sil-input:focus {
  border-color: transparent;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, .7);
}

#sil-project-form-wrap .sil-input:focus,
#sil-project-form-wrap .sil-input:focus-visible {
  box-shadow: 0 0 0 2px rgba(16, 185, 129, .7);
}

#sil-join-form-wrap .sil-input:focus,
#sil-join-form-wrap .sil-input:focus-visible {
  box-shadow: 0 0 0 2px rgba(168, 85, 247, .7);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}
