:root { --work-card-accent:#fff0eb; --work-card-bg:#0e0e0e; --work-card-border:#353535; --work-card-copy:#bbb; } /* 定义中性色 */
a-work.s__scene__work > .a__inner { overflow:visible; } /* 显示卡片阴影 */
a-work.s__scene__work > .a__inner > a { display:block; width:min(64vw,42rem); aspect-ratio:16 / 10; margin-inline:auto; color:var(--work-card-accent); text-decoration:none; } /* 固定链接命中区 */
.work-card__surface { position:relative; display:grid; grid-template-rows:58fr 42fr; width:100%; height:100%; overflow:hidden; border:.08rem solid var(--work-card-border); background:var(--work-card-bg); transform:perspective(1000px) rotateX(0deg) rotateY(0deg); transform-origin:center; transform-style:preserve-3d; box-shadow:0 20px 40px rgb(0 0 0 / 35%); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; } /* 承担透视效果 */
.work-card__surface::before,.work-card__surface::after { position:absolute; z-index:4; width:14px; height:14px; pointer-events:none; border-color:var(--work-card-accent); border-style:solid; content:""; transition:width .18s ease,height .18s ease; } /* 绘制米白角标 */
.work-card__surface::before { top:12px; left:12px; border-width:1px 0 0 1px; } /* 定位左上角标 */
.work-card__surface::after { right:12px; bottom:12px; border-width:0 1px 1px 0; } /* 定位右下角标 */
.work-card__shine { position:absolute; z-index:3; inset:0; display:block; pointer-events:none; opacity:0; background:radial-gradient(circle at var(--work-card-shine-x,50%) var(--work-card-shine-y,50%),rgb(255 240 235 / 20%),transparent 42%); transition:opacity .18s ease; } /* 显示米白光泽 */
.work-card__media { position:relative; display:block; grid-row:1; min-height:0; overflow:hidden; background:#000; } /* 固定媒体区域 */
.work-card__media::before,.work-card__media::after { position:absolute; inset:0; display:block; background-position:center; background-size:cover; content:""; transition:opacity .5s ease,transform .6s ease; } /* 叠放两层媒体 */
.work-card__media[data-cover]::before { background-image:var(--work-card-cover); } /* 显示项目封面 */
.work-card__media[data-hover]::after { opacity:0; transform:scale(1.05); } /* 隐藏悬停图 */
.work-card__media[data-cover] video { opacity:0; } /* 隐藏契约视频 */
.work-card__media video { display:block; width:100% !important; max-width:none !important; height:100% !important; max-height:none !important; object-fit:cover; transition:opacity .5s ease,transform .6s ease,filter .18s ease; } /* 覆盖视频尺寸 */
.work-card__details { display:flex; grid-row:2; flex-direction:column; align-items:flex-start; justify-content:center; gap:clamp(.5rem,1vw,1rem); min-height:0; padding:clamp(1rem,2.2vw,2rem); background:var(--work-card-bg); color:var(--work-card-copy); } /* 固定资料区域 */
.work-card__heading { display:flex; flex-shrink:0; align-items:baseline; flex-wrap:wrap; gap:.55rem; width:100%; } /* 组合编号标题 */
.work-card__number { flex:none; color:var(--work-card-copy); font:400 .8rem/1 var(--font-family-fraktion,monospace); letter-spacing:.12em; } /* 显示连续编号 */
.work-card__title { color:var(--work-card-accent); font-family:"Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif; font-size:clamp(1.125rem,1rem + .55vw,1.5rem); font-weight:600; line-height:1.15; overflow-wrap:break-word; } /* 收敛中文标题 */
.work-card__category { color:var(--work-card-copy); font:400 .7rem/1.2 var(--font-family-fraktion,monospace); letter-spacing:.08em; } /* 显示项目分类 */
.work-card__copy { display:-webkit-box; flex-shrink:0; max-width:52rem; overflow:hidden; color:var(--work-card-copy); font:400 clamp(.72rem,1vw,.9rem)/1.45 var(--font-family-fraktion,monospace); -webkit-box-orient:vertical; -webkit-line-clamp:3; } /* 限制三行说明 */
.work-card__cta { flex-shrink:0; margin-top:.2rem; padding:.55rem .8rem; border:.08rem solid var(--work-card-border); color:var(--work-card-accent); font:700 .75rem/1 var(--font-family-fraktion,monospace); letter-spacing:.08em; transition:background-color .18s ease,color .18s ease,border-color .18s ease; } /* 提示查看详情 */
a-work.s__scene__work > .a__inner > a:hover .work-card__surface { border-color:rgb(255 240 235 / 58%); box-shadow:0 20px 40px rgb(0 0 0 / 35%),0 0 24px rgb(255 240 235 / 12%); } /* 增强悬停边框 */
a-work.s__scene__work > .a__inner > a:is(:hover,:focus-visible) .work-card__surface::before,a-work.s__scene__work > .a__inner > a:is(:hover,:focus-visible) .work-card__surface::after { width:20px; height:20px; } /* 扩展激活角标 */
a-work.s__scene__work > .a__inner > a:hover .work-card__media video { filter:brightness(1.04); } /* 轻微提亮媒体 */
a-work.s__scene__work > .a__inner > a:hover .work-card__cta { border-color:var(--work-card-accent); background:var(--work-card-accent); color:var(--work-card-bg); } /* 填充悬停按钮 */
a-work.s__scene__work > .a__inner > a:focus-visible { outline:.12rem solid var(--work-card-accent); outline-offset:.35rem; } /* 显示键盘焦点 */
a-work.s__scene__work > .a__inner > a:focus-visible .work-card__surface { border-color:var(--work-card-accent); box-shadow:0 20px 40px rgb(0 0 0 / 35%),0 0 24px rgb(255 240 235 / 12%); } /* 增强焦点边框 */
a-work.s__scene__work > .a__inner > a:focus-visible .work-card__cta { border-color:var(--work-card-accent); background:var(--work-card-accent); color:var(--work-card-bg); } /* 填充焦点按钮 */
@media (max-width:700px) { #work .s__scene .s__scene__work { z-index:4; } a-work.s__scene__work > .a__inner > a { width:min(88vw,24rem); aspect-ratio:auto; } .work-card__surface { grid-template-rows:auto auto; height:auto; } .work-card__media { aspect-ratio:16 / 9; } .work-card__details { gap:.4rem; padding:.6rem; } .work-card__copy { display:block; overflow:visible; -webkit-line-clamp:unset; } } /* 适配移动卡片 */
@media (min-width:1025px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) { a-work.s__scene__work > .a__inner > a:hover .work-card__shine { opacity:1; } } /* 限定桌面光泽 */
@media (min-width:1025px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) { .work-card__media[data-hover-ready]::after { background-image:var(--work-card-hover); } a-work.s__scene__work > .a__inner > a:hover .work-card__media[data-hover-ready]::before { opacity:0; transform:scale(1.05); } a-work.s__scene__work > .a__inner > a:hover .work-card__media[data-hover-ready] video { opacity:0; transform:scale(1.05); } a-work.s__scene__work > .a__inner > a:hover .work-card__media[data-hover-ready]::after { opacity:1; transform:scale(1); } a-work.s__scene__work > .a__inner > a:hover .work-card__media:not([data-hover])::before { transform:scale(1.03); } a-work.s__scene__work > .a__inner > a:hover .work-card__media:not([data-hover]) video { transform:scale(1.03); } } /* 限定桌面媒体切换 */
@media (prefers-reduced-motion:reduce) { .work-card__shine { opacity:0; } .work-card__surface,.work-card__surface::before,.work-card__surface::after,.work-card__shine,.work-card__media::before,.work-card__media::after,.work-card__media video { transition:none; } } /* 关闭动态过渡 */