.ui-style-0 { --primary-hue: 210; }
.ui-style-1 { --primary-hue: 200; }
.ui-style-2 { --primary-hue: 190; }
.ui-style-3 { --primary-hue: 220; }
.ui-style-4 { --primary-hue: 230; }
.ui-style-5 { --primary-hue: 180; }
.ui-style-6 { --primary-hue: 170; }
.ui-style-7 { --primary-hue: 240; }
.ui-style-8 { --primary-hue: 160; }
.ui-style-9 { --primary-hue: 195; }
.ui-style-10 { --primary-hue: 205; }
.ui-style-11 { --primary-hue: 215; }
.ui-style-12 { --primary-hue: 225; }
.ui-style-13 { --primary-hue: 185; }
.ui-style-14 { --primary-hue: 175; }
.ui-style-15 { --primary-hue: 165; }

body {
  transition: background-color 0.3s ease;
}

.logo:hover {
  opacity: 0.8;
  transform: scale(1.02);
  transition: all 0.3s ease;
}

.video-card,
.video-item,
.related-item {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.video-card:hover,
.related-item:hover {
  transform: translateY(-4px);
}

.section {
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero {
  animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.tag {
  transition: all 0.2s ease;
}

.tag:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}