/* ===================================================================
 * 2B Neon RGB Text Effect
 * Vanilla port of 21st.dev "NeonRGBTextEffect" by Kain0127
 * R / G / B channel split with horizontal offsets + additive glow
 * No WebGL dependency, no animation slowdown
 * =================================================================== */

.neon-rgb {
  position: relative;
  display: inline-block;
  color: #ffffff;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.95;
  isolation: isolate;
  --rgb-shift: 0.04em;
  --rgb-glow: 0.6;
}

.neon-rgb__core {
  position: relative;
  z-index: 3;
  color: #ffffff;
  text-shadow:
    0 0 8px rgba(255, 255, 255, calc(var(--rgb-glow) * 0.4)),
    0 0 24px rgba(255, 176, 46, calc(var(--rgb-glow) * 0.18));
}

.neon-rgb__r,
.neon-rgb__g,
.neon-rgb__b {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  display: flex;
  align-items: center;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  white-space: pre;
}

.neon-rgb__r {
  color: #ff003c;
  transform: translateX(calc(var(--rgb-shift) * -1));
  text-shadow:
    0 0 calc(var(--rgb-glow) * 14px) rgba(255, 0, 60, 0.55),
    0 0 calc(var(--rgb-glow) * 28px) rgba(255, 0, 60, 0.32);
  justify-content: flex-start;
  z-index: 1;
}

.neon-rgb__g {
  color: #00ff88;
  transform: translateY(calc(var(--rgb-shift) * 0.4));
  text-shadow:
    0 0 calc(var(--rgb-glow) * 14px) rgba(0, 255, 136, 0.45),
    0 0 calc(var(--rgb-glow) * 28px) rgba(0, 255, 136, 0.25);
  justify-content: center;
  z-index: 2;
}

.neon-rgb__b {
  color: #00d4ff;
  transform: translateX(var(--rgb-shift));
  text-shadow:
    0 0 calc(var(--rgb-glow) * 14px) rgba(0, 212, 255, 0.55),
    0 0 calc(var(--rgb-glow) * 28px) rgba(0, 212, 255, 0.32);
  justify-content: flex-end;
  z-index: 1;
}

/* Bigger brand size variant */
.neon-rgb--brand {
  font-family: 'Bowlby One', 'Syne', system-ui, sans-serif;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 400;
  --rgb-shift: 0.045em;
  --rgb-glow: 0.7;
}

/* Headline variant */
.neon-rgb--headline {
  font-family: 'Bowlby One', 'Syne', system-ui, sans-serif;
  font-size: clamp(2rem, 5vw, 3.4rem);
  --rgb-shift: 0.05em;
}

/* Subtle variant for topbar/compact use */
.neon-rgb--compact {
  font-family: 'Bowlby One', 'Syne', system-ui, sans-serif;
  font-size: 1.6rem;
  --rgb-shift: 0.06em;
  --rgb-glow: 0.5;
  letter-spacing: -0.04em;
}

/* Multiline handling: stack channels with the same content */
.neon-rgb--wrap {
  white-space: normal;
  word-wrap: break-word;
}

/* Gentle static hover pulse (no jank) */
.neon-rgb {
  transition: --rgb-glow 0.3s ease;
}
.neon-rgb:hover {
  --rgb-glow: 0.95;
}

/* For browsers that don't support mix-blend-mode (older Safari) */
@supports not (mix-blend-mode: screen) {
  .neon-rgb__r,
  .neon-rgb__g,
  .neon-rgb__b {
    opacity: 0.5;
  }
}

/* Reduced motion: keep static effect but no hover pulse */
@media (prefers-reduced-motion: reduce) {
  .neon-rgb { transition: none; }
  .neon-rgb:hover { --rgb-glow: 0.7; }
}