/* Простой glitch эффект с помехами */
.glitch-photo {
position: relative !important;
overflow: hidden !important;
}
/* Базовый glitch эффект */
.glitch-photo.glitch-active .tn-atom__img {
animation: simple-glitch 0.2s infinite;
}
/* Эффект помех (шум) */
.glitch-photo.glitch-active .tn-atom::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
0deg,
rgba(255, 255, 255, 0.1) 0px,
rgba(255, 255, 255, 0.2) 2px,
transparent 3px,
transparent 5px
);
pointer-events: none;
z-index: 2;
animation: noise 0.1s infinite;
mix-blend-mode: overlay;
}
/* Дополнительные цветные помехи */
.glitch-photo.glitch-active .tn-atom::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(
circle at 30% 50%,
rgba(255, 0, 255, 0.2) 0%,
transparent 20%
);
pointer-events: none;
z-index: 3;
animation: color-noise 0.3s infinite;
mix-blend-mode: screen;
}
/* Анимация искажения изображения */
@keyframes simple-glitch {
0% {
transform: translate(0);
filter: hue-rotate(0deg);
}
10% {
transform: translate(-2px, 1px);
filter: hue-rotate(10deg);
}
20% {
transform: translate(2px, -1px);
filter: hue-rotate(-10deg);
}
30% {
transform: translate(-1px, 2px);
filter: hue-rotate(15deg);
}
40% {
transform: translate(1px, -2px);
filter: hue-rotate(-15deg);
}
50% {
transform: translate(-3px, 0);
filter: hue-rotate(20deg);
}
60% {
transform: translate(3px, 0);
filter: hue-rotate(-20deg);
}
70% {
transform: translate(0, 2px);
filter: hue-rotate(10deg);
}
80% {
transform: translate(0, -2px);
filter: hue-rotate(-10deg);
}
90% {
transform: translate(1px, 1px);
filter: hue-rotate(5deg);
}
100% {
transform: translate(0);
filter: hue-rotate(0deg);
}
}