/* ========================================
   Профессиональный вариант QRIUM логотипа
   ======================================== */

.qrium-logo .logo-letter-pro {
  display: inline-block;
  color: #1A1A1A;
  font-weight: 900;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  cursor: default;
  -webkit-text-stroke-width: 0;
  -webkit-text-stroke-color: transparent;
  opacity: 0;
  /* Две анимации: появление и переключение fill/stroke */
  animation: fadeInLetter 0.6s ease forwards, letterPulse 3s ease-in-out infinite;
}

/* Анимация появления */
@keyframes fadeInLetter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Анимация переключения между stroke и fill */
@keyframes letterPulse {
  0%, 100% {
    color: #1A1A1A;
    -webkit-text-stroke-width: 0;
    -webkit-text-stroke-color: transparent;
  }
  50% {
    color: transparent;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #1A1A1A;
  }
}

/* Разные задержки для каждой буквы */
.qrium-logo .logo-letter-pro:nth-child(1) {
  animation-delay: 0.1s, 0s;
}

.qrium-logo .logo-letter-pro:nth-child(2) {
  animation-delay: 0.2s, 0.3s;
}

.qrium-logo .logo-letter-pro:nth-child(3) {
  animation-delay: 0.3s, 0.6s;
}

.qrium-logo .logo-letter-pro:nth-child(4) {
  animation-delay: 0.4s, 0.9s;
}

.qrium-logo .logo-letter-pro:nth-child(5) {
  animation-delay: 0.5s, 1.2s;
}

/* При наведении на конкретную букву: останавливаем анимацию и показываем stroke только для этой буквы */
.qrium-logo .logo-letter-pro:hover {
  animation-play-state: paused, paused;
  color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #1A1A1A;
  transform: scale(1.1);
}