/* ============================================================
   effects.css —— 滚动进场 / 鼠标跟随 / 视差 / 装饰动效
   ============================================================ */

/* ---------- 滚动进场（IntersectionObserver 切换 .is-visible） ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

[data-reveal="left"] { transform: translateX(-42px); }
[data-reveal="right"] { transform: translateX(42px); }
[data-reveal="zoom"] { transform: scale(0.9); }
[data-reveal="fade"] { transform: none; }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* 标题逐字上浮 */
[data-reveal-chars] .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em) rotate(3deg);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-spring);
  transition-delay: var(--char-delay, 0s);
}
[data-reveal-chars].is-visible .char {
  opacity: 1;
  transform: none;
}

/* ---------- 鼠标跟随光斑（桌面端） ---------- */
.cursor-glow {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 250;
  width: 340px;
  height: 340px;
  margin: -170px 0 0 -170px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(240, 192, 96, 0.14) 0%,
    rgba(200, 16, 46, 0.09) 42%,
    transparent 70%
  );
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.5s;
  will-change: transform;
}
.cursor-glow.is-on { opacity: 1; }

.cursor-dot {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 251;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  pointer-events: none;
  background: var(--gold-400);
  box-shadow: 0 0 14px rgba(240, 192, 96, 0.8);
  opacity: 0;
  transition: opacity 0.4s, width 0.25s, height 0.25s, margin 0.25s;
  will-change: transform;
}
.cursor-dot.is-on { opacity: 0.95; }
.cursor-dot.is-hover {
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  background: rgba(224, 36, 60, 0.85);
}

@media (hover: none), (max-width: 820px) {
  .cursor-glow, .cursor-dot { display: none; }
}

/* ---------- 星火飘带（quote band 内的丝绸画布） ---------- */
.silk-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- 悬浮微动 ---------- */
.float-soft {
  animation: float-soft 7s ease-in-out infinite alternate;
}
.float-soft.delay-1 { animation-delay: -2.3s; }
.float-soft.delay-2 { animation-delay: -4.6s; }

@keyframes float-soft {
  from { transform: translateY(-8px) rotate(-1deg); }
  to { transform: translateY(8px) rotate(1deg); }
}

/* ---------- 星星闪烁（角标装饰） ---------- */
.twinkle {
  position: relative;
  display: inline-block;
}
.twinkle::before,
.twinkle::after {
  content: "✦";
  position: absolute;
  color: var(--gold-400);
  font-size: 0.6em;
  opacity: 0.75;
  animation: twinkle 2.8s ease-in-out infinite;
}
.twinkle::before { left: -1.4em; top: -0.2em; }
.twinkle::after { right: -1.4em; bottom: -0.1em; animation-delay: 1.4s; }

@keyframes twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.7) rotate(0deg); }
  50% { opacity: 0.95; transform: scale(1.15) rotate(35deg); }
}

/* ---------- 红绸横向飘动（区块顶部装饰） ---------- */
.ribbon-band {
  position: relative;
  height: 120px;
  overflow: hidden;
  pointer-events: none;
}
.ribbon-band .ribbon {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 46px;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.5;
}
.ribbon-band .ribbon.r1 {
  top: 18px;
  background: linear-gradient(90deg, transparent, var(--red-600), var(--gold-500), var(--red-600), transparent);
  animation: ribbon-flow 11s ease-in-out infinite alternate;
}
.ribbon-band .ribbon.r2 {
  top: 52px;
  background: linear-gradient(90deg, transparent, var(--gold-500), var(--red-700), var(--gold-500), transparent);
  animation: ribbon-flow 15s ease-in-out infinite alternate-reverse;
  opacity: 0.36;
}

@keyframes ribbon-flow {
  from { transform: translateX(-4%) skewY(-1.4deg) scaleY(1); }
  to { transform: translateX(4%) skewY(1.4deg) scaleY(1.25); }
}

/* ---------- 卡片磁吸悬浮（由 JS 设置 --mx/--my） ---------- */
.tilt {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
    translateY(var(--ty, 0));
  transition: transform 0.35s var(--ease-out);
}

/* ---------- 关于页排版 ---------- */
.about-hero {
  padding: calc(var(--header-h) + 4.5rem) 0 3.2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(110% 100% at 50% 0%, var(--red-800), var(--ink-900) 68%);
}
.about-hero h1 {
  font-size: clamp(2.3rem, 7vw, 4.2rem);
  margin: 0.5em 0 0.28em;
}

.article-body {
  max-width: 780px;
  margin: 0 auto;
}
.article-body h2 {
  font-size: clamp(1.5rem, 3.6vw, 2.1rem);
  margin: 1.6em 0 0.55em;
  color: var(--gold-300);
}
.article-body h2::before {
  content: "◆";
  color: var(--red-500);
  margin-right: 0.5em;
  font-size: 0.62em;
  vertical-align: 0.22em;
}
.article-body p {
  font-size: 1.06rem;
  line-height: 1.95;
  margin-bottom: 0.85em;
  color: var(--cream);
  opacity: 0.92;
}
.article-body blockquote {
  margin: 1.8em 0;
  padding: 1.15em 1.5em;
  border-left: 4px solid var(--gold-500);
  background: rgba(240, 192, 96, 0.08);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-serif);
  font-size: 1.12rem;
  color: var(--gold-300);
  letter-spacing: 0.06em;
}

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1.2rem;
  margin: 1.6rem 0;
}
.pillar {
  padding: 1.6rem 1.4rem;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(165, 25, 46, 0.28), rgba(31, 10, 16, 0.7));
  border: 1px solid rgba(240, 192, 96, 0.22);
  text-align: center;
}
.pillar .pillar-icon {
  font-size: 1.9rem;
  line-height: 1;
  margin-bottom: 0.65rem;
}
.pillar h3 {
  color: var(--gold-300);
  font-size: 1.15rem;
  margin-bottom: 0.5em;
}
.pillar p {
  margin: 0;
  font-size: 0.95rem;
  opacity: 0.86;
  line-height: 1.9;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
  .cursor-glow, .cursor-dot { display: none; }
}