/* 
 * The Memory Archive 
 * Premium Studio Aesthetic
 */
:root {
    --bg-dark: #111111;
    --bg-darker: #0a0a0a;
    --text-light: #F4F4F4;
    --text-muted: #888888;
    --accent: #D4FF00; /* Acid Lime */
    
    --font-sans: 'Inter', sans-serif;
    --font-mono: 'Space Mono', monospace;
}

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

body.dark-studio {
    background: linear-gradient(135deg, #0a0a0a 0%, #151813 50%, #050505 100%);
    color: var(--text-light);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    cursor: default; /* Keep default but rely on lens */
}

a { text-decoration: none; color: inherit; }

/* Hardware Accelerated Noise Overlay */
#bg-canvas {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -4; opacity: 0.6; pointer-events: none;
}

.grid-overlay {
    position: fixed; inset: 0; z-index: -3; pointer-events: none;
    background-image: linear-gradient(rgba(212, 255, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(212, 255, 0, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
}

.linear-shape {
    position: fixed; top: 35%; left: -10vw; width: 120vw; height: 1px;
    background: var(--accent);
    box-shadow: 0 0 25px 8px rgba(212,255,0,0.15);
    transform: rotate(-12deg); z-index: -2; pointer-events: none;
}

.noise-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
    opacity: 0.03; pointer-events: none; z-index: 9999;
}

/* Custom Cursor Lens Blur */
.cursor-lens {
    position: fixed; top: 0; left: 0; width: 300px; height: 300px;
    border-radius: 50%; pointer-events: none;
    transform: translate(-50%, -50%); /* Removed scale logic */
    background: radial-gradient(circle, rgba(212, 255, 0, 0.12) 0%, rgba(212, 255, 0, 0) 70%);
    z-index: -1; opacity: 0; transition: opacity 0.4s ease, width 0.3s ease, height 0.3s ease, background 0.3s ease;
}
body:hover .cursor-lens { opacity: 1; }

/* Typography */
.mono-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.accent-text { color: var(--accent); }
h1, h2, h3 { font-weight: 500; letter-spacing: -0.02em; }

/* Layout */
.container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 5%; }
.section-header { margin-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 20px; display: flex; justify-content: space-between; align-items: flex-end; }
.section-header h2 { font-size: 2rem; }

/* Navigation */
.studio-nav {
    position: fixed; top: 0; left: 0; width: 100%; padding: 30px 5%;
    display: flex; justify-content: space-between; align-items: center;
    z-index: 100; mix-blend-mode: difference;
}
.nav-brand { font-family: var(--font-sans); font-weight: 700; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; }
.nav-links { display: flex; gap: 40px; }
.nav-links a { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; position: relative; }
.nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0%; height: 1px; background: var(--accent); transition: width 0.3s ease; }
.nav-links a:hover::after { width: 100%; }

/* Hero Section */
.hero-section {
    height: 100vh; display: flex; align-items: center; position: relative;
    background: radial-gradient(circle at top right, rgba(212, 255, 0, 0.05), transparent 40%);
}
.hero-container { display: flex; flex-direction: column; justify-content: center; height: 100%; padding-top: 10vh; }
.hero-title { font-size: clamp(3rem, 7vw, 7.5rem); line-height: 1.05; margin-bottom: 80px; }
.accent-dot { display: inline-block; width: 16px; height: 16px; background: var(--accent); border-radius: 50%; margin-left: 5px; }
.muted-text { color: var(--text-muted); font-weight: 300; }
.hero-bottom { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; padding-bottom: 5vh; flex-wrap: wrap; gap: 20px;}
.hero-subtitle { font-family: var(--font-mono); font-size: 13px; line-height: 1.6; text-transform: uppercase; color: #bbb; }
.scroll-indicator { display: flex; flex-direction: column; align-items: flex-end; gap: 15px; }
.scroll-indicator .line { width: 1px; height: 80px; background: linear-gradient(to bottom, var(--accent), transparent); animation: scrollLine 2s infinite ease-in-out; }
@keyframes scrollLine { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 50.1% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* 12 Column Grid System */
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 30px; }
.col-span-8 { grid-column: span 8; }
.col-span-4 { grid-column: span 4; }
.col-span-12 { grid-column: span 12; }
@media (max-width: 900px) {
    .col-span-8, .col-span-4 { grid-column: span 12; }
}

/* Case Study Cards (The Big Three) */
.work-section { padding: 120px 0; background: transparent; }
.case-card {
    position: relative; aspect-ratio: 1 / 1; border-radius: 2px; overflow: hidden;
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05);
    display: flex; flex-direction: column; justify-content: flex-end; padding: 40px;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.card-image { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); opacity: 0.6; filter: grayscale(80%) contrast(120%); }
.card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(10,10,10,0.9) 100%); z-index: 1; transition: opacity 0.5s ease; }
.card-content { position: relative; z-index: 2; transform: translateY(10px); transition: transform 0.5s ease; }
.value-tag { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; background: var(--accent); color: var(--bg-dark); padding: 6px 12px; border-radius: 20px; font-weight: 700; margin-bottom: 15px; display: inline-block; }
.card-title { font-size: clamp(1.8rem, 3vw, 2.5rem); color: #fff; }

.case-card:hover { border-color: rgba(212, 255, 0, 0.3); }
.case-card:hover .card-image { transform: scale(1.05); opacity: 0.9; filter: grayscale(0%) contrast(100%); }
.case-card:hover .card-overlay { opacity: 0.7; }
.case-card:hover .card-content { transform: translateY(0); }

/* Thesis Spotlight */
.thesis-section { padding: 180px 0; text-align: center; background: transparent; }
.thesis-container { max-width: 1000px; }
.glitch-quote-wrapper { position: relative; margin: 60px 0 40px; display: inline-block;}
.glitch-text { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.2; font-weight: 400; color: #fff; position: relative; display: inline-block; }
.glitch-text::before, .glitch-text::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.8; }
.glitch-text::before { left: 2px; text-shadow: -2px 0 var(--accent); clip: rect(24px, 550px, 90px, 0); animation: glitch-anim 3s infinite linear alternate-reverse; }
.glitch-text::after { left: -2px; text-shadow: -2px 0 blue; clip: rect(85px, 550px, 140px, 0); animation: glitch-anim 2.5s infinite linear alternate-reverse; }

@keyframes glitch-anim {
  0% { clip: rect(20px, 9999px, 85px, 0); }
  20% { clip: rect(92px, 9999px, 10px, 0); }
  40% { clip: rect(10px, 9999px, 80px, 0); }
  60% { clip: rect(40px, 9999px, 90px, 0); }
  80% { clip: rect(80px, 9999px, 50px, 0); }
  100% { clip: rect(15px, 9999px, 90px, 0); }
}
.quote-author { font-family: var(--font-mono); color: var(--accent); font-size: 14px; margin-top: 30px; display: block; }
.thesis-desc { font-size: 1.2rem; color: var(--text-muted); max-width: 600px; margin: 0 auto; line-height: 1.6; }

/* About Section */
.about-section { padding: 150px 0; background: transparent; }
.two-col-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; }
.section-title { font-size: clamp(3rem, 5vw, 4.5rem); line-height: 1.1; margin-bottom: 40px; }
.about-image { width: 100%; max-width: 400px; display: block; filter: grayscale(100%); transition: filter 0.5s ease; border: 1px solid rgba(255,255,255,0.1); padding: 10px; background: rgba(255,255,255,0.02); }
.about-image:hover { filter: grayscale(0%); border-color: var(--accent); }

.highlight-quote { font-size: clamp(1.8rem, 3vw, 2.2rem); line-height: 1.4; color: #fff; margin-bottom: 50px; border-left: 2px solid var(--accent); padding-left: 30px; font-weight: 400;}
.about-text-blocks p { font-size: 1.1rem; line-height: 1.8; color: var(--text-muted); margin-bottom: 25px; font-weight: 300; }

.contact-block { margin-top: 80px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.1); }
.big-email { display: block; font-size: clamp(1.5rem, 3vw, 2.5rem); color: #fff; margin: 20px 0 40px; transition: color 0.3s ease; font-weight: 300;}
.big-email:hover { color: var(--accent); }
.social-links-minimal { display: flex; gap: 30px; font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; }
.social-links-minimal a { color: var(--text-light); transition: color 0.3s; }
.social-links-minimal a:hover { color: var(--accent); }
.location { color: #666; }

@media (max-width: 900px) {
    .two-col-grid { grid-template-columns: 1fr; gap: 40px; }
    .hero-title { margin-bottom: 40px; }
    .hero-bottom { flex-direction: column; align-items: flex-start; gap: 30px; }
    .social-links-minimal { flex-direction: column; gap: 15px; }
}

/* Footer */
.studio-footer { padding: 40px 0; background: transparent; border-top: 1px solid rgba(255,255,255,0.05); }
.footer-flex { display: flex; justify-content: space-between; align-items: center; }
@media(max-width: 600px) { .footer-flex { flex-direction: column; gap: 15px; text-align: center; } }