/* 生成物：由 tools/web/sync-prototype-css.mjs 从 docs/prototypes/2026-09-21-阳光玻璃忠实延展/card-interactions.css 逐字复制，勿手改。
   原型是唯一视觉真值；要改视觉先改原型，再跑 `node tools/web/sync-prototype-css.mjs .` 同步。 */
/* Card treatment trial: projects + discover. The frozen visual foundation is unchanged. */
.interactive-card{position:relative;isolation:isolate;--card-x:50%;--card-y:50%;transition:transform 480ms cubic-bezier(.22,1,.36,1),box-shadow 520ms cubic-bezier(.22,1,.36,1)}
.interactive-card::before,.interactive-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity 520ms cubic-bezier(.22,1,.36,1)}
.interactive-card::before{z-index:-1;background:radial-gradient(440px circle at var(--card-x) var(--card-y),var(--b-primary-tint),transparent 72%)}
.interactive-card::after{z-index:2;padding:1px;background:radial-gradient(300px circle at var(--card-x) var(--card-y),var(--b-primary-glow),transparent 80%);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
.interactive-card:focus-within{box-shadow:inset 0 0 0 1px var(--b-primary-glow),0 8px 22px -16px var(--b-card-shadow-far)}
.interactive-card:focus-within::before{opacity:.55}
.card-action{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:40px;padding:0 15px;border:1px solid var(--b-line);border-radius:var(--b-radius-control);font-size:13px;font-weight:650;line-height:1.3;white-space:nowrap;color:var(--b-text-1);background:var(--b-bg-card);box-shadow:inset 0 1px 0 var(--b-card-edge),0 2px 5px var(--b-card-shadow);transition:background 180ms ease,box-shadow 180ms ease,transform 180ms ease}
.card-action-primary{color:var(--b-on-primary);border-color:transparent;background:var(--b-primary);box-shadow:inset 0 1px 0 var(--b-primary-top),0 4px 12px -7px var(--b-primary-glow)}
.card-action span[aria-hidden]{font-size:17px;line-height:1;transition:transform 200ms ease}
.card-action:focus-visible,.interactive-card summary:focus-visible{outline:2px solid var(--b-primary-text);outline-offset:4px}
.card-action:disabled{box-shadow:none;cursor:not-allowed}
.card-action:not(:disabled):active{transform:translateY(1px)}
@media(hover:hover) and (pointer:fine){
 .card-action:not(:disabled):hover{background:var(--b-bg-inset);box-shadow:inset 0 1px 0 var(--b-card-edge),0 4px 12px var(--b-card-shadow)}
 .card-action-primary:not(:disabled):hover{background:var(--b-primary-hover);box-shadow:0 5px 18px -7px var(--b-primary-glow)}
 .card-action:hover span[aria-hidden]{transform:translateX(3px)}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .interactive-card[data-card-active]{transition-duration:220ms,240ms;transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--b-primary-glow),inset 0 1px 0 var(--b-card-edge),0 14px 32px -16px var(--b-card-shadow-far)}
 .interactive-card[data-card-active]::before,.interactive-card[data-card-active]::after{opacity:1;transition-duration:180ms}
 .card-art img:not([data-card-static]){transition:transform 600ms cubic-bezier(.22,1,.36,1)}
 .interactive-card[data-card-active] .card-art img:not([data-card-static]){transform:scale(1.045);transition-duration:360ms}
}
@media(prefers-reduced-motion:reduce){.interactive-card,.interactive-card::before,.interactive-card::after,.card-action,.card-action span[aria-hidden],.card-art img:not([data-card-static]){transition:none!important;transform:none!important}}