/* ========================================
   20 Text Effects for Hero Slider
   ======================================== */

/* 1. Glitch - Волновой градиент (оригинальный) */
.text-effect-glitch {
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #4fc3f7 25%,
    #29b6f6 50%,
    #ffffff 75%,
    #4fc3f7 100%
  ) !important;
  background-size: 200% auto !important;
  color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation: gradient-wave 3s linear infinite !important;
}

@keyframes gradient-wave {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* 2. Neon - Неоновое свечение */
.text-effect-neon {
  color: #fff !important;
  text-shadow: 
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 30px #0073e6,
    0 0 40px #0073e6,
    0 0 50px #0073e6 !important;
  animation: neon-flicker 2s infinite alternate !important;
}

@keyframes neon-flicker {
  0%, 100% {
    text-shadow: 
      0 0 10px #fff,
      0 0 20px #fff,
      0 0 30px #0073e6,
      0 0 40px #0073e6;
  }
  50% {
    text-shadow: 
      0 0 5px #fff,
      0 0 10px #fff,
      0 0 15px #0073e6,
      0 0 20px #0073e6;
  }
}

/* 3. Typing - Печатная машинка */
.text-effect-typing {
  overflow: hidden;
  border-right: 3px solid #fff;
  white-space: nowrap;
  display: inline-block;
  animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #fff; }
}

/* 4. Fade In - Плавное появление */
.text-effect-fade-in {
  animation: fadeIn 2s ease-in;
}

@keyframes fadeIn {
  0% { 
    opacity: 0;
    transform: translateY(20px);
  }
  100% { 
    opacity: 1;
    transform: translateY(0);
  }
}

/* 5. Bounce - Прыгающий текст */
.text-effect-bounce {
  animation: bounce 2s ease infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

/* 6. Zoom - Увеличение */
.text-effect-zoom {
  animation: zoom 2s ease-in-out;
}

@keyframes zoom {
  0% { 
    transform: scale(0);
    opacity: 0;
  }
  50% { 
    transform: scale(1.1);
  }
  100% { 
    transform: scale(1);
    opacity: 1;
  }
}

/* 7. Rotate 3D - 3D вращение */
.text-effect-rotate3d {
  animation: rotate3d 3s ease-in-out infinite;
  transform-style: preserve-3d;
}

@keyframes rotate3d {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}

/* 8. Flip - Переворот */
.text-effect-flip {
  animation: flip 2s ease-in-out;
}

@keyframes flip {
  0% { transform: perspective(400px) rotateX(90deg); opacity: 0; }
  40% { transform: perspective(400px) rotateX(-10deg); }
  70% { transform: perspective(400px) rotateX(10deg); }
  100% { transform: perspective(400px) rotateX(0deg); opacity: 1; }
}

/* 9. Slide Up - Скольжение вверх */
.text-effect-slide-up {
  animation: slideUp 1.5s ease-out;
}

@keyframes slideUp {
  0% { 
    transform: translateY(100%);
    opacity: 0;
  }
  100% { 
    transform: translateY(0);
    opacity: 1;
  }
}

/* 10. Elastic - Эластичный */
.text-effect-elastic {
  animation: elastic 2s ease-out;
}

@keyframes elastic {
  0% { transform: scale(0); }
  55% { transform: scale(1); }
  70% { transform: scale(0.95); }
  85% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* 11. Fire - Огненный текст */
.text-effect-fire {
  color: #fff !important;
  text-shadow:
    0 -1px 4px #fff,
    0 -2px 10px #ff0,
    0 -10px 20px #ff8000,
    0 -18px 40px #f00 !important;
  animation: fire 1.5s ease-in-out infinite alternate !important;
}

@keyframes fire {
  0% { 
    text-shadow:
      0 -1px 4px #fff,
      0 -2px 10px #ff0,
      0 -10px 20px #ff8000,
      0 -18px 40px #f00;
  }
  100% { 
    text-shadow:
      0 -1px 4px #fff,
      0 -2px 10px #ff0,
      0 -10px 20px #ff8000,
      0 -25px 50px #f00;
  }
}

/* 12. Water - Водная рябь */
.text-effect-water {
  color: #00bfff;
  text-shadow: 0 0 10px #00bfff;
  animation: water 2s ease-in-out infinite;
}

@keyframes water {
  0%, 100% { 
    transform: translateY(0) scaleY(1);
    filter: blur(0);
  }
  50% { 
    transform: translateY(-5px) scaleY(1.05);
    filter: blur(0.5px);
  }
}

/* 13. Hologram - Голограмма */
.text-effect-hologram {
  color: #00ffff;
  text-shadow:
    0 0 10px #00ffff,
    0 0 20px #00ffff,
    0 0 30px #00ffff;
  animation: hologram 2s linear infinite;
  position: relative;
}

.text-effect-hologram::before,
.text-effect-hologram::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.text-effect-hologram::before {
  animation: hologram-1 1s linear infinite;
  color: #0ff;
  z-index: -1;
}

.text-effect-hologram::after {
  animation: hologram-2 1s linear infinite;
  color: #f0f;
  z-index: -2;
}

@keyframes hologram {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.9; }
}

@keyframes hologram-1 {
  0% { transform: translate(0); }
  100% { transform: translate(2px, 2px); }
}

@keyframes hologram-2 {
  0% { transform: translate(0); }
  100% { transform: translate(-2px, -2px); }
}

/* 14. Matrix - Матрица */
.text-effect-matrix {
  color: #00ff00;
  text-shadow: 
    0 0 5px #00ff00,
    0 0 10px #00ff00;
  animation: matrix 0.5s infinite;
  font-family: 'Courier New', monospace;
}

@keyframes matrix {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* 15. Retro - Ретро стиль */
.text-effect-retro {
  color: #fff;
  text-shadow:
    3px 3px 0 #ff00de,
    6px 6px 0 #00ffff,
    9px 9px 0 #ffff00;
  animation: retro 2s ease-in-out infinite alternate;
}

@keyframes retro {
  0% {
    text-shadow:
      3px 3px 0 #ff00de,
      6px 6px 0 #00ffff,
      9px 9px 0 #ffff00;
  }
  100% {
    text-shadow:
      2px 2px 0 #ff00de,
      4px 4px 0 #00ffff,
      6px 6px 0 #ffff00;
  }
}

/* 16. Rainbow - Радужный */
.text-effect-rainbow {
  background: linear-gradient(
    90deg,
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #0000ff,
    #4b0082,
    #9400d3,
    #ff0000
  );
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: rainbow 3s linear infinite;
}

@keyframes rainbow {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* 17. Thunder - Молния */
.text-effect-thunder {
  color: #fff;
  animation: thunder 3s infinite;
}

@keyframes thunder {
  0%, 90%, 100% { 
    text-shadow: none;
    opacity: 1;
  }
  91%, 93%, 95%, 97%, 99% {
    text-shadow:
      0 0 20px #fff,
      0 0 40px #fff,
      0 0 80px #ff0,
      0 0 120px #ff0;
    opacity: 0.9;
  }
  92%, 94%, 96%, 98% {
    text-shadow: none;
    opacity: 0.3;
  }
}

/* 18. Smoke - Дымный */
.text-effect-smoke {
  color: #fff;
  text-shadow: 0 0 20px #999;
  animation: smoke 3s ease-out;
}

@keyframes smoke {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: translateY(-20px) scale(1.2);
    opacity: 0.7;
    filter: blur(2px);
  }
}

/* 19. Glass - Стеклянный */
.text-effect-glass {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 
    0 0 10px rgba(255, 255, 255, 0.5),
    0 2px 3px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: glass 2s ease-in-out infinite alternate;
}

@keyframes glass {
  0% { 
    text-shadow: 
      0 0 10px rgba(255, 255, 255, 0.5),
      0 2px 3px rgba(0, 0, 0, 0.3);
  }
  100% { 
    text-shadow: 
      0 0 20px rgba(255, 255, 255, 0.7),
      0 4px 6px rgba(0, 0, 0, 0.4);
  }
}

/* 20. Cyber - Киберпанк */
.text-effect-cyber {
  color: #fff;
  text-shadow:
    0 0 10px #ff00de,
    0 0 20px #ff00de,
    0 0 30px #ff00de;
  animation: cyber 1.5s ease-in-out infinite alternate;
  position: relative;
}

.text-effect-cyber::before {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  top: 2px;
  color: #00ffff;
  z-index: -1;
  animation: cyber-glitch 2s linear infinite;
}

@keyframes cyber {
  0% {
    text-shadow:
      0 0 10px #ff00de,
      0 0 20px #ff00de,
      0 0 30px #ff00de;
  }
  100% {
    text-shadow:
      0 0 5px #ff00de,
      0 0 10px #ff00de,
      0 0 15px #ff00de;
  }
}

@keyframes cyber-glitch {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-1px, 1px); }
  40% { transform: translate(1px, -1px); }
  60% { transform: translate(-1px, -1px); }
  80% { transform: translate(1px, 1px); }
}

/* 21. Letter by Letter - Буквы по очереди */
.text-effect-letter-by-letter {
  display: inline-block !important;
  perspective: 1000px;
}

.text-effect-letter-by-letter span {
  display: inline-block;
  opacity: 0;
  animation: letter-appear 0.5s forwards;
  transform-origin: center bottom;
}

@keyframes letter-appear {
  0% {
    opacity: 0;
    transform: translateY(30px) rotateX(-90deg) scale(0.3);
    filter: blur(3px);
  }
  50% {
    opacity: 0.5;
    transform: translateY(15px) rotateX(-45deg) scale(0.7);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0) scale(1);
    filter: blur(0);
  }
}

/* 22. Simple Letter Fade - Простое появление букв */
.text-effect-simple-letter-fade {
  display: inline-block !important;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: 2px;
}

.text-effect-simple-letter-fade span {
  display: inline-block;
  opacity: 0;
  animation: simple-show-letter 0.5s forwards;
}

@keyframes simple-show-letter {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}