/* =========================
   CRT / Scanline Effect
========================= */

.glitch {
  position: relative;
}

/* 常時走査線 */
.glitch::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.025) 0px,
      rgba(255,255,255,.025) 1px,
      transparent 1px,
      transparent 3px
    );

  animation: flicker .12s infinite alternate;
}

/* 流れるスキャンライン */
.glitch::after {
  content: "";
  position: fixed;
  top: -150px;
  left: 0;
  width: 100%;
  height: 150px;
  pointer-events: none;
  z-index: 9999;

  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255,255,255,.02) 30%,
    rgba(255,255,255,.08) 50%,
    rgba(255,255,255,.02) 70%,
    transparent 100%
  );

  animation: scanline 8s linear infinite;
}


/* 微妙な明滅 */
@keyframes flicker {
  0% { opacity: .7; }
  100% { opacity: 1; }
}

/* 上から下へ流れる */
@keyframes scanline {
  0% {
    transform: translateY(-200px);
    opacity: 0;
  }

  5% {
    opacity: .8;
  }

  15% {
    opacity: .4;
  }

  20% {
    transform: translateY(110vh);
    opacity: 0;
  }

  100% {
    transform: translateY(110vh);
    opacity: 0;
  }
}