/* Second screen: parallel frosted-glass panes, warm silver with orange focus. */
.works{background:radial-gradient(ellipse at 53% 68%,#70421c20,transparent 56%),#171717}
.works:after{content:'';position:absolute;inset:0;background-image:radial-gradient(#b9b9b9 .75px,transparent 1px);background-size:13px 13px;opacity:.18;pointer-events:none;z-index:-1}
.works .grid-lines{display:none}
.card-stage{top:43%;height:43%}
.project-card{height:88%;top:5%;border-radius:20px;border:1px solid #eae3d698;background:linear-gradient(135deg,#fffbf450 0%,#e5dfd936 30%,#f7f2ed7d 65%,#c1b7af40 100%);backdrop-filter:blur(10px) saturate(105%);-webkit-backdrop-filter:blur(10px) saturate(105%);box-shadow:inset 2px 2px 2px #fff9,inset -2px -2px 2px #ffffff75,6px 10px 20px #0003;transform:perspective(1200px) rotateY(-32deg) rotateZ(-13deg);color:#151411;transition:transform 300ms var(--ease)}
.project-card:after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 15%,#fff5 47%,transparent 70%),radial-gradient(#fff5 .6px,transparent .9px);background-size:auto,7px 7px;pointer-events:none;z-index:2;opacity:.3}
.project-card:before{background:linear-gradient(145deg,#ff8d3999,#fc681de8 65%,#9e3404b8);box-shadow:inset 0 0 0 1px #ffb37d,inset 0 0 35px #ff9f38;opacity:0;z-index:1}
.project-card:hover:before,.project-card:focus-visible:before{opacity:1}
.project-card:hover,.project-card:focus-visible{transform:perspective(1200px) rotateY(-32deg) rotateZ(-13deg) translateY(-18px) scale(1.035)}
.card-cover{inset:0;background-color:transparent;opacity:.72}
.card-cover.has-image{opacity:.32;filter:blur(2px);background-color:transparent}
.card-cover.has-image .glass-relief{display:none}
.glass-relief{position:absolute;inset:9% 7% 24%;opacity:.34;filter:blur(.5px)}
.glass-relief svg{width:100%;height:100%;stroke:#fff9;stroke-width:9;stroke-linecap:square;stroke-linejoin:round}
.card-placeholder{font-size:8px;letter-spacing:2px;left:18px;top:18px;color:#27221c88}
.card-label{inset:auto 0 0;height:43%;padding:0 16px 20px;background:transparent;z-index:3}
.card-icon{position:absolute;left:17px;top:0;width:23px;height:30px;color:#24211c}
.card-icon svg{width:100%;height:100%}
.card-number{position:absolute;left:47px;top:4px;margin:0;font-size:20px;font-weight:300;letter-spacing:-1px;color:#24211c}
.card-title{position:absolute;left:17px;bottom:35px;font-size:22px;font-weight:400;letter-spacing:-.5px;color:#16130f}
.card-english{position:absolute;left:18px;bottom:20px;font-size:8px;letter-spacing:.25px;color:#29231c}
.card-arrow{right:13px;bottom:37px;font-size:17px;color:#252018}
.project-card:hover .card-label>span,.project-card:focus-visible .card-label>span{color:#fff8ed}



@media(max-width:760px){.card-stage{top:46%;height:37%}.project-card{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-radius:16px}.card-title{font-size:17px;bottom:31px}.card-english{font-size:7px;bottom:17px}.card-arrow{display:none}.card-icon{width:19px;height:25px}.card-number{font-size:17px;left:42px}}
@media(prefers-reduced-motion:reduce){.project-card:hover,.project-card:focus-visible{transform:perspective(1200px) rotateY(-32deg) rotateZ(-13deg)}}
@media(prefers-contrast:more){.project-card{background:#e5ded3;backdrop-filter:none}.card-cover{opacity:.2}}

/* One clipped material surface: rim, frost, tint and content share the same outline. */
.card-position{pointer-events:none}
.project-card,.project-card:hover,.project-card:focus-visible{pointer-events:auto;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible;transform:rotate(-8deg) skewX(-12deg);border-radius:20px;isolation:isolate;transform-origin:50% 65%;transition:transform 340ms var(--ease)}
.project-card:before,.project-card:after{display:none}
.card-surface{display:block;position:absolute;inset:0;overflow:hidden;border-radius:inherit;border:1px solid #f5dcc171;background:linear-gradient(135deg,#f9f0e84a,#e5dcd329 34%,#f1e7da69 75%,#c4b6a63d);backdrop-filter:blur(9px) saturate(110%);-webkit-backdrop-filter:blur(9px) saturate(110%);box-shadow:inset 0 1px 0 #fff7,inset -1px -1px 0 #f7cba44d,5px 9px 18px #0002;isolation:isolate}
.card-surface:before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(145deg,#ff9b48a6,#f97820de 65%,#b74714bb);opacity:0;transition:opacity 220ms var(--ease);pointer-events:none}
.card-surface:after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(125deg,transparent 20%,#fff2 49%,transparent 72%),radial-gradient(#fff4 .5px,transparent .9px);background-size:auto,8px 8px;opacity:.22;pointer-events:none}
.project-card.is-active{transform:translateY(-32px) rotate(-8deg) skewX(-12deg) scale(1.16)}
.project-card.is-active .card-surface:before{opacity:1}
.project-card.is-active .card-label>span{color:#fff8ed}
.card-label{transform:skewX(8deg);transform-origin:left bottom}

@media(max-width:760px){.card-surface{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.project-card.is-active{transform:translateY(-22px) rotate(-8deg) skewX(-12deg) scale(1.1)}}
@media(prefers-reduced-motion:reduce){.project-card.is-active{transform:rotate(-8deg) skewX(-12deg)}}
@media(prefers-contrast:more){.card-surface{background:#e5ded3;backdrop-filter:none;-webkit-backdrop-filter:none}.card-surface:after{display:none}}