*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 0;
  background: #020617;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.glitch-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.glitch-card {
  position: relative;
  width: 320px;
  height: 400px;
  overflow: hidden;
  border-radius: 8px;
  cursor: crosshair;
}

.glitch-base {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.glitch-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  mix-blend-mode: screen;
}

/* The glitch interaction exclusively triggers on hover */
.glitch-card:hover .layer-red {
  opacity: 0.8;
  animation: glitch-red 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}

.glitch-card:hover .layer-blue {
  opacity: 0.8;
  animation: glitch-blue 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}

/* Hard, horizontal slices securely generated using clip-path */
@keyframes glitch-red {
  0% { clip-path: polygon(0 20%, 100% 20%, 100% 30%, 0 30%); transform: translate(-10px, 5px); }
  20% { clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%); transform: translate(10px, -5px); }
  40% { clip-path: polygon(0 40%, 100% 40%, 100% 50%, 0 50%); transform: translate(-10px, -5px); }
  60% { clip-path: polygon(0 80%, 100% 80%, 100% 90%, 0 90%); transform: translate(10px, 5px); }
  80% { clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); transform: translate(-5px, 10px); }
  100% { clip-path: polygon(0 50%, 100% 50%, 100% 60%, 0 60%); transform: translate(5px, -10px); }
}

@keyframes glitch-blue {
  0% { clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); transform: translate(10px, -5px); }
  20% { clip-path: polygon(0 50%, 100% 50%, 100% 60%, 0 60%); transform: translate(-10px, 5px); }
  40% { clip-path: polygon(0 30%, 100% 30%, 100% 40%, 0 40%); transform: translate(10px, 5px); }
  60% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); transform: translate(-10px, -5px); }
  80% { clip-path: polygon(0 90%, 100% 90%, 100% 100%, 0 100%); transform: translate(5px, -10px); }
  100% { clip-path: polygon(0 20%, 100% 20%, 100% 30%, 0 30%); transform: translate(-5px, 10px); }
}

.cyber-title {
  margin: 0;
  color: #0ea5e9;
  font-family: "Courier New", Courier, monospace;
  letter-spacing: 4px;
  font-size: 1.5rem;
  text-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
}