/* ==========================================================================
   fx.css — 新源教程「视觉增强层」v1
   纯叠加：不改动原有布局与交互；删除本文件 + fx.js 即完全还原。
   仅使用 transform / opacity / filter，避免触发布局重排。
   ========================================================================== */

@property --fx-ang {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

body.fx-on {
  --fx-ease: cubic-bezier(.22, .8, .3, 1);
}

/* ---------- 1. 顶部滚动进度条：流光 + 外发光 ---------- */
.scroll-progress > span {
  background: linear-gradient(90deg, #2f9e5e, #7fd1c2, #9be7bd, #2f9e5e);
  background-size: 220% 100%;
  animation: fx-bar 2.8s linear infinite;
  box-shadow: 0 0 10px rgba(47, 158, 94, .55);
}
@keyframes fx-bar { to { background-position: 220% 0; } }

/* ---------- 2. 卡片 3D 倾角 + 流光描边 ---------- */
.fx-tilt {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .5s var(--fx-ease), box-shadow .5s var(--fx-ease);
  will-change: transform;
}
.fx-tilt.fx-live {
  transform: perspective(900px)
             rotateX(var(--fx-rx, 0deg))
             rotateY(var(--fx-ry, 0deg))
             translate3d(0, -3px, 0)
             scale(1.012);
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .42), 0 0 0 1px var(--green-line);
  transition-duration: .08s;
}
.fx-tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--fx-ang),
    transparent 0deg 200deg,
    rgba(47, 158, 94, .85) 248deg,
    rgba(127, 209, 194, .95) 286deg,
    transparent 320deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
}
.fx-tilt.fx-live::after {
  opacity: 1;
  animation: fx-ang-spin 2.4s linear infinite;
}
@keyframes fx-ang-spin { to { --fx-ang: 360deg; } }

/* ---------- 3. 首屏标题：渐变流光 ---------- */
.hero h1 {
  background: linear-gradient(100deg, var(--text) 0%, var(--green) 36%, #7fd1c2 52%, var(--text) 74%);
  background-size: 220% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fx-title 9s linear infinite;
}
.hero h1 em {
  -webkit-text-fill-color: transparent;
}
@keyframes fx-title { to { background-position: 220% center; } }

/* ---------- 4. 首屏背景：极淡网格 + 呼吸 ---------- */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(72% 62% at 50% 38%, #000 0%, transparent 76%);
          mask-image: radial-gradient(72% 62% at 50% 38%, #000 0%, transparent 76%);
  opacity: .55;
  animation: fx-grid 9s ease-in-out infinite;
}
@keyframes fx-grid { 50% { opacity: .28; } }

/* ---------- 5. 磁吸按钮 ---------- */
.fx-magnet {
  transition: transform .25s var(--fx-ease);
  will-change: transform;
}

/* ---------- 6. 路由切换转场（覆盖原 page-in） ---------- */
.main.page-in {
  animation: fx-page .46s var(--fx-ease);
}
@keyframes fx-page {
  from { opacity: 0; transform: translateY(12px) scale(.995); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* ---------- 7. 主题切换闪光 ---------- */
.fx-flash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(127, 209, 194, .28), transparent 62%);
  animation: fx-flash .5s ease-out forwards;
}
@keyframes fx-flash {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ---------- 8. 无障碍与降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-tilt,
  .fx-tilt::after,
  .hero::before,
  .hero h1,
  .main.page-in {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .hero h1 {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--text);
  }
  .fx-flash { display: none; }
}

@media (hover: none), (pointer: coarse) {
  .fx-tilt.fx-live { transform: none; }
  .fx-tilt::after { display: none; }
  .fx-magnet { transform: none !important; }
  .scroll-progress > span { animation: none; }
}

/* ---------- 9. 修复：移动端抽屉侧边栏被遮罩挡住、点不了 ----------
   原因：style.css 的 `.layout { position: relative; z-index: 1 }` 制造了局部层叠上下文，
   `.sidebar` 的 z-index:58 只在 .layout 内部生效，对外比较的是 1；
   于是 z-index:55 的 `.scrim` 整体盖住了抽屉，触摸事件全被遮罩吃掉。
   修法：移动端解除 .layout 的层叠上下文，让抽屉的 58 直接参与根层叠。
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .layout {
    position: static;
    z-index: auto;
  }
  /* ② 抽屉留足层叠余量，权重高于遮罩(55)与顶栏(60) */
  .sidebar {
    z-index: 80;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  /* ③ 点击热区：原 32px 高，真机容易点空，加大到 44px */
  .side-link {
    padding: 11px 12px;
    min-height: 44px;
    box-sizing: border-box;
  }
  .side-group h3 {
    padding: 0 12px 4px;
  }
  .sidebar .mobile-nav a {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* ④ iOS 先模拟 hover 再 click，去掉这层延迟 */
  .sidebar a,
  .sidebar button,
  .menu-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* ⑤ 根本修法：让遮罩从几何上避开抽屉。
     之前靠 z-index 让抽屉压住遮罩，只要有一层意外的层叠上下文就会失效；
     现在遮罩从抽屉右边缘(272px)开始，抽屉范围内根本不存在遮罩元素，
     无论浏览器怎么算 z-index，点击都不会被吃掉。 */
  .scrim {
    left: 0;
    transition: left .2s ease;
  }
  body.sidebar-open .scrim {
    left: 272px;
  }
}

/* ==========================================================================
   10. 现代化 v2 —— 多彩强调色 / 玻璃质感 / 渐变光晕
   解决「全站只有一种绿、层次单一」的问题。全部为叠加覆盖。
   ========================================================================== */

/* ---- 10.1 六色强调分配（按卡片序号循环） ---- */
.tutorial-grid > .tut-card:nth-child(6n+1),
.feature-grid > .feature:nth-child(6n+1) { --fx-a: #2f9e5e; --fx-b: #7bd6a4; }
.tutorial-grid > .tut-card:nth-child(6n+2),
.feature-grid > .feature:nth-child(6n+2) { --fx-a: #0d9488; --fx-b: #5eead4; }
.tutorial-grid > .tut-card:nth-child(6n+3),
.feature-grid > .feature:nth-child(6n+3) { --fx-a: #2563eb; --fx-b: #93c5fd; }
.tutorial-grid > .tut-card:nth-child(6n+4),
.feature-grid > .feature:nth-child(6n+4) { --fx-a: #7c3aed; --fx-b: #c4b5fd; }
.tutorial-grid > .tut-card:nth-child(6n+5),
.feature-grid > .feature:nth-child(6n+5) { --fx-a: #b45309; --fx-b: #fcd34d; }
.tutorial-grid > .tut-card:nth-child(6n),
.feature-grid > .feature:nth-child(6n)   { --fx-a: #be123c; --fx-b: #fda4af; }

[data-theme="dark"] .tutorial-grid > .tut-card:nth-child(6n+1),
[data-theme="dark"] .feature-grid > .feature:nth-child(6n+1) { --fx-a: #45c07a; --fx-b: #8ff0bd; }
[data-theme="dark"] .tutorial-grid > .tut-card:nth-child(6n+2),
[data-theme="dark"] .feature-grid > .feature:nth-child(6n+2) { --fx-a: #2dd4bf; --fx-b: #99f6e4; }
[data-theme="dark"] .tutorial-grid > .tut-card:nth-child(6n+3),
[data-theme="dark"] .feature-grid > .feature:nth-child(6n+3) { --fx-a: #60a5fa; --fx-b: #bfdbfe; }
[data-theme="dark"] .tutorial-grid > .tut-card:nth-child(6n+4),
[data-theme="dark"] .feature-grid > .feature:nth-child(6n+4) { --fx-a: #a78bfa; --fx-b: #ddd6fe; }
[data-theme="dark"] .tutorial-grid > .tut-card:nth-child(6n+5),
[data-theme="dark"] .feature-grid > .feature:nth-child(6n+5) { --fx-a: #fbbf24; --fx-b: #fde68a; }
[data-theme="dark"] .tutorial-grid > .tut-card:nth-child(6n),
[data-theme="dark"] .feature-grid > .feature:nth-child(6n)   { --fx-a: #fb7185; --fx-b: #fecdd3; }

/* ---- 10.2 卡片：彩色徽标 + 玻璃底 + 主题色聚光 ---- */
.tut-card,
.feature {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border-color: color-mix(in srgb, var(--fx-a, var(--border)) 16%, var(--border));
  transition: border-color .25s ease, transform .25s var(--fx-ease),
              box-shadow .25s ease, background .25s ease;
}
.tut-card:hover,
.feature:hover {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--fx-a, var(--green)) 48%, var(--border));
  box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--fx-a, #000) 55%, transparent),
              0 0 0 1px color-mix(in srgb, var(--fx-a, var(--green)) 18%, transparent);
}
.tut-card::before,
.feature::before {
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%),
              color-mix(in srgb, var(--fx-a, var(--green)) 20%, transparent),
              transparent 62%);
}
.tut-badge {
  background: linear-gradient(145deg,
              color-mix(in srgb, var(--fx-a, var(--green)) 24%, transparent),
              color-mix(in srgb, var(--fx-b, #7bd6a4) 8%, transparent));
  color: color-mix(in srgb, var(--fx-a, var(--green-dark)) 85%, var(--text));
  border-color: color-mix(in srgb, var(--fx-a, var(--green)) 38%, transparent);
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--fx-a, var(--green)) 70%, transparent);
}
[data-theme="dark"] .tut-badge {
  color: var(--fx-a, var(--green));
  background: linear-gradient(145deg,
              color-mix(in srgb, var(--fx-a, var(--green)) 26%, transparent),
              color-mix(in srgb, var(--fx-b, #7bd6a4) 6%, transparent));
}
.tut-card:hover .tut-badge {
  transform: rotate(-4deg) scale(1.08);
  box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--fx-a, var(--green)) 85%, transparent);
}
.tut-card .more { color: color-mix(in srgb, var(--fx-a, var(--green)) 90%, var(--text)); }
[data-theme="dark"] .tut-card .more { color: var(--fx-a, var(--green)); }

/* ---- 10.3 Hero：全宽彩色氛围光 ----
   直接画在 body 背景上（style.css 原本就在 body 上放了两层径向渐变）。
   用 px 尺寸而不是 100vw，避免滚动条宽度导致的 16px 横向溢出。
   这里必须把原有两条渐变一起写上，否则会被整体覆盖掉。 ---- */
body {
  background-image:
    radial-gradient(760px 560px at 44% 60px,   color-mix(in srgb, #2f9e5e 24%, transparent), transparent 70%),
    radial-gradient(820px 560px at 82% 0px,    color-mix(in srgb, #7c3aed 20%, transparent), transparent 70%),
    radial-gradient(900px 620px at 98% 460px,  color-mix(in srgb, #0d9488 22%, transparent), transparent 70%),
    radial-gradient(1100px 520px at 82% -8%, rgba(47, 158, 94, .07), transparent 62%),
    radial-gradient(900px 460px at 4% 8%, rgba(127, 209, 194, .07), transparent 60%);
  background-repeat: no-repeat;
}
[data-theme="dark"] body {
  background-image:
    radial-gradient(760px 560px at 44% 60px,   color-mix(in srgb, #2f9e5e 28%, transparent), transparent 70%),
    radial-gradient(820px 560px at 82% 0px,    color-mix(in srgb, #7c3aed 26%, transparent), transparent 70%),
    radial-gradient(900px 620px at 98% 460px,  color-mix(in srgb, #0d9488 26%, transparent), transparent 70%),
    radial-gradient(1100px 520px at 82% -8%, rgba(47, 158, 94, .07), transparent 62%),
    radial-gradient(900px 460px at 4% 8%, rgba(127, 209, 194, .07), transparent 60%);
}
/* 注意：不要给 .aurora 的子元素换高饱和颜色。
   它在 style.css 里是 overflow:hidden，模糊光斑会被裁出硬边。 */

@media (min-width: 901px) {
  .hero h1 {
    font-size: clamp(32px, 2.85vw, 41px);
    letter-spacing: -.9px;
    font-weight: 800;
    line-height: 1.2;
  }
}

/* ---- 10.4 统计数字 / 分区标题：渐变字 ---- */
.hero-stats b {
  background: linear-gradient(120deg, var(--green) 0%, #0d9488 55%, #7c3aed 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 22px;
}
.section-head h2 {
  background: linear-gradient(100deg, var(--text) 0%, var(--text) 55%, var(--green) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- 10.5 主按钮：绿→青渐变 + 外发光 ---- */
.btn.primary {
  background: linear-gradient(135deg, var(--green) 0%, #0d9488 62%, #2f9e5e 100%);
  box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--green) 85%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--green) 95%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .3);
}

/* ---- 10.6 首屏代码卡：彩色描边光 ---- */
.hero-card {
  box-shadow: 0 26px 60px -26px rgba(0, 0, 0, .55),
              0 0 0 1px color-mix(in srgb, var(--green) 24%, transparent),
              0 0 70px -24px color-mix(in srgb, #0d9488 55%, transparent);
}

/* ---- 10.7 侧栏 / 目录：主题色高亮 ---- */
.side-link:hover,
.toc a:hover {
  background: color-mix(in srgb, var(--green) 10%, transparent);
}
.side-link.active {
  background: linear-gradient(90deg,
              color-mix(in srgb, var(--green) 18%, transparent),
              color-mix(in srgb, var(--green) 4%, transparent));
  box-shadow: inset 2px 0 0 0 var(--green);
}

/* ---- 10.8 搜索按钮：玻璃 + 光晕 ---- */
.search-btn:hover {
  border-color: color-mix(in srgb, var(--green) 45%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 12%, transparent);
}

/* ==========================================================================
   11. 首屏 3D 景深层（Canvas，见 hero3d.js）
   位置：.aurora(-1) < canvas(0) < 正文(1)
   ========================================================================== */
.hero {
  position: relative;
}
.hero3d {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* 四周羽化，避免画布边界被看出来 */
  -webkit-mask-image: radial-gradient(140% 120% at 50% 46%, #000 58%, transparent 100%);
          mask-image: radial-gradient(140% 120% at 50% 46%, #000 58%, transparent 100%);
}
[data-theme="dark"] .hero3d { opacity: 1; }
[data-theme="light"] .hero3d { opacity: .7; }

/* 浅色模式下标题流光用更深的色阶，避免扫到浅色段时发白看不清 */
[data-theme="light"] .hero h1 {
  /* 浅色背景上 background-clip:text 在部分渲染器里会退化成实心色块，
     这里直接用纯色，保证任何环境下都清晰可读 */
  background-image: none;
  -webkit-text-fill-color: currentColor;
  color: var(--text);
}
[data-theme="light"] .hero h1 em {
  -webkit-text-fill-color: transparent;
  color: var(--green);
}

/* 桌面端给首屏多留一点呼吸空间 */
@media (min-width: 901px) {
  .hero {
    padding: 58px 0 54px;
  }
}
@media (max-width: 900px) {
  .hero3d { opacity: .7; }
}
@media (prefers-reduced-motion: reduce) {
  .hero3d { display: none; }
}