::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a3a3a3; }
html { scroll-behavior: smooth; }
.hero-letter { display: inline-block; opacity: 0; transform: translateY(60px); animation: letterReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes letterReveal { to { opacity: 1; transform: translateY(0); } }
.scroll-reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.scroll-reveal.revealed { opacity: 1; transform: translateY(0); }
.glass-card { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.glass-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 20px 60px rgba(0,0,0,0.08), 0 0 0 1px rgba(229, 62, 62, 0.1); }
.marquee-track:hover { animation-play-state: paused; }
.works-card .works-overlay { opacity: 0; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.works-card:hover .works-overlay { opacity: 1; }
.works-card:hover .works-image { transform: scale(1.08); filter: brightness(0.6); }
.works-image { transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
header.scrolled { border-bottom-color: rgba(0,0,0,0.05) !important; box-shadow: 0 1px 20px rgba(0,0,0,0.03); }
.section-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(229, 62, 62, 0.15), transparent); }
/* Horizontal Scroll Works */
#worksPin { height: 100vh; overflow: hidden; display: flex; position: relative; background: #1b0e0e; z-index: 5; }
.works-pin-wrap { height: 100vh; display: flex; justify-content: flex-start; align-items: center; padding: 0; will-change: transform; }
.works-pin-wrap > .works-slide { min-width: 420px; width: 420px; height: 80vh; flex-shrink: 0; margin-right: 24px; }
.works-pin-wrap > .works-slide-intro { min-width: 50vw; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 6vw; height: 100%; }
@media (max-width: 768px) { .works-pin-wrap > .works-slide { min-width: 85vw; width: 85vw; } .works-pin-wrap > .works-slide-intro { min-width: 90vw; } }
.works-progress { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; z-index: 10; }
.works-progress-bar { width: 200px; height: 2px; background: rgba(255,255,255,0.15); border-radius: 2px; overflow: hidden; }
.works-progress-fill { height: 100%; width: 0%; background: #e53e3e; border-radius: 2px; transition: width 0.1s linear; }
/* Post-works content layer — must sit ABOVE the pinned works section */
.post-works-content { position: relative; z-index: 10; background: #f8f6f6; }
/* Hero WebGL Canvas */
#heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.hero-overlay { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 30% 50%, rgba(27,14,14,0.25) 0%, rgba(27,14,14,0.6) 100%); pointer-events: none; }