/* =========================================================
   云苏葛的小站 · 史诗奇幻定制样式 (custom.css)
   沉睡魔法阵 · 暗金刻线 · 唤醒辉光 · 衬线书卷气
   ========================================================= */

/* ---------- 字体：Cormorant Garamond (英文衬线) ---------- */
@import url('https://cdn.jsdelivr.net/npm/@fontsource/cormorant-garamond@5.3.0/600.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/cormorant-garamond@5.3.0/500.css');

:root {
  --gold-dormant: #8f7a4d;   /* 暗金：沉睡刻线 */
  --gold-dim: #b08d57;       /* 古金：次级 */
  --gold-awake: #e9c46a;     /* 亮金：觉醒 */
  --gold-line: rgba(176, 141, 87, .38);
  --serif: 'Cormorant Garamond', 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', serif;
}

/* ---------- 壁纸背景（直接钉在 body 上） ---------- */
html {
  background: transparent !important;
}
body {
  background: #eef2ff url('../img/frieren-fern.jpg') center/cover no-repeat fixed !important;
}

/* 背景色调：浅色=暖象牙，深色=墨绿黑夜 */
html:not([data-theme='dark']) body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background: rgba(243, 236, 221, .72);
  pointer-events: none;
  transition: background 2.8s ease;
}
html:not([data-theme='dark']) body.magic-on::before {
  background: rgba(18, 22, 26, .92);
}
html[data-theme='dark'] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background: rgba(7, 10, 9, .88);
  pointer-events: none;
  transition: background 2.8s ease;
}
/* 激活魔法阵时：背景压暗成暗金夜色（不是纯黑，带金调） */
html[data-theme='dark'] body.magic-on::before {
  background: rgba(3, 5, 7, .95);
}

/* ---------- 沉睡魔法阵（内联 SVG 四层同心，颜色过渡觉醒） ---------- */
/* 颜色变量：可过渡的注册属性（Chromium 85+），激活时由暗金渐变到亮金 */
@property --g1 {
  syntax: '<color>';
  inherits: true;
  initial-value: #a0834f;
}
@property --g2 {
  syntax: '<color>';
  inherits: true;
  initial-value: #d4b45f;
}
@keyframes magic-spin-cw {
  to { transform: rotate(360deg); }
}
@keyframes magic-spin-ccw {
  to { transform: rotate(-360deg); }
}
/* 四层同心：核心阵眼(a) → 符文环(b) → 星纹层(c) → 珍珠外圈(d)，由内而外依次点亮 */
#magic-a, #magic-b, #magic-c, #magic-d {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: calc(.28 + var(--circle-glow, 0) * .22);
  filter: drop-shadow(0 0 6px rgba(201, 162, 39, .32));
  --g1: #a0834f;
  --g2: #d4b45f;
}
#magic-a svg {
  width: 80vmin;
  height: 80vmin;
  animation: magic-spin-cw 60s linear infinite;
}
#magic-b svg {
  width: 80vmin;
  height: 80vmin;
  animation: magic-spin-ccw 80s linear infinite;
}
#magic-c svg {
  width: 80vmin;
  height: 80vmin;
  animation: magic-spin-cw 100s linear infinite;
}
#magic-d svg {
  width: 80vmin;
  height: 80vmin;
  animation: magic-spin-ccw 120s linear infinite;
}
#magic-a { transition: --g1 1.2s ease .0s, --g2 1.2s ease .0s, filter 1.2s ease .0s, opacity 1.2s ease .0s; }
#magic-b { transition: --g1 1.2s ease .5s, --g2 1.2s ease .5s, filter 1.2s ease .5s, opacity 1.2s ease .5s; }
#magic-c { transition: --g1 1.2s ease 1.0s, --g2 1.2s ease 1.0s, filter 1.2s ease 1.0s, opacity 1.2s ease 1.0s; }
#magic-d { transition: --g1 1.2s ease 1.5s, --g2 1.2s ease 1.5s, filter 1.2s ease 1.5s, opacity 1.2s ease 1.5s; }
/* 激活：亮金渐变 + 辉光微增（线条保持锐利，不糊） */
body.magic-on #magic-a,
body.magic-on #magic-b,
body.magic-on #magic-c,
body.magic-on #magic-d {
  --g1: #f2c257;
  --g2: #ffe08e;
  opacity: calc(.80 + var(--circle-glow, 0) * .15);
  filter: drop-shadow(0 0 4px rgba(250, 214, 120, .60)) drop-shadow(0 0 18px rgba(233, 196, 106, .22));
}

/* 暗夜暗角：法阵觉醒时，四周夜色更沉，中心法阵如夜幕中的金色纹章 */
#magic-vignette {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(0, 0, 0, .5) 100%);
  opacity: 0;
  transition: opacity 3s ease;
}
body.magic-on #magic-vignette {
  opacity: 1;
}

/* ---------- 衬线标题（书卷气） ---------- */
#site-title,
#site-subtitle {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: .10em;
  color: var(--gold-dim) !important;
  text-shadow: 0 0 30px rgba(201, 162, 39, .30);
}
html:not([data-theme='dark']) #site-title,
html:not([data-theme='dark']) #site-subtitle {
  color: #8a6d3b !important;
  text-shadow: none;
}
.recent-post-info .article-title,
.layout_post h1, .layout_post h2, .layout_post h3, .layout_post h4,
#page h1, #page h2, #page h3, #page h4,
.aside-content .card-widget .card-title {
  font-family: var(--serif);
}

/* ---------- 卡片：暗金刻线（浅色=暖象牙玻璃，深色=墨玉玻璃） ---------- */
#recent-posts .recent-post-item,
.aside-content .card-widget,
.layout_post > article,
#page .page,
.article-sort-item,
#footer,
.layout_page .page {
  background: rgba(250, 246, 236, .80) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--gold-line);
  box-shadow: 0 6px 24px rgba(64, 54, 32, .10);
}
html[data-theme='dark'] #recent-posts .recent-post-item,
html[data-theme='dark'] .aside-content .card-widget,
html[data-theme='dark'] .layout_post > article,
html[data-theme='dark'] #page .page,
html[data-theme='dark'] .article-sort-item,
html[data-theme='dark'] #footer,
html[data-theme='dark'] .layout_page .page {
  background: rgba(16, 21, 17, .74) !important;
  border-color: rgba(143, 122, 77, .38);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .42);
}

/* 悬停觉醒：暗金刻线 → 亮金辉光 */
#recent-posts .recent-post-item,
.aside-content .card-widget {
  transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
#recent-posts .recent-post-item:hover,
.aside-content .card-widget:hover {
  transform: translateY(-4px);
  border-color: rgba(233, 196, 106, .85) !important;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .28), 0 0 22px rgba(233, 196, 106, .16) !important;
}
html[data-theme='dark'] #recent-posts .recent-post-item:hover,
html[data-theme='dark'] .aside-content .card-widget:hover {
  box-shadow: 0 10px 34px rgba(0, 0, 0, .5), 0 0 24px rgba(233, 196, 106, .18) !important;
}

/* ---------- 导航菜单下划线：暗金渐变 ---------- */
#nav .menus_item a {
  position: relative;
}
#nav .menus_item a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-awake));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
#nav .menus_item a:hover::after {
  transform: scaleX(1);
}

/* ---------- 滚动条：暗金渐变 ---------- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-dormant), var(--gold-awake));
  border-radius: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------- 选中文字：鎏金 ---------- */
::selection {
  background: rgba(201, 162, 39, .32);
}

/* ---------- 页脚顶部分隔线 ---------- */
#footer {
  border-top: 1px solid rgba(176, 141, 87, .35);
}
html[data-theme='dark'] #footer {
  border-top-color: rgba(176, 141, 87, .22);
}

/* ---------- 背景模式开关（右侧设置同款风格） ---------- */
#bg-toggle {
  position: fixed;
  right: 10px;
  bottom: 40px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  margin-bottom: 5px;
  background-color: var(--btn-bg);
  color: var(--btn-color);
  text-align: center;
  font-size: 16px;
  line-height: 1;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  overflow: hidden;
  -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#bg-toggle i {
  display: inline-block;
  vertical-align: baseline;
  -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#bg-toggle:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15), 0 0 14px rgba(233, 196, 106, .25);
  -webkit-transform: translateY(-1px) scale(1.02);
  transform: translateY(-1px) scale(1.02);
}
#bg-toggle:hover i {
  -webkit-animation: buttonIconBounce 0.6s ease-in-out;
  animation: buttonIconBounce 0.6s ease-in-out;
}
#bg-toggle.active { color: #c9a227; }

/* ---------- 魔法阵激活开关 ---------- */
#magic-toggle {
  position: fixed;
  right: 10px;
  bottom: 5px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  background-color: var(--btn-bg);
  color: var(--btn-color);
  text-align: center;
  font-size: 15px;
  line-height: 1;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  overflow: hidden;
  -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#magic-toggle:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15), 0 0 14px rgba(233, 196, 106, .25);
  -webkit-transform: translateY(-1px) scale(1.02);
  transform: translateY(-1px) scale(1.02);
}
#magic-toggle.active {
  color: #e9c46a;
  box-shadow: 0 0 14px rgba(233, 196, 106, .35);
}
#magic-toggle.active i {
  animation: magic-flow 2.5s linear infinite;
}

/* 设置按钮整体上移一格，给看壁纸按钮让位 */
#rightside { bottom: 80px !important; }

/* 背景模式：隐藏文章、侧栏、页脚、右侧按钮，只留壁纸 */
body.bg-mode #page-header,
body.bg-mode #content-inner,
body.bg-mode #footer,
body.bg-mode #rightside {
  display: none !important;
}

/* ---------- 觉醒系统：滚动渐入 + 唤醒辉光 ---------- */
html.js #recent-posts .recent-post-item,
html.js .aside-content .card-widget,
html.js .layout_post > article,
html.js #page .page,
html.js .article-sort-item {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s cubic-bezier(.22, .61, .36, 1), transform .9s cubic-bezier(.22, .61, .36, 1), border-color .9s ease, box-shadow .9s ease;
}
.awaken {
  opacity: 1 !important;
  transform: translateY(0) !important;
  animation: awaken-glow 2.6s ease;
}
@keyframes awaken-glow {
  0% { box-shadow: 0 0 0 rgba(233, 196, 106, 0); }
  35% { box-shadow: 0 0 28px rgba(233, 196, 106, .30); }
  100% { box-shadow: 0 10px 34px rgba(0, 0, 0, .42), 0 0 10px rgba(233, 196, 106, .06); }
}

/* ---------- 魔法阵激活：暗金慢慢变亮金，如水流动 ---------- */

body.magic-on #magic-glow {
  opacity: 1;
}
body.magic-on .magic-glow-spin {
  animation-duration: 3.5s;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(233, 196, 106, .38) 70deg, transparent 140deg, transparent 360deg);
}


/* ---------- 金色流光：沿魔法阵纹路游走（随滚动点亮） ---------- */
#magic-glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: url('../img/magic-circle.svg');
  mask-image: url('../img/magic-circle.svg');
  -webkit-mask-size: 80vmin;
  mask-size: 80vmin;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: calc(var(--circle-glow, 0) * .95);
}
.magic-glow-spin {
  position: absolute;
  inset: -80vmax;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(233, 196, 106, .20) 50deg, transparent 100deg, transparent 360deg);
  animation: magic-flow 9s linear infinite;
}
@keyframes magic-flow { to { transform: rotate(360deg); } }

/* ---------- 回到顶部：魔法阵进度环（随滚动点亮） ---------- */
#go-up {
  width: 35px !important;
  height: 35px !important;
  line-height: 35px !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle, var(--btn-bg) 55%, transparent 58%),
    conic-gradient(var(--gold-awake) calc(var(--scroll-pct, 0) * 1%), rgba(143, 122, 77, .28) 0) !important;
}
#go-up .scroll-percent {
  color: var(--gold-awake) !important;
  font-size: 12px !important;
}
#go-up i { font-size: 14px !important; }
html[data-theme='dark'] #go-up {
  box-shadow: 0 0 12px rgba(233, 196, 106, .15);
}