/* 演示小窗口：登录框左边和实验室页上的缩小页面，以及登录后放大成我的台阶 */

/* ---------- 小窗口 ---------- */

.s-demo-cap { margin: 0; font-size: 13px; color: var(--text-3); text-align: center; }
/* 演示舞台：右边是缩小的「我的台阶」，左边压着一张刚才点的那样东西的卡片。尺寸都用 em，字号由 JS 按窗口宽度算 */
.s-demo { position: relative; font-size: 8px; }
.s-demo-win {
  position: relative;
  width: 82%;
  height: 34em;
  margin-left: auto;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 1.2em;
  background:
    radial-gradient(40em 22em at 10% -10%, rgba(91, 140, 255, .14), transparent 60%),
    radial-gradient(36em 22em at 100% 110%, rgba(255, 122, 217, .1), transparent 60%),
    var(--my-bg);
  box-shadow: 0 2.4em 6em -2.6em rgba(0, 0, 0, .65);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.4;
}
.mm-bar { display: flex; align-items: center; gap: .9em; height: 3.6em; padding: 0 1.8em; border-bottom: 1px solid var(--line); background: var(--my-bar); }
.mm-brand { display: inline-flex; align-items: center; gap: .45em; font-size: 1.25em; font-weight: 700; letter-spacing: .04em; }
.mm-brand .ic { width: 1.2em; height: 1.2em; stroke-width: 2.2; }
.mm-pill { margin-left: auto; padding: .3em .9em; border: 1px solid var(--line-2); border-radius: 99em; font-size: .9em; color: var(--text-2); }
.mm-av { width: 1.9em; height: 1.9em; border-radius: 50%; background: conic-gradient(from 200deg, var(--blue), var(--violet), var(--pink), var(--orange), var(--blue)); }
.mm-main { padding: 2em 2.6em; }
.mm-hero { display: flex; align-items: center; justify-content: space-between; gap: 2em; padding: .6em .4em 1em; }
.mm-glass { display: grid; flex: none; place-items: center; width: 14em; height: 8em; background: radial-gradient(closest-side, rgba(143, 125, 255, .3), transparent); color: #a99cff; }
.mm-glass .ic { width: 5em; height: 5em; stroke-width: 1.5; }
.mm-hero small { display: block; font-size: .85em; color: var(--text-3); }
.mm-hero b { display: block; margin-top: .3em; font-size: 1.9em; font-weight: 800; }
.mm-hero i { display: block; margin-top: .4em; font-size: .95em; font-style: normal; color: var(--text-2); }
.mm-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.2em; margin-top: 1.2em; }
.mm-grid > div:first-child { display: grid; align-content: start; gap: 1.2em; }
.mm-panel { align-self: start; }
.mm-h { margin: 0 0 .9em; padding-bottom: .6em; border-bottom: 1px solid var(--line); font-size: .95em; font-weight: 700; letter-spacing: .06em; }
.mm-apps { display: flex; gap: 1.4em; }
.mm-app { position: relative; display: grid; justify-items: center; gap: .6em; width: 5.6em; font-size: .95em; color: var(--text-2); text-align: center; }
.mm-app > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-app.plus .mm-cover { border: 1.5px dashed var(--line-2); background: transparent; box-shadow: none; color: var(--text-3); }
.mm-row { position: relative; display: flex; align-items: center; gap: 1em; padding: .65em .2em; border-bottom: 1px solid var(--line); font-size: 1.05em; }
.mm-row:last-child { border-bottom: 0; }
.mm-row .mm-cover { width: 2.4em; height: 2.4em; border-radius: .7em; }
.mm-row b { flex: 1; min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.mm-row small { font-size: .85em; color: var(--text-3); }
.mm-row > .ic { width: 1em; height: 1em; color: var(--text-3); }
.mm-app.slot::before { left: 50%; top: 0; width: 3.4em; height: 3.4em; transform: translateX(-50%); }
.mm-row.slot::before { inset: .3em 0; border-radius: .8em; }
@keyframes demo-fly {
  0%, 14% { left: var(--x0); top: var(--y0); opacity: 0; transform: translate(-50%, -50%) scale(1); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  28% { left: var(--x0); top: var(--y0); opacity: 1; transform: translate(-50%, -78%) scale(1.08) rotate(-6deg); }
  56% { left: var(--x1); top: var(--y1); opacity: 1; transform: translate(-50%, -50%) scale(var(--k)); }
  60%, 100% { left: var(--x1); top: var(--y1); opacity: 0; transform: translate(-50%, -50%) scale(var(--k)); }
}
@keyframes demo-pick {
  0%, 18% { opacity: 1; }
  24%, 86% { opacity: .25; }
  100% { opacity: 1; }
}
@keyframes demo-land {
  0%, 56% { opacity: 0; }
  60%, 90% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes demo-hole {
  0%, 56% { opacity: 1; }
  60%, 90% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes demo-glow {
  0%, 56% { box-shadow: 0 0 0 0 rgba(91, 140, 255, 0); }
  62% { box-shadow: 0 0 0 .35em rgba(91, 140, 255, .55), 0 0 1.6em rgba(91, 140, 255, .5); }
  80%, 100% { box-shadow: 0 0 0 0 rgba(91, 140, 255, 0); }
}
@keyframes ld-press {
  0%, 6% { border-color: var(--line-2); background: transparent; transform: none; }
  10% { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 18%, transparent); transform: scale(.94); }
  16%, 100% { border-color: var(--line-2); background: transparent; transform: none; }
}

/* ---------- 登录框里的演示 ---------- */

/* 左边那张卡片：刚才点的那样东西，微微歪着，像被拿起来了 */
.s-demo-card {
  position: absolute;
  left: -1%;
  top: 64%;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: .6em;
  width: 25%;
  padding: 1.8em 1em 1.5em;
  border: 1px solid var(--line-2);
  border-radius: 1.4em;
  background: var(--panel);
  box-shadow: 0 2em 4em -1.6em rgba(0, 0, 0, .55);
  color: var(--text);
  text-align: center;
  transform: translateY(-50%) rotate(-4deg);
}
.s-demo-card .mm-cover { width: 5em; height: 5em; border-radius: 1.4em; }
.s-demo-card b { max-width: 100%; overflow: hidden; font-size: 1.35em; text-overflow: ellipsis; white-space: nowrap; }
.s-demo-card small { font-size: 1.05em; color: var(--text-3); }
.s-demo-fly { position: absolute; left: var(--x0); top: var(--y0); z-index: 3; opacity: 0; transform: translate(-50%, -50%); pointer-events: none; }
.s-demo-fly .mm-cover { width: 5em; height: 5em; border-radius: 1.4em; box-shadow: 0 1.4em 3em -1em rgba(0, 0, 0, .6); }
/* 空位：一个虚线框，东西落进来以后虚线消失、内容亮起来 */
.slot > * { opacity: 0; }
.slot::before { content: ''; position: absolute; border: 1.5px dashed var(--line-2); border-radius: 1em; }
.slot.landed > * { opacity: 1; }
.slot.landed::before { display: none; }
.s-demo.play .s-demo-fly { animation: demo-fly 4.2s var(--ease-out) infinite; }
.s-demo.play .s-demo-card .mm-cover { animation: demo-pick 4.2s ease infinite; }
.s-demo.play .slot > * { animation: demo-land 4.2s ease infinite; }
.s-demo.play .slot::before { animation: demo-hole 4.2s ease infinite; }
.s-demo.play .mm-av[data-target] { animation: demo-glow 4.2s ease infinite; }
.s-demo.play .slot .mm-cover { animation: demo-land 4.2s ease infinite, demo-glow 4.2s ease infinite; }

/* ---------- 实验室里的两页演示 ---------- */

/* 两个页面并排：左边个人站的实验室，右边我的台阶，中间一个箭头，各自下面写着是哪一页 */
.ld { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 14px; }
.ld figure { min-width: 0; margin: 0; }
.ld figcaption { margin-top: 10px; font-size: 13px; color: var(--text-2); text-align: center; }
.ld-arrow { margin-bottom: 28px; color: var(--text-3); }
.ld-arrow .ic { width: 20px; height: 20px; }
.ld .s-demo-win { width: 100%; height: 30em; margin: 0; }
.ld .s-demo-fly .mm-cover { width: 4em; height: 4em; border-radius: 1.1em; }
.ld-site { display: grid; grid-template-columns: 13em minmax(0, 1fr); }
.ld-side { display: grid; align-content: start; gap: .25em; padding: 1.6em 1.1em; border-right: 1px solid var(--line); }
.ld-brand { display: flex; align-items: center; gap: .4em; margin-bottom: 1em; font-size: 1.3em; font-weight: 700; }
.ld-brand b { color: var(--blue); }
.ld-brand .ic { width: 1.1em; height: 1.1em; stroke-width: 2.2; }
.ld-side > span:not(.ld-brand) { padding: .45em .8em; border-radius: .6em; font-size: 1.05em; color: var(--text-2); }
.ld-side > .on { background: var(--card-2); color: var(--text); }
.ld-main { min-width: 0; padding: 2em 2.2em; }
.ld-main > small { display: block; font-size: .9em; letter-spacing: .3em; color: var(--text-3); }
.ld-main > b { display: block; margin: .4em 0 1.2em; font-size: 2em; font-weight: 800; }
.ld-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; }
.ld-card { display: grid; gap: .6em; padding: .7em .7em 1em; border: 1px solid var(--line); border-radius: 1em; background: var(--card); }
.ld-cover { display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: .7em; background: radial-gradient(circle at 28% 20%, rgba(255, 255, 255, .3), transparent 55%), linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; }
.ld-cover .ic { width: 2.6em; height: 2.6em; stroke-width: 1.7; }
.ld-card b { overflow: hidden; font-size: 1.05em; text-overflow: ellipsis; white-space: nowrap; }
.ld-card i { display: inline-flex; align-items: center; justify-content: center; gap: .3em; height: 2.4em; border: 1px solid var(--line-2); border-radius: .6em; font-size: .9em; font-style: normal; white-space: nowrap; }
.ld-card i .ic { width: 1em; height: 1em; }
/* 被拎走的那张：先按一下「加到我的台阶」，图标飞走时它淡下去 */
.s-demo.play .ld-card.pick i { animation: ld-press 4.2s ease infinite; }
.s-demo.play .ld-card.pick .ld-cover { animation: demo-pick 4.2s ease infinite; }

/* ---------- 放大成我的台阶 ---------- */

/* 登录成功：小窗口原样放大铺满屏幕，字号一起变大，再换成真正的我的台阶 */
.s-zoom.s-demo-win {
  position: fixed;
  z-index: 90;
  margin: 0;
  transition: left .62s var(--ease-out), top .62s var(--ease-out), width .62s var(--ease-out), height .62s var(--ease-out), border-radius .62s var(--ease-out), font-size .62s var(--ease-out), opacity .4s ease;
}
.s-zoom.go { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; border-color: transparent; border-radius: 0; }
.s-zoom.out { opacity: 0; }

@media (max-width: 820px) {
  .ld { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .ld-arrow { justify-self: center; margin: 0; transform: rotate(90deg); }
  .ld figcaption { margin-top: 6px; font-size: 12px; }
}