/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--of-ease), transform 0.8s var(--of-ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
}

/* Marquee para logos / texto secundario */
.marquee {
  overflow: hidden;
  padding: var(--of-space-8) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  background: var(--of-gris-1);
  border-block: 1px solid var(--of-gris-2);
}

.marquee-track {
  display: flex;
  gap: var(--of-space-12);
  animation: of-marquee 40s linear infinite;
  width: max-content;
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: var(--of-space-3);
  font-family: var(--of-font-display);
  font-size: var(--of-fs-2xl);
  font-style: italic;
  color: var(--of-grafito);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.marquee-item .marquee-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--of-cyan);
  flex-shrink: 0;
}

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

/* Float */
@keyframes of-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.is-floating { animation: of-float 4s ease-in-out infinite; }
.is-floating-delay { animation: of-float 5s ease-in-out infinite 0.6s; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
}