/* --- 1. VARIABLES & RESET --- */
:root {
    --bg: #050505;
    --accent: #FF3B00;
    --text: #EAEAEA;
    --card-bg: #111;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Space Mono', monospace;
    margin: 0;
    width: 100%;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Hide Scrollbar (Lenis handles it) */
::-webkit-scrollbar { display: none; }
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Fonts */
h1, h2, h3, .font-display { font-family: 'Syne', sans-serif; }
.text-accent { color: var(--accent); }
.text-stroke { -webkit-text-stroke: 1px rgba(255,255,255,0.3); color: transparent; }

/* --- 2. PRELOADER --- */
#preloader {
    position: fixed; inset: 0; z-index: 9999;
    background-color: var(--accent);
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.loader-title { font-family: 'Syne', sans-serif; font-weight: 900; font-size: 5rem; color: black; letter-spacing: -0.05em; }
.loader-track { width: 200px; height: 4px; background: rgba(0,0,0,0.2); border-radius: 2px; margin: 20px 0; overflow: hidden; }
#loader-bar { width: 0; height: 100%; background: black; }
.loader-status { font-family: 'Space Mono', monospace; font-size: 0.8rem; font-weight: bold; color: black; letter-spacing: 0.2em; }

/* --- 3. CURSOR (Desktop Only) --- */
#cursor-dot, #cursor-ring { display: none; pointer-events: none; position: fixed; top: 0; left: 0; z-index: 9999; mix-blend-mode: difference; }

@media (min-width: 1024px) {
    body { cursor: none; }
    #cursor-dot { display: block; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; }
    #cursor-ring { display: block; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.5); border-radius: 50%; transition: transform 0.1s, width 0.3s, height 0.3s; }
    
    body.hovering #cursor-dot { opacity: 0; }
    body.hovering #cursor-ring { width: 80px; height: 80px; background: rgba(255,255,255,0.1); border-color: transparent; }
}

/* --- 4. NAVIGATION --- */
.fixed-nav { position: fixed; top: 0; width: 100%; z-index: 50; padding: 1.5rem 2rem; display: flex; justify-content: space-between; align-items: center; mix-blend-mode: difference; color: #EAEAEA; }
.logo { font-family: 'Syne', sans-serif; font-weight: bold; font-size: 1.25rem; text-transform: uppercase; letter-spacing: -0.05em; text-decoration: none; color: white; }

/* Menu Styling */
.desktop-menu { display: flex; gap: 3rem; }
.nav-link { font-size: 0.75rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em; text-decoration: none; color: #EAEAEA; transition: color 0.3s; }
.nav-link:hover { color: var(--accent); }

/* Mobile Menu Button */
.mobile-menu-btn { display: none; font-size: 0.75rem; font-weight: bold; border: 1px solid rgba(255,255,255,0.2); padding: 0.5rem 1rem; border-radius: 99px; background: transparent; color: white; z-index: 60; }

@media (max-width: 1023px) {
    .fixed-nav { padding: 1rem 1.5rem; }
    .mobile-menu-btn { display: block; }
    
    /* Mobile Menu Overlay State */
    .desktop-menu {
        position: fixed; inset: 0; background: black;
        flex-direction: column; justify-content: center; align-items: center;
        gap: 2rem; z-index: 40;
        transform: translateY(-100%); transition: transform 0.6s cubic-bezier(0.85, 0, 0.15, 1);
    }
    .desktop-menu.active { transform: translateY(0); }
    .nav-link { font-size: 1.5rem; }
}

/* --- 5. HERO SECTION --- */
.hero-section { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; overflow: hidden; padding: 0 1rem; }
.orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.3; animation: pulse 6s infinite alternate; }
.orb-1 { top: 20%; left: 20%; width: 60vw; height: 60vw; background: purple; }
.orb-2 { bottom: 20%; right: 20%; width: 60vw; height: 60vw; background: #FF3B00; }

.hero-label { color: var(--accent); font-weight: bold; letter-spacing: 0.5em; font-size: 0.7rem; margin-bottom: 2rem; }
/* Clamp adjusted for mobile readability */
.hero-title { font-family: 'Syne', sans-serif; font-weight: 900; font-size: clamp(3rem, 12vw, 12rem); line-height: 0.85; letter-spacing: -0.04em; color: white; mix-blend-mode: overlay; }
.hero-desc-wrap { margin-top: 3rem; overflow: hidden; max-width: 90%; margin-left: auto; margin-right: auto; }
.hero-desc { color: #888; font-size: clamp(0.8rem, 2vw, 1rem); line-height: 1.6; }

.scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); opacity: 0.5; }
.scroll-line { width: 1px; height: 60px; background: linear-gradient(to bottom, transparent, var(--accent), transparent); }

/* --- 6. MARQUEE --- */
.marquee-section { padding: 1rem 0; background: var(--accent); color: black; transform: rotate(1deg) scale(1.05); border-top: 4px solid black; border-bottom: 4px solid black; overflow: hidden; margin-bottom: 5rem; }
.marquee-track { display: flex; gap: 2rem; white-space: nowrap; font-family: 'Syne', sans-serif; font-weight: 900; font-size: 2rem; text-transform: uppercase; letter-spacing: -0.05em; }

/* --- 7. MANIFESTO --- */
.manifesto-section { padding: 6rem 1.5rem; background: var(--bg); position: relative; z-index: 10; }
.manifesto-container { max-width: 1000px; margin: 0 auto; }
.section-label { color: var(--accent); font-weight: bold; letter-spacing: 0.2em; margin-bottom: 2rem; font-size: 0.7rem; }
.manifesto-text { font-family: 'Syne', sans-serif; font-weight: bold; font-size: clamp(1.2rem, 4vw, 3.5rem); line-height: 1.2; color: #555; }
.word-reveal { opacity: 0.2; transition: opacity 0.2s; } 

/* --- 8. WORK SECTION (Hybrid Layout) --- */
.work-section { background: var(--bg); border-top: 1px solid rgba(255,255,255,0.1); position: relative; overflow: hidden; }
.work-container { display: flex; flex-direction: column; gap: 4rem; padding: 4rem 1.5rem; }

/* Project Card Styling */
.project-card { display: block; position: relative; background: var(--card-bg); border: 1px solid rgba(255,255,255,0.1); overflow: hidden; text-decoration: none; height: 50vh; width: 100%; flex-shrink: 0; }
.img-container { position: absolute; inset: 0; overflow: hidden; }
.img-container img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s, opacity 0.5s; }

.card-info { position: absolute; bottom: 0; left: 0; width: 100%; padding: 1.5rem; background: linear-gradient(to top, black, transparent); z-index: 10; display: flex; justify-content: space-between; align-items: flex-end; }
.project-title { font-family: 'Syne', sans-serif; font-weight: 900; font-size: clamp(1.8rem, 5vw, 4rem); color: white; margin: 0; line-height: 1; }
.project-cat { color: var(--accent); font-size: 0.7rem; text-transform: uppercase; margin-top: 0.5rem; }
.project-num { font-family: 'Space Mono', monospace; color: var(--accent); font-weight: bold; }

/* DESKTOP STYLES */
@media (min-width: 1024px) {
    .work-section { height: 100vh; display: flex; align-items: center; } 
    .work-container { flex-direction: row; align-items: center; padding: 0 5vw; gap: 5vw; width: max-content; height: 100%; }
    .work-intro { width: 30vw; flex-shrink: 0; }
    .work-track { display: flex; gap: 5vw; }
    .project-card { width: 60vw; height: 70vh; }
    .section-heading { font-family: 'Syne', sans-serif; font-weight: 900; font-size: 5rem; line-height: 0.9; margin-bottom: 1rem; color: white; }
    
    /* Desktop Hover Effects (Only applied here) */
    .img-container img { opacity: 0.6; filter: grayscale(100%); }
    .project-card:hover img { opacity: 1; transform: scale(1.1); filter: grayscale(0%); }
}

/* MOBILE STYLES */
@media (max-width: 1023px) {
    .section-heading { font-family: 'Syne', sans-serif; font-weight: 900; font-size: 3rem; line-height: 1; color: white; margin-bottom: 1rem; }
    .project-card { height: 60vh; margin-bottom: 2rem; border-radius: 0.5rem; }
    /* Mobile images always colorful */
    .img-container img { opacity: 1; filter: grayscale(0%); }
}

/* --- 9. LAB SECTION --- */
.lab-section { padding: 6rem 1.5rem; background: #0a0a0a; border-top: 1px solid rgba(255,255,255,0.1); }
.lab-header { margin-bottom: 3rem; }
.lab-grid { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 1.5rem; 
}

.lab-card { height: 350px; background: var(--card-bg); border: 1px solid rgba(255,255,255,0.1); border-radius: 1rem; position: relative; overflow: hidden; }
.lab-label { position: absolute; top: 1rem; left: 1rem; font-size: 0.7rem; background: rgba(0,0,0,0.5); padding: 0.2rem 0.5rem; border-radius: 4px; pointer-events: none; z-index: 20; color: #aaa; }

#chroma-blob { position: absolute; width: 150px; height: 150px; background: radial-gradient(circle, var(--accent), transparent); filter: blur(40px); opacity: 0; pointer-events: none; }

.center-content { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
#scramble-target { font-family: 'Syne', sans-serif; font-size: 2.5rem; font-weight: 900; word-break: break-all; padding: 0 1rem; }
.lab-status { font-size: 0.8rem; color: #555; margin-top: 1rem; }

@media (min-width: 768px) {
    .lab-grid { 
        grid-template-columns: repeat(3, 1fr); /* 3 items per row */
    }
    
    /* Make specific items span if you want variation, 
       OR keep them all 1x1 for a clean "System Dashboard" look.
       We will keep them 1x1 for symmetry with 6 items. */
    .lab-card-wide { grid-column: span 2; } /* Optional utility */
}

/* Ensure the magnetic button doesn't get clipped */
#toy-magnet { overflow: visible !important; }

/* --- 10. FOOTER --- */
.main-footer { height: 70vh; background: var(--accent); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; color: black; padding: 0 1rem; }
.footer-label { font-weight: bold; letter-spacing: 0.3em; margin-bottom: 1rem; font-size: 0.7rem; }
.footer-title { font-family: 'Syne', sans-serif; font-weight: 900; font-size: clamp(3rem, 12vw, 10rem); line-height: 0.85; margin-bottom: 2rem; }
.footer-cta { display: inline-flex; align-items: center; gap: 1rem; background: black; color: white; padding: 1.2rem 2.5rem; border-radius: 99px; font-weight: bold; text-decoration: none; font-size: 1rem; transition: transform 0.3s; }
.footer-cta:hover { transform: scale(1.05); }
.footer-bottom { position: absolute; bottom: 2rem; width: 100%; padding: 0 2rem; display: flex; justify-content: space-between; font-size: 0.7rem; font-weight: bold; opacity: 0.6; }
/* --- LAB ADDITIONS --- */
.perspective-1000 {
    perspective: 1000px;
}
.transform-style-3d {
    transform-style: preserve-3d;
}
#holo-card {
    background: linear-gradient(135deg, #1a1a1a 0%, #050505 100%);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
#holo-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(45deg, transparent, rgba(255, 59, 0, 0.3), transparent);
    z-index: -1;
    border-radius: 12px;
}