/* ==========================================================================
   cards.css — 作品卡片
   卡片是星尘场的「透镜」：边框、磨砂层、悬停光斑（--mx / --my 由 JS 写入）。
   ========================================================================== */

/* ── 卡片 ── */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}

.card{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;
  border-radius:28px;border:1px solid var(--card-border);
  background:var(--card);
  min-height:clamp(232px,19vw,272px);
  transition:transform .55s var(--ease),border-color .55s var(--ease),
             background .55s var(--ease),box-shadow .55s var(--ease);
  will-change:transform;
}
.card[data-star-lens="coral"]{--tint:255,107,94}
.card[data-star-lens="iris"]{--tint:146,158,255}
html[data-theme="light"] .card[data-star-lens="coral"]{--tint:198,78,62}
html[data-theme="light"] .card[data-star-lens="iris"]{--tint:78,96,170}
.card::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 12% 0%, rgba(var(--tint),.07), transparent 58%);
  opacity:.9;transition:opacity .55s var(--ease);
}
.card::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(380px 300px at var(--mx,50%) var(--my,0%), rgba(var(--tint),.20), transparent 70%);
  transition:opacity .5s var(--ease);
}
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(var(--tint),.38);
  background:var(--card-hi);
  box-shadow:0 30px 70px -40px rgba(var(--tint),.85);
}
.card:hover::after{opacity:1}
.card:hover .icon{transform:translateY(-1px) scale(1.03)}
.card:hover .go svg{transform:translateX(4px)}
.card:hover .go{filter:brightness(1.12)}

.body{
  position:relative;z-index:1;isolation:isolate;
  display:flex;flex-direction:column;height:100%;
  padding:clamp(24px,2.4vw,32px);
}
.frost{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 76% 74% at 46% 54%, var(--frost-1), var(--frost-2) 66%, transparent 100%);
  -webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);
  -webkit-mask-image:radial-gradient(ellipse 86% 88% at 50% 52%,#000 40%,transparent 96%);
  mask-image:radial-gradient(ellipse 86% 88% at 50% 52%,#000 40%,transparent 96%);
}

.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.icon{
  width:56px;height:56px;border-radius:16px;flex:none;
  display:grid;place-items:center;
  background:
    radial-gradient(120% 120% at 26% 14%, rgba(255,255,255,.42), rgba(255,255,255,0) 58%),
    linear-gradient(152deg, rgb(var(--tint)), rgb(var(--tint)) 55%, rgba(var(--tint),.72));
  box-shadow:
    0 10px 26px -12px rgba(var(--tint),.9),
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.12);
  color:#fff;
  transition:transform .55s var(--ease);
}
.icon svg{width:28px;height:28px;display:block}
.tag{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  color:rgba(var(--tint),.9);padding-top:4px;text-align:right;
  line-height:1.6;
}

.card h3{
  margin:clamp(20px,2.4vw,28px) 0 9px;
  font-size:clamp(20px,1.9vw,26px);font-weight:600;letter-spacing:-.015em;
}
.card p{
  font-size:14px;line-height:1.7;color:var(--muted);
  max-width:38ch;
}
.go{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:clamp(18px,2vw,24px);
  font-size:13.5px;font-weight:600;letter-spacing:.01em;
  color:rgb(var(--tint));width:fit-content;
  transition:color .4s var(--ease),filter .4s var(--ease);
}
.go svg{width:15px;height:15px;transition:transform .4s var(--ease)}
.go .hit{position:absolute;inset:0;z-index:3;border-radius:28px}

html[data-theme="light"] .card{border-color:rgba(27,25,22,.10);box-shadow:0 26px 50px -38px rgba(93,72,44,.5)}

/* ── 响应式：单列 ── */
@media (max-width:720px){
  .grid{grid-template-columns:1fr}
  .card{min-height:0}
  .card h3{margin-top:22px}
  .body{padding:22px}
}