[data-fx~='noise']::after {
  content: '';
  position: absolute;
  inset: -100%;
  z-index: var(--rb-noise-z, 3);
  pointer-events: none;
  opacity: var(--rb-noise-op, 0.055);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: rb-noise 0.6s steps(3) infinite;
}
body[data-fx~='noise']::after {
  position: fixed;
  inset: 0;
  z-index: 9998;
}
@keyframes rb-noise {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-3%, 2%); }
  66% { transform: translate(2%, -3%); }
  100% { transform: translate(0, 0); }
}

[data-fx~='gradual-blur'] {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--rb-blur-h, 120px);
  pointer-events: none;
  z-index: var(--rb-blur-z, 5);
  bottom: 0;
  -webkit-backdrop-filter: blur(var(--rb-blur, 10px));
  backdrop-filter: blur(var(--rb-blur, 10px));
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, transparent 100%);
}
[data-fx~='gradual-blur'][data-pos='top'] {
  top: 0;
  bottom: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
}

[data-fx~='glass'] {
  position: relative;
  background: var(--rb-glass-bg, rgba(255, 255, 255, 0.06));
  -webkit-backdrop-filter: blur(var(--rb-glass-blur, 16px)) saturate(1.6);
  backdrop-filter: blur(var(--rb-glass-blur, 16px)) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--rb-radius, 18px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

[data-fx~='glass']::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 40%);
}

[data-fx~='scroll-stack'] > * {
  position: sticky;
  top: var(--rb-stack-top, 90px);
  border-radius: var(--rb-radius, 22px);
  transform-origin: top center;
  transition: transform 0.35s ease, filter 0.35s ease;
  margin-bottom: var(--rb-stack-gap, 26px);
}
[data-fx~='scroll-stack'] > *.rb-stacked {
  transform: scale(var(--rb-stack-scale, 0.955));
  filter: brightness(0.72);
}

[data-fx~='magnet-lines'] {
  display: grid;
  place-items: center;
  gap: var(--rb-ml-gap, 6px);
}
[data-fx~='magnet-lines'] i {
  display: block;
  width: var(--rb-ml-w, 3px);
  height: var(--rb-ml-h, 26px);
  border-radius: 999px;
  background: var(--rb-ml-color, var(--rb-accent));
  opacity: var(--rb-ml-op, 0.35);
  transform-origin: center;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

[data-fx~='true-focus'] .rb-word {
  display: inline-block;
  filter: blur(var(--rb-tf-blur, 5px));
  opacity: 0.55;
  transition: filter 0.5s ease, opacity 0.5s ease;
}
[data-fx~='true-focus'] .rb-word.rb-focus {
  filter: blur(0);
  opacity: 1;
}

.rb-fx-ready [data-fx~='stagger'] > * {
  opacity: 0;
  transform: translate3d(0, var(--rb-stagger-dist, 18px), 0);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.rb-fx-ready [data-fx~='stagger'].rb-in > * {
  opacity: 1;
  transform: none;
}

@property --rb-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
[data-fx~='conic-border'] {
  position: relative;
  border-radius: var(--rb-radius, 18px);
}

[data-fx~='conic-border']::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  pointer-events: none;
  padding: var(--rb-cb-w, 1.5px);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  background: conic-gradient(
    from var(--rb-angle),
    transparent 0%,
    var(--rb-accent) 12%,
    var(--rb-accent-2) 25%,
    transparent 40%,
    transparent 100%
  );
  animation: rb-conic 4s linear infinite;
}
@keyframes rb-conic {
  to {
    --rb-angle: 360deg;
  }
}

[data-fx~='sheen'] {
  position: relative;
  overflow: hidden;
}
[data-fx~='sheen']::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  pointer-events: none;
  z-index: 4;
  transform: rotate(18deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, var(--rb-sheen-op, 0.28)),
    transparent
  );
  animation: rb-sheen var(--rb-sheen-dur, 4.5s) ease-in-out infinite;
}
@keyframes rb-sheen {
  0%,
  70% {
    left: -60%;
  }
  100% {
    left: 130%;
  }
}