ali_ai_learn_web/src/pages/Home/SectionScenes.vue

<template>
  <section class="section-scenes relative overflow-hidden py-28" ref="sectionRef">
    <!-- 背景 -->
    <div class="absolute inset-0" style="background: linear-gradient(180deg, #ffffff 0%, #f8f5ff 50%, #f0f4ff 100%);"></div>
    <!-- 背景装饰圆 -->
    <div class="absolute inset-0 pointer-events-none overflow-hidden">
      <div class="scene-bg-orb scene-bg-orb-1"></div>
      <div class="scene-bg-orb scene-bg-orb-2"></div>
    </div>

    <div class="relative z-10 max-w-7xl mx-auto px-6">
      <!-- 标题 -->
      <div class="text-center mb-16 reveal-up" :class="{ 'is-visible': isVisible }">
        <span class="inline-flex items-center gap-2 bg-violet-50 border border-violet-200 text-violet-600 text-xs font-bold px-4 py-1.5 rounded-full mb-5 tracking-widest uppercase">
          <span class="w-1.5 h-1.5 bg-violet-500 rounded-full animate-pulse"></span>
          {{ $t('scenes.badge') }}
        </span>
        <h2 class="text-5xl lg:text-6xl font-black text-gray-900 mb-5 leading-tight">
          {{ $t('scenes.title') }}<span class="scenes-gradient-text">{{ $t('scenes.subtitle') }}</span>
        </h2>
        <p class="text-gray-500 text-lg max-w-2xl mx-auto leading-relaxed">
          {{ $t('scenes.description') }}
        </p>
      </div>

      <!-- 场景切换 Tab -->
      <div class="flex flex-wrap justify-center gap-3 mb-14 reveal-up" :class="{ 'is-visible': isVisible }" style="transition-delay: 0.15s;">
        <button
          v-for="(scene, i) in scenes"
          :key="i"
          @click="switchScene(i)"
          class="scene-tab-btn"
          :class="activeScene === i ? 'scene-tab-active' : 'scene-tab-inactive'"
        >
          <span class="scene-tab-icon">{{ scene.icon }}</span>
          <span>{{ scene.name }}</span>
          <span class="scene-tab-count" :class="activeScene === i ? 'scene-tab-count-active' : ''">{{ scene.count }}</span>
        </button>
      </div>

      <!-- 主展示区 -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-stretch reveal-up" :class="{ 'is-visible': isVisible }" style="transition-delay: 0.3s;">

        <!-- 左侧：场景可视化 -->
        <div class="scene-visual-card" ref="visualCardRef" @mousemove="onCardMouseMove" @mouseleave="onCardMouseLeave">
          <!-- 图片层 -->
          <div class="scene-img-wrapper">
            <Transition name="scene-zoom">
              <img
                :key="activeScene"
                :src="currentScene.img"
                :alt="currentScene.name"
                class="scene-img"
              />
            </Transition>
            <div class="scene-img-overlay"></div>

            <!-- 顶部效率标签 -->
            <div class="scene-efficiency-badge">
              <span class="text-3xl font-black text-white">{{ currentScene.efficiency }}</span>
              <div>
                <div class="text-white text-xs font-bold">{{$t('scenes.metrics.efficiencyImprovement')}}</div>
                <div class="text-white/60 text-xs">{{ currentScene.efficiencyLabel }}</div>
              </div>
            </div>

            <!-- 场景名称 -->
            <div class="scene-bottom-info">
              <div class="flex items-center gap-3 mb-2">
                <span class="text-3xl">{{ currentScene.icon }}</span>
                <h3 class="text-white text-2xl font-black">{{ currentScene.name }}</h3>
              </div>
              <p class="text-white/70 text-sm leading-relaxed mb-4">{{ currentScene.desc }}</p>

              <!-- 三项指标 -->
              <div class="grid grid-cols-3 gap-3">
                <div v-for="metric in currentScene.metrics" :key="metric.label"
                  class="scene-metric-card">
                  <div class="text-white font-black text-lg">{{ metric.value }}</div>
                  <div class="text-white/50 text-xs mt-0.5">{{ metric.label }}</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 底部工具标签 -->
          <div class="scene-tools-bar">
            <span class="text-white/40 text-xs mr-2">{{$t('scenes.toolsTitle')}}</span>
            <Transition name="tools-fade">
              <div :key="activeScene" class="flex flex-wrap gap-2">
                <span v-for="(tool, ti) in currentScene.tools" :key="tool"
                  class="scene-tool-tag"
                  :style="{ animationDelay: `${ti * 0.05}s` }">
                  {{ tool }}
                </span>
              </div>
            </Transition>
          </div>
        </div>

        <!-- 右侧：步骤流程 -->
        <div class="flex flex-col">
          <!-- 描述 -->
          <div class="mb-6">
            <Transition name="text-slide" mode="out-in">
              <div :key="activeScene">
                <h3 class="text-2xl font-black text-gray-900 mb-2">{{ currentScene.name }}</h3>
                <p class="text-gray-500 text-base leading-relaxed">{{ currentScene.longDesc }}</p>
              </div>
            </Transition>
          </div>

          <!-- 步骤列表（工作流节点卡片风格）-->
          <div class="flex-1">
            <Transition name="steps-fade" mode="out-in">
              <div :key="activeScene" class="wf-steps-container">
                <div
                  v-for="(step, idx) in currentScene.steps"
                  :key="step.title"
                  class="wf-step-row"
                  :style="{ animationDelay: `${idx * 0.1}s` }"
                >
                  <!-- 左侧：连接线 + 节点圆 -->
                  <div class="wf-step-spine">
                    <!-- 连接线（非最后一项才显示）-->
                    <div v-if="idx < currentScene.steps.length - 1" class="wf-spine-line">
                      <!-- 流动粒子 -->
                      <div class="wf-spine-particle" :style="{ animationDelay: `${idx * 0.4}s` }"></div>
                    </div>
                    <!-- 节点圆 -->
                    <div class="wf-step-node"
                      :class="step.done ? 'wf-node-done' : 'wf-node-pending'"
                      @click="activeStep = activeStep === idx ? -1 : idx">
                      <span v-if="step.done" class="wf-node-check">✓</span>
                      <span v-else class="wf-node-num">{{ idx + 1 }}</span>
                      <!-- 脉冲环（未完成节点）-->
                      <div v-if="!step.done" class="wf-node-pulse"></div>
                    </div>
                  </div>

                  <!-- 右侧：节点卡片 -->
                  <div class="wf-step-card"
                    :class="activeStep === idx ? 'wf-step-card-active' : 'wf-step-card-inactive'"
                    @click="activeStep = activeStep === idx ? -1 : idx">
                    <!-- 卡片顶部 -->
                    <div class="wf-step-card-top">
                      <div class="wf-step-card-title">{{ step.title }}</div>
                      <div class="wf-step-card-badges">
                        <span class="wf-step-time-badge">⏱ {{ step.time }}</span>
                        <span class="wf-step-status-badge" :class="step.done ? 'wf-status-done' : 'wf-status-pending'">
                          {{ step.done ? $t('scenes.status.completed') : $t('scenes.status.pending') }}
                        </span>
                      </div>
                    </div>
                    <!-- 描述 -->
                    <div class="wf-step-card-desc">{{ step.desc }}</div>
                    <!-- 展开标签 -->
                    <Transition name="tags-expand">
                      <div v-if="activeStep === idx" class="wf-step-tags">
                        <span v-for="tag in step.tags" :key="tag" class="wf-step-tag">{{ tag }}</span>
                      </div>
                    </Transition>
                  </div>
                </div>
              </div>
            </Transition>
          </div>

          <!-- CTA 按钮 -->
          <div class="mt-6 flex gap-3">
            <button class="scene-cta-primary flex-1">
              {{ $t('scenes.cta.experience') }} · {{ currentScene.name }} →
            </button>
            <button class="scene-cta-secondary px-5">
              {{ $t('scenes.cta.viewCases') }} 
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const activeScene = ref(0)
const activeStep = ref(0)
const isVisible = ref(false)
const sectionRef = ref(null)
const visualCardRef = ref(null)

onMounted(() => {
  const observer = new IntersectionObserver(
    (entries) => { entries.forEach(e => { if (e.isIntersecting) { isVisible.value = true; observer.unobserve(e.target) } }) },
    { threshold: 0.1 }
  )
  if (sectionRef.value) observer.observe(sectionRef.value)
})

function onCardMouseMove(e) {
  const card = visualCardRef.value
  if (!card) return
  const rect = card.getBoundingClientRect()
  const x = (e.clientX - rect.left) / rect.width - 0.5
  const y = (e.clientY - rect.top) / rect.height - 0.5
  card.style.transform = `perspective(1000px) rotateY(${x * 8}deg) rotateX(${-y * 6}deg) scale(1.02)`
}
function onCardMouseLeave() {
  if (visualCardRef.value) {
    visualCardRef.value.style.transform = 'perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1)'
  }
}

const scenes = [
  {
    icon: '✍️', name: t('scenes.scenes.contentCreation.name'), count: '428x',
    efficiency: '10x', efficiencyLabel: t('scenes.scenes.contentCreation.efficiencyLabel'),
    img: 'https://images.unsplash.com/photo-1455390582262-044cdead277a?w=800&h=600&fit=crop&q=80',
    desc:t('scenes.scenes.contentCreation.desc'),
    longDesc: t('scenes.scenes.contentCreation.longDesc'),
    metrics: [
      { value: '10x', label: t('scenes.scenes.contentCreation.metrics.0.label') }, 
      { value: t('scenes.metrics.platformCount'), label: t('scenes.scenes.contentCreation.metrics.1.label') }, 
      { value: '<5min', label: t('scenes.scenes.contentCreation.metrics.2.label') }],
    tools: ['GPT-4', 'Claude', t('scenes.platforms.wechat'), t('scenes.platforms.xiaohongshu'), t('scenes.platforms.douyin'), 'n8n'],
    steps: [
      { title: t('scenes.scenes.contentCreation.steps.0.title'), desc: t('scenes.scenes.contentCreation.steps.0.desc'), time: '10s', done: true, tags: [t('scenes.tags.batchExpansion'), t('scenes.tags.topicAnalysis')] },
      { title: t('scenes.scenes.contentCreation.steps.1.title'), desc: t('scenes.scenes.contentCreation.steps.1.desc'), time: '40s', done: true, tags: ['GPT-4', 'Claude', t('scenes.tags.autoImage')] },
      { title: t('scenes.scenes.contentCreation.steps.2.title'), desc: t('scenes.scenes.contentCreation.steps.2.desc'), time: '20s', done: true, tags: [t('scenes.tags.formatConversion'), t('scenes.tags.autoTypesetting')] },
      { title: t('scenes.scenes.contentCreation.steps.3.title'), desc: t('scenes.scenes.contentCreation.steps.3.desc'), time: '5s', done: false, tags: [t('scenes.tags.multiPlatform'), t('scenes.tags.scheduledPublishing')] }
    ]
  },
  {
    icon: '🤖', name: t('scenes.scenes.customerService.name'), count: '528x',
    efficiency: '95%', efficiencyLabel: t('scenes.scenes.customerService.efficiencyLabel'),
    img: 'https://images.unsplash.com/photo-1596526131083-e8c633c948d2?w=800&h=600&fit=crop&q=80',
    desc: t('scenes.scenes.customerService.desc'),
    longDesc: t('scenes.scenes.customerService.longDesc'),
    metrics: [{ value: '95%', label: t('scenes.scenes.customerService.metrics.0.label') }, { value: '7×24h', label: t('scenes.scenes.customerService.metrics.1.label') }, { value: '<2s', label: t('scenes.scenes.customerService.metrics.2.label') }],
    tools: ['FastGPT', 'Coze', t('scenes.platforms.wechat'), t('scenes.platforms.feishu'), t('scenes.platforms.dingtalk'), 'Zendesk'],
    steps: [
      { title: t('scenes.scenes.customerService.steps.0.title'), desc: t('scenes.scenes.customerService.steps.0.desc'), time: '5min', done: true, tags: [t('scenes.tags.pdfParsing'), t('scenes.tags.vectorization'),t('scenes.tags.autoUpdate')] },
      { title: t('scenes.scenes.customerService.steps.1.title'), desc: t('scenes.scenes.customerService.steps.1.desc'), time: '0.1s', done: true, tags: ['NLU', t('scenes.tags.multiTurnDialogue')] },
      { title: t('scenes.scenes.customerService.steps.2.title'), desc: t('scenes.scenes.customerService.steps.2.desc'), time: '1.5s', done: true, tags: ['RAG检索', t('scenes.tags.contextUnderstanding')] },
      { title: t('scenes.scenes.customerService.steps.3.title'), desc: t('scenes.scenes.customerService.steps.3.desc'), time: t('scenes.tags.realTime'), done: false, tags: [t('scenes.tags.intelligentTransfer'),t('scenes.tags.contextTransfer')] }
    ]
  },
  {
    icon: '📊', name: t('scenes.scenes.dataAnalysis.name'), count: '368x',
    efficiency: '8h→20min', efficiencyLabel: t('scenes.scenes.dataAnalysis.efficiencyLabel'),
    img: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=600&fit=crop&q=80',
    desc: t('scenes.scenes.dataAnalysis.desc'),
    longDesc: t('scenes.scenes.dataAnalysis.longDesc'),
    metrics: [{ value: '8h→20min', label: t('scenes.scenes.dataAnalysis.metrics.0.label') }, { value: t('scenes.metrics.dataSources'), label: t('scenes.scenes.dataAnalysis.metrics.1.label') }, { value: t('scenes.tags.autoPush'), label: t('scenes.scenes.dataAnalysis.metrics.2.label') }],
    tools: ['n8n', 'Python', 'MySQL', 'Google Sheets', t('scenes.platforms.feishu'), 'Slack'],
    steps: [
      { title: t('scenes.scenes.dataAnalysis.steps.0.title'), desc: t('scenes.scenes.dataAnalysis.steps.0.desc'), time: '2min', done: true, tags: ['MySQL', 'API', 'Excel'] },
      { title: t('scenes.scenes.dataAnalysis.steps.1.title'), desc: t('scenes.scenes.dataAnalysis.steps.1.desc'), time: '3min', done: true, tags: [t('scenes.tags.deduplication'), t('scenes.tags.deduplication'), t('scenes.tags.anomalyDetection')] },
      { title: t('scenes.scenes.dataAnalysis.steps.2.title'), desc: t('scenes.scenes.dataAnalysis.steps.2.desc'), time: '5min', done: true, tags: [t('scenes.tags.trendAnalysis'), t('scenes.tags.aiPrediction')] },
      { title: t('scenes.scenes.dataAnalysis.steps.3.title'), desc: t('scenes.scenes.dataAnalysis.steps.3.desc'), time: '1min', done: false, tags: [t('scenes.tags.chartGeneration'), t('scenes.tags.scheduledPush')] }
    ]
  },
  {
    icon: '💼', name: t('scenes.scenes.sales.name'), count: '268x',
    efficiency: '3x', efficiencyLabel: t('scenes.scenes.sales.efficiencyLabel'),
    img: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop&q=80',
    desc: t('scenes.scenes.sales.desc'),
    longDesc: t('scenes.scenes.sales.longDesc'),
    metrics: [{ value: '3x', label: t('scenes.scenes.sales.metrics.0.label') }, { value: t('scenes.tags.autoFollowUp'), label: t('scenes.scenes.sales.metrics.1.label') }, { value: t('scenes.tags.personalization'), label: t('scenes.scenes.sales.metrics.2.label') }],
    tools: ['Coze', 'Dify', 'Salesforce', t('scenes.platforms.wechatWork'),, t('scenes.platforms.feishu'), 'HubSpot'],
    steps: [
      { title: t('scenes.scenes.sales.steps.0.title'), desc: t('scenes.scenes.sales.steps.0.desc'), time: t('scenes.tags.realTime'), done: true, tags: [t('scenes.tags.behaviorAnalysis'), t('scenes.tags.intentScoring')] },
      { title: t('scenes.scenes.sales.steps.1.title'), desc: t('scenes.scenes.sales.steps.1.desc'), time: '5min', done: true, tags: [t('scenes.tags.personalization'), t('scenes.tags.autoSending')] },
      { title: t('scenes.scenes.sales.steps.2.title'), desc: t('scenes.scenes.sales.steps.2.desc'), time: t('scenes.tags.auto'), done: true, tags: [t('scenes.tags.intelligentReminder'), t('scenes.tags.crmSync')] },
      { title: t('scenes.scenes.sales.steps.3.title'), desc: t('scenes.scenes.sales.steps.3.desc'), time: '2min', done: false, tags: [t('scenes.tags.planCustomization'), t('scenes.tags.pdfGeneration')] }
    ]
  }
]

const currentScene = computed(() => scenes[activeScene.value])

const stepAnimating = ref(false)

function switchScene(idx) {
  if (activeScene.value === idx) return
  stepAnimating.value = true
  activeScene.value = idx
  activeStep.value = 0
  // 切换后重置动画状态
  setTimeout(() => { stepAnimating.value = false }, 100)
}
</script>

<style scoped>
/* 背景光晕 */
.scene-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}
.scene-bg-orb-1 {
  width: 600px; height: 600px;
  top: -200px; right: -100px;
  background: radial-gradient(circle, rgba(139,92,246,0.12) 0%, transparent 70%);
  animation: orbFloat 14s ease-in-out infinite;
}
.scene-bg-orb-2 {
  width: 500px; height: 500px;
  bottom: -150px; left: -100px;
  background: radial-gradient(circle, rgba(59,130,246,0.1) 0%, transparent 70%);
  animation: orbFloat 18s ease-in-out infinite reverse;
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(25px, -35px); }
}

/* 渐变文字 */
.scenes-gradient-text {
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 50%, #0ea5e9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Tab 按钮 */
.scene-tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.scene-tab-active {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: white;
  box-shadow: 0 8px 24px rgba(124,58,237,0.35);
  transform: scale(1.05);
}
.scene-tab-inactive {
  background: white;
  color: #6b7280;
  border: 1px solid #e5e7eb;
}
.scene-tab-inactive:hover {
  border-color: #c4b5fd;
  color: #7c3aed;
  background: #faf5ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(124,58,237,0.1);
}
.scene-tab-icon {
  font-size: 16px;
  transition: transform 0.3s ease;
}
.scene-tab-btn:hover .scene-tab-icon {
  transform: scale(1.2);
}
.scene-tab-count {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 20px;
  background: rgba(0,0,0,0.08);
  color: inherit;
  opacity: 0.7;
}
.scene-tab-count-active {
  background: rgba(255,255,255,0.2);
}

/* 视觉卡片 */
.scene-visual-card {
  border-radius: 24px;
  overflow: hidden;
  background: #111827;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease;
  box-shadow: 0 25px 60px rgba(0,0,0,0.25);
}
.scene-img-wrapper {
  position: relative;
  flex: 1;
  overflow: hidden;
}
.scene-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
.scene-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #111827 0%, rgba(17,24,39,0.4) 50%, transparent 100%);
}
.scene-efficiency-badge {
  position: absolute;
  top: 20px; left: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 10px 16px;
}
.scene-bottom-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px;
}
.scene-metric-card {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 10px;
  text-align: center;
}
.scene-tools-bar {
  background: rgba(17,24,39,0.95);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.scene-tool-tag {
  font-size: 11px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 4px 10px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  animation: tagFadeIn 0.3s ease both;
}
.scene-tool-tag:hover {
  background: rgba(139,92,246,0.2);
  border-color: rgba(139,92,246,0.4);
  color: #c4b5fd;
}
@keyframes tagFadeIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* ===== 工作流节点卡片步骤风格 ===== */
.wf-steps-container {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.wf-step-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  animation: stepFadeIn 0.4s ease both;
}
@keyframes stepFadeIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

/* 左侧连接线 + 节点圆 */
.wf-step-spine {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 32px;
  padding-top: 4px;
}
.wf-spine-line {
  flex: 1;
  width: 2px;
  min-height: 40px;
  background: linear-gradient(180deg, rgba(124,58,237,0.3), rgba(79,70,229,0.1));
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  margin: 4px 0;
  order: 2;
}
.wf-spine-particle {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #7c3aed;
  box-shadow: 0 0 6px #7c3aed;
  animation: particleFall 2s linear infinite;
}
@keyframes particleFall {
  0% { top: -6px; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 0.8; }
  100% { top: 100%; opacity: 0; }
}

/* 节点圆 */
.wf-step-node {
  position: relative;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
  order: 1;
  z-index: 2;
}
.wf-node-done {
  background: linear-gradient(135deg, #10B981, #059669);
  color: white;
  box-shadow: 0 4px 12px rgba(16,185,129,0.35);
}
.wf-node-done:hover {
  transform: scale(1.15);
  box-shadow: 0 6px 18px rgba(16,185,129,0.45);
}
.wf-node-pending {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: white;
  box-shadow: 0 4px 12px rgba(124,58,237,0.35);
}
.wf-node-pending:hover {
  transform: scale(1.15);
  box-shadow: 0 6px 18px rgba(124,58,237,0.45);
}
.wf-node-check { font-size: 13px; }
.wf-node-num { font-size: 11px; }

/* 节点脉冲环 */
.wf-node-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(124,58,237,0.4);
  animation: nodePulse 2s ease-in-out infinite;
}
@keyframes nodePulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.3); opacity: 0; }
}

/* 右侧卡片 */
.wf-step-card {
  flex: 1;
  border-radius: 14px;
  border: 1px solid transparent;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 10px;
}
.wf-step-card-active {
  background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(79,70,229,0.04));
  border-color: rgba(124,58,237,0.25);
  box-shadow: 0 4px 20px rgba(124,58,237,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
}
.wf-step-card-inactive {
  background: #fafafa;
  border-color: #f0f0f0;
}
.wf-step-card-inactive:hover {
  background: #faf5ff;
  border-color: rgba(196,181,253,0.5);
  box-shadow: 0 2px 12px rgba(124,58,237,0.06);
}
.wf-step-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
  gap: 8px;
}
.wf-step-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #1f2937;
  flex: 1;
}
.wf-step-card-badges {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.wf-step-time-badge {
  font-size: 10px;
  font-weight: 600;
  color: #6b7280;
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 100px;
  font-family: monospace;
}
.wf-step-status-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 100px;
}
.wf-status-done {
  background: rgba(16,185,129,0.1);
  color: #059669;
}
.wf-status-pending {
  background: rgba(124,58,237,0.1);
  color: #7c3aed;
  animation: statusBlink 2s ease-in-out infinite;
}
@keyframes statusBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.wf-step-card-desc {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.5;
}
.wf-step-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.wf-step-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  background: rgba(124,58,237,0.08);
  color: #7c3aed;
  border: 1px solid rgba(124,58,237,0.15);
  border-radius: 100px;
}

/* CTA 按钮 */
.scene-cta-primary {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: white;
  font-size: 14px;
  font-weight: 700;
  padding: 14px 24px;
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}
.scene-cta-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.scene-cta-primary:hover {
  box-shadow: 0 12px 32px rgba(124,58,237,0.4);
  transform: translateY(-2px);
}
.scene-cta-primary:hover::before { opacity: 1; }
.scene-cta-secondary {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  color: #6b7280;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
}
.scene-cta-secondary:hover {
  border-color: #c4b5fd;
  color: #7c3aed;
  background: #faf5ff;
}

/* 过渡动画 */
.scene-zoom-enter-active { transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.scene-zoom-leave-active { transition: all 0.3s ease; }
.scene-zoom-enter-from { opacity: 0; transform: scale(1.08); }
.scene-zoom-leave-to { opacity: 0; transform: scale(0.95); }

.text-slide-enter-active { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.text-slide-leave-active { transition: all 0.25s ease; }
.text-slide-enter-from { opacity: 0; transform: translateY(12px); }
.text-slide-leave-to { opacity: 0; transform: translateY(-8px); }

.steps-fade-enter-active { transition: all 0.4s ease; }
.steps-fade-leave-active { transition: all 0.2s ease; }
.steps-fade-enter-from { opacity: 0; }
.steps-fade-leave-to { opacity: 0; }

.tools-fade-enter-active { transition: all 0.3s ease; }
.tools-fade-leave-active { transition: all 0.2s ease; }
.tools-fade-enter-from { opacity: 0; }
.tools-fade-leave-to { opacity: 0; }

.tags-expand-enter-active { transition: all 0.3s ease; }
.tags-expand-leave-active { transition: all 0.2s ease; }
.tags-expand-enter-from { opacity: 0; transform: translateY(-4px); }
.tags-expand-leave-to { opacity: 0; transform: translateY(-4px); }

/* 滚动动画 */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== 响应式 ===== */

/* 标题响应式 */
.section-scenes h2 {
  font-size: clamp(2rem, 5vw, 3.75rem);
}

/* 平板（≤1024px）*/
@media (max-width: 1024px) {
  .section-scenes { padding-top: 5rem; padding-bottom: 5rem; }
  .scene-visual-card { min-height: 380px; }
}

/* 手机横屏 / 小平板（≤768px）*/
@media (max-width: 768px) {
  .section-scenes { padding-top: 4rem; padding-bottom: 4rem; }
  .section-scenes .max-w-7xl { padding-left: 1rem; padding-right: 1rem; }
  .scene-tab-btn { padding: 8px 14px; font-size: 13px; }
  .scene-visual-card { min-height: 300px; }
  .scene-efficiency-badge { top: 12px; left: 12px; padding: 8px 12px; }
  .scene-efficiency-badge .text-3xl { font-size: 1.5rem; }
  .scene-bottom-info { padding: 16px; }
  .scene-bottom-info h3 { font-size: 1.25rem; }
  .scene-bottom-info p { font-size: 0.8rem; }
  .scene-metric-card { padding: 8px 6px; }
  .scene-metric-card .text-lg { font-size: 1rem; }
  .scene-tools-bar { padding: 10px 14px; }
  .scene-step-item { padding: 10px 12px; gap: 10px; }
  .scene-step-num { width: 30px; height: 30px; font-size: 12px; }
  .scene-cta-primary, .scene-cta-secondary { padding: 11px 18px; font-size: 13px; }
}

/* 手机竖屏（≤480px）*/
@media (max-width: 480px) {
  .section-scenes { padding-top: 3rem; padding-bottom: 3rem; }
  .scene-tab-btn { padding: 7px 11px; font-size: 12px; gap: 5px; }
  .scene-tab-icon { font-size: 13px; }
  .scene-tab-count { display: none; }
  .scene-visual-card { min-height: 240px; }
  .scene-efficiency-badge { display: none; }
  .scene-bottom-info { padding: 12px; }
  .scene-bottom-info h3 { font-size: 1.1rem; }
  .scene-bottom-info .grid-cols-3 { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .scene-step-item { padding: 8px 10px; gap: 8px; }
  .scene-step-num { width: 26px; height: 26px; font-size: 11px; border-radius: 8px; }
  .scene-cta-primary, .scene-cta-secondary { padding: 10px 14px; font-size: 12px; }
}

/* 极小屏（≤360px）*/
@media (max-width: 360px) {
  .scene-tab-btn { padding: 6px 9px; font-size: 11px; }
  .scene-visual-card { min-height: 200px; }
  .scene-step-num { width: 24px; height: 24px; font-size: 10px; }
}
</style>