:root {
  --rb-accent: #146ef5;
  --rb-accent-2: #00d722;
  --rb-ink: #080808;
}

[data-rb-dot-grid] {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.rb-dot-grid-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

[data-rb-magnet],
[data-rb-tilt] {
  transform: translate3d(var(--rb-x, 0), var(--rb-y, 0), 0)
    rotateX(var(--rb-rx, 0deg))
    rotateY(var(--rb-ry, 0deg));
  transition: transform 180ms cubic-bezier(.2, 0, .38, .9);
  will-change: transform;
}

[data-rb-tilt] {
  transform-style: preserve-3d;
}

.rb-glare {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--rb-gx, 50%) var(--rb-gy, 50%),
    rgba(255, 255, 255, .36),
    rgba(255, 255, 255, .08) 26%,
    transparent 54%
  );
  opacity: var(--rb-glare-opacity, 0);
  transition: opacity 140ms ease;
  mix-blend-mode: screen;
}

.rb-pixel {
  position: fixed;
  z-index: 999;
  width: 8px;
  height: 8px;
  pointer-events: none;
  background: var(--rb-pixel-color, var(--rb-accent));
  box-shadow: 8px 0 0 var(--rb-pixel-shadow, rgba(255, 255, 255, .85));
  animation: rb-pixel-pop 560ms steps(5, end) forwards;
}

@keyframes rb-pixel-pop {
  0% {
    opacity: .95;
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--rb-dx, 0), var(--rb-dy, -22px), 0) scale(.1);
  }
}

.rb-terminal {
  position: relative;
  isolation: isolate;
}

.rb-terminal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, transparent, rgba(20, 110, 245, .18), transparent);
  opacity: .18;
  mix-blend-mode: screen;
  animation: rb-terminal-scan 2.6s steps(5, end) infinite;
}

@keyframes rb-terminal-scan {
  0% {
    background-position: 0 -24px, -120px 0;
  }
  100% {
    background-position: 0 24px, 120px 0;
  }
}

.rb-pixel-reveal {
  position: relative;
  overflow: hidden;
}

.rb-pixel-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--rb-accent), transparent 42%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .9) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .55) 0 8px, transparent 8px 16px);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateX(-100%);
}

.rb-pixel-reveal.is-revealing::after {
  animation: rb-pixel-reveal 520ms steps(8, end);
}

@keyframes rb-pixel-reveal {
  0% {
    opacity: .92;
    transform: translateX(-100%);
  }
  72% {
    opacity: .58;
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

[data-rb-decrypt] {
  font-variant-ligatures: none;
}

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  [data-rb-magnet],
  [data-rb-tilt] {
    transform: none !important;
    transition: none !important;
  }

  .rb-pixel,
  .rb-terminal::after,
  .rb-pixel-reveal::after {
    display: none !important;
  }
}