/*!
 * MagicBento — React Bits (https://reactbits.dev/components/magic-bento)
 * MIT + Commons Clause · Copyright (c) DavidHDev
 * 本文件为本项目做的零依赖移植（无 React），核心样式与交互参数沿用官方实现。
 */

.magic-bento {
  --mb-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --mb-gap: clamp(18px, 2vw, 30px);
  --mb-row: 0px;
  --mb-radius: 18px;
  --mb-pad: clamp(26px, 2.5vw, 38px);
  --mb-ink: #eef3ff;
  --mb-muted: rgba(200, 212, 238, 0.64);
  --mb-edge: rgba(255, 255, 255, 0.075);
  --mb-highlight: rgba(255, 255, 255, 0.06);
  --mb-surface: linear-gradient(180deg, rgba(28, 35, 54, 0.92) 0%, rgba(11, 14, 22, 0.97) 100%);
  --mb-shadow: 0 26px 60px -36px rgba(0, 0, 0, 0.95), 0 10px 22px -16px rgba(0, 0, 0, 0.7);
  --mb-glow-alpha: 0.9;
  --mb-spot-alpha: 0.12;
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: row dense;
  grid-auto-rows: minmax(var(--mb-row), auto);
  gap: var(--mb-gap);
  width: 100%;
  color: var(--mb-ink);
  -webkit-tap-highlight-color: transparent;
}

.magic-bento[data-cols='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.magic-bento[data-cols='1'] { grid-template-columns: minmax(0, 1fr); --mb-row: 0px; }

.magic-bento__cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  --mb-delay: 0ms;
}

/* 分割线：落在两列之间的空隙中央 */
.magic-bento__cell + .magic-bento__cell::before {
  content: '';
  position: absolute;
  left: calc(var(--mb-gap) / -2);
  top: 20px;
  bottom: 20px;
  width: 1px;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.14) 16%,
    rgba(255, 255, 255, 0.14) 84%,
    rgba(255, 255, 255, 0) 100%
  );
}

.magic-bento[data-cols='2'] .magic-bento__cell:nth-child(odd)::before,
.magic-bento[data-cols='1'] .magic-bento__cell::before { display: none; }

.magic-bento[data-intro] .magic-bento__cell {
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(0.97);
}

.magic-bento[data-intro] .magic-bento__cell[data-state='in'] {
  opacity: 1;
  transform: none;
  transition:
    opacity 420ms cubic-bezier(0.22, 1, 0.36, 1) var(--mb-delay),
    transform 760ms var(--mb-spring) var(--mb-delay);
}

.magic-bento__card {
  position: relative;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--mb-radius);
  background: var(--mb-surface);
  box-shadow: var(--mb-shadow);
  color: var(--mb-ink);
  isolation: isolate;
  outline: none;
  transform: perspective(900px) translate3d(var(--mb-tx, 0px), var(--mb-ty, 0px), 0)
    rotateX(var(--mb-rx, 0deg)) rotateY(var(--mb-ry, 0deg)) scale(var(--mb-press, 1));
  will-change: transform;
}

.magic-bento__card:focus-visible {
  box-shadow: var(--mb-shadow), 0 0 0 2px rgba(91, 157, 255, 0.55);
}

/* 角部光环：截图里每张卡右上角的细圆环 + 内圈柔光 */
.magic-bento__card::after {
  content: '';
  position: absolute;
  top: -13%;
  right: -13%;
  width: 48%;
  aspect-ratio: 1 / 1;
  z-index: 1;
  border-radius: 50%;
  border: 1px solid rgba(var(--mb-glow-rgb), 0.17);
  background: radial-gradient(
    circle at 50% 50%,
    rgba(var(--mb-glow-rgb), 0.075) 0%,
    rgba(var(--mb-glow-rgb), 0.03) 45%,
    rgba(var(--mb-glow-rgb), 0) 72%
  );
  pointer-events: none;
}

/* 跟随指针的柔光 */
.magic-bento__light {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: radial-gradient(
    var(--mb-spot-size, 300px) circle at var(--mb-x, -999px) var(--mb-y, -999px),
    rgba(var(--mb-glow-rgb), calc(var(--mb-spot-alpha) * var(--mb-hot, 0))) 0%,
    rgba(var(--mb-glow-rgb), calc(var(--mb-spot-alpha) * var(--mb-hot, 0) * 0.837)) 30%,
    rgba(var(--mb-glow-rgb), calc(var(--mb-spot-alpha) * var(--mb-hot, 0) * 0.317)) 60%,
    rgba(var(--mb-glow-rgb), 0) 100%
  );
  pointer-events: none;
}

.magic-bento__rim {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--mb-edge),
    inset 0 1px 0 var(--mb-highlight);
  pointer-events: none;
}

/* 边缘光 + 点击波纹（同官方：遮罩挖空内部，只留 1px 边框） */
.magic-bento__border {
  position: absolute;
  inset: 0;
  z-index: 4;
  box-sizing: border-box;
  padding: 1px;
  border-radius: inherit;
  background:
    radial-gradient(
      var(--mb-border-size, 225px) circle at var(--mb-x, -999px) var(--mb-y, -999px),
      rgba(var(--mb-glow-rgb), calc(var(--mb-glow-alpha) * var(--mb-near, 0))) 0%,
      rgba(var(--mb-glow-rgb), calc(var(--mb-glow-alpha) * var(--mb-near, 0) * 0.593)) 45%,
      rgba(var(--mb-glow-rgb), calc(var(--mb-glow-alpha) * var(--mb-near, 0) * 0.104)) 75%,
      rgba(var(--mb-glow-rgb), 0) 100%
    ),
    radial-gradient(
      circle at var(--mb-wx, -999px) var(--mb-wy, -999px),
      rgba(var(--mb-glow-rgb), 0) calc(var(--mb-wr, 0px) - 110px),
      rgba(var(--mb-glow-rgb), calc(var(--mb-glow-alpha) * var(--mb-wa, 0) * 0.32)) calc(var(--mb-wr, 0px) - 52px),
      rgba(var(--mb-glow-rgb), calc(var(--mb-glow-alpha) * var(--mb-wa, 0) * 0.94)) calc(var(--mb-wr, 0px) - 10px),
      rgba(var(--mb-glow-rgb), calc(var(--mb-glow-alpha) * var(--mb-wa, 0))) calc(var(--mb-wr, 0px) - 3px),
      rgba(var(--mb-glow-rgb), 0) var(--mb-wr, 0px)
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  pointer-events: none;
}

.magic-bento__content {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  padding: var(--mb-pad);
}

/* —— 本项目的内容排版 —— */
.magic-bento .mb-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.magic-bento .mb-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: clamp(0.64rem, 0.72vw, 0.74rem);
  line-height: 1;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: rgba(202, 218, 246, 0.54);
  white-space: nowrap;
}

.magic-bento .mb-index {
  margin: 0;
  display: inline-block;
  font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  font-style: italic;
  font-size: 1.14em;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #9db9ff;
}

.magic-bento .mb-sep { opacity: 0.5; }

.magic-bento .mb-label { font-weight: 500; }

.magic-bento .mb-glyph {
  display: grid;
  place-items: center;
  width: clamp(40px, 3.3vw, 50px);
  height: clamp(40px, 3.3vw, 50px);
  flex: none;
  border-radius: clamp(11px, 0.9vw, 14px);
  color: rgba(var(--mb-glow-rgb), 0.95);
  background:
    linear-gradient(160deg, rgba(var(--mb-glow-rgb), 0.17), rgba(var(--mb-glow-rgb), 0.05));
  box-shadow:
    inset 0 0 0 1px rgba(var(--mb-glow-rgb), 0.28),
    0 8px 20px -12px rgba(var(--mb-glow-rgb), 0.9);
}

.magic-bento .mb-glyph svg { width: clamp(19px, 1.6vw, 24px); height: clamp(19px, 1.6vw, 24px); }

.magic-bento .mb-title {
  margin: clamp(26px, 3.6vw, 52px) 0 0;
  font-family: 'Noto Serif SC', serif;
  font-size: clamp(1.14rem, 1.52vw, 1.5rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--mb-ink);
}

.magic-bento .mb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding-top: 22px;
}

.magic-bento .mb-tags span {
  font-size: clamp(0.72rem, 0.8vw, 0.82rem);
  line-height: 1.35;
  padding: 5px 12px;
  border-radius: 999px;
  color: rgba(203, 219, 255, 0.86);
  background: rgba(var(--mb-glow-rgb), 0.09);
  box-shadow: inset 0 0 0 1px rgba(var(--mb-glow-rgb), 0.2);
  white-space: nowrap;
}

.magic-bento .mb-desc {
  margin: 15px 0 0;
  min-height: 3.9em;
  flex: 1 1 auto;
  font-size: clamp(0.86rem, 1.02vw, 1rem);
  line-height: 1.95;
  color: var(--mb-muted);
}

@media (max-width: 900px) {
  .magic-bento { --mb-gap: 20px; --mb-pad: 20px; }
}

@media (max-width: 640px) {
  .magic-bento { --mb-gap: 16px; --mb-pad: 18px; --mb-row: 0px; }
  .magic-bento__cell::before { display: none; }
  .magic-bento .mb-head { gap: 11px; }
  .magic-bento .mb-glyph { width: 38px; height: 38px; border-radius: 11px; }
  .magic-bento .mb-glyph svg { width: 19px; height: 19px; }
  .magic-bento .mb-kicker { font-size: 0.62rem; letter-spacing: 0.17em; }
  .magic-bento .mb-title { margin-top: 24px; font-size: 1.12rem; }
  .magic-bento .mb-desc { font-size: 0.88rem; }
  .magic-bento .mb-tags { padding-top: 18px; }
  .magic-bento__card::after { width: 54%; top: -10%; right: -12%; border-color: rgba(var(--mb-glow-rgb), 0.13); }
}

/* —— 关于我：四框一排，字号与内距随窗口线性缩放；下限守住可读性 —— */
.magic-bento.about-bento {
  --mb-gap: clamp(6px, 1.6vw, 30px);
  /* 正文与英文小标统一提亮：原来 0.64 透明度在深色卡上偏灰 */
  --mb-muted: rgba(220, 229, 248, 0.92);
}
.magic-bento.about-bento .magic-bento__card { border-radius: clamp(12px, 1.3vw, 18px); }
.magic-bento.about-bento .magic-bento__content { padding: clamp(14px, 2.9vw, 38px); }
.magic-bento.about-bento .mb-head { gap: clamp(7px, 0.9vw, 12px); }
.magic-bento.about-bento .mb-glyph {
  width: clamp(30px, 3.4vw, 50px);
  height: clamp(30px, 3.4vw, 50px);
  border-radius: clamp(8px, 0.95vw, 14px);
}
.magic-bento.about-bento .mb-glyph svg { width: clamp(16px, 1.6vw, 24px); height: clamp(16px, 1.6vw, 24px); }
.magic-bento.about-bento .mb-kicker {
  gap: clamp(3px, 0.4vw, 7px);
  font-size: clamp(10.5px, 0.82vw, 12.5px);
  letter-spacing: 0.12em;
  color: rgba(206, 220, 247, 0.8);
}
.magic-bento.about-bento .mb-index { color: #9db9ff; font-weight: 600; }
.magic-bento.about-bento .mb-title {
  margin-top: clamp(12px, 3.4vw, 52px);
  font-size: clamp(16.5px, 1.66vw, 25px);
  line-height: 1.34;
  letter-spacing: 0.005em;
}
.magic-bento.about-bento .mb-desc {
  margin-top: clamp(7px, 1vw, 15px);
  min-height: 0;
  font-size: clamp(14.5px, 1.16vw, 18px);
  line-height: 1.76;
  letter-spacing: 0.006em;
}
.magic-bento.about-bento .mb-tags { gap: clamp(4px, 0.46vw, 6px); padding-top: clamp(10px, 1.5vw, 22px); }
.magic-bento.about-bento .mb-tags span {
  font-size: clamp(11.5px, 0.84vw, 13.5px);
  padding: clamp(3px, 0.35vw, 5px) clamp(7px, 0.72vw, 11px);
  color: rgba(226, 236, 255, 0.94);
}

/* —— 关于我：≤768 改 2×2，字号回落到固定值（不再按 vw 线性压缩） —— */
@media (max-width: 768px) {
  .magic-bento.about-bento { --mb-gap: 12px; }
  .magic-bento.about-bento .magic-bento__card { border-radius: 14px; }
  .magic-bento.about-bento .magic-bento__content { padding: 16px 15px 17px; }
  .magic-bento.about-bento .mb-head { gap: 9px; }
  .magic-bento.about-bento .mb-glyph { width: 32px; height: 32px; border-radius: 9px; }
  .magic-bento.about-bento .mb-glyph svg { width: 17px; height: 17px; }
  .magic-bento.about-bento .mb-kicker { gap: 5px; font-size: 0.68rem; letter-spacing: 0.1em; }
  .magic-bento.about-bento .mb-title { margin-top: 14px; font-size: 1.06rem; line-height: 1.38; }
  .magic-bento.about-bento .mb-desc { margin-top: 9px; font-size: 0.9rem; line-height: 1.76; }
  .magic-bento.about-bento .mb-tags { gap: 6px; padding-top: 13px; }
  .magic-bento.about-bento .mb-tags span { font-size: 0.74rem; padding: 3px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .magic-bento__card { transform: none; }
  .magic-bento[data-intro] .magic-bento__cell { opacity: 1; transform: none; }
}