/* ── 四扇门：横向可滑动轨道 + 3D 倾斜 + 光斑 ────────────────── */
/* 不用 scroll-snap：桌面端一屏能看见 2~3 张卡片时，原生 snap 会在
   JS 用 scrollTo() 算好目标位置之后又抢着往最近的卡片边界二次吸附，
   跟下面 JS 的"均分步进"逻辑打架，让进度条对不上实际停的位置。
   索性交给 JS 全权算滚动位置，这里只留纯粹的横向滚动容器。 */

.doors {
  display: flex;
  gap: clamp(16px, 2.4vw, 24px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 28px clamp(24px, 6vw, 72px) 32px;
  perspective: 1600px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.doors::-webkit-scrollbar { display: none; }

.door {
  opacity: 0;
  animation: rise 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: flex-end;
  width: min(84vw, 400px);
  padding: clamp(30px, 4vw, 44px);
  min-height: 420px;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(155deg, var(--surface), var(--ground-2));
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  will-change: transform;
  --audio-pulse: 0;
  box-shadow:
    0 0 0 1.5px rgba(var(--accent-rgb, 217, 112, 126), calc(var(--audio-pulse) * 0.9)),
    0 0 46px 4px rgba(var(--accent-rgb, 217, 112, 126), calc(var(--audio-pulse) * 0.5));
  transition: border-color 260ms ease, background 260ms ease, box-shadow 80ms ease;
}

.door:nth-child(1) { animation-delay: 360ms; }
.door:nth-child(2) { animation-delay: 520ms; }
.door:nth-child(3) { animation-delay: 680ms; }
.door:nth-child(4) { animation-delay: 840ms; }

@media (min-width: 640px) {
  .door { width: clamp(360px, 44vw, 440px); min-height: 450px; }
}

@media (min-width: 1080px) {
  .door { width: clamp(420px, 32vw, 560px); min-height: 480px; }
}

.door:hover,
.door:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline));
  background: linear-gradient(155deg, var(--surface-hover), var(--ground-2));
  box-shadow:
    0 30px 70px -35px rgba(0, 0, 0, 0.7),
    0 0 0 1.5px rgba(var(--accent-rgb, 217, 112, 126), calc(var(--audio-pulse) * 0.9)),
    0 0 46px 4px rgba(var(--accent-rgb, 217, 112, 126), calc(var(--audio-pulse) * 0.5));
  outline: none;
}

.door-spot {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 320ms ease;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 30%), var(--accent-glow), transparent 65%);
}

.door:hover .door-spot,
.door:focus-visible .door-spot {
  opacity: 1;
}

.door-glyph {
  position: absolute;
  right: -0.06em;
  top: -0.2em;
  font-size: clamp(160px, 22vw, 240px);
  font-weight: 400;
  color: var(--accent);
  opacity: 0.08;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  transition: opacity 300ms ease, transform 300ms ease;
}

.door:hover .door-glyph { opacity: 0.15; transform: scale(1.04) translateZ(0); }

.door-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 子站状态灯：JS 真的去探各子站后端的健康检查接口，不是装饰。
   检查中是暗的，在线是青绿带一点光晕，打不开是石榴红 */
.door-status {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--hairline);
  transition: background 300ms ease, box-shadow 300ms ease;
}
.door-status[data-state="up"] {
  background: var(--teal);
  box-shadow: 0 0 6px 1px var(--teal-glow);
}
.door-status[data-state="down"] {
  background: var(--garnet);
}

.door-title {
  font-size: clamp(34px, 6vw, 54px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.05;
  margin: 0 0 14px;
  text-wrap: balance;
}

.door-desc {
  max-width: 42ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-dim);
  margin: 0 0 22px;
}

.door-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}

.door-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: var(--ink-faint);
  letter-spacing: 0.01em;
}

.door-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-dim);
  flex-shrink: 0;
  transition: border-color 220ms ease, color 220ms ease, transform 220ms ease, background 220ms ease;
}

.door:hover .door-arrow,
.door:focus-visible .door-arrow {
  border-color: var(--accent);
  color: var(--ground);
  background: var(--accent);
  transform: translate(3px, -3px) rotate(6deg);
}

.door--recipe { --accent: var(--garnet); --accent-glow: var(--garnet-glow); --accent-rgb: 217, 112, 126; }
.door--toolbox { --accent: var(--teal); --accent-glow: var(--teal-glow); --accent-rgb: 98, 199, 182; }
.door--games { --accent: var(--amber); --accent-glow: var(--amber-glow); --accent-rgb: 219, 165, 86; }
.door--ai { --accent: var(--violet); --accent-glow: var(--violet-glow); --accent-rgb: 160, 139, 219; }

/* ── HUD 取景框角标 + 编号：静态装饰，呼应门轨道下方的 01/04 进度条 ── */

.door-frame {
  position: absolute;
  inset: 16px;
  pointer-events: none;
  opacity: 0.4;
  transition: opacity 260ms ease;
}

.door:hover .door-frame,
.door:focus-visible .door-frame,
.door--active .door-frame {
  opacity: 0.8;
}

.door-frame-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid var(--accent);
}

.door-frame-corner--tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.door-frame-corner--tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.door-frame-corner--bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.door-frame-corner--br { bottom: 0; right: 0; border-left: none; border-top: none; }

.door-frame-tag {
  position: absolute;
  top: 0;
  left: 24px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--accent);
}

/* ── 焦点锁定：轨道滑动时贴着左边界的那张卡片常亮描边，其余略微变暗，
   跟随 [doorsTrack] 的 scroll 事件由 JS 切 .door--active ────────── */

.door--active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--hairline));
  box-shadow:
    0 0 0 1.5px rgba(var(--accent-rgb, 217, 112, 126), 0.55),
    0 0 42px 6px rgba(var(--accent-rgb, 217, 112, 126), 0.2);
}

.doors:has(.door--active) .door:not(.door--active) {
  filter: saturate(0.6) brightness(0.85);
}

/* ── 门轨道下方：前后箭头 + 进度条，标注当前滑到第几扇门 ──── */

.doors-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 4px clamp(24px, 6vw, 72px) clamp(56px, 8vw, 96px);
}

.doors-nav-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: none;
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease, opacity 200ms ease;
}

.doors-nav-btn:not(:disabled):hover,
.doors-nav-btn:not(:disabled):focus-visible {
  border-color: var(--garnet);
  color: var(--ground);
  background: var(--garnet);
  outline: none;
}

.doors-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.doors-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

.doors-progress-index {
  color: var(--ink);
  min-width: 1.6em;
  text-align: right;
}

.doors-progress-track {
  width: clamp(90px, 14vw, 160px);
  height: 2px;
  border-radius: 2px;
  background: var(--hairline);
  overflow: hidden;
}

.doors-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--garnet);
  transition: width 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (pointer: coarse) {
  .doors-nav-btn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .doors-progress-fill { transition: none; }
}

/* ── 门立方体：四个入口贴在正方体的前/右/后/左四个面，上下两面留空。
   JS 确认浏览器支持 preserve-3d 才给 .doors 加 .is-cube；不支持（或 JS
   没跑起来）就保持上面那套横向滑动轨道，作为降级路径。
   结构：.doors（透视舞台）> .cube-pivot（往后推半个边长，让正面停在
   z=0、不被透视放大）> .cube（JS 写 rotateX/rotateY）> 六个面 ──── */

.doors.is-cube {
  --cube: clamp(280px, min(82vw, 58vh), 440px);
  display: flex;
  justify-content: center;
  overflow: visible;
  padding: calc(var(--cube) * 0.16) 0 calc(var(--cube) * 0.2);
  perspective: calc(var(--cube) * 3.4);
  /* 横向拖动归 JS 转立方体，纵向仍然交给浏览器滚页面 */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  opacity: 0;
  animation: rise 900ms cubic-bezier(0.16, 1, 0.3, 1) 360ms forwards;
}

.doors.is-cube .cube-pivot {
  width: var(--cube);
  height: var(--cube);
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--cube) / -2));
}

.doors.is-cube .cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(-12deg) rotateY(0deg);
  will-change: transform;
  /* 桌面端悬浮时跟着鼠标的小幅偏转用这个短过渡，拖动时关掉以免跟手发黏 */
  transition: transform 180ms ease-out;
}

.doors.is-cube.is-dragging .cube { transition: none; }

.doors.is-cube .cube.is-snapping {
  transition: transform 620ms cubic-bezier(0.2, 0.9, 0.25, 1.15);
}

.doors.is-cube .door,
.doors.is-cube .cube-cap {
  position: absolute;
  inset: 0;
  width: var(--cube);
  height: var(--cube);
  min-height: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: var(--face);
}

/* 立方体模式下门本身不裁剪（overflow: visible）：Chromium（Chrome / Edge）里，带裁剪
   （hidden / clip / clip-path 都一样）又在 preserve-3d 里的面，转到正面之后点不中——
   点击落到 .cube-pivot 上，侧面两扇门（工具箱、AI 聊天）转过来点了没反应。正面和背面
   （0° / 180°）不受影响，Safari 也没有这个问题，2026-10-08 用 Chromium 153 实测定位。
   原来靠裁剪挡住的只有右上角那个伸出去的大字，改成它自己裁（见下面 .door-glyph）。
   横向轨道那套降级样式不是 3D，照旧 overflow: hidden。 */
.doors.is-cube .door {
  overflow: visible;
  opacity: 1;
  animation: none;
  padding: calc(var(--cube) * 0.075);
  container-type: size;
  will-change: auto;
  transition: border-color 260ms ease, background 260ms ease, box-shadow 80ms ease, filter 400ms ease;
}

/* 面放在 rotateY(n×90°) 再往外推半个边长 */
.doors.is-cube .door:nth-child(1) { --face: rotateY(0deg) translateZ(calc(var(--cube) / 2)); }
.doors.is-cube .door:nth-child(2) { --face: rotateY(90deg) translateZ(calc(var(--cube) / 2)); }
.doors.is-cube .door:nth-child(3) { --face: rotateY(180deg) translateZ(calc(var(--cube) / 2)); }
.doors.is-cube .door:nth-child(4) { --face: rotateY(270deg) translateZ(calc(var(--cube) / 2)); }
.doors.is-cube .cube-cap--top { --face: rotateX(90deg) translateZ(calc(var(--cube) / 2)); }
.doors.is-cube .cube-cap--bottom { --face: rotateX(-90deg) translateZ(calc(var(--cube) / 2)); }

/* 面是正方形，手机上只有三百来像素宽——字号按面的边长（cqw）缩放，
   不按视口；不支持容器单位的浏览器 clamp 整条失效，回落到上面的原值 */
.doors.is-cube .door-title { font-size: clamp(26px, 11cqw, 50px); margin-bottom: 3cqw; }
.doors.is-cube .door-desc { font-size: clamp(13px, 3.7cqw, 16px); margin-bottom: 5cqw; }
.doors.is-cube .door-eyebrow { margin-bottom: 3.5cqw; }
.doors.is-cube .door-foot { padding-top: 4cqw; }
.doors.is-cube .door-meta { font-size: clamp(11px, 2.9cqw, 12.5px); }
/* 大字故意往右上角伸出去（right: -0.06em; top: -0.2em），门不再裁剪，伸出去的这截自己裁掉 */
.doors.is-cube .door-glyph { font-size: 52cqw; clip-path: inset(0.2em 0.06em 0 0); }

.doors.is-cube .cube-cap {
  --accent: var(--ink-faint);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 50%, rgba(217, 112, 126, 0.06), transparent 62%),
    linear-gradient(155deg, var(--surface), var(--ground-2));
  overflow: hidden;
  container-type: size;
  cursor: default;
}

/* 顶/底面的"敬请期待"占位：内容按 JS 写进来的 --cap-yaw 反向转正，
   不然从第 2~4 扇门翻上来时字是歪的（见 index.html 里 uprightCaps） */
.cube-cap-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px dashed color-mix(in srgb, var(--hairline) 70%, transparent);
  margin: 7.5cqw;
  border-radius: 3px;
}
.cube-cap--top .cube-cap-inner { transform: rotate(var(--cap-yaw, 0deg)); }
.cube-cap--bottom .cube-cap-inner { transform: rotate(calc(var(--cap-yaw, 0deg) * -1)); }

.cube-cap-inner .door-frame-tag { top: 12px; left: 14px; }
.cube-cap-inner .door-eyebrow { justify-content: center; margin-bottom: 3cqw; }

.cube-cap-glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60cqw;
  line-height: 1;
  color: var(--garnet);
  opacity: 0.06;
  pointer-events: none;
}

.cube-cap-title {
  font-size: clamp(24px, 9cqw, 40px);
  font-style: italic;
  color: var(--ink-dim);
  margin-bottom: 2cqw;
}

.cube-cap-desc {
  margin: 0;
  font-size: clamp(12px, 3.4cqw, 14px);
  color: var(--ink-faint);
}

/* 「关于」面上有能点的邮箱按钮：跟门一样不能裁剪，不然 Chromium 里转到正面后
   点不中（见上面 .doors.is-cube .door 的注释）；背景大字改成自己裁 */
.doors.is-cube .cube-cap--about { overflow: visible; }
.cube-cap--about .cube-cap-glyph { overflow: hidden; }
.cube-cap--about .cube-cap-title { color: var(--ink); }

.about-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2cqw;
  margin-top: 5cqw;
}
.about-contact[hidden] { display: none; }

.about-email {
  padding: 1.6cqw 3.4cqw;
  border: 1px solid color-mix(in srgb, var(--garnet) 45%, var(--hairline));
  border-radius: 3px;
  background: transparent;
  color: var(--garnet);
  font-size: clamp(12px, 3.6cqw, 14.5px);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.about-email:hover,
.about-email:focus-visible {
  outline: none;
  background: rgba(217, 112, 126, 0.12);
  color: var(--ink);
}

.about-mail {
  font-size: clamp(11px, 2.9cqw, 12px);
  color: var(--ink-faint);
  text-decoration: none;
}
.about-mail:hover,
.about-mail:focus-visible {
  outline: none;
  color: var(--ink-dim);
  text-decoration: underline;
}

/* 立方体本身接管所有方向的拖动（上下翻面），周围留白处竖滑仍然滚页面 */
.doors.is-cube .cube-pivot { touch-action: none; }

/* 转到侧面/背面的门压暗一点，正面那扇才是"当前" */
.doors.is-cube:has(.door--active) .door:not(.door--active) {
  filter: saturate(0.55) brightness(0.7);
}

.doors:not(.is-cube) .cube-cap { display: none; }
.doors:not(.is-cube) .cube-pivot,
.doors:not(.is-cube) .cube { display: contents; }

.doors.is-cube.is-dragging,
.doors.is-cube.is-dragging .door { cursor: grabbing; }

.cube-hint {
  display: none;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  text-align: center;
  margin-top: -6px;
}
.doors.is-cube ~ .cube-hint { display: block; }
.cube-hint .hint-touch { display: none; }
@media (pointer: coarse) {
  .cube-hint .hint-mouse { display: none; }
  .cube-hint .hint-touch { display: inline; }
  /* 立方体模式下手机也显示前后箭头：轨道模式靠原生横滑不需要，
     立方体只靠拖动不容易被发现 */
  .doors.is-cube ~ .doors-nav .doors-nav-btn { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .doors.is-cube { animation: none; opacity: 1; }
  .doors.is-cube .cube.is-snapping { transition: none; }
}