*,
::after,
::before {
  box-sizing: border-box;
}
body,
ul,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0;
  margin: 0;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, PingFangSC-Regular, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: #111111;
  background-color: var(--color0);
  font-weight: 300;
}
img {
  vertical-align: bottom;
}
ul {
  list-style-type: none;
}
a {
  color: #111111;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
:root {
  --color0: #DEDEDE;
  --color-black: #111111;
  --color-white: #FBFBFB;
  --color1: #1E5EFF;
  --color2: #0CFD00;
  --color3: #FFED25;
  --color-secondary-text: #898989;
  --color5-secondary-green: #E1FCDF;
  --color6-secondary-blue: #80D0FF;
  --color7-selecting-blue: #5485FF;
  --color4: #FF40B9;
}
/* ===============================
   layout
================================= */
:root {
  --lab-folder-scale: 1;
  --lab-folder-w: calc(220.99px * var(--lab-folder-scale));
  --lab-folder-h: calc(180px * var(--lab-folder-scale));
}
.labWrapper {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.folderList {
  width: fit-content;
  max-width: 100%;
  margin: 260px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--lab-folder-w));
  justify-content: center;
  justify-items: start;
  align-items: start;
  gap: 32px 24px;
}
.folderLink {
  display: block;
  width: var(--lab-folder-w);
  height: var(--lab-folder-h);
  text-decoration: none;
  color: inherit;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
/* ===============================
   📁 folder（组件本体）
================================= */
.folderCard {
  position: relative;
  width: 220.99px;
  height: 180px;
  margin: 0;
  perspective: 1200px;
  transform: scale(var(--lab-folder-scale));
  transform-origin: top left;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.folderCard:hover .paper1 {
  transform: translate(-2px, -8px) rotate(-3deg);
}
.folderCard:hover .paper2 {
  transform: translate(0px, -12px) rotate(-1deg);
}
.folderCard:hover .paper3 {
  transform: translate(2px, -16px) rotate(2deg);
}
.folderCard:hover .folderFrontIcon {
  transform: translateY(0) scale(1.05);
}
.folderCard:hover .folderFrontSvg {
  transform: translateX(-50%) scaleY(1.032);
}
/* ===============================
   🖼 SVG / 图层定位
================================= */
/* folder back：水平居中到 card */
.folderBackSvg {
  position: absolute;
  left: 50%;
  top: 0;
  width: 207px;
  height: 169px;
  display: block;
  transform: translateX(-50%);
  z-index: 1;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.2));
}
.folderBackShape {
  fill: var(--color1);
  stroke: var(--color-white);
  stroke-width: 0.667497;
}
/* papers：相对于 card 居中，不再偏左 */
.papers {
  position: absolute;
  left: 50%;
  top: 4px;
  width: 193px;
  height: 144px;
  transform: translateX(-50%);
  z-index: 2;
}
.paper {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.paper1 {
  width: 193px;
  height: 144px;
  transform: rotate(-2deg);
  z-index: 4;
}
.paper2 {
  width: 193px;
  height: 144px;
  z-index: 3;
}
.paper3 {
  width: 191px;
  height: 141px;
  left: 6px;
  z-index: 2;
}
/* folder front：和 back 同一中线 */
.folderFrontSvg {
  position: absolute;
  left: 50%;
  top: 14px;
  width: 207px;
  height: 155px;
  display: block;
  transform: translateX(-50%) rotateX(0deg);
  transform-origin: bottom center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 0.52s cubic-bezier(0.22, 0.8, 0.2, 1), filter 0.28s ease;
  z-index: 5;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.2));
}
.folderFrontShape {
  fill: var(--color1);
  stroke: var(--color-white);
  stroke-width: 0.667497;
}
/* preview image：统一改成左上角小贴画 */
.folderFrontIcon {
  position: absolute;
  top: 8px;
  left: 22px;
  width: 44px;
  height: 44px;
  max-width: 44px;
  max-height: 44px;
  object-fit: contain;
  clip-path: inset(0);
  z-index: 6;
  transition: transform 0.25s ease, opacity 0.18s ease;
}
/* ===============================
   🏷 信息（标题）
================================= */
.folderInfo {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 6px;
}
.folderInfo .title {
  font-size: 14px;
  font-weight: 300;
  color: var(--color-white);
  display: flex;
  align-items: center;
  white-space: nowrap;
}
/* ===============================
   🎬 click transition（fade others -> flip front）
================================= */
.folderList.isOpening .folderLink {
  pointer-events: none;
}
/* 第一步：其他 folder 先淡出 */
.folderList.isOpening .folderLink:not(.folderLinkSketch) {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.24s ease 0s, transform 0.24s ease 0s;
}
/* 当前 Sketchbook 提高层级 */
.folderList.isOpening .folderLinkSketch {
  position: relative;
  z-index: 30;
}
.folderCardSketch .folderFrontIconSketch {
  position: absolute;
  top: 18px;
  left: 22px;
  width: 44px;
  height: 44px;
  transform: none;
  object-fit: contain;
  z-index: 6;
}
/* 当前卡片本体不乱飞，保持稳定 */
.folderList.isOpening .folderCardSketch {
  transform: none;
}
/* 第二步：back 不动，front 延迟后再沿 x 轴翻到 180deg */
.folderList.isOpening .folderCardSketch .folderFrontSvg {
  transform: translateX(-50%) rotateX(180deg);
  transition: transform 0.52s cubic-bezier(0.22, 0.8, 0.2, 1) 0.24s, filter 0.28s ease 0.24s;
  filter: drop-shadow(0 -2px 6px rgba(0, 0, 0, 0.12));
}
/* front 上的封面图先淡掉，避免和翻盖打架 */
.folderList.isOpening .folderCardSketch .folderFrontIcon {
  opacity: 0;
  transition: opacity 0.14s ease 0.2s;
}
/* 纸先不动，避免动作太多 */
.folderList.isOpening .folderCardSketch .paper1,
.folderList.isOpening .folderCardSketch .paper2,
.folderList.isOpening .folderCardSketch .paper3 {
  transform: none !important;
}
/* 整体轻微位移（不要大幅飞） */
.folderList.isOpening .folderCardSketch {
  transform: translate(-80px, -12px) scale(1.06);
  transition: transform 0.42s cubic-bezier(0.22, 0.8, 0.2, 1);
}
/* ❗核心：前盖“打开” */
.folderList.isOpening .folderCardSketch .folderFrontSvg {
  transform: translateX(-50%) perspective(600px) rotateX(68deg) scaleY(0.96);
  transform-origin: bottom center;
  transition: transform 0.34s cubic-bezier(0.22, 0.8, 0.2, 1);
}
/* ❗纸张抽出（有层级延迟） */
.folderList.isOpening .folderCardSketch .paper1 {
  transform: translate(-2px, -10px) rotate(-3deg);
  transition: transform 0.28s ease 0.06s;
}
.folderList.isOpening .folderCardSketch .paper2 {
  transform: translate(0px, -16px) rotate(-1deg);
  transition: transform 0.28s ease 0.09s;
}
.folderList.isOpening .folderCardSketch .paper3 {
  transform: translate(2px, -22px) rotate(2deg);
  transition: transform 0.28s ease 0.12s;
}
/* 封面图淡掉（更像“打开内容”） */
.folderList.isOpening .folderCardSketch .folderFrontIcon {
  opacity: 0;
  transform: translateX(-50%) translateY(10px) scale(0.92);
  transition: opacity 0.18s ease, transform 0.24s ease;
}
/* 稍微增强立体感 */
.folderList.isOpening .folderCardSketch .folderBackSvg,
.folderList.isOpening .folderCardSketch .folderFrontSvg {
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.16));
}
/* clone 样式 */
.folderCardClone {
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.16));
  transform-origin: center center;
}
/* 点击后不要再保留 hover 弹纸感，避免动作打架 */
.folderList.isOpening .folderCardSketch .paper1,
.folderList.isOpening .folderCardSketch .paper2,
.folderList.isOpening .folderCardSketch .paper3,
.folderList.isOpening .folderCardSketch .folderFrontIcon,
.folderList.isOpening .folderCardSketch .folderFrontSvg {
  transform: none !important;
  transition: none !important;
}
/* 可以加一点聚焦感 */
.folderList.isOpening .folderCardSketch .folderFrontSvg,
.folderList.isOpening .folderCardSketch .folderBackSvg {
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.18));
}
@media (max-width: 1279px) and (min-width: 768px) {
  :root {
    --lab-folder-scale: 0.8;
  }
  .labWrapper {
    padding: 0 24px;
  }
  .folderList {
    margin-top: 220px;
    gap: 24px 20px;
  }
}
@media (max-width: 767px) {
  :root {
    --lab-folder-scale: 0.8;
  }
  .labWrapper {
    padding: 0 16px;
  }
  .folderList {
    margin-top: 120px;
    gap: 20px 16px;
  }
}