:root {
  --bg: #050505;
  --accent: #d4af37;
  --primary-text: #e5e7eb;
  --secondary-text: #9ca3af;
  --background: #111827;
  --highlight: #facc15;
}

html,body{height:100%;margin:0;background:var(--bg);color:#fff;font-family:'Lato',sans-serif;}
#art-canvas{position:fixed;inset:0;z-index:-1;pointer-events:none;}
nav{padding:24px 40px;}
.back-link{color:#fff;text-transform:uppercase;letter-spacing:1px;text-decoration:none;}
.nav-brand{font-family:'Playfair Display',serif;color:var(--accent);font-style:italic;}

.carousel-section{position:relative;max-width:1200px;margin:40px auto;height:52vh;border:1px solid rgba(255,255,255,0.04);overflow:hidden;}
.carousel-track{position:relative;width:100%;height:100%;list-style:none;margin:0;padding:0;}
.carousel-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;display:flex;align-items:center;justify-content:center;}
.carousel-slide.active{opacity:1;z-index:2;}
.slide-img{width:100%;height:100%;object-fit:cover;filter:brightness(0.45)grayscale(80%);transition:filter 1s ease;}
.carousel-slide.active .slide-img{filter:brightness(0.75)grayscale(20%);animation:slowZoom 10s infinite alternate;}
.slide-content{position:absolute;bottom:40px;left:40px;z-index:3;max-width:520px;}
.slide-title{font-family:'Playfair Display',serif;font-size:2rem;margin:0;color:#fff;transform:translateY(18px);opacity:0;transition:all .6s;}
.slide-desc{color:var(--accent);text-transform:uppercase;letter-spacing:1.5px;transform:translateY(18px);opacity:0;transition:all .6s;}
.carousel-slide.active .slide-title,.carousel-slide.active .slide-desc{transform:none;opacity:1;}

.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:1px solid rgba(255,255,255,0.06);color:#fff;width:48px;height:48px;cursor:pointer;z-index:10;}
.carousel-btn.prev{left:8px;} .carousel-btn.next{right:8px;}
@keyframes slowZoom{from{transform:scale(1);}to{transform:scale(1.06);}}

.grid-section{padding:30px 0;}
.grid-header{border-bottom:1px solid rgba(255,255,255,0.04);margin-bottom:20px;padding-bottom:10px;font-family:'Playfair Display',serif;}
.project-list{display:grid;grid-template-columns:1fr;gap:14px;}
.project-item {
    display: grid;
    grid-template-columns: 2fr 1fr 50px 100px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    padding: 1.5rem 0 1.5rem 16px;
    position: relative;
    z-index: 10;
}
.project-item:hover {
    background-color: rgba(255, 255, 255, 0.03);
}
.highlight-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background-color: var(--highlight);
    transition: width 0.3s ease-in-out;
    z-index: 0;
    border-radius: 0 2px 2px 0;
}
.project-item:hover .highlight-bar {
    width: 8px;
}
#image-preview-container {
    position: fixed;
    width: 300px;
    height: 400px;
    pointer-events: none;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0.3s;
    will-change: transform, opacity;
    transform: translate3d(50px, 0, 0) rotate3d(0, 0, 1, 5deg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-radius: 1rem;
    overflow: hidden;
}
#image-preview-container.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg);
}
#image-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
}
@media (max-width: 1024px) {
    #image-preview-container {
        display: none;
    }
    
    .project-item {
        grid-template-columns: 1fr 1fr 50px;
    }
    
    .project-item > div:nth-child(3) {
        display: none;
    }
}