/**
 * Visual Enhancements - Улучшения визуала сайта
 * Современные улучшения для более привлекательного дизайна
 */

/* ============================================
   УЛУЧШЕНИЕ ФОНА И АТМОСФЕРЫ
   ============================================ */

/* Более глубокий и насыщенный фон */
body {
  background: 
    radial-gradient(circle at 15% 25%, rgba(255, 0, 153, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 85% 75%, rgba(130, 16, 255, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(146, 111, 255, 0.08) 0%, transparent 60%),
    radial-gradient(circle at 20% 20%, #0c1739 0%, #050915 55%, #02020b 100%);
  background-attachment: fixed;
}

/* Улучшенные градиенты для wrapper */
.wrapper::before {
  background: 
    radial-gradient(ellipse at 15% 30%, rgba(255, 0, 153, 0.4) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 60%, rgba(130, 16, 255, 0.3) 0%, transparent 60%),
    radial-gradient(circle at 60% 20%, rgba(255, 111, 207, 0.22) 0%, transparent 50%),
    radial-gradient(circle at 35% 75%, rgba(114, 83, 255, 0.25) 0%, transparent 50%);
  animation: premiumPulse 15s ease-in-out infinite;
}

/* Более плавная анимация пульсации */
@keyframes premiumPulse {
  0%, 100% { 
    opacity: 0.6;
    transform: scale(1);
  }
  50% { 
    opacity: 0.8;
    transform: scale(1.05);
  }
}

/* ============================================
   УЛУЧШЕНИЕ КАРТОЧЕК КАЗИНО
   ============================================ */

/* Более выразительные тени и свечения */
.brands-item {
  box-shadow:
    0 20px 60px rgba(4, 8, 20, 0.7),
    0 8px 30px rgba(0, 0, 0, 0.4),
    inset 0 0 40px rgba(255, 0, 153, 0.1),
    inset 0 -2px 0 rgba(130, 16, 255, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.brands-item:hover {
  transform: translateY(-8px) scale(1.008);
  box-shadow: 
    0 35px 90px rgba(5, 9, 21, 0.8),
    0 20px 45px rgba(0, 0, 0, 0.5),
    0 0 0 2px rgba(255, 111, 207, 0.4),
    inset 0 0 60px rgba(255, 0, 153, 0.2),
    0 0 120px rgba(146, 111, 255, 0.3);
}

/* Улучшенный эффект свечения при наведении */
.brands-item::before {
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
    rgba(255, 0, 153, 0.2) 0%, 
    transparent 60%
  );
  transition: opacity 0.3s ease;
}

/* ============================================
   УЛУЧШЕНИЕ ТИПОГРАФИКИ
   ============================================ */

/* Более четкая и читаемая типографика */
.brands-item__top a {
  text-shadow: 
    0 2px 8px rgba(5, 4, 12, 0.9),
    0 0 20px rgba(255, 0, 153, 0.25),
    0 0 40px rgba(146, 111, 255, 0.15);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.brands-item:hover .brands-item__top a {
  text-shadow: 
    0 4px 12px rgba(5, 4, 12, 1),
    0 0 30px rgba(255, 0, 153, 0.4),
    0 0 60px rgba(146, 111, 255, 0.25);
  transform: translateX(2px);
}

/* Улучшенная читаемость текста бонусов */
.brands-item__row {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.t16r, .t17r, .t18r, .t19r {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ============================================
   УЛУЧШЕНИЕ КНОПОК
   ============================================ */

.btn--secondary {
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 8px 30px rgba(255, 31, 167, 0.5),
    0 4px 15px rgba(130, 16, 255, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn--secondary:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 12px 40px rgba(255, 31, 167, 0.6),
    0 6px 20px rgba(130, 16, 255, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn--secondary:active {
  transform: translateY(0);
  box-shadow: 
    0 4px 15px rgba(255, 31, 167, 0.4),
    0 2px 8px rgba(130, 16, 255, 0.3);
}

/* Эффект свечения кнопки */
.btn--secondary::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn--secondary:hover::after {
  width: 300px;
  height: 300px;
}

/* ============================================
   УЛУЧШЕНИЕ ИЗОБРАЖЕНИЙ
   ============================================ */

/* Более выразительные изображения логотипов */
.brands-item__top img {
  filter: 
    drop-shadow(0 4px 12px rgba(3, 5, 18, 0.7))
    brightness(1.05)
    contrast(1.1);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.brands-item:hover .brands-item__top img {
  filter: 
    drop-shadow(0 6px 20px rgba(146, 111, 255, 0.4))
    brightness(1.1)
    contrast(1.15);
  transform: scale(1.05) rotate(1deg);
}

/* Улучшенные изображения казино */
.brands-item .bandImg img {
  filter: 
    brightness(1.08) 
    contrast(1.12) 
    drop-shadow(0 10px 30px rgba(255, 31, 167, 0.3))
    saturate(1.1);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.brands-item:hover .bandImg img {
  filter: 
    brightness(1.15) 
    contrast(1.18) 
    drop-shadow(0 15px 40px rgba(146, 111, 255, 0.4))
    saturate(1.15);
  transform: scale(1.03) translateY(-5px);
}

/* ============================================
   УЛУЧШЕНИЕ АНИМАЦИЙ
   ============================================ */

/* Более плавное появление карточек */
@keyframes elegantFadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.brands-item {
  animation: elegantFadeInUp 0.6s cubic-bezier(0.23, 1, 0.32, 1) backwards;
}

.brands-item:nth-child(1) { animation-delay: 0.05s; }
.brands-item:nth-child(2) { animation-delay: 0.1s; }
.brands-item:nth-child(3) { animation-delay: 0.15s; }
.brands-item:nth-child(4) { animation-delay: 0.2s; }
.brands-item:nth-child(5) { animation-delay: 0.25s; }
.brands-item:nth-child(6) { animation-delay: 0.3s; }

/* ============================================
   УЛУЧШЕНИЕ ЗВЕЗДНОГО НЕБА
   ============================================ */

/* Более яркие и заметные звезды */
.starry-sky-star {
  box-shadow: 
    0 0 8px rgba(255, 255, 255, 0.9),
    0 0 16px rgba(255, 255, 255, 0.6),
    0 0 24px rgba(177, 198, 219, 0.4),
    0 0 32px rgba(146, 111, 255, 0.2) !important;
}

/* ============================================
   УЛУЧШЕНИЕ ЦВЕТОВОЙ ПАЛИТРЫ
   ============================================ */

/* Более насыщенные акцентные цвета */
.brands-item__row .t16r strong {
  color: #ff6fcf;
  text-shadow: 0 0 10px rgba(255, 111, 207, 0.5);
}

.brands-item__row .t17r {
  color: #e4e7ff;
  text-shadow: 0 2px 8px rgba(228, 231, 255, 0.3);
}

.brands-item__row .t18r {
  color: #d5dbff;
}

/* ============================================
   УЛУЧШЕНИЕ МОБИЛЬНОЙ ВЕРСИИ
   ============================================ */

@media (max-width: 991px) {
  .brands-item {
    box-shadow:
      0 15px 40px rgba(4, 8, 20, 0.6),
      0 6px 20px rgba(0, 0, 0, 0.35),
      inset 0 0 30px rgba(255, 0, 153, 0.08);
  }
  
  .brands-item:hover {
    transform: translateY(-4px) scale(1.005);
    box-shadow: 
      0 25px 60px rgba(5, 9, 21, 0.7),
      0 12px 30px rgba(0, 0, 0, 0.4),
      0 0 0 1.5px rgba(255, 111, 207, 0.35);
  }
  
  .btn--secondary {
    box-shadow: 
      0 6px 20px rgba(255, 31, 167, 0.4),
      0 3px 10px rgba(130, 16, 255, 0.3);
  }
}

@media (max-width: 767px) {
  .brands-item {
    box-shadow:
      0 10px 30px rgba(4, 8, 20, 0.5),
      0 4px 15px rgba(0, 0, 0, 0.3),
      inset 0 0 20px rgba(255, 0, 153, 0.06);
  }
  
  .brands-item:hover {
    transform: translateY(-2px);
  }
}

/* ============================================
   УЛУЧШЕНИЕ ДОСТУПНОСТИ
   ============================================ */

/* Улучшенный фокус для клавиатурной навигации */
.brands-item:focus-visible,
.btn--secondary:focus-visible {
  outline: 2px solid rgba(255, 111, 207, 0.6);
  outline-offset: 4px;
}

/* Уважение к предпочтениям пользователя */
@media (prefers-reduced-motion: reduce) {
  .brands-item,
  .btn--secondary,
  .brands-item__top img,
  .bandImg img {
    transition: none !important;
    animation: none !important;
  }
  
  .brands-item:hover {
    transform: none;
  }
}

/* ============================================
   ДОПОЛНИТЕЛЬНЫЕ ВИЗУАЛЬНЫЕ УЛУЧШЕНИЯ
   ============================================ */

/* Тонкая рамка вокруг контента для глубины */
.conteiner {
  position: relative;
}

.conteiner::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(
    135deg,
    rgba(255, 111, 207, 0.1) 0%,
    transparent 25%,
    transparent 75%,
    rgba(146, 111, 255, 0.1) 100%
  );
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.conteiner:hover::before {
  opacity: 1;
}

/* Улучшенный футер */
.text18 {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

.text18:hover {
  opacity: 1;
}