/* ============================================================
   Safheal 赛安芙官网 - 自定义样式
   仅放 Tailwind CDN 覆盖不了的部分，色值均取自 design-spec.md §2
   ============================================================ */

/* Alpine.js：x-cloak 初始化前隐藏 */
[x-cloak] {
  display: none !important;
}

/* 隐藏滚动条（国旗横滑条 / 分类锚点条），保留滚动能力 */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Tab 面板堆叠：三个面板占同一网格单元，容器取最高面板高度，切换无布局跳动 */
.grid-stack {
  display: grid;
}
.grid-stack > * {
  grid-area: 1 / 1;
}

/* Hero 网格纹理（design-spec §6.1 区块①） */
.hero-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* 锚点平滑滚动（配合各区块 scroll-margin-top 使用） */
html {
  scroll-behavior: smooth;
}

/* 动效偏好：关闭平滑滚动与过渡动画（design-spec §8 第 8 项） */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}