/* index.effects.css — public terminal site (index.html): glitch / CRT effects. One of the index.*.css files, linked in order from index.html. */
/* Two layers, so it is never a question of which rule wins: "page" holds the normal stylesheet rules, "element" holds exact
   styles for single elements. Anything in "element" beats anything in "page", whatever the selectors look like. */
@layer page, element;

@layer page {
/* ─────────────────────────────────────────
   GLITCH EFFECTS
   ───────────────────────────────────────── */
@keyframes glitch-skew {
  0% { transform: skew(0deg); }
  2% { transform: skew(-2deg); }
  3% { transform: skew(0deg); }
  45% { transform: skew(0deg); }
  47% { transform: skew(1.5deg); }
  48% { transform: skew(0deg); }
  100% { transform: skew(0deg); }
}

@keyframes glitch-jitter {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(2px, -1px); }
  60% { transform: translate(-1px, -1px); }
  80% { transform: translate(1px, 2px); }
}

@keyframes glitch-color {
  0%, 100% { text-shadow: none; }
  25% { text-shadow: -2px 0 #ff0000, 2px 0 #00ffff; }
  50% { text-shadow: 2px 0 #ff0000, -2px 0 #00ffff; }
  75% { text-shadow: -1px 0 #00ff00, 1px 0 #ff00ff; }
}

@keyframes glitch-flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.7; }
  94% { opacity: 1; }
  96% { opacity: 0.85; }
  97% { opacity: 1; }
}

@keyframes glitch-bar {
  0%, 100% { clip-path: none; opacity: 0; }
  15% { clip-path: inset(20% 0 60% 0); opacity: 0.08; }
  30% { clip-path: inset(50% 0 20% 0); opacity: 0.06; }
  45% { clip-path: none; opacity: 0; }
}

@keyframes vhs-track {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

/* Glitch on the whole page — subtle */
.container {
  animation: glitch-flicker 8s infinite;
}

/* Glitch text class — apply to headings */
.glitch-text {
  position: relative;
  animation: glitch-color 12s infinite;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.glitch-text::before {
  color: #ff0000;
  z-index: -1;
  animation: glitch-jitter 6s infinite;
  clip-path: inset(0 0 70% 0);
  opacity: 0.15;
}

.glitch-text::after {
  color: #00ffff;
  z-index: -1;
  animation: glitch-jitter 4s infinite reverse;
  clip-path: inset(70% 0 0 0);
  opacity: 0.15;
}

/* VHS tracking bar — the horizontal distortion line */
.vhs-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.04);
  z-index: 9997;
  pointer-events: none;
  animation: vhs-track 12s linear infinite;
  box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.02);
}

/* Static noise overlay that flashes occasionally */
.static-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9996;
  animation: glitch-bar 15s infinite;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 1px,
    rgba(200, 200, 180, 0.03) 1px,
    rgba(200, 200, 180, 0.03) 2px
  );
}

/* Random skew on hover for interactive elements */
.glitch-hover:hover {
  animation: glitch-skew 0.3s ease;
}
}