yss-project/src/app/pages/designer/dashboard/interactive-effects.scss

// 交互效果样式
// 全局交互动画变量
:root {
  --transition-fast: 0.15s ease-out;
  --transition-normal: 0.25s ease-out;
  --transition-slow: 0.35s ease-out;
}

// 卡片交互效果增强
.core-card {
  transition: all var(--transition-normal);
  
  &:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  }
  
  &:active {
    transform: translateY(0) scale(0.98);
    transition: all var(--transition-fast);
  }
}

// 按钮交互效果
.nav-btn, .view-toggle button, .add-shift-btn {
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width var(--transition-normal), height var(--transition-normal);
  }
  
  &:hover::before {
    width: 300px;
    height: 300px;
  }
  
  &:active {
    transform: scale(0.95);
  }
}

// 列表行交互效果
.list-row {
  transition: all var(--transition-normal);
  
  &:hover {
    background: rgba(0, 122, 255, 0.05);
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.1);
  }
}

// 工作量圆环特殊效果
.workload-ring {
  transition: all var(--transition-normal);
  
  &:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
  }
}

// 紧急任务卡片特殊效果
.urgent-task {
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 59, 48, 0.1) 50%, transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-normal);
  }
  
  &:hover::after {
    opacity: 1;
  }
}

// 加载状态效果
.loading {
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer 1.5s infinite;
  }
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

// 成功状态动画
.success-state {
  animation: successPulse 0.6s ease-out;
}

@keyframes successPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

// 错误状态动画
.error-state {
  animation: errorShake 0.5s ease-out;
}

@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

// 微交互反馈
.interactive-element {
  &:focus-visible {
    outline: 2px solid rgba(0, 122, 255, 0.6);
    outline-offset: 2px;
  }
}

// 减少动画偏好设置支持
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}