/* === UX Enhancement === */

/* ── 驾驶舱星空宇宙背景 ── */
#screen-overview {
  position: relative;
  overflow: hidden;
}
#screen-overview .starfield-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.82;
}
#screen-overview > *:not(.starfield-canvas) {
  position: relative;
  z-index: 1;
}


/* Logo Wall Marquee */
.logo-grid { animation: logo-scroll 40s linear infinite; will-change: transform; }
.logo-grid:hover { animation-play-state: paused; }
@keyframes logo-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

.logo-item { transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1); cursor: pointer; }
.logo-item:hover { transform: scale(1.15) translateY(-4px); box-shadow: 0 8px 32px rgba(0,212,255,0.15), 0 0 0 1px rgba(0,212,255,0.2); z-index: 10; }
.logo-item:hover .logo-img { filter: brightness(1.2) drop-shadow(0 0 8px rgba(0,212,255,0.4)); }
.logo-item:hover .logo-img.si { filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(0,212,255,0.5)); opacity: 1; }

/* KPI Cards */
.kpi-value { transition: transform 0.3s ease; }
.kpi-card:hover .kpi-value { transform: scale(1.08); }
.kpi-card { transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1); }
.kpi-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 12px 40px rgba(0,212,255,0.12); }

/* Pain Cards */
.pain-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
.pain-card:hover .pain-solution-overlay { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pain-solution-overlay { opacity: 0; transform: translateY(10px); transition: all 0.35s ease; }

/* Phase Items */
.phase-item { transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1); }
.phase-item:hover { transform: translateY(-8px) scale(1.03); box-shadow: 0 16px 48px color-mix(in srgb, var(--pc) 25%, transparent); }
.phase-item:hover .phase-num { text-shadow: 0 0 20px var(--pc); transform: scale(1.2); }
.phase-num { transition: all 0.3s ease; }

/* Moat Cards */
.moat-card { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
.moat-card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,212,255,0.15); }
.moat-tag { transition: all 0.3s ease; }
.moat-card:hover .moat-tag { background: rgba(0,212,255,0.15); color: #00d4ff; transform: scale(1.05); }

/* ROI */
.roi-m-bar { transition: width 1.2s cubic-bezier(0.25,0.46,0.45,0.94); }
.roi-col { transition: transform 0.3s ease; }
.roi-col:hover { transform: scale(1.01); }
.roi-kpi-item { transition: all 0.3s ease; }
.roi-kpi-item:hover { transform: translateY(-4px) scale(1.05); }

/* Overview Panels */
.ov2-panel { transition: all 0.3s ease; }
.ov2-roi-cell { transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1); cursor: default; }
.ov2-roi-cell:hover { transform: scale(1.06); background: rgba(0,212,255,0.06); border-radius: 8px; }
.ov2-entry { transition: all 0.25s ease; }
.ov2-entry:hover { transform: translateX(4px); background: rgba(0,212,255,0.08); }
.ov2-mid-card { transition: all 0.3s ease; }
.ov2-mid-card:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(0,0,0,0.3); border-color: rgba(0,212,255,0.25); }
.ov2-perf-bar { transition: width 1s cubic-bezier(0.25,0.46,0.45,0.94); }
.ov2-srow { transition: all 0.2s ease; padding: 4px 6px; border-radius: 4px; }
.ov2-srow:hover { background: rgba(255,255,255,0.04); }

/* Phase Detail Timeline */
.tl-step { transition: all 0.25s ease; }
.tl-step:hover { background: rgba(0,212,255,0.06); transform: translateX(3px); }
.tl-step.state-active { border-left: 2px solid var(--phase-color, #00d4ff); }
#step-content .content-card { transition: all 0.3s ease; animation: fadeSlideIn 0.4s ease forwards; }
@keyframes fadeSlideIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
#step-content .content-card:hover { border-color: rgba(0,212,255,0.3); box-shadow: 0 4px 20px rgba(0,0,0,0.2); }

/* Nav Buttons */
.nav-btn { transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1); }
.nav-btn:hover { transform: translateY(-2px); text-shadow: 0 0 8px rgba(0,212,255,0.5); }
.nav-btn.active { box-shadow: 0 2px 12px rgba(0,212,255,0.3); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,212,255,0.4); }

/* Tooltip */
[data-tooltip] { position: relative; }
[data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-6px); background: rgba(10,8,18,0.95); color: #f4f7ff; padding: 6px 12px; border-radius: 6px; font-size: 12px; white-space: nowrap; z-index: 1000; border: 1px solid rgba(0,212,255,0.2); box-shadow: 0 4px 16px rgba(0,0,0,0.4); animation: tooltipIn 0.2s ease; }
@keyframes tooltipIn { from{opacity:0;transform:translateX(-50%) translateY(-2px)} to{opacity:1;transform:translateX(-50%) translateY(-6px)} }

/* Hero Dashboard Breathe */
.hero-dashboard-card { animation: dashBreathe 4s ease-in-out infinite; }
@keyframes dashBreathe { 0%,100%{box-shadow:0 8px 32px rgba(0,212,255,0.08)} 50%{box-shadow:0 12px 48px rgba(0,212,255,0.15)} }
.dash-act-dot { animation: dotPulse 2s ease-in-out infinite; }
@keyframes dotPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.6;transform:scale(1.3)} }

/* Arch Cards 3D */
.arch-card { transition: all 0.35s ease; }
.arch-card:hover { transform: translateY(-5px) perspective(600px) rotateX(2deg); box-shadow: 0 16px 48px rgba(0,0,0,0.3); }

/* Responsive */
@media (max-width: 768px) {
  .logo-grid { gap: 12px 16px !important; }
  .logo-item { padding: 8px !important; }
  .pain-grid, .moat-grid { grid-template-columns: 1fr !important; gap: 16px; }
  .phases-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .hero-section { flex-direction: column; padding: 80px 20px 40px; }
  .hero-left, .hero-right { width: 100%; }
  .hero-kpi-row { flex-wrap: wrap; }
  .kpi-card { min-width: 140px; flex: 1; }
  .ov2-body { flex-direction: column; }
  .ov2-panel { width: 100% !important; max-height: 300px; overflow-y: auto; }
  .ov2-mid-band { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .hero-section h1 { font-size: 24px !important; }
  .phases-grid { grid-template-columns: 1fr !important; }
  .nav-phases { display: none; }
}