body { font-family: 'Noto Sans TC', sans-serif; background-color: #050505; color: #e5e7eb; overflow-x: hidden; }
h1, h2, h3, h4, .brand-font { font-family: 'Space Grotesk', sans-serif; }
.page-transition { animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
.grid-lines {
    background-size: 60px 60px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
}
.work-card-img { transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.work-card:hover .work-card-img { transform: scale(1.03); }
.work-card:hover .view-indicator { opacity: 1; transform: translate(-50%, -50%) scale(1); }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #050505; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

/* Filter Button Active State */
.filter-btn.active { color: #fff; border-bottom: 1px solid #fff; }
.filter-btn { transition: all 0.3s; color: #6b7280; border-bottom: 1px solid transparent; }
.filter-btn:hover { color: #d1d5db; }