:root {
    --black: #0a0a0a;
    --white: #f0f0f0;
    --font-primary: 'Outfit', sans-serif;
    
    /* Chroma colors for gradients */
    --c1: #ff2e93;
    --c2: #ff8000;
    --c3: #00e5ff;
    --c4: #aa00ff;
}

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

body { background-color: var(--black); color: var(--white); font-family: var(--font-primary); overflow-x: hidden; }

/* Custom Cursor */
.chroma-cursor {
    position: fixed; width: 30px; height: 30px; border-radius: 50%;
    background: var(--white); mix-blend-mode: difference; pointer-events: none;
    z-index: 10000; transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s;
}
.chroma-cursor.hover { width: 80px; height: 80px; }

/* Fluid Canvas */
#fluid-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; }

/* Wrapper to stack over canvas */
.scroll-container { position: relative; z-index: 10; pointer-events: none; }
.scroll-container > * { pointer-events: auto; } /* Re-enable pointer events for specific sections */

/* Typography Utilities */
.mix-text { color: var(--white); mix-blend-mode: overlay; /* Allows the vibrant background to show through in cool ways depending on background */ }
@supports not (mix-blend-mode: overlay) { .mix-text { color: var(--white); } }
.outline { color: transparent; -webkit-text-stroke: 2px var(--white); }

/* Navigation */
.c-nav {
    position: fixed; top: 0; left: 0; width: 100%; padding: 40px 5%; display: flex; justify-content: space-between; align-items: center; z-index: 100; pointer-events: auto;
}
.logo { font-size: 2rem; font-weight: 900; letter-spacing: -1px; mix-blend-mode: difference; }

.menu-toggle { display: flex; flex-direction: column; gap: 8px; width: 40px; cursor: pointer; z-index: 200; mix-blend-mode: difference;}
.menu-toggle .line { width: 100%; height: 3px; background: var(--white); transition: all 0.4s cubic-bezier(0.85, 0, 0.15, 1); }
.menu-toggle.open .line:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.menu-toggle.open .line:nth-child(2) { transform: rotate(-45deg); }

/* Overlay Menu */
.fullscreen-menu {
    position: fixed; inset: 0; background: var(--black); z-index: 150; display: flex; align-items: center; justify-content: center;
    clip-path: circle(0% at 100% 0%); transition: clip-path 0.8s cubic-bezier(0.85, 0, 0.15, 1); pointer-events: none;
}
.fullscreen-menu.open { clip-path: circle(150% at 100% 0%); pointer-events: auto; }

.menu-links { display: flex; flex-direction: column; text-align: center; gap: 20px; }
.menu-links a { color: var(--white); text-decoration: none; font-size: 5rem; font-weight: 900; letter-spacing: -2px; text-transform: uppercase; position: relative; display: inline-block; transition: color 0.3s; }
.menu-links a::after { content: attr(data-text); position: absolute; left: 0; top: 0; color: transparent; -webkit-text-stroke: 2px var(--white); width: 0%; overflow: hidden; white-space: nowrap; transition: width 0.4s ease; }
.menu-links a:hover::after { width: 100%; }

/* Hero */
.hero-section { height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 0 5%; }
.hero-section h1 { font-size: 10vw; line-height: 0.9; font-weight: 900; margin-bottom: 30px; letter-spacing: -4px; }
.tagline { font-size: 1.5rem; max-width: 500px; font-weight: 300; line-height: 1.4; mix-blend-mode: difference;}

/* Work Showcase */
.work-showcase { padding: 150px 5%; background: var(--black); position: relative; } /* Solid background here to contrast with canvas above and below */
.section-title { font-size: 1.2rem; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 80px; font-weight: 600; color: var(--white); }

.work-list { display: flex; flex-direction: column; }
.w-item { padding: 50px 0; border-top: 1px solid rgba(255,255,255,0.2); display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; transition: padding 0.3s, color 0.3s; }
.w-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.2); }
.w-item:hover { padding-left: 40px; padding-right: 40px; color: var(--c3); }
.w-title { font-size: 4rem; font-weight: 900; letter-spacing: -2px; pointer-events: none; }
.w-cat { font-size: 1.2rem; font-weight: 300; pointer-events: none; }

/* Image reveal attached to cursor, constrained within .work-showcase */
.hover-reveal { position: fixed; top: 0; left: 0; width: 400px; height: 500px; pointer-events: none; opacity: 0; transform: scale(0.8) translate(-50%, -50%); transition: opacity 0.4s, transform 0.4s; overflow: hidden; z-index: 1; }
.hover-reveal.active { opacity: 1; transform: scale(1) translate(-50%, -50%); }
.hidden-img { width: 100%; height: 100%; object-fit: cover; }

/* Marquee */
.marquee-section { padding: 150px 0; overflow: hidden; white-space: nowrap; background: transparent; } /* transparent to see fluid through */
.marquee-track { display: inline-block; animation: scroll-left 20s linear infinite; }
.marquee-track span { font-size: 12vw; font-weight: 900; letter-spacing: -5px; padding-right: 50px; mix-blend-mode: overlay; display: inline-block; text-transform: uppercase; }
@keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Footer */
.c-footer { padding: 150px 5% 50px; background: var(--black); text-align: center; }
.c-footer h2 { font-size: 2rem; font-weight: 300; margin-bottom: 20px; }
.huge-email { font-size: 8vw; font-weight: 900; color: var(--white); text-decoration: none; display: block; letter-spacing: -3px; margin-bottom: 150px; transition: color 0.4s; }
.huge-email:hover { -webkit-text-stroke: 2px var(--white); color: transparent; }
.f-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 40px; }
.f-socials { display: flex; gap: 30px; }
.f-socials a { color: var(--white); text-decoration: none; font-size: 1.1rem; text-transform: uppercase; font-weight: 600; }

@media (max-width: 900px) {
    .menu-links a { font-size: 3rem; }
    .hero-section h1 { font-size: 15vw; }
    .w-title { font-size: 2.5rem; }
    .w-item:hover { padding-left: 20px; padding-right: 20px; }
    .f-bottom { flex-direction: column; gap: 20px; }
}