body.layer_four {
  font-family: "Courier New", monospace;
  color:  #0f0;
  background-image: url("../images/Analog_background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

body.layer_four h1,
body.layer_four h2,
body.layer_four p {
  position: relative;
  animation: textGlitch 3s infinite alternate;
}

@keyframes textGlitch {
  0%   { text-shadow: 1px 0 red, -1px 0 cyan; }
  50%  { text-shadow: -1px 0 red, 1px 0 cyan; }
  100% { text-shadow: 0 0 2px white; }
}

@keyframes pageShift {
  0% { transform: translate(0,0); }
  25% { transform: translate(0.5px, -0.5px); }
  50% { transform: translate(-0.5px, 0.5px); }
  75% { transform: translate(0.3px, -0.3px); }
  100% { transform: translate(0,0); }
}

body.layer_four .page-content {
  animation: pageShift 0.3s infinite;
}


body.layer_four::before,
body.layer_four::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.03) 0px,
    rgba(255,255,255,0.03) 2px,
    transparent 2px,
    transparent 4px
  );
  /*animation: flicker 1s infinite;*/
}

@keyframes flicker {
  0% { opacity: 0.95; }
  50% { opacity: 1; }
  100% { opacity: 0.92; }
}



@keyframes redPulse {
  0% { background-color: #111; }
  50% { background-color: #F00f00; }
  100% { background-color: #111; }
}

body.layer_four .page-content {
  animation: redPulse 6s infinite alternate;
}

.image-wrap {
  display: flex;
  gap: 0px;
  align-items: flex-start;
}

.image-wrap img {
  width: 400px;
  height: auto;
}

.image-wrap p {
  margin: 0;
}

.page-content {
  max-width: 900px;
  margin: auto;
  background-color: #111;
  padding: 2rem;
}

.glitch {
  position: fixed;
  top: 0;
  left: -10%;
  width: 120%;
  height: 100%;
  pointer-events: none;
  background: repeating-linear-gradient(
    rgba(255,0,0,0.05),
    rgba(255,0,0,0.05) 2px,
    rgba(0,255,255,0.05) 2px,
    rgba(0,255,255,0.05) 4px
  );
  animation: glitchMove 0.2s infinite linear alternate;
  mix-blend-mode: overlay;
  z-index: 9999;
}

@keyframes glitchMove {
  0%   { transform: translateX(0) translateY(0) skewX(0deg); }
  25%  { transform: translateX(2%) translateY(-2%) skewX(1deg); }
  50%  { transform: translateX(-2%) translateY(1%) skewX(-1deg); }
  75%  { transform: translateX(1%) translateY(-1%) skewX(0.5deg); }
  100% { transform: translateX(0) translateY(0) skewX(0deg); }
}

.image-wrap img {
  animation: imgGlitch 0.3s infinite alternate;
}

@keyframes imgGlitch {
  0% { clip: rect(0, auto, auto, 0); transform: translate(0,0) skew(0deg); }
  25% { clip: rect(5px, auto, 30px, 0); transform: translate(-2px,1px) skew(-2deg); }
  50% { clip: rect(0px, auto, 50px, 0); transform: translate(1px,-1px) skew(2deg); }
  75% { clip: rect(10px, auto, 20px, 0); transform: translate(-1px,2px) skew(-1deg); }
  100% { clip: rect(0, auto, auto, 0); transform: translate(0,0) skew(0deg); }
}