/* 
 * 全局样式文件 - Main Stylesheet
 * 包含字体引入、自定义动画、Pico/Tailwind 兼容性调整
 */

/* 引入思源黑体 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@200;300;400;500&display=swap');

:root {
  /* 核心色彩系统 */
  --color-cashmere: #F5F5F3;      /* 羊绒白 */
  --color-ink: #1A1A1A;           /* 墨黑 */
  --color-quiet-grey: #9E9E9E;    /* 静谧灰 */
  --color-clay: #DCC9C3;          /* 陶土粉（低饱和） */
  --color-silver: #C0C0C0;        /* 金属银 */
  
  /* 布局变量 */
  --header-height: 80px;
}

/* 基础重置与字体设置 */
body {
  font-family: 'Neue Haas Grotesk', 'Helvetica Neue', Helvetica, 'Noto Sans SC', sans-serif;
  background-color: var(--color-cashmere);
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.8;
  overflow-x: hidden;
  margin: 0;
}

/* 文本选区样式 */
::selection {
  background-color: var(--color-quiet-grey);
  color: #fff;
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #d1d1d1;
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 核心动画库 */

/* 淡入上浮 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 纯淡入 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 缓慢缩放（用于背景图） */
@keyframes slowZoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}

/* 应用动画的工具类 */
.animate-fade-in-up {
  animation: fadeInUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  opacity: 0; /* 初始不可见 */
}

.animate-fade-in {
  animation: fadeIn 1.5s ease-out forwards;
}

.animate-slow-zoom {
  animation: slowZoom 20s linear infinite alternate;
}

/* 动画延迟工具类 */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-500 { animation-delay: 0.5s; }
.delay-700 { animation-delay: 0.7s; }
.delay-1000 { animation-delay: 1.0s; }

/* 交互特效 */

/* 链接下划线动效 */
.nav-link {
  position: relative;
  text-decoration: none;
  color: var(--color-ink);
}
.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -4px;
  left: 50%;
  background-color: var(--color-ink);
  transition: all 0.3s ease-in-out;
  transform: translateX(-50%);
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* 图片悬停放大容器 */
.img-hover-container {
  overflow: hidden;
  position: relative;
  display: block;
}
.img-hover-container img {
  transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform;
}
.img-hover-container:hover img {
  transform: scale(1.05);
}

/* 悬停浮现文字 */
.hover-reveal-text {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.group:hover .hover-reveal-text {
  opacity: 1;
  transform: translateY(0);
}

/* 模态框样式 */
.modal-backdrop {
  background-color: rgba(245, 245, 243, 0.98); /* 极高不透明度的背景 */
  backdrop-filter: blur(8px);
}

/* 排版工具 */
.text-justify-center {
  text-align: justify;
  text-align-last: center;
}
.writing-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* 适配 Pico.css 的重置（确保 Tailwind 优先级） */
:where(a:not([role="button"])), 
:where(a:not([role="button"])):hover, 
:where(a:not([role="button"])):focus {
  text-decoration: none;
  color: inherit;
  background-color: transparent;
}

/* 隐藏滚动条但保留功能 (用于横向滚动区域) */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}