/* ─── GLITCH ─────────────────────────────────────────────── */
@keyframes glitch-clip-1 {
  0%   { clip-path: inset(42% 0 30% 0); transform: translate(-3px, 0); }
  20%  { clip-path: inset(8%  0 80% 0); transform: translate(3px,  0); }
  40%  { clip-path: inset(68% 0  5% 0); transform: translate(-2px, 0); }
  60%  { clip-path: inset(28% 0 54% 0); transform: translate(2px,  0); }
  80%  { clip-path: inset(78% 0 10% 0); transform: translate(-3px, 0); }
  100% { clip-path: inset(42% 0 30% 0); transform: translate(-3px, 0); }
}
@keyframes glitch-clip-2 {
  0%   { clip-path: inset(18% 0 62% 0); transform: translate(3px,  0); }
  20%  { clip-path: inset(62% 0 22% 0); transform: translate(-2px, 0); }
  40%  { clip-path: inset(35% 0 48% 0); transform: translate(3px,  0); }
  60%  { clip-path: inset(5%  0 85% 0); transform: translate(-3px, 0); }
  80%  { clip-path: inset(90% 0  3% 0); transform: translate(2px,  0); }
  100% { clip-path: inset(18% 0 62% 0); transform: translate(3px,  0); }
}

.glitch { position: relative; display: inline-block; }
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: none;
}
.glitch::before {
  color: #A4FE1B;
  animation: glitch-clip-1 5s infinite steps(1);
  mix-blend-mode: screen;
  opacity: 0.65;
}
.glitch::after {
  color: #d4ff00;
  animation: glitch-clip-2 5s 2.5s infinite steps(1);
  mix-blend-mode: screen;
  opacity: 0.55;
}

/* ─── GLITCH STATIC (CTA final) ──────────────────────────── */
.glitch-static { position: relative; display: block; }
.glitch-static::before,
.glitch-static::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.glitch-static::before {
  color: #A4FE1B;
  animation: glitch-clip-1 8s 1s infinite steps(1);
  mix-blend-mode: screen;
  opacity: 0.45;
}
.glitch-static::after {
  color: #d4ff00;
  animation: glitch-clip-2 8s 4s infinite steps(1);
  mix-blend-mode: screen;
  opacity: 0.4;
}

/* ─── SCAN LINES ─────────────────────────────────────────── */
@keyframes scan {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}
.scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0,0,0,0.18) 3px,
    rgba(0,0,0,0.18) 4px
  );
  pointer-events: none;
  z-index: 2;
}

/* ─── GRAIN NOISE ────────────────────────────────────────── */
@keyframes grain {
  0%,100% { transform: translate(0,0); }
  10%     { transform: translate(-5%,-10%); }
  20%     { transform: translate(-15%,5%); }
  30%     { transform: translate(7%,-25%); }
  40%     { transform: translate(-5%,25%); }
  50%     { transform: translate(-15%,10%); }
  60%     { transform: translate(15%,0%); }
  70%     { transform: translate(0%,15%); }
  80%     { transform: translate(3%,35%); }
  90%     { transform: translate(-10%,10%); }
}

/* ─── FADE IN FROM BELOW ─────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up {
  opacity: 0;
  animation: fadeUp 0.7s ease forwards;
}

/* ─── SCROLL LINE ────────────────────────────────────────── */
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ─── PULSE NEON ─────────────────────────────────────────── */
@keyframes pulseNeon {
  0%,100% { box-shadow: 0 0 8px var(--neon), 0 0 20px rgba(164,254,27,.3); }
  50%     { box-shadow: 0 0 20px var(--neon), 0 0 40px rgba(164,254,27,.5); }
}

/* ─── BLINK ──────────────────────────────────────────────── */
@keyframes blink {
  0%,100% { opacity: 1; }
  50%     { opacity: 0; }
}

/* ─── REVEAL CLASS (JS adds .is-visible) ─────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}