:root {
  --emerald: #00ff88;
  --emerald-soft: #00cc77;
  --border: rgba(0,255,136,.25);
}

body {
  margin: 0;
  background: #000;
}

.split-top-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  width: 100%;
  height: 44px;
  background: #000;
  border-bottom: 1px solid var(--border);
  font-family: system-ui, sans-serif;
}

.split-link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e6fff2;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .4px;
  position: relative;
  transition: background .2s ease, color .2s ease, transform .08s ease;
}

.split-link:hover {
  background: rgba(0,255,136,.06);
}

.split-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: transparent;
  transition: background .2s ease;
}

.split-link:hover::after {
  background: var(--emerald);
}

.split-link:active {
  transform: scale(.97);
}

.split-link.is-current {
  color: var(--emerald);
  background: rgba(0,255,136,.08);
}

.split-link.is-current::after {
  background: var(--emerald);
}

/* Glitch */
.glitch {
  position: relative;
  color: var(--emerald);
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: .35;
  pointer-events: none;
}

.glitch::before {
  transform: translateX(1px);
  text-shadow: -1px 0 #ff004c;
  animation: glitchSubtle 4s infinite;
}

.glitch::after {
  transform: translateX(-1px);
  text-shadow: 1px 0 var(--emerald-soft);
  animation: glitchSubtle 4s infinite reverse;
}

.split-link.data:hover .glitch::before,
.split-link.data:hover .glitch::after {
  animation-duration: .6s;
  opacity: .6;
}

@keyframes glitchSubtle {
  0%, 100% { clip-path: inset(0 0 0 0); }
  20% { clip-path: inset(20% 0 60% 0); }
  40% { clip-path: inset(50% 0 30% 0); }
  60% { clip-path: inset(10% 0 70% 0); }
}

@media (prefers-reduced-motion: reduce) {
  .glitch::before,
  .glitch::after {
    animation: none;
    display: none;
  }
}