@layer utilities {
  .tonal-shift-bg {
    background-color: #f5f3f3;
  }
  .glass-effect {
    background: rgba(251, 249, 249, 0.8);
    backdrop-filter: blur(20px);
  }
  .ambient-shadow {
    box-shadow: 0 32px 32px -4px rgba(27, 28, 28, 0.06);
  }
  .animate-marquee {
    animation: scroll 40s linear infinite;
  }
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-250px * 6)); }
}

.logo-container:hover .animate-marquee {
  animation-play-state: paused;
}