.reveal {
  opacity: 1;
  transform: none;
}

@property --beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

html.js-enabled .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms ease, transform 520ms ease;
}

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

@keyframes gridDrift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 72px 72px;
  }
}

@keyframes blobFloat {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(44px, -34px, 0) scale(1.12);
  }
}

@keyframes heroOrb {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-28px, 20px, 0) scale(1.04);
  }
}

@keyframes borderBeam {
  to {
    --beam-angle: 360deg;
  }
}

@keyframes bannerShift {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

@keyframes nodePulse {
  0%,
  100% {
    box-shadow: 0 0 0 6px rgba(6, 182, 212, 0.06), 0 0 22px rgba(6, 182, 212, 0.28);
  }
  50% {
    box-shadow: 0 0 0 9px rgba(124, 58, 237, 0.08), 0 0 30px rgba(124, 58, 237, 0.28);
  }
}

@media (pointer: fine) {
  html.js-enabled body,
  html.js-enabled a,
  html.js-enabled button {
    cursor: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  .cursor-dot,
  .cursor-ring,
  .mouse-spotlight,
  .gradient-blob {
    display: none;
  }
}