.wco-logo {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 1.7rem;
  display: flex;
  align-items: center;
  letter-spacing: 0.1em;
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
  z-index: 2;
  transition: background 1s ease, text-shadow 1s ease;
}

/* Курсор */
.wco-cursor {
  width: 10px;
  height: 1em;
  background: #00c6ff;
  margin-left: 5px;
  animation: wco-blink 1s step-start infinite;
  transition: opacity 1s ease;
}

.wco-cursor.wco-hidden {
  animation: none;
  opacity: 0;
}

@keyframes wco-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Зона с градиентом */
.wco-zone {
  margin-left: 5px;
  background: linear-gradient(90deg, #ff8c00, #ff4500);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
  background-position: center;
  transition: background 0.5s ease;
  line-height: 1; 
  vertical-align: middle;
}

/* Финальный стиль после завершения */
.wco-logo.wco-done {
  background: linear-gradient(90deg, #32cd32, #00fa9a);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  line-height: 1; 
  animation: wco-pulse 0.8s ease forwards;
  
  
  
}

.wco-logo.wco-done .wco-zone {
  background: linear-gradient(90deg, #32cd32, #00fa9a);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

@keyframes wco-pulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
}

/* Медиазапросы для адаптивности */

/* Для экранов до 768px (планшеты и мобильные устройства) */
@media (max-width: 768px) {
  .wco-logo {
    font-size: 1rem; /* Уменьшаем размер шрифта */
  }
  .wco-cursor {
    width: 8px; /* Уменьшаем размер курсора */
    height: 0.8em; /* Уменьшаем высоту курсора */
  }
  .wco-zone {
    margin-left: 3px; /* Меньший отступ */
  }
}

/* Для экранов до 480px (мобильные устройства) */
@media (max-width: 480px) {
  .wco-logo {
    font-size: 0.7rem; /* Еще меньше для мобильных экранов */
  }
  .wco-cursor {
    width: 6px; /* Уменьшаем размер курсора */
    height: 0.7em; /* Уменьшаем высоту курсора */
  }
  .wco-zone {
    margin-left: 2px; /* Еще меньший отступ */
  }
}





@media (max-width: 240px) {
  .wco-logo {
    font-size: 0.5rem; /* Еще меньше для мобильных экранов */
  }
}