.yjdm-creator-layout {
  background: linear-gradient(135deg, #f5f3ff 0%, #fdf4ff 50%, #f0f9ff 100%);
}

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

.yjdm-creator-avatar::after {
  content: '✨';
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 24px;
  animation: creatorSparkle 2s 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; }
}

.yjdm-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);
}

.yjdm-tool-card:hover {
  transform: translateY(-10px) rotateY(5deg);
  box-shadow: 0 25px 60px rgba(139, 92, 246, 0.3);
}

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

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

@keyframes toolPulse {
  0% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); }
  50% { box-shadow: 0 0 30px rgba(139, 92, 246, 0.6); }
  100% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); }
}

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

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

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

.yjdm-work-item:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 45px rgba(139, 92, 246, 0.25);
}

.yjdm-creator-badge {
  background: linear-gradient(45deg, #8b5cf6, #ec4899);
  animation: creatorBadgeGlow 3s infinite;
}

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