/* Определяем шрифты, если они еще не определены */
.logo-font {
font-family: 'Press Start 2P', cursive; /* Ретро-пиксельный шрифт */
}

/* Основной класс глитча */
.glitch {
/* Основное неоновое свечение */
text-shadow: 0 0 10px rgba(0, 240, 255, 0.7);
}

/* Псевдоэлементы ::before и ::after создают слои для RGB-сдвига */
.glitch::before,
.glitch::after {
content: attr(data-text); /* Берем текст из атрибута data-text */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.8;
}

/* Слой ::before — розовое смещение */
.glitch::before {
left: 2px;
text-shadow: -2px 0 #ff007f; /* Розовая тень влево */
background: #120e2e; /* Фон под цвет сайта, чтобы скрыть основной текст */
overflow: hidden;
/* Применяем анимацию искажения по горизонтали */
animation: glitch-anim-1 2s infinite linear alternate-reverse;
}

/* Слой ::after — синее смещение */
.glitch::after {
left: -2px;
text-shadow: -2px 0 #b400ff, 2px 0 #00f0ff; /* Фиолетовая и бирюзовая тени */
background: #120e2e;
overflow: hidden;
/* Применяем анимацию резкого сдвига */
animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

/* АНИМАЦИИ @KEYFRAMES */

/* Анимация 1: Частые мелкие искажения по вертикали */
@keyframes glitch-anim-1 {
0% { clip-path: inset(20% 0 30% 0); }
5% { clip-path: inset(10% 0 80% 0); }
10% { clip-path: inset(40% 0 10% 0); }
15% { clip-path: inset(80% 0 5% 0); }
20% { clip-path: inset(10% 0 70% 0); }
25% { clip-path: inset(50% 0 20% 0); }
30% { clip-path: inset(90% 0 5% 0); }
35% { clip-path: inset(20% 0 60% 0); }
40% { clip-path: inset(60% 0 10% 0); }
45% { clip-path: inset(10% 0 80% 0); }
50% { clip-path: inset(80% 0 10% 0); }
55% { clip-path: inset(30% 0 50% 0); }
60% { clip-path: inset(70% 0 20% 0); }
65% { clip-path: inset(10% 0 80% 0); }
70% { clip-path: inset(50% 0 10% 0); }
75% { clip-path: inset(90% 0 5% 0); }
80% { clip-path: inset(20% 0 70% 0); }
85% { clip-path: inset(60% 0 20% 0); }
90% { clip-path: inset(10% 0 80% 0); }
95% { clip-path: inset(80% 0 10% 0); }
100% { clip-path: inset(10% 0 90% 0); }
}

/* Анимация 2: Резкие горизонтальные сдвиги («скачки» изображения) */
@keyframes glitch-anim-2 {
0% { clip-path: inset(10% 0 80% 0); transform: translate(2px, 0); }
10% { clip-path: inset(80% 0 5% 0); transform: translate(-2px, 0); }
20% { clip-path: inset(30% 0 60% 0); transform: translate(1px, -1px); }
30% { clip-path: inset(60% 0 10% 0); transform: translate(-1px, 1px); }
40% { clip-path: inset(10% 0 80% 0); transform: translate(2px, 0); }
50% { clip-path: inset(80% 0 10% 0); transform: translate(-2px, 0); }
60% { clip-path: inset(20% 0 70% 0); transform: translate(1px, -1px); }
70% { clip-path: inset(70% 0 20% 0); transform: translate(-1px, 1px); }
80% { clip-path: inset(10% 0 80% 0); transform: translate(2px, 0); }
90% { clip-path: inset(80% 0 5% 0); transform: translate(-2px, 0); }
100% { clip-path: inset(10% 0 90% 0); transform: translate(2px, 0); }
}

@keyframes backgroundGlitch {
    0%, 100% { transform: scale(1.05) translate(0, 0) skew(0deg); filter: hue-rotate(0deg) brightness(0.25) blur(3px); }
    92% { transform: scale(1.05) translate(0, 0) skew(0deg); filter: hue-rotate(0deg) brightness(0.25) blur(3px); }
    93% { transform: scale(1.07) translate(3px, -2px) skew(2deg); filter: hue-rotate(90deg) brightness(0.4) blur(2px); }
    94% { transform: scale(1.05) translate(-3px, 2px) skew(-1deg); filter: hue-rotate(-45deg) brightness(0.3) blur(4px); }
    95% { transform: scale(1.05) translate(0, 0) skew(0deg); filter: hue-rotate(0deg) brightness(0.25) blur(3px); }
    98% { transform: scale(1.06) translate(1px, 3px) skew(0deg); filter: inset(10% 0 40% 0); }
    99% { transform: scale(1.05) translate(-2px, -1px) skew(-3deg); filter: hue-rotate(180deg) brightness(0.35); }
  }

  .bg-glitch {
    /* Каждые 7 секунд картинка будет "вздрагивать" и искажаться по цвету */
    animation: backgroundGlitch 7s infinite linear;
  }

@keyframes errorGlitch {
    0%, 100% { transform: scale(1.05) translate(0, 0) skew(0deg); filter: hue-rotate(0deg) brightness(0.25) blur(3px); }
    92% { transform: scale(1.05) translate(0, 0) skew(0deg); filter: hue-rotate(0deg) brightness(0.25) blur(3px); }
    93% { transform: scale(1.07) translate(3px, -2px) skew(2deg); filter: hue-rotate(90deg) brightness(0.4) blur(2px); }
    94% { transform: scale(1.05) translate(-3px, 2px) skew(-1deg); filter: hue-rotate(-45deg) brightness(0.3) blur(4px); }
    95% { transform: scale(1.05) translate(0, 0) skew(0deg); filter: hue-rotate(0deg) brightness(0.25) blur(3px); }
    98% { transform: scale(1.06) translate(1px, 3px) skew(0deg); filter: inset(10% 0 40% 0); }
    99% { transform: scale(1.05) translate(-2px, -1px) skew(-3deg); filter: hue-rotate(180deg) brightness(0.35); }
  }

#glitch-title {
    animation: errorGlitch 3s infinite linear;
  }

/* @keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
  }
  .animate-marquee {
    /* 15 секунд на полный круг, движется влево, бесконечно */
    /* animation: marquee 15s infinite linear;
  } */

@keyframes floatLeft {
    0% { transform: translateX(100vw); }
    100% { transform: translateX(-100%); }
  }
  .animate-float-left {
    left: 0;
    white-space: nowrap;
    animation: floatLeft infinite linear;
  }