/* Composio-matched motion */

@keyframes logoloop-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


.logoloop {
  position: relative;
  overflow: hidden;
  --logoloop-gap: 4rem;
  --logoloop-fade: #0f0f0f;
  width: 100%;
  max-width: 48rem;
  margin-inline: auto;
}
.logoloop__track {
  display: flex;
  width: max-content;
  animation: logoloop-scroll 36s linear infinite;
}
.logoloop:hover .logoloop__track {
  animation-play-state: paused;
}
.logoloop__list {
  display: flex;
  align-items: center;
  gap: var(--logoloop-gap);
  padding-right: var(--logoloop-gap);
}
.logoloop__item {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.logoloop--fade::before,
.logoloop--fade::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(24px, 12%, 80px);
  pointer-events: none;
  z-index: 2;
}
.logoloop--fade::before {
  left: 0;
  background: linear-gradient(to right, var(--logoloop-fade), transparent);
}
.logoloop--fade::after {
  right: 0;
  background: linear-gradient(to left, var(--logoloop-fade), transparent);
}

.hero__glow-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}
.hero__glow-blob--blue {
  top: 18%;
  left: -8%;
  width: 420px;
  height: 420px;
  background: var(--glow-blue);
}
.hero__glow-blob--purple {
  top: 22%;
  right: -6%;
  width: 380px;
  height: 380px;
  background: var(--glow-purple);
}

@media (prefers-reduced-motion: reduce) {
  .logoloop__track { animation: none; }
  .reveal { opacity: 1; transform: none; }
}