/* ── Phase 1: Digital Glitch — body shake ─────────────────── */
@keyframes glitch-shake {
  0%   { transform: translate3d(  0,    0,   0); }
  11%  { transform: translate3d( -3px,  1px, 0) skewX( 0.4deg); }
  22%  { transform: translate3d(  5px, -2px, 0); }
  33%  { transform: translate3d( -4px,  2px, 0) skewX(-0.5deg); }
  44%  { transform: translate3d(  4px, -1px, 0); }
  55%  { transform: translate3d( -3px,  1px, 0) skewX( 0.3deg); }
  66%  { transform: translate3d(  3px, -1px, 0); }
  77%  { transform: translate3d( -2px,  1px, 0); }
  88%  { transform: translate3d(  2px,  0,   0); }
  100% { transform: translate3d(  0,    0,   0); }
}

body.glitching {
  animation: glitch-shake 0.4s steps(2, end) both;
}

/* Chromatic aberration layers (injected via JS, removed after glitch) */
.glitch-layer {
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  mix-blend-mode: screen;
}

@keyframes shift-r {
  0%   { transform: translateX( 6px); clip-path: polygon(0 10%, 100% 10%, 100% 24%, 0 24%); opacity: 1; }
  25%  { transform: translateX(-5px); clip-path: polygon(0 45%, 100% 45%, 100% 60%, 0 60%); }
  50%  { transform: translateX( 7px); clip-path: polygon(0 70%, 100% 70%, 100% 87%, 0 87%); }
  75%  { transform: translateX(-4px); clip-path: polygon(0 28%, 100% 28%, 100% 42%, 0 42%); }
  100% { transform: translateX( 0);   clip-path: none; opacity: 0; }
}

@keyframes shift-c {
  0%   { transform: translateX(-6px); clip-path: polygon(0 58%, 100% 58%, 100% 74%, 0 74%); opacity: 1; }
  25%  { transform: translateX( 5px); clip-path: polygon(0 20%, 100% 20%, 100% 34%, 0 34%); }
  50%  { transform: translateX(-7px); clip-path: polygon(0  4%, 100%  4%, 100% 18%, 0 18%); }
  75%  { transform: translateX( 4px); clip-path: polygon(0 80%, 100% 80%, 100% 94%, 0 94%); }
  100% { transform: translateX( 0);   clip-path: none; opacity: 0; }
}

.glitch-r {
  background: rgba(255, 0, 55, 0.62);
  animation: shift-r 0.38s steps(1) both;
}

.glitch-c {
  background: rgba(0, 255, 230, 0.48);
  animation: shift-c 0.38s steps(1) both;
}

/* ── Phase 2: Red scan line ────────────────────────────────── */
.scan-line {
  position: fixed;
  left: 0;
  right: 0;
  top: -4px;
  height: 4px;
  z-index: 9999;
  pointer-events: none;
  background: #ff0022;
  box-shadow:
    0 0  8px  4px rgba(255,  0, 34, 1.0),
    0 0 22px  8px rgba(255,  0, 34, 0.72),
    0 0 55px 18px rgba(255,  0, 34, 0.36),
    0 0 90px 28px rgba(255,  0, 34, 0.14);
}

/* ── Phase 4: Secret nav link — persistent red glow ──────── */
.nav-secret a {
  color: #ff0022 !important;
  filter:
    drop-shadow(0 0 4px #ff0022)
    drop-shadow(0 0 10px rgba(255, 0, 34, 0.55));
  animation: secret-pulse 2.5s ease-in-out infinite alternate;
}

@keyframes secret-pulse {
  from {
    filter:
      drop-shadow(0 0  3px #ff0022)
      drop-shadow(0 0  8px rgba(255, 0, 34, 0.50));
  }
  to {
    filter:
      drop-shadow(0 0  7px #ff0022)
      drop-shadow(0 0 18px rgba(255, 0, 34, 0.75))
      drop-shadow(0 0 30px rgba(255, 0, 34, 0.22));
  }
}

.nav-secret a:hover {
  color: #ff4455 !important;
  background: rgba(255, 0, 34, 0.1) !important;
}