/* styles for works page */

html, body { width: 100%; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; transition: background-color 0.4s ease, color 0.4s ease; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
.dark ::-webkit-scrollbar-track { background: #020617; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.dark ::-webkit-scrollbar-thumb { background: #1e293b; }

.reveal { opacity: 0; transform: translateY(20px); transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }

.glass-card { backdrop-filter: blur(16px); background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(226, 232, 240, 1); transition: all 0.3s ease; }
.dark .glass-card { background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(255, 255, 255, 0.05); }

@media (hover: hover) {
    .bento-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15); }
    .dark .bento-card:hover { border-color: rgba(34, 211, 238, 0.3); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5); }
}

.blob-container { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blob { position: absolute; width: 400px; height: 400px; background: radial-gradient(circle, rgba(34, 211, 238, 0.15) 0%, transparent 70%); filter: blur(60px); animation: float 20s infinite alternate; }
@keyframes float { 0% { transform: translate(-10%, -10%); } 100% { transform: translate(10%, 10%); } }

.filter-btn.active { background-color: #0891b2; color: white; border-color: #0891b2; }
.dark .filter-btn.active { background-color: #22d3ee; color: #020617; border-color: #22d3ee; }

.project-item.hidden { display: none; }

/* Carousel track fixed to 100% width; slides use flex-basis 100% to fill exactly one container width */
.carousel-track { display: flex; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); height: 100%; width: 100%; }
.carousel-slide { flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.carousel-dot.active { background-color: #22d3ee; width: 1rem; }