/* ===== DEV.CSS — стили для DEV-статуса ===== */

/* ---- Премиальный DEV-текст справа от имени ---- */
.dev-text-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 14px;
  margin-left: 10px;
  font-family: 'DIN Pro', 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #17ffff;
  background: linear-gradient(135deg, rgba(23, 255, 255, 0.12), rgba(23, 255, 255, 0.04));
  border: 1px solid rgba(23, 255, 255, 0.3);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  animation: dev-text-glow 3s ease-in-out infinite;
  text-shadow: 0 0 12px rgba(23, 255, 255, 0.6);
  height: 24px;
  flex-shrink: 0;
}

.dev-text-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(23, 255, 255, 0.15) 50%,
    transparent 100%
  );
  animation: dev-shimmer 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes dev-text-glow {
  0%, 100% {
    box-shadow:
      0 0 8px rgba(23, 255, 255, 0.2),
      inset 0 0 8px rgba(23, 255, 255, 0.05);
  }
  50% {
    box-shadow:
      0 0 16px rgba(23, 255, 255, 0.4),
      inset 0 0 12px rgba(23, 255, 255, 0.1);
  }
}

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

/* ---- Контейнер имени + DEV-бейдж: выравнивание по центру ---- */
.profile-name,
#userName,
.follow-name {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
}

/* ---- Голубое имя для DEV пользователей ---- */
.username-dev {
  color: #17ffff !important;
  text-shadow: 0 0 16px rgba(23, 255, 255, 0.4) !important;
}

/* ============================================================
   DEV AVATAR — пульсация + конфетти (только на страницах профиля)
   ============================================================ */

/* Контейнер аватарки — переопределяем overflow:hidden из profile.html */
.profile-avatar.avatar-dev-glow,
.profile-avatar.avatar-dev-glow::before,
.profile-avatar.avatar-dev-glow::after {
  overflow: visible !important;
}

.profile-avatar.avatar-dev-glow {
  position: relative !important;
  overflow: visible !important;
  z-index: 1 !important;
}

/* Пульсирующие кольца — создаются через JS */
.dev-pulse-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid #17ffff;
  opacity: 0;
  animation: dev-pulse-ring 3s ease-in-out infinite;
  z-index: 0 !important;
  pointer-events: none;
}

.dev-pulse-ring-2 {
  inset: -14px;
  border: 1px solid #66ffff;
  animation-delay: 1.5s;
}

@keyframes dev-pulse-ring {
  0%, 100% {
    opacity: 0;
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(23, 255, 255, 0);
  }
  30% {
    opacity: 0.8;
    transform: scale(1.02);
    box-shadow: 0 0 15px 4px rgba(23, 255, 255, 0.35);
  }
  60% {
    opacity: 0.5;
    transform: scale(1.06);
    box-shadow: 0 0 25px 8px rgba(23, 255, 255, 0.2);
  }
  90% {
    opacity: 0;
    transform: scale(1.12);
    box-shadow: 0 0 10px 3px rgba(23, 255, 255, 0.05);
  }
}

/* Контент аватарки (img или i) — поверх колец и конфетти */
.dev-avatar-content {
  position: relative !important;
  z-index: 2 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}

.dev-avatar-content img,
.dev-avatar-content i {
  filter: drop-shadow(0 0 10px rgba(23, 255, 255, 0.5));
  transition: filter 0.3s ease;
}

.dev-avatar-content:hover img,
.dev-avatar-content:hover i {
  filter: drop-shadow(0 0 20px rgba(23, 255, 255, 0.8));
}

/* ---- Вихревые конфетти: вылетают из-под аватарки, закручиваются спиралью ---- */
.dev-confetti-container {
  position: absolute;
  inset: -30px;
  pointer-events: none;
  z-index: 0 !important;
  overflow: visible;
  /* Маска: скрываем центральную область аватарки, чтобы частицы были видны
     только за её пределами — исключает «спавн» в центре при отсутствии аватарки */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 42%, black 46%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 42%, black 46%);
}

.dev-confetti {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size);
  height: var(--size);
  background: var(--color);
  border-radius: var(--shape);
  box-shadow: 0 0 8px var(--color);
  opacity: 0;
  animation: confetti-vortex var(--dur) cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
  animation-delay: var(--delay);
  will-change: opacity, transform;
}

/* Анимация: частица выходит из центра, закручивается спиралью с ускорением и гаснет */
@keyframes confetti-vortex {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(0.1);
  }
  15% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(calc(var(--tx) * 0.25), calc(var(--ty) * 0.25)) rotate(calc(var(--spin) * 80deg)) scale(0.6);
  }
  30% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.5)) rotate(calc(var(--spin) * 200deg)) scale(1);
  }
  60% {
    opacity: 0.8;
    transform: translate(-50%, -50%) translate(calc(var(--tx) * 0.9), calc(var(--ty) * 0.9)) rotate(calc(var(--spin) * 460deg)) scale(0.85);
  }
  85% {
    opacity: 0.3;
    transform: translate(-50%, -50%) translate(calc(var(--tx) * 1.15), calc(var(--ty) * 1.15)) rotate(calc(var(--spin) * 720deg)) scale(0.5);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(calc(var(--tx) * 1.3), calc(var(--ty) * 1.3)) rotate(calc(var(--spin) * 900deg)) scale(0.15);
  }
}

/* ---- DEV-профиль: улучшенная шапка ---- */
.profile-header.dev-profile {
  background: linear-gradient(145deg, #0f1a24, #0d1520);
  border: 1px solid rgba(23, 255, 255, 0.2);
  box-shadow:
    0 0 30px rgba(23, 255, 255, 0.08),
    inset 0 1px 0 rgba(23, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
}

.profile-header.dev-profile::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 300%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    #17ffff,
    #66ffff,
    #17ffff,
    transparent
  );
  animation: dev-scan 6s linear infinite;
}

@keyframes dev-scan {
  from { left: -100%; }
  to { left: 100%; }
}

/* ---- DEV в карточке модели (автор) ---- */
.card-author-pro {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.card-author-pro .author-name-text.username-dev {
  color: #17ffff !important;
  text-shadow: 0 0 12px rgba(23, 255, 255, 0.4);
}

/* ---- DEV в списке подписок/подписчиков ---- */
.follow-item .follow-name.username-dev {
  color: #17ffff !important;
  text-shadow: 0 0 12px rgba(23, 255, 255, 0.4);
}

/* ---- DEV в комментариях ---- */
.comment-badge-dev {
  color: #17ffff !important;
  border-color: rgba(23, 255, 255, 0.3) !important;
  background: rgba(23, 255, 255, 0.1) !important;
}

/* ---- Адаптив ---- */
@media (max-width: 400px) {
  .dev-text-badge {
    padding: 3px 10px;
    font-size: 12px;
    letter-spacing: 2px;
    margin-left: 6px;
  }
}

/* ---- DEV-кнопка профиля в хедере ---- */
.btn-avatar.dev-avatar-border {
  border-color: rgba(23, 255, 255, 0.35) !important;
  box-shadow: 0 0 8px rgba(23, 255, 255, 0.15);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.btn-avatar.dev-avatar-border:hover {
  border-color: rgba(23, 255, 255, 0.6) !important;
  box-shadow: 0 0 14px rgba(23, 255, 255, 0.25);
}