/* Streaming message styles */

.typing-cursor {
  display: inline-block;
  animation: blink-cursor 1s infinite;
  margin-left: 2px;
  color: currentColor;
  opacity: 0.7;
}

@keyframes blink-cursor {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
/*


 */

:root {
  --font-sans: "Montserrat", sans-serif;
  --font-heading: "Space Grotesk", sans-serif;
  
  --text-phi-xs: 0.625rem;    /* 10px */
  --text-phi-sm: 0.8125rem;   /* 13px */
  --text-phi-base: 1rem;      /* 16px */
  --text-phi-lg: 1.625rem;    /* 26px */
  --text-phi-xl: 2.625rem;    /* 42px */
  --text-phi-2xl: 4.25rem;    /* 68px */
}

.text-phi-xs { font-size: var(--text-phi-xs); }
.text-phi-sm { font-size: var(--text-phi-sm); }
.text-phi-base { font-size: var(--text-phi-base); }
.text-phi-lg { font-size: var(--text-phi-lg); }
.text-phi-xl { font-size: var(--text-phi-xl); }
.text-phi-2xl { font-size: var(--text-phi-2xl); }

@keyframes scroll-logos {
  0% { transform: translateX(0); }
  100% { transform: translateX(var(--scroll-distance, -50%)); }
}

[data-controller="logo-carousel"] {
  width: 100%;
  overflow: hidden;
}

.logo-track {
  display: flex;
  gap: 4rem;
  animation: scroll-logos 25s linear infinite;
}

.logo-carousel-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%);
}

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }