:root {
    --neon-cyan: #00f0ff;
    --bg-color: #050505;
    --card-bg: rgba(20, 20, 20, 0.7);
    --text-main: #e0e0e0;
    --font-head: 'Orbitron', sans-serif;
    --font-code: 'Share Tech Mono', monospace;
    --font-body: 'Rajdhani', sans-serif;
}

/* --- RESET & BASE --- */
html.lenis { height: auto; } 
.lenis.lenis-smooth { scroll-behavior: auto; } 
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } 
.lenis.lenis-stopped { overflow: hidden; } 
.lenis.lenis-scrolling iframe { pointer-events: none; }

* { margin: 0; padding: 0; box-sizing: border-box; cursor: none; }

body {
    background: radial-gradient(circle at 50% 50%, #151515 0%, #050505 100%); 
    color: var(--text-main);
    font-family: var(--font-body);
    overflow-x: hidden;
    font-size: 1vw; 
}

/* --- PRELOADER --- */
#preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; z-index: 10000;
    display: flex; justify-content: center; align-items: center;
    flex-direction: column;
}
.loader-content { width: 15vw; font-family: var(--font-code); color: var(--neon-cyan); display: none; opacity: 0; transition: opacity 0.5s; }
.loader-content.visible { display: block; opacity: 1; }
.loader-text { margin-bottom: 0.5vw; font-size: 0.8vw; letter-spacing: 0.1vw; }
.loader-bar { width: 100%; height: 2px; background: #333; position: relative; }
.loader-progress { width: 0%; height: 100%; background: var(--neon-cyan); transition: width 0.1s; box-shadow: 0 0 0.5vw var(--neon-cyan); }
.loader-percentage { margin-top: 0.3vw; text-align: right; font-size: 0.7vw; }

/* --- CURSOR --- */
.cursor { width: 0.4vw; height: 0.4vw; background: var(--neon-cyan); border-radius: 50%; position: fixed; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: width 0.2s, height 0.2s; mix-blend-mode: difference; }
.cursor-follower { width: 1.5vw; height: 1.5vw; border: 1px solid rgba(0, 240, 255, 0.5); border-radius: 50%; position: fixed; pointer-events: none; z-index: 9998; transform: translate(-50%, -50%); transition: transform 0.1s, width 0.3s, height 0.3s; }
.cursor.active { width: 0px; height: 0px; }
.cursor-follower.active { width: 3vw; height: 3vw; background: rgba(0, 240, 255, 0.1); border-color: var(--neon-cyan); }

/* --- BACKGROUND FX --- */
.vignette { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, transparent 50%, #000 130%); pointer-events: none; z-index: 8998; opacity: 0.5; }

/* --- HEADER & NAV --- */
header { display: flex; justify-content: space-between; align-items: center; padding: 1.5vw 3vw; position: fixed; width: 100%; top: 0; z-index: 100; mix-blend-mode: difference; }
.header-logo { height: 2.5vw; filter: none; opacity: 1; }
.back-link, .close-project { color: #fff; text-decoration: none; font-family: var(--font-code); font-size: 1.1vw; border: 1px solid transparent; padding: 0.5vw 1vw; transition: 0.3s; }
.back-link:hover, .close-project:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); background: transparent; }

/* ========================================= */
/* PROJECT 1 STYLES (BODY SENSE)             */
/* ========================================= */
.project-hero { height: 70vh; display: flex; align-items: flex-end; padding: 0 8% 4vw; position: relative; border-bottom: 1px solid #222; }
.hero-bg-pattern { position: absolute; top:0; left:0; width:100%; height:100%; background: radial-gradient(circle at 50% 50%, #111, #000); z-index: -1; opacity: 0.3; }
.p-category { color: var(--neon-cyan); font-family: var(--font-code); margin-bottom: 0.8vw; display: block; letter-spacing: 0.1vw; font-size: 1vw; }
.p-title { font-family: var(--font-head); font-size: 5vw; line-height: 0.9; color: #fff; text-shadow: 0 0 20px rgba(0,0,0,0.5); }

.project-title-box { position: relative; } /* Added for structure */

.project-meta { display: grid; grid-template-columns: repeat(4, 1fr); padding: 2vw 8%; border-bottom: 1px solid #222; }
.meta-item { display: flex; flex-direction: column; }
.meta-item .label { font-family: var(--font-code); color: #555; font-size: 0.8vw; margin-bottom: 0.3vw; }
.meta-item .value { font-family: var(--font-body); color: #fff; font-size: 1.2vw; }
.live-link { color: var(--neon-cyan); text-decoration: none; font-family: var(--font-code); border-bottom: 1px solid var(--neon-cyan); display: inline-block; width: max-content; font-size: 1vw; }

.project-desc { display: grid; grid-template-columns: 1fr 1fr; gap: 3vw; padding: 3vw 8%; }
.desc-col h3 { color: #fff; font-family: var(--font-head); margin-bottom: 1vw; font-size: 1.5vw; }
.desc-col p { color: #dcdcdc; line-height: 1.7; font-family: var(--font-body); font-size: 1.1vw; }

.project-gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1vw; padding: 0 8% 3vw; }

/* ========================================= */
/* PROJECT 2 STYLES (ARTIUS) - SEPARATED     */
/* ========================================= */
.project-hero-2 { height: 70vh; display: flex; align-items: flex-end; padding: 0 8% 4vw; position: relative; border-bottom: 1px solid #222; }
.project-title-box-2 { position: relative; }

.project-meta-2 { display: grid; grid-template-columns: repeat(4, 1fr); padding: 2vw 8%; border-bottom: 1px solid #222; }

.project-desc-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3vw; padding: 3vw 8%; }

.project-gallery-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1vw; padding: 0 8% 3vw; }

/* ========================================= */
/* SHARED UTILITIES & COMPONENTS             */
/* ========================================= */
.grid-item { position: relative; overflow: hidden; border: 1px solid #333; background: #0a0a0a; transition: 0.3s; }
.grid-item:hover { border-color: var(--neon-cyan); }
.grid-item.main-shot { grid-column: 1 / -1; height: 40vw; }
.grid-item.vertical-shot { height: 50vw; }

.project-img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s ease; }
.grid-item:hover .project-img { transform: scale(1.03); }
.vertical-shot .project-img { object-fit: contain; background: #0a0a0a; padding: 1vw; }

/* SCROLL HINT */
.scroll-hint-left { position: absolute; bottom: 3vw; left: 8%; display: flex; align-items: center; gap: 1vw; font-family: var(--font-code); font-size: 0.8vw; color: #666; animation: fadeInUp 2s ease forwards 1s; opacity: 0; }
.hint-line { width: 3vw; height: 1px; background: var(--neon-cyan); box-shadow: 0 0 5px var(--neon-cyan); }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* DIVIDER */
.project-divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #333, transparent); margin: 2vw 0; }

/* NEXT PROJECT & FOOTER */
.next-project { padding: 5vw 0; text-align: center; background: #050505; }
.next-project p { color: #555; font-family: var(--font-code); margin-bottom: 0.5vw; font-size: 1vw; }
.next-link { font-family: var(--font-head); font-size: 4vw; color: #fff; text-decoration: none; transition: 0.3s; }
.next-link:hover { color: var(--neon-cyan); -webkit-text-stroke: 1px var(--neon-cyan); }
.footer-bottom { text-align: center; padding: 1.5vw; color: #444; font-family: var(--font-code); font-size: 0.8vw; border-top: 1px solid #111; display: flex; justify-content: center; }

/* ANIMATION */
.reveal { opacity: 0; transform: translateY(50px); filter: blur(10px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.active { opacity: 1; transform: translateY(0); filter: blur(0); }

/* RESPONSIVE */
@media (max-width: 768px) {
    header { padding: 20px 30px; }
    body { font-size: 16px; }
    .cursor, .cursor-follower { display: none; }
    .p-title { font-size: 3rem; }
    
    .project-gallery-grid, .project-gallery-grid-2 { grid-template-columns: 1fr; gap: 20px; }
    
    .grid-item.main-shot { height: 250px; }
    .grid-item.vertical-shot { height: 400px; }
    
    .project-scroll-hint { font-size: 12px; bottom: 20px; }
    .scroll-line { width: 40px; }
    .next-link { font-size: 2.5rem; }
    .loader-content { width: 80%; }
    .project-divider { margin: 30px 0; }
    .scroll-hint-left { font-size: 12px; bottom: 20px; }
}