/* 心知圆网站脚手架 — 自定义样式
   主要布局由 Tailwind 工具类完成，这里只放 Tailwind 不便表达的细节：
   滚动进场动画、导航阴影、字体微调。 */

:root {
  --brand: #4F46E5;
  --accent: #06B6D4;
}

html { -webkit-text-size-adjust: 100%; }

body {
  /* 中文优先的字体栈，aiuxdesign 同款无衬线现代感 */
  font-feature-settings: "tnum";
}

/* 导航：滚动后加阴影（由 main.js 切换 .scrolled） */
#nav { transition: box-shadow .3s ease, background-color .3s ease; }
#nav.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.06); }

/* 滚动进场动画：元素默认透明下移，进入视口后归位 */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* 尊重用户的减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  /* 开启「减弱动态效果」时，连 CSS 兜底的海面柔光也一并静止 */
  .sea-fallback { animation: none; }
}

/* 锚点跳转时给固定导航留出余量 */
section[id] { scroll-margin-top: 72px; }

/* 用户心语轮播：切换时淡入上浮 */
.voice-slide { animation: voiceFade 0.6s ease both; }
@keyframes voiceFade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* 用户心语：反馈词居中、落款右对齐、标题左对齐 */
#voices blockquote { text-align: center; }
#voices figcaption { text-align: right; }

/* Hero：以用户提供的海雾图为底图（cover 铺满），渐变仅作缺图时的兜底 */
#hero {
  position: relative;
  /* 不再固定 78vh：高度由内容决定，缩短首屏，让下方 4S 露出 */
  background:
    /* 海平线在图片 58.4% 高度处；Y 定位 31% 让海平线落在 Hero 约 88% 高度，上方留出大片天空 */
    url('../assets/sea-bg.webp') center 31% / cover no-repeat,
    linear-gradient(180deg, #eef4f7 0%, #dde9ef 45%, #c4d5de 78%, #a9c0cc 100%);
}

/* 水面光影画布：正常 alpha 叠加（着色器已预乘 alpha），保留底图 */
#waterFx { z-index: 0; }

/* CSS 兜底动画（WebGL 不可用时显示）：缓慢漂移的柔光，肉眼明显可见 */
.sea-fallback {
  background:
    radial-gradient(42% 30% at 28% 22%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(55% 38% at 72% 62%, rgba(170, 205, 255, 0.45), transparent 72%);
  mix-blend-mode: screen;
  animation: seaDrift 14s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes seaDrift {
  from { transform: translate3d(-3%, -2%, 0) scale(1.05); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.18); }
}

/* 左侧文字区加一层很淡的白色柔光，保证深绿标题在底图上仍清晰 */
#hero .relative > div:first-child {
  text-shadow: 0 1px 24px rgba(255, 255, 255, 0.55);
}