/* ============================================================
   depth.css —— 深度交互层 v3
   加载顺序：tokens → base → 页面专属 → responsive → depth（最后）
   原则：只用新增类 / 独立 CSS 属性（translate / scale），
         不覆盖既有 transform 契约，避免破坏 reveal、抽屉、动画
   ============================================================ */

/* 同源页面切换的交叉淡入（支持浏览器自动启用，不支持则静默降级） */
@view-transition { navigation: auto; }

:root {
  --dx: 0px;          /* 综合横向视差位移 */
  --dy: 0px;          /* 综合纵向视差位移 */
  --sy: 0px;          /* 滚动驱动位移 */
}

/* ==========================================================
   1. 多层景深视差：每层不同系数，指针 + 滚动双驱动
   用独立 translate 属性，与既有 animation 的 transform 叠加而非覆盖
   ========================================================== */
#bg-canvas {
  transform: scale(1.07);
  translate: calc(var(--dx) * -0.7) calc(var(--dy) * -0.7 + var(--sy) * 0.02);
}
#grid-fx {
  inset: -8%;
  translate: calc(var(--dx) * 0.45) calc(var(--dy) * 0.45 + var(--sy) * 0.05);
}
#aurora .b1 { translate: calc(var(--dx) * 1.5) calc(var(--dy) * 1.5 + var(--sy) * 0.10); }
#aurora .b2 { translate: calc(var(--dx) * -1.1) calc(var(--dy) * -1.1 + var(--sy) * -0.06); }
#aurora .b3 { translate: calc(var(--dx) * 0.85) calc(var(--dy) * 0.85 + var(--sy) * 0.14); }
.hero-orb { translate: calc(var(--dx) * -1.8) calc(var(--dy) * -1.8 + var(--sy) * 0.18); }

/* 首屏随滚动向深处退场（容器级，不与内部 .reveal 冲突） */
.hero, .blog-hero { will-change: transform, opacity; }

/* 拖拽时禁止误选文字并给出抓取光标 */
html.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }

/* ==========================================================
   2. 卡片真实 3D 透视：JS 只写 CSS 变量，不写 transform
   ========================================================== */
.depth-tilt {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .3s var(--ease-spring), box-shadow .3s var(--ease-out);
  will-change: transform;
  position: relative;
}
/* 提高优先级：页面原有 `.space-card:hover{transform:translateY(-6px)}` 等规则
   会盖掉透视，这里用双类选择器 + 后置加载顺序夺回控制权 */
.depth-tilt.depth-active {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .06s linear, box-shadow .2s var(--ease-out);
}
/* 镜面高光：复用 enhance.js 注入的 .pointer-glow，仅增强光质 */
.depth-tilt > .pointer-glow {
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, .16),
    color-mix(in srgb, var(--mango) 10%, transparent) 44%,
    transparent 70%);
}

/* 动态内容入场：独立 scale/translate，不覆盖卡片 transform */
@keyframes depth-pop {
  from { opacity: 0; scale: .965; translate: 0 14px; }
  to   { opacity: 1; scale: 1;    translate: 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .space-card, .post-card, .hidden-card, .pl-card,
  .stat-card, .admin-card, .space-tile {
    animation: depth-pop .55s var(--ease-spring) both;
  }
}

/* ==========================================================
   3. 点击涟漪 / 磁吸按钮
   ========================================================== */
.depth-tap { position: relative; overflow: hidden; }
.depth-ripple {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; pointer-events: none; z-index: 4;
  background: radial-gradient(circle,
    rgba(255, 255, 255, .45), rgba(255, 207, 77, .22) 45%, transparent 72%);
  transform: scale(0); animation: depth-ripple .64s var(--ease-out) forwards;
}
@keyframes depth-ripple { to { transform: scale(16); opacity: 0; } }

/* ==========================================================
   4. 深度控制 HUD（可发现、可调节、可关闭）
   ========================================================== */
.depth-hud {
  position: fixed; right: 18px; bottom: calc(74px + var(--safe-b));
  z-index: 62; display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.depth-hud-btn {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-glass-strong); color: var(--text-1);
  border: 1px solid var(--hairline); cursor: pointer;
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow-2);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  transition: transform var(--dur-2) var(--ease-spring), border-color var(--dur-1);
}
.depth-hud-btn:hover { transform: scale(1.08); border-color: color-mix(in srgb, var(--mango) 55%, transparent); }
.depth-hud-btn:active { transform: scale(.94); }
.depth-hud-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.depth-hud.open .depth-hud-btn { border-color: color-mix(in srgb, var(--mango) 60%, transparent); }

.depth-panel {
  width: 252px; padding: 16px; border-radius: 18px;
  background: var(--bg-glass-strong); border: 1px solid var(--hairline);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow-4);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  opacity: 0; transform: translateY(10px) scale(.95); transform-origin: 100% 100%;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-spring);
}
.depth-hud.open .depth-panel { opacity: 1; transform: none; pointer-events: auto; }
.depth-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.depth-panel-head strong { font-size: 14px; letter-spacing: .02em; }
.depth-x {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--hairline);
  background: var(--bg-glass-2); color: var(--text-2); cursor: pointer; font-size: 15px; line-height: 1;
}
.depth-x:hover { color: var(--text-1); }
.depth-tip { margin: 0 0 14px; font-size: 11.5px; line-height: 1.5; color: var(--text-3); }
.depth-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-2); margin: 10px 0; }
.depth-row > span:first-child { flex: none; width: 54px; }
.depth-row output { font-variant-numeric: tabular-nums; color: var(--mango); font-size: 12px; width: 34px; text-align: right; }
.depth-row input[type="range"] {
  flex: 1; min-width: 0; height: 4px; appearance: none; -webkit-appearance: none;
  border-radius: 999px; background: var(--hairline-strong); cursor: pointer;
}
.depth-row input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%;
  background: var(--mango); border: 2px solid var(--bg-2); box-shadow: 0 0 0 1px var(--mango);
}
.depth-row input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%; background: var(--mango); border: 2px solid var(--bg-2);
}
.depth-switch {
  margin-left: auto; min-width: 56px; height: 26px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--bg-glass-2);
  color: var(--text-2); font-size: 11.5px; cursor: pointer;
}
.depth-switch[aria-pressed="true"] { color: var(--text-on-accent); background: var(--mango); border-color: var(--mango); }
.depth-reset {
  width: 100%; margin-top: 4px; padding: 9px 12px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--hairline); background: var(--bg-glass-2); color: var(--text-1);
  font-size: 12.5px; font-family: inherit;
}
.depth-reset:hover { border-color: color-mix(in srgb, var(--mango) 50%, transparent); }
.depth-status { margin: 12px 0 0; font-size: 10.5px; color: var(--text-3); line-height: 1.5; }

/* 首次访问引导：贴导航下方的顶部横幅，避免遮挡卡片内容 */
.depth-hint {
  position: fixed; top: calc(var(--nav-h) + var(--safe-t) + 12px); left: 50%; z-index: 61;
  transform: translateX(-50%); white-space: nowrap; max-width: calc(100vw - 32px);
  padding: 9px 16px; border-radius: 999px; font-size: 12.5px; color: var(--text-1);
  background: var(--bg-glass-strong); border: 1px solid var(--hairline);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow-3);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  pointer-events: none; animation: depth-hint-in .6s var(--ease-spring) both;
}
.depth-hint.out { opacity: 0; transform: translateX(-50%) translateY(-10px); transition: opacity .5s, transform .5s; }
@keyframes depth-hint-in { from { opacity: 0; transform: translateX(-50%) translateY(-12px); } }
/* 标签栏文字不换行 */
.mobile-tabbar a span { white-space: nowrap; }

/* ==========================================================
   5. 降级：减少动效 / 手动关闭动效 / 触摸设备 / 小屏
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  #bg-canvas, #grid-fx, #aurora .blob, .hero-orb { translate: none !important; }
  .depth-tilt, .depth-tilt * { transition: none !important; }
  .depth-ripple { display: none; }
  .depth-hint { animation: none; }
}
html[data-motion="off"] #aurora .blob,
html[data-motion="off"] .hero-orb,
html[data-motion="off"] .hero-orb::before,
html[data-motion="off"] .hero-orb::after { animation: none !important; }
html[data-motion="off"] .depth-tilt { transition: none !important; }
html[data-motion="off"] .depth-ripple { display: none; }
html[data-motion="off"] #bg-canvas,
html[data-motion="off"] #grid-fx,
html[data-motion="off"] #aurora .blob,
html[data-motion="off"] .hero-orb { translate: none !important; }

/* 纯触屏设备不启用悬停透视；触屏笔记本接鼠标仍可用 */
@media (hover: none) and (pointer: coarse) {
  .depth-tilt { transform: none !important; }
  .depth-hud { bottom: calc(132px + var(--safe-b)); }
}
@media (max-width: 640px) {
  .depth-hud { right: 12px; bottom: calc(132px + var(--safe-b)); }
  .depth-panel { width: min(252px, calc(100vw - 32px)); }
  .depth-hint { font-size: 11.5px; padding: 8px 13px; white-space: normal; text-align: center; border-radius: 16px; }
  .hero-orb { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .depth-panel, .depth-hud-btn, .depth-hint { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg-2); }
}