body {
  margin: 0;
  background: radial-gradient(circle, #ff00ea, #00ffe7, #0011ff);
  font-family: 'Arial Black', sans-serif;
  overflow-x: hidden;
  animation: bgshift 10s infinite alternate;
}

@keyframes bgshift {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* ГЛИТЧ */
.glitch {
  font-size: 90px;
  text-align: center;
  margin-top: 40px;
  position: relative;
  color: white;
  text-transform: uppercase;
  letter-spacing: 10px;
  animation: glitch-skew 1.5s infinite linear;
}

.glitch:before,
.glitch:after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  color: white;
}

.glitch:before {
  left: 3px;
  text-shadow: -3px 0 magenta;
  animation: glitch-1 1s infinite linear alternate-reverse;
}

.glitch:after {
  left: -3px;
  text-shadow: -3px 0 cyan;
  animation: glitch-2 1.2s infinite linear alternate-reverse;
}

@keyframes glitch-1 { 
  0% { clip-path: inset(0 0 30% 0); }
  100% { clip-path: inset(70% 0 0 0); }
}
@keyframes glitch-2 { 
  0% { clip-path: inset(50% 0 0 0); }
  100% { clip-path: inset(0 0 60% 0); }
}
@keyframes glitch-skew {
  0% { transform: skew(0deg); }
  50% { transform: skew(5deg); }
  100% { transform: skew(-5deg); }
}


/* Бегущая строка */
.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  color: yellow;
  font-size: 32px;
  font-weight: bold;
  text-shadow: 0 0 15px red, 0 0 20px orange;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* 3D CUBE */
.cube-container {
  perspective: 900px;
  margin: 60px auto;
  width: 250px;
  height: 250px;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: rotatecube 7s infinite linear;
}

@keyframes rotatecube {
  from { transform: rotateX(0) rotateY(0); }
  to { transform: rotateX(360deg) rotateY(360deg); }
}

.side {
  position: absolute;
  width: 250px;
  height: 250px;
  font-size: 100px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255,0,255,0.3);
  border: 4px solid cyan;
  box-shadow: 0 0 20px #00fff2, inset 0 0 20px #ff00f2;
}

.front  { transform: translateZ(125px); }
.back   { transform: rotateY(180deg) translateZ(125px); }
.right  { transform: rotateY(90deg) translateZ(125px); }
.left   { transform: rotateY(-90deg) translateZ(125px); }
.top    { transform: rotateX(90deg) translateZ(125px); }
.bottom { transform: rotateX(-90deg) translateZ(125px); }

/* Пульсация фото + огонь */
.fire-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.pulsing-photo {
  width: 320px;
  height: 320px;
  object-fit: cover;
  border-radius: 25px;
  animation: pulse 2s infinite ease-in-out;
  filter: drop-shadow(0 0 25px #ff0095);
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

.fire {
  position: absolute;
  width: 300px;
  height: 300px;
  bottom: -20px;
  background: url('https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExM2xvZXhkdWxnbmYyeDk5eTR1Ynd4aWNjcW5hZWNuOHVqd3FydjA1YiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/yr7n0u3qzO9nG/giphy.gif');
  background-size: cover;
  mix-blend-mode: screen;
  opacity: 0.7;
  pointer-events: none;
}

/* Волна по буквам */
.wave-word {
  font-size: 90px;
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 50px;
  color: white;
  text-shadow: 0 0 20px lime, 0 0 40px yellow;
}

/* Карусель */
.carousel {
  width: 100%;
  overflow: hidden;
  margin-top: 60px;
}

.carousel-track {
  display: flex;
  gap: 25px;
  animation: slide 25s linear infinite;
}

.carousel img {
  width: 280px;
  height: 200px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 0 20px #fff, 0 0 40px cyan;
}

@keyframes slide {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-130%); }
}
