/* Базовые стили для рамки */

.avatar-frame:hover {
  transform: scale(1.05);
}

/* Улучшенные стили для анимированных рамок */
.avatar-frame.frame-animated {
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* Золотая рамка */
.avatar-frame.frame-golden {
  background: linear-gradient(45deg, #ffd700, #daa520, #ffd700);
  padding: 6px;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.avatar-frame.frame-golden:hover {
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
}

/* Серебряная рамка */
.avatar-frame.frame-silver {
  background: linear-gradient(45deg, #c0c0c0, #a9a9a9, #c0c0c0);
  padding: 6px;
  box-shadow: 0 0 15px rgba(192, 192, 192, 0.5);
}

.avatar-frame.frame-silver:hover {
  box-shadow: 0 0 25px rgba(192, 192, 192, 0.8);
}

/* Хрустальная рамка */
.avatar-frame.frame-crystal {
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
  padding: 4px;
  backdrop-filter: blur(5px);
}

.avatar-frame.frame-crystal:hover {
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
}

/* Ледяной лайм */
.avatar-frame.frame-ice-lime {
  background: rgba(180, 255, 220, 0.3);
  border: 2px solid rgba(186, 255, 221, 0.9);
  box-shadow: 0 0 20px rgba(180, 255, 220, 0.4);
  padding: 4px;
  backdrop-filter: blur(4px);
}

.avatar-frame.frame-ice-lime:hover {
  box-shadow: 0 0 30px rgba(180, 255, 220, 0.8);
}

/* Северное сияние */
.avatar-frame.frame-aurora {
  background: rgba(122, 255, 240, 0.15);
  border: 2px solid rgba(170, 130, 255, 0.9);
  box-shadow: 0 0 20px rgba(140, 220, 255, 0.4);
  padding: 4px;
  backdrop-filter: blur(4px);
}

.avatar-frame.frame-aurora:hover {
  box-shadow: 0 0 30px rgba(170, 130, 255, 0.8);
}

/* Северный мох */
.avatar-frame.frame-north-moss {
  background: linear-gradient(135deg, #3a6f62, #285349);
  padding: 6px;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(60, 120, 100, 0.5);
}

.avatar-frame.frame-north-moss:hover {
  box-shadow: 0 0 25px rgba(60, 120, 100, 0.8);
}

/* Снежный вуаль */
.avatar-frame.frame-snow-veil {
  background: linear-gradient(135deg, #dff4ff, #b6deef);
  padding: 6px;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(180, 230, 255, 0.5);
}

.avatar-frame.frame-snow-veil:hover {
  box-shadow: 0 0 25px rgba(180, 230, 255, 0.8);
}

/* Лавандовый лёд */
.avatar-frame.frame-lavender-ice {
  background: linear-gradient(135deg, #9fa8e8, #7f89c9);
  padding: 6px;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(150, 160, 230, 0.5);
}

.avatar-frame.frame-lavender-ice:hover {
  box-shadow: 0 0 25px rgba(150, 160, 230, 0.8);
}


/* Огненная анимированная рамка */
.avatar-frame.frame-fire {
  background: linear-gradient(45deg, #ff6b00, #ff0000, #ff6b00);
  background-size: 200% 200%;
  animation: flameAnimation 2s ease infinite;
  padding: 6px;
  box-shadow: 0 0 20px rgba(255, 107, 0, 0.7);
}

.avatar-frame.frame-fire:hover {
  box-shadow: 0 0 30px rgba(255, 107, 0, 0.9);
  animation-duration: 1.5s;
}

@keyframes flameAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Ледяная анимированная рамка */
.avatar-frame.frame-ice {
  background: linear-gradient(45deg, #00ffff, #00bfff, #00ffff);
  background-size: 200% 200%;
  animation: iceAnimation 3s ease infinite;
  padding: 6px;
  box-shadow: 0 0 20px rgba(0, 191, 255, 0.7);
}

.avatar-frame.frame-ice:hover {
  box-shadow: 0 0 30px rgba(0, 191, 255, 0.9);
  animation-duration: 2s;
}

@keyframes iceAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Радужная анимированная рамка */
.avatar-frame.frame-rainbow {
  background: linear-gradient(45deg, #ff0000, #ff9900, #ffff00, #00ff00, #00ffff, #0000ff, #9900ff, #ff0000);
  background-size: 400% 400%;
  animation: rainbowAnimation 5s linear infinite;
  padding: 6px;
}

.avatar-frame.frame-rainbow:hover {
  animation-duration: 3s;
}

@keyframes rainbowAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Космическая анимированная рамка */
.avatar-frame.frame-nebula {
  background: linear-gradient(45deg, #0a0a2a, #1a1a4a, #0a0a2a);
  background-size: 200% 200%;
  animation: nebulaAnimation 15s ease infinite;
  padding: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(75, 0, 130, 0.6);
}

.avatar-frame.frame-nebula:hover {
  box-shadow: 0 0 35px rgba(128, 0, 255, 0.8);
}

/* Создаем множество звезд */
.avatar-frame.frame-nebula::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.9) 0.5px, transparent 1px),
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.8) 0.7px, transparent 1.2px),
    radial-gradient(circle at 50% 60%, rgba(255, 255, 255, 0.9) 0.6px, transparent 1.1px),
    radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.7) 0.8px, transparent 1.3px),
    radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.6) 1px, transparent 1.5px),
    radial-gradient(circle at 15% 75%, rgba(255, 255, 255, 0.8) 0.5px, transparent 1px),
    radial-gradient(circle at 85% 35%, rgba(255, 255, 255, 0.9) 0.7px, transparent 1.2px),
    radial-gradient(circle at 25% 90%, rgba(255, 255, 255, 0.7) 0.6px, transparent 1.1px),
    radial-gradient(circle at 65% 15%, rgba(255, 255, 255, 0.8) 0.8px, transparent 1.3px),
    radial-gradient(circle at 95% 65%, rgba(255, 255, 255, 0.6) 1px, transparent 1.5px);
  animation: starsTwinkle 8s ease-in-out infinite;
  opacity: 0.7;
  z-index: 1;
}

/* Дополнительный слой звезд */
.avatar-frame.frame-nebula::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  background: 
    radial-gradient(circle at 5% 25%, rgba(255, 255, 255, 0.4) 0.3px, transparent 0.8px),
    radial-gradient(circle at 35% 45%, rgba(255, 255, 255, 0.3) 0.4px, transparent 0.9px),
    radial-gradient(circle at 55% 65%, rgba(255, 255, 255, 0.5) 0.2px, transparent 0.7px),
    radial-gradient(circle at 75% 85%, rgba(255, 255, 255, 0.4) 0.5px, transparent 1px),
    radial-gradient(circle at 85% 5%, rgba(255, 255, 255, 0.3) 0.6px, transparent 1.1px),
    radial-gradient(circle at 20% 70%, rgba(255, 255, 255, 0.5) 0.3px, transparent 0.8px),
    radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.4) 0.4px, transparent 0.9px),
    radial-gradient(circle at 30% 95%, rgba(255, 255, 255, 0.3) 0.2px, transparent 0.7px),
    radial-gradient(circle at 60% 20%, rgba(255, 255, 255, 0.5) 0.5px, transparent 1px),
    radial-gradient(circle at 90% 60%, rgba(255, 255, 255, 0.4) 0.6px, transparent 1.1px);
  animation: starsTwinkle 12s ease-in-out infinite reverse;
  opacity: 0.5;
  z-index: 1;
}

@keyframes nebulaAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes starsTwinkle {
  0%, 100% {
    opacity: 0.5;
    transform: translate(0, 0) scale(1);
  }
  25% {
    opacity: 0.8;
    transform: translate(-2px, -2px) scale(1.02);
  }
  50% {
    opacity: 0.6;
    transform: translate(2px, 2px) scale(0.98);
  }
  75% {
    opacity: 0.9;
    transform: translate(-1px, 1px) scale(1.01);
  }
}

.avatar-frame.frame-nebula .user-avatar {
  position: relative;
  z-index: 2;
}

/* Рамка с древними рунами */
.avatar-frame.frame-ancient {
  background: linear-gradient(45deg, #8B4513, #A0522D, #8B4513);
  padding: 8px;
  border: 2px solid #5D4037;
  box-shadow: 0 0 15px rgba(139, 69, 19, 0.7);
  position: relative;
  overflow: hidden;
}

.avatar-frame.frame-ancient:hover {
  box-shadow: 0 0 25px rgba(139, 69, 19, 0.9);
}

.avatar-frame.frame-ancient::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 215, 0, 0.1) 2px, rgba(255, 215, 0, 0.1) 4px),
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255, 215, 0, 0.1) 2px, rgba(255, 215, 0, 0.1) 4px);
  border-radius: 50%;
  opacity: 0.7;
}

.avatar-frame.frame-ancient::after {
  content: '最高の';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 215, 0, 0.3);
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 8px;
  z-index: 1;
}

/* Электрическая рамка */
.avatar-frame.frame-abyss {
  background: #0a0a2a;
  padding: 6px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 195, 255, 0.5);
  border: 1px solid rgba(0, 195, 255, 0.3);
}

.avatar-frame.frame-abyss:hover {
  box-shadow: 0 0 25px rgba(0, 195, 255, 0.8);
}

/* Галактическая рамка */
.avatar-frame.frame-galaxy {
  background: #000;
  padding: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(128, 0, 255, 0.7);
}

.avatar-frame.frame-galaxy:hover {
  box-shadow: 0 0 30px rgba(128, 0, 255, 0.9);
}

.avatar-frame.frame-galaxy::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: 
    radial-gradient(circle at center, transparent 30%, rgba(75, 0, 130, 0.8) 70%),
    repeating-conic-gradient(
      from 0deg,
      transparent 0deg 10deg,
      rgba(148, 0, 211, 0.7) 10deg 20deg,
      transparent 20deg 30deg,
      rgba(75, 0, 130, 0.7) 30deg 40deg
    );
  animation: galaxySpin 15s linear infinite;
  opacity: 0.8;
  z-index: 1;
}

.avatar-frame.frame-galaxy::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  animation: galaxyPulse 5s ease-in-out infinite alternate;
  z-index: 1;
}

@keyframes galaxySpin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes galaxyPulse {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 0.7;
  }
}

/* Адаптивность для рамок */
@media (max-width: 576px) {
  .avatar-frame {
    padding: 3px;
  }
  
  .avatar-frame.frame-golden,
  .avatar-frame.frame-silver,
  .avatar-frame.frame-fire,
  .avatar-frame.frame-ice,
  .avatar-frame.frame-rainbow,
  .avatar-frame.frame-electric {
    padding: 4px;
  }

  .avatar-frame.frame-nebula,
  .avatar-frame.frame-galaxy {
    padding: 5px;
  }

  .avatar-frame.frame-ancient {
    padding: 6px;
  }

  .avatar-frame.frame-ancient::after {
    font-size: 16px;
    letter-spacing: 4px;
  }
  
  .avatar-frame.frame-nebula::before,
  .avatar-frame.frame-nebula::after {
    animation-duration: 10s;
  }
  
  .avatar-frame.frame-abyss::before,
  .avatar-frame.frame-abyss::after {
    animation-duration: 2.5s;
  }
}

/* Убедимся, что аватар всегда поверх рамки */
.avatar-frame .user-avatar {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}


/* Северное Дыхание */
.avatar-frame.frame-northbreath {
  background: linear-gradient(160deg, #6bd3ff, #5860ff, #8b9bff, #6bd3ff);
  border: 2px solid rgba(180, 220, 255, 0.8);
  box-shadow: 0 0 20px rgba(130, 160, 255, 0.5);
  padding: 4px;
  animation: auroraMove 8s ease-in-out infinite;
  border-radius: 50%;
  background-size: 400% 400%; /* Увеличиваем размер градиента */
}

@keyframes auroraMove {
  0% { 
    background-position: 0% 50%;
    filter: hue-rotate(0deg);
  }
  25% {
    background-position: 50% 100%;
  }
  50% { 
    background-position: 100% 50%;
    filter: hue-rotate(30deg);
  }
  75% {
    background-position: 50% 0%;
  }
  100% { 
    background-position: 0% 50%;
    filter: hue-rotate(0deg);
  }
}

.avatar-frame.frame-northbreath:hover {
  box-shadow: 0 0 35px rgba(160, 200, 255, 1);
  animation-duration: 4s; /* Ускоряем анимацию при наведении */
}

/* Новогодняя ёлка */
.avatar-frame.frame-christmas-tree {
  background: linear-gradient(135deg, #004d00, #006600, #004d00);
  padding: 6px;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(0, 77, 0, 0.5);
  position: relative;
  overflow: hidden;
}
.avatar-frame.frame-christmas-tree::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.8) 2px, transparent 3px),
    radial-gradient(circle at 50% 50%, rgba(255, 0, 0, 0.8) 2px, transparent 3px),
    radial-gradient(circle at 80% 70%, rgba(0, 191, 255, 0.8) 2px, transparent 3px);
  animation: lightsBlink 2s ease-in-out infinite;
  opacity: 0.7;
  z-index: 1;
}
.avatar-frame.frame-christmas-tree:hover {
  box-shadow: 0 0 25px rgba(0, 77, 0, 0.8);
  animation-duration: 1.5s;
}
@keyframes lightsBlink {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.avatar-frame.frame-christmas-tree .user-avatar {
  z-index: 2;
}

/* Праздничные огни */
.avatar-frame.frame-holiday-lights {
  background: #000;
  padding: 6px;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
  position: relative;
  overflow: hidden;
}
.avatar-frame.frame-holiday-lights::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, #ff0000, #ffff00, #00ff00, #0000ff, #ff0000);
  background-size: 400% 400%;
  animation: lightsGradient 4s linear infinite;
  opacity: 0.6;
  z-index: 1;
}
.avatar-frame.frame-holiday-lights:hover {
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
  animation-duration: 2s;
}
@keyframes lightsGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.avatar-frame.frame-holiday-lights .user-avatar {
  z-index: 2;
}

/* Зимний лёд */
.avatar-frame.frame-winter-ice {
  background: rgba(173, 216, 230, 0.3);
  border: 2px solid rgba(135, 206, 235, 0.9);
  box-shadow: 0 0 20px rgba(135, 206, 235, 0.4);
  padding: 4px;
  backdrop-filter: blur(5px);
}
.avatar-frame.frame-winter-ice:hover {
  box-shadow: 0 0 30px rgba(135, 206, 235, 0.8);
}