/* ============================================
   西部数码云建站模板展示 - 自定义样式
   ============================================ */

/* 隐藏滚动条但可滚动 */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* 案例卡片阴影过渡 */
.case-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 卡片 hover 效果 */
.case-card:hover {
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
}

/* 弹窗动画 */
.modal-enter-active {
  transition: all 0.3s ease-out;
}
.modal-leave-active {
  transition: all 0.2s ease-in;
}
.modal-enter-from {
  opacity: 0;
}
.modal-enter-from > div {
  transform: scale(0.95) translateY(20px);
  opacity: 0;
}
.modal-leave-to {
  opacity: 0;
}
.modal-leave-to > div {
  transform: scale(0.95) translateY(20px);
  opacity: 0;
}
.modal-enter-active > div {
  transition: all 0.3s ease-out;
}
.modal-leave-active > div {
  transition: all 0.2s ease-in;
}

/* 图片加载占位 */
img {
  image-rendering: auto;
}
img[src=""],
img:not([src]) {
  visibility: hidden;
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* 选中文本颜色 */
::selection {
  background-color: rgba(26, 115, 232, 0.15);
  color: inherit;
}

/* 移动端优化 */
@media (max-width: 640px) {
  .grid {
    gap: 0.75rem;
  }
}

/* 打印样式 */
@media print {
  body {
    background: white;
  }
  #app > div {
    max-width: 100%;
  }
  .case-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #e5e7eb;
  }
}