/* Vanilla-JS replacements for what Framer Motion / React handled in the Next.js version. */

html.js .reveal,
html.js .motion-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

html.js .reveal.in-view,
html.js .motion-reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.spin-slow {
  animation: spin-slow 5s linear infinite;
}

@keyframes spin-slow {
  to {
    transform: rotate(360deg);
  }
}

#navbar.is-scrolled {
  background-color: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(250, 250, 250, 0.16);
}

.nav-underline {
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 1px;
  background: #fafafa;
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .motion-reveal {
    transition-duration: 0.01ms;
  }
}