[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}
.glitch {
  position: relative;
  color: var(--text-primary);
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-primary);
}
.glitch::before {
  left: 2px;
  text-shadow: -2px 0 var(--accent-red);
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 5s infinite linear alternate-reverse;
}
.glitch::after {
  left: -2px;
  text-shadow: -2px 0 var(--accent-green);
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim2 5s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
  0% { clip: rect(93px, 9999px, 86px, 0); }
  20% { clip: rect(10px, 9999px, 82px, 0); }
  40% { clip: rect(54px, 9999px, 98px, 0); }
  60% { clip: rect(44px, 9999px, 12px, 0); }
  80% { clip: rect(19px, 9999px, 16px, 0); }
  100% { clip: rect(31px, 9999px, 52px, 0); }
}
@keyframes glitch-anim2 {
  0% { clip: rect(65px, 9999px, 100px, 0); }
  20% { clip: rect(3px, 9999px, 20px, 0); }
  40% { clip: rect(5px, 9999px, 53px, 0); }
  60% { clip: rect(14px, 9999px, 86px, 0); }
  80% { clip: rect(72px, 9999px, 64px, 0); }
  100% { clip: rect(94px, 9999px, 73px, 0); }
}
.loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-primary);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease;
}
.loader-wrapper.hidden {
  opacity: 0;
  pointer-events: none;
}
.loader-logo {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 900;
  color: var(--accent-green);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.1); opacity: 1; text-shadow: var(--glow-green); }
  100% { transform: scale(1); opacity: 0.8; }
}