.works-detail-hero{text-align:center;background:linear-gradient(135deg,#1a1a1a,#0a0a0a);flex-direction:column;justify-content:center;align-items:center;height:40vh;min-height:400px;padding:2rem;display:flex;position:relative;overflow:hidden}.works-detail-hero:before{content:"";opacity:.5;background:linear-gradient(45deg,#0000 48%,#00f7ff1a 49%,#0000 51%) 0 0/30px 30px,linear-gradient(-45deg,#0000 48%,#ff00ff1a 49%,#0000 51%) 0 0/30px 30px;animation:30s linear infinite backgroundShift;position:absolute;inset:0}.works-detail-hero h1{background:linear-gradient(45deg, var(--primary-color), #fff);-webkit-text-fill-color:transparent;text-shadow:0 0 30px #00f7ff4d;-webkit-background-clip:text;margin-bottom:1rem;font-size:3.5rem}.works-detail-hero p{color:#fffc;text-shadow:0 2px 4px #0000004d;font-size:1.2rem}.works-filter{z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(#0a0a0a,#111);border-bottom:1px solid #ffffff0d;padding:2.5rem 0;position:sticky;top:0}.filter-container{max-width:1200px;margin:0 auto;padding:0 2rem}.search-box{margin-bottom:1.5rem;position:relative}.search-box input{color:#fff;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;width:100%;padding:1.2rem 3rem 1.2rem 1.5rem;font-size:1rem;transition:all .3s}.search-box input:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 20px #00f7ff1a}.search-box i{color:#ffffff80;position:absolute;top:50%;right:1.5rem;transform:translateY(-50%)}.works-grid{grid-template-columns:repeat(3,1fr);gap:2rem;max-width:1200px;margin:0 auto;padding:4rem 2rem;display:grid}.works-item{aspect-ratio:4/3;z-index:0;background:linear-gradient(145deg,#1a1a1a,#0a0a0a);border-radius:24px;transition:transform .2s ease-out,box-shadow .2s ease-out;position:relative;overflow:hidden;transform:translateY(0);box-shadow:0 10px 30px #0003,0 1px 1px #ffffff0d}.works-item:before{content:"";z-index:1;opacity:0;background:linear-gradient(#0000 0%,#0006 40%,#000000f2 100%);transition:opacity .2s ease-out;position:absolute;inset:0}.works-item:hover{transform:translateY(-8px)scale(1.04);box-shadow:0 15px 30px #00000040,0 0 30px #00f7ff26,0 1px 1px #ffffff0d}.works-item:hover:before{opacity:1}.work-category{color:#0a0a0a;z-index:2;background:#00f7fff2;border-radius:30px;padding:.6rem 1.2rem;font-size:.85rem;font-weight:600;transition:all .2s ease-out;position:absolute;top:1.5rem;left:1.5rem}.works-item:hover .work-category{transform:translateY(-3px)}.work-image{object-fit:cover;width:100%;height:100%;transition:transform .2s ease-out}.works-item:hover .work-image{transform:scale(1.1)}.work-content{z-index:2;background:linear-gradient(#0000,#000c 20%,#000000f2 100%);padding:2rem;transition:all .2s ease-out;position:absolute;bottom:0;left:0;right:0}.work-title{color:#fff;margin-bottom:1rem;font-size:1.5rem;font-weight:700}.work-description{color:#ffffffe6;font-size:.95rem}@media (max-width:1024px){.works-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.works-grid{grid-template-columns:1fr}}@keyframes backgroundShift{0%{background-position:0 0}50%{background-position:50px 50px}to{background-position:100px 100px}}.category-filter{flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:1.5rem;display:flex}.filter-btn{color:#ffffffb3;cursor:pointer;text-align:center;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:.8rem 1.5rem;font-size:.95rem;font-weight:500;transition:all .3s cubic-bezier(.165,.84,.44,1)}.filter-btn:hover{border-color:var(--primary-color);background:#00f7ff1a;transform:translateY(-2px)scale(1.02)}.filter-btn.active{background:var(--primary-color);color:#0a0a0a;border-color:var(--primary-color);box-shadow:0 4px 15px #00f7ff4d,0 2px 4px #0000001a}.filter-btn:focus{outline:2px solid var(--primary-color,#00f7ff);outline-offset:2px}@media (max-width:1024px){.category-filter{justify-content:center;gap:.8rem}.filter-btn{padding:.7rem 1.2rem;font-size:.9rem}}@media (max-width:768px){.category-filter{flex-direction:row;gap:.5rem}.filter-btn{padding:.6rem 1rem;font-size:.85rem}}@media (max-width:480px){.works-detail-hero{height:30vh;min-height:300px}.works-detail-hero h1{font-size:2rem}.works-filter{padding:.8rem 0}.category-filter{align-items:center;gap:.4rem}.filter-btn{width:38%;padding:.5rem .8rem;font-size:.8rem}}