/* ─── NOISE GRAIN ─────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: -200%;
  width: 400%; height: 400%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.035;
  pointer-events: none;
  z-index: 0;
  animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%   { transform: translate(0,   0);   }
  10%  { transform: translate(-5%, -5%); }
  20%  { transform: translate(5%,  5%);  }
  30%  { transform: translate(-3%, 3%);  }
  40%  { transform: translate(3%, -3%);  }
  50%  { transform: translate(-5%, 5%);  }
  60%  { transform: translate(5%, -5%);  }
  70%  { transform: translate(-3%, -3%); }
  80%  { transform: translate(3%,  3%);  }
  90%  { transform: translate(-5%, 0);   }
  100% { transform: translate(0,   0);   }
}

/* ─── SCROLL REVEAL ───────────────────────────────────── */
.reveal {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.5s ease;
}
.reveal.visible {
  opacity: 1;
  clip-path: inset(0 0 0% 0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.35s; }
.reveal-delay-4 { transition-delay: 0.5s; }

/* ─── GLITCH WORD ─────────────────────────────────────── */
.glitch-word {
  display: inline-block;
  position: relative;
  animation: glitch-settle 2s ease forwards;
}
.glitch-word::before,
.glitch-word::after {
  content: 'BUSY';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.glitch-word::before {
  color: #00ffff;
  animation: glitch-r 2s ease forwards;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}
.glitch-word::after {
  color: #ff00ff;
  animation: glitch-b 2s ease forwards;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
}

@keyframes glitch-r {
  0%   { transform: translate(8px, -4px);  opacity: 1; }
  10%  { transform: translate(-6px, 3px);  opacity: 0.9; }
  20%  { transform: translate(10px, -2px); opacity: 1; }
  30%  { transform: translate(-8px, 4px);  opacity: 0.85; }
  40%  { transform: translate(6px, -6px);  opacity: 1; }
  50%  { transform: translate(-4px, 2px);  opacity: 0.9; }
  60%  { transform: translate(3px, -1px);  opacity: 0.7; }
  70%  { transform: translate(-2px, 1px);  opacity: 0.5; }
  80%  { transform: translate(1px, 0);     opacity: 0.3; }
  90%  { transform: translate(0, 0);       opacity: 0.15; }
  100% { transform: translate(0, 0);       opacity: 0; }
}
@keyframes glitch-b {
  0%   { transform: translate(-8px, 4px);  opacity: 1; }
  10%  { transform: translate(6px, -3px);  opacity: 0.9; }
  20%  { transform: translate(-10px, 2px); opacity: 1; }
  30%  { transform: translate(8px, -4px);  opacity: 0.85; }
  40%  { transform: translate(-6px, 6px);  opacity: 1; }
  50%  { transform: translate(4px, -2px);  opacity: 0.9; }
  60%  { transform: translate(-3px, 1px);  opacity: 0.7; }
  70%  { transform: translate(2px, -1px);  opacity: 0.5; }
  80%  { transform: translate(-1px, 0);    opacity: 0.3; }
  90%  { transform: translate(0, 0);       opacity: 0.15; }
  100% { transform: translate(0, 0);       opacity: 0; }
}
@keyframes glitch-settle {
  0%  { transform: translate(2px, 0) skewX(0.5deg);  }
  15% { transform: translate(-3px, 0) skewX(-1deg); }
  30% { transform: translate(2px, 0) skewX(0.5deg); }
  45% { transform: translate(-1px, 0) skewX(-0.5deg); }
  60% { transform: translate(1px, 0) skewX(0.2deg); }
  80% { transform: translate(0, 0) skewX(0); }
  100%{ transform: translate(0, 0) skewX(0); }
}

/* ─── CARD GLITCH ON HOVER ────────────────────────────── */
.bad-hire-card::before,
.bad-hire-card::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s;
  z-index: 0;
}
.bad-hire-card:hover::before {
  opacity: 1;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255, 59, 0, 0.03) 2px,
    rgba(255, 59, 0, 0.03) 4px
  );
  animation: card-glitch 0.4s steps(4) infinite;
}
.bad-hire-card:hover::after {
  opacity: 1;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 255, 255, 0.02) 48%,
    transparent 49%,
    transparent 51%,
    rgba(255, 0, 255, 0.02) 52%,
    transparent 100%
  );
  animation: card-glitch-2 0.3s steps(3) infinite;
}
@keyframes card-glitch {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-2px); }
  50%  { transform: translateX(3px); }
  75%  { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}
@keyframes card-glitch-2 {
  0%   { transform: translateY(0) scaleX(1); }
  33%  { transform: translateY(-1px) scaleX(1.002); }
  66%  { transform: translateY(2px) scaleX(0.999); }
  100% { transform: translateY(0) scaleX(1); }
}

/* ─── TICKER ──────────────────────────────────────────── */
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─── PULSE DOT ───────────────────────────────────────── */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ─── VERDICT BLINK ───────────────────────────────────── */
@keyframes verdict-blink {
  0%, 90%, 100% { opacity: 1; }
  95% { opacity: 0.2; }
}