*, *::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);
}
