.xtv-creator-layout {
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 50%, #e0e7ff 100%);
}

.xtv-creator-avatar {
  transition: all 0.5s ease;
  position: relative;
}

.xtv-creator-avatar::after {
  content: '🎬';
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 24px;
  animation: creatorSparkle 2.5s infinite;
}

@keyframes creatorSparkle {
  0% { transform: scale(1) rotate(0deg); opacity: 0.7; }
  50% { transform: scale(1.3) rotate(180deg); opacity: 1; }
  100% { transform: scale(1) rotate(360deg); opacity: 0.7; }
}

.xtv-tool-card {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(15px);
}

.xtv-tool-card:hover {
  transform: translateY(-12px) rotateY(8deg);
  box-shadow: 0 30px 70px rgba(124, 58, 237, 0.3);
}

.xtv-tool-icon {
  transition: all 0.3s ease;
}

.xtv-tool-card:hover .xtv-tool-icon {
  transform: scale(1.2) rotate(-12deg);
  animation: toolPulse 1.2s infinite;
}

@keyframes toolPulse {
  0% { box-shadow: 0 0 25px rgba(124, 58, 237, 0.3); }
  50% { box-shadow: 0 0 35px rgba(124, 58, 237, 0.6); }
  100% { box-shadow: 0 0 25px rgba(124, 58, 237, 0.3); }
}

.xtv-work-item {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.xtv-work-item::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.1) 0%, transparent 70%);
  transform: scale(0);
  transition: transform 0.5s ease;
}

.xtv-work-item:hover::before {
  transform: scale(1);
}

.xtv-work-item:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 25px 55px rgba(124, 58, 237, 0.25);
}

.xtv-creator-badge {
  background: linear-gradient(45deg, #8b5cf6, #6366f1);
  animation: creatorBadgeGlow 3.5s infinite;
}

@keyframes creatorBadgeGlow {
  0% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.2) saturate(1.3); }
  100% { filter: brightness(1) saturate(1); }
}