/* ================================================================
   Refined Layer · 在已有视觉骨架上的全站升级
   - 页面加载 fade
   - 滚动进度条
   - 鼠标 ambient 烛光
   - 环境 gradient 漂移
   - 滚动驱动渐显（复用已有 .reveal）
   - 侧栏小圆点 nav
   - 自定义 scrollbar / focus / selection
   ================================================================ */

/* ============ 页面加载 fade ============ */
html { scroll-behavior: smooth; }
html:focus-within { scroll-behavior: smooth; }

body {
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
body.is-loaded { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  body { opacity: 1; transition: none; }
}

/* ============ 滚动进度条 ============ */
.refined-scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 1.5px;
  z-index: 200;
  pointer-events: none;
  background: transparent;
}
.refined-scroll-progress::after {
  content: '';
  display: block;
  height: 100%;
  width: var(--scroll-progress, 0%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--gold) 30%,
    var(--gold-bright) 50%,
    var(--gold) 70%,
    transparent 100%
  );
  transition: width 80ms linear;
  box-shadow: 0 0 10px rgba(200, 150, 74, 0.45);
}

/* ============ 鼠标 ambient 烛光 ============ */
.refined-cursor-light {
  position: fixed;
  top: 0; left: 0;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(230, 183, 107, 0.055) 0%,
    rgba(200, 150, 74, 0.025) 30%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 600ms ease;
  mix-blend-mode: screen;
  will-change: transform, opacity;
  transform: translate3d(-9999px, -9999px, 0);
}
body.is-cursor-active .refined-cursor-light { opacity: 1; }

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .refined-cursor-light { display: none !important; }
}

/* ============ 环境 gradient 漂移 ============ */
.refined-ambient {
  position: fixed;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 35% at 20% 25%, rgba(200, 150, 74, 0.045) 0%, transparent 60%),
    radial-gradient(ellipse 45% 50% at 80% 70%, rgba(120, 80, 40, 0.035), transparent 60%),
    radial-gradient(ellipse 35% 30% at 50% 90%, rgba(176, 129, 74, 0.03), transparent 70%);
  animation: ambient-drift 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes ambient-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(3%, -2%, 0) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .refined-ambient { animation: none; }
}

/* page-ambient body 的内容层要在 ambient 之上 */
body > *:not(.refined-ambient):not(.refined-cursor-light):not(.refined-scroll-progress):not(.refined-dot-nav):not(.skip-link) {
  position: relative;
  z-index: 1;
}

/* ============ 滚动驱动渐显（复用 .reveal 已存在的类）============ */
/* 已有 .reveal / .reveal.in 在 editorial.css 里。这里加更高级的变体 */
.reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 1100ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.reveal.reveal-left  { transform: translate3d(-32px, 0, 0); }
.reveal.reveal-right { transform: translate3d(32px, 0, 0); }
.reveal.reveal-fade  { transform: none; }
.reveal.in.reveal-left,
.reveal.in.reveal-right,
.reveal.in.reveal-fade { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============ 侧栏小圆点 nav ============ */
.refined-dot-nav {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 14px 8px;
  background: rgba(22, 19, 14, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 40px;
  opacity: 0;
  transition: opacity 600ms ease 400ms;
}
.refined-dot-nav.is-ready { opacity: 1; }

.refined-dot-nav-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-faint);
  cursor: pointer;
  transition: background 300ms ease, transform 300ms ease;
  position: relative;
  display: block;
  border: none;
  padding: 0;
}
.refined-dot-nav-dot::before {
  content: '';
  position: absolute;
  inset: -8px;
}
.refined-dot-nav-dot::after {
  content: attr(data-label);
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.32em;
  color: var(--gold-bright);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
  background: rgba(22, 19, 14, 0.92);
  padding: 4px 10px;
  border: 1px solid var(--gold-faint);
}
.refined-dot-nav-dot:hover { background: var(--gold-bright); transform: scale(1.4); }
.refined-dot-nav-dot:hover::after { opacity: 1; }
.refined-dot-nav-dot.active {
  background: var(--gold);
  transform: scale(1.4);
  box-shadow: 0 0 0 1px var(--gold-faint), 0 0 14px rgba(200, 150, 74, 0.45);
}

@media (max-width: 1200px) { .refined-dot-nav { display: none; } }

/* ============ 自定义 scrollbar (webkit) ============ */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--line-bright);
  border-radius: 4px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }

/* Firefox */
* { scrollbar-color: var(--line-bright) var(--bg); scrollbar-width: thin; }

/* ============ Selection ============ */
::selection {
  background: rgba(200, 150, 74, 0.28);
  color: var(--gold-bright);
  text-shadow: none;
}

/* ============ Focus ============ */
*:focus { outline: none; }
*:focus-visible {
  outline: 1.5px solid var(--gold);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ============ 细化常见 hover 状态 ============ */
.anchor-card,
.refined-entry,
.event-card,
.course-card,
.pillar-card,
.tool-card,
.triad-cell,
.case-card,
.book,
.value-item,
.pair-card,
.cycle-mini-card,
.law-cell,
.stage-box {
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 500ms ease,
              box-shadow 500ms ease;
}
.refined-entry:hover,
.event-card:hover,
.course-card:hover,
.pillar-card:hover,
.case-card:hover,
.cycle-mini-card:hover,
.book:hover,
.value-item:hover,
.pair-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.38),
              0 1px 2px rgba(200, 150, 74, 0.10);
}

/* anchored card title 描金 on hover */
a.case-card:hover .case-card-title,
a.case-card:hover h3,
a.pair-card:hover .pair-card-name {
  color: var(--gold-bright);
  transition: color 400ms ease;
}

/* ============ 细化 inline anchor 微 hover ============ */
.breadcrumb a,
.essay-toc-link,
.tech-toc-link,
.cycle-toc-link,
.culture-toc-link {
  transition: color 250ms ease, border-color 250ms ease;
}


/* ============ 站点 logo 微 hover ============ */
.site-logo {
  transition: opacity 400ms ease;
}
.site-logo:hover { opacity: 0.7; }

/* ============ 按压反馈 :active · 让交互更"实" ============ */
/* 按钮 / 文字链按下时轻微下沉收缩 */
.btn:active,
.btn-text:active,
.spread-cta:active {
  transform: translateY(1px) scale(0.99);
  transition-duration: 90ms;
}
/* 卡片按下：从 hover 的 -3px 回落到 -1px + 极轻收缩，模拟物理按压 */
.refined-entry:active,
.event-card:active,
.course-card:active,
.pillar-card:active,
.case-card:active,
.cycle-mini-card:active,
.book:active,
.value-item:active,
.pair-card:active,
.anchor-card:active {
  transform: translateY(-1px) scale(0.992);
  transition-duration: 110ms;
}
/* 导航 / 圆点导航按下描金 */
.site-nav-link:active { color: var(--gold-bright); }
.refined-dot-nav-dot:active { background: var(--gold-bright); }

@media (prefers-reduced-motion: reduce) {
  .btn:active,
  .btn-text:active,
  .spread-cta:active,
  .refined-entry:active,
  .event-card:active,
  .course-card:active,
  .pillar-card:active,
  .case-card:active,
  .cycle-mini-card:active,
  .book:active,
  .value-item:active,
  .pair-card:active,
  .anchor-card:active { transform: none; }
}

/* ============ Print ============ */
@media print {
  .refined-scroll-progress,
  .refined-cursor-light,
  .refined-ambient,
  .refined-dot-nav { display: none !important; }
  body { opacity: 1 !important; }
}