/* =========================================================
   effects.css：国风动效层
   印章落款 / 逐字入场 / 熏香粒子 / 水墨显影 / 竖排水印 / 香雾画布
   ========================================================= */

/* ---------- Hero 跑马灯 ---------- */
@keyframes marquee-move {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- Hero 印章：落款盖章动画 ---------- */
.hero.is-loaded .hero-seal {
  animation: seal-stamp 0.7s cubic-bezier(0.22, 1.4, 0.36, 1) 0.15s forwards;
}

@keyframes seal-stamp {
  0% {
    opacity: 0;
    transform: scale(1.7) rotate(-10deg);
  }
  60% {
    opacity: 1;
    transform: scale(0.94) rotate(1deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* ---------- Hero 标题：逐字入场 ---------- */
.hero-title .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em) scale(0.92);
  filter: blur(6px);
}

.hero.is-loaded .hero-title .ch {
  animation: char-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.35s + var(--i) * 0.07s);
}

@keyframes char-rise {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* ---------- Hero 副文案：随字后升起 ---------- */
.hero-lead,
.hero-desc {
  opacity: 0;
  transform: translateY(14px);
}

.hero.is-loaded .hero-lead,
.hero.is-loaded .hero-desc {
  animation: rise-soft 0.8s ease-out forwards;
  animation-delay: 1.15s;
}

.hero.is-loaded .hero-desc {
  animation-delay: 1.35s;
}

@keyframes rise-soft {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Hero 熏香粒子：缓缓上浮的香雾点 ---------- */
.incense-dot {
  position: absolute;
  bottom: 6%;
  left: var(--x);
  z-index: 1;
  width: calc(10px * var(--s));
  height: calc(10px * var(--s));
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(233, 220, 190, 0.55) 0%,
    rgba(201, 169, 110, 0.28) 45%,
    transparent 70%
  );
  filter: blur(1px);
  opacity: 0;
  animation: incense-drift 9s ease-in-out infinite;
  animation-delay: var(--d);
  pointer-events: none;
}

@keyframes incense-drift {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0) scale(0.6);
  }
  18% {
    opacity: 0.85;
  }
  55% {
    opacity: 0.5;
    transform: translateY(-32vh) translateX(18px) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translateY(-64vh) translateX(-12px) scale(1.5);
  }
}

/* ---------- 图片：水墨显影（模糊 → 清晰） ---------- */
.feature-media img,
.science-lead-media img,
.product-media img {
  opacity: 0;
  filter: blur(10px) saturate(0.85);
  transform: scale(1.015);
}

.is-visible .feature-media img,
.is-visible .science-lead-media img,
.is-visible .product-media img {
  opacity: 1;
  filter: blur(0) saturate(1);
  transform: scale(1);
  transition: opacity 0.9s ease-out, filter 0.9s ease-out, transform var(--transition-slow);
}

/* ---------- 卡片交错入场（配合 JS data-stagger） ---------- */
[data-stagger] .reveal:nth-child(2) {
  transition-delay: 0.1s;
}

[data-stagger] .reveal:nth-child(3) {
  transition-delay: 0.2s;
}

[data-stagger] .reveal:nth-child(4) {
  transition-delay: 0.3s;
}

[data-stagger] .reveal:nth-child(5) {
  transition-delay: 0.4s;
}

[data-stagger] .reveal:nth-child(6) {
  transition-delay: 0.5s;
}

/* ---------- 标题笔锋金线：reveal 后划出 ---------- */
.section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 0;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--color-gold) 30%, var(--color-gold) 70%, transparent);
  transform: translateX(-50%);
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}

.reveal.is-visible .section-title::after,
.section-head.is-visible .section-title::after {
  width: 72%;
}

/* ---------- 各节横排水印：淡淡的书卷气 ---------- */
/* 水平一横排居中：从左往右读；字号用 vw 随页面比例缩放；nowrap 保证任何缩放下都不换行 */
.pain-points::after,
.science::after,
.products::after {
  content: attr(data-watermark);
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: var(--font-serif);
  font-size: clamp(40px, 7vw, 130px);
  font-weight: 700;
  letter-spacing: 0.25em;
  white-space: nowrap;
  color: rgba(45, 90, 39, 0.05);
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}

/* ---------- 鼠标香雾画布 ---------- */
.smoke-canvas {
  position: fixed;
  inset: 0;
  z-index: 900;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- 页脚印章呼吸 ---------- */
.footer-logo {
  animation: seal-breathe 5s ease-in-out infinite;
}

@keyframes seal-breathe {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(201, 169, 110, 0);
  }
  50% {
    box-shadow: 0 0 24px 2px rgba(201, 169, 110, 0.35);
  }
}