:root {
    --bg-color: #0a0a0a;
    --text-color: #f0f0f0;
    --accent-color: #6366f1;
    --secondary-accent: #8b5cf6;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --nav-bg: rgba(10, 10, 10, 0.6);
    --hero-overlay: rgba(10, 10, 10, 0.7);
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --card-bg: #171717;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.light-mode {
    --bg-color: #ffffff;
    --text-color: #1a1a1a;
    --accent-color: #4f46e5;
    --secondary-accent: #7c3aed;
    --glass-bg: rgba(0, 0, 0, 0.05);
    --glass-border: rgba(0, 0, 0, 0.1);
    --nav-bg: rgba(255, 255, 255, 0.8);
    --hero-overlay: rgba(255, 255, 255, 0.4);
    /* Lighter overlay for light mode */
    --card-bg: #f5f5f5;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    /* cursor: none; Removed to show default cursor */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Custom Cursor */
.cursor-glow {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.15), transparent 70%);
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 9999;
    mix-blend-mode: screen;
    transition: transform 0.1s;
}

body.light-mode .cursor-glow {
    background: radial-gradient(circle, rgba(99, 102, 241, 0.4), transparent 70%);
    /* Darker glow for visibility on white */
    mix-blend-mode: multiply;
}

/* Typography */
h1,
h2,
h3 {
    font-family: var(--font-heading);
    font-weight: 700;
}

h1 {
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.gradient-text {
    background: linear-gradient(135deg, var(--accent-color), var(--secondary-accent), #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: gradient-flow 5s ease infinite;
}

/* Navigation */
.glass-nav {
    position: fixed;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1200px;
    padding: 1rem 2rem;
    background: var(--nav-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    transition: var(--transition);
}

.glass-nav:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

body.light-mode .glass-nav:hover {
    border-color: rgba(0, 0, 0, 0.2);
}

.logo {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.05em;
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.5rem;
    /* Space for a potential indicator if wanted, or just click area */
}

/* Optional: Add a small indicator that it's clickable */
.logo::after {
    content: '▾';
    position: absolute;
    right: 0;
    font-size: 1rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.7;
    transition: var(--transition);
}

/* CSS cannot select previous sibling. We'll skip the rotation for now or depend on JS to class the logo if needed. 
      actually, let's just leave the indicator static or remove it if it looks cluttered. 
      User asked for "Garrett.", let's keep it clean. No pseudo element. */
.logo::after {
    display: none;
}


nav {
    position: absolute;
    top: 100%;
    left: 2rem;
    background: var(--bg-color);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 1.5rem;
    min-width: 200px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: var(--transition);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

nav.active {
    opacity: 1;
    pointer-events: all;
    transform: translateY(20px);
}

nav ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
}

nav a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    font-size: 1rem;
    transition: var(--transition);
    opacity: 0.7;
    display: block;
}

nav a:hover {
    opacity: 1;
    color: var(--accent-color);
    transform: translateX(5px);
}


.cta-btn {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1.2rem;
    border-radius: 50px;
    border: 1px solid transparent;
}

body.light-mode .cta-btn {
    background: rgba(0, 0, 0, 0.05);
}

.cta-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--accent-color);
}

body.light-mode .cta-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

#theme-toggle {
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    width: 24px;
    height: 24px;
    position: relative;
    /* Ensure icons stack properly if absolute, though we are hiding one */
    display: flex;
    align-items: center;
    justify-content: center;
}

.sun-icon,
.moon-icon {
    width: 24px;
    height: 24px;
}

/* Icon Toggling Logic */
.moon-icon {
    display: none;
    /* Hide moon by default (Dark Mode is active, show Sun to switch to Light? Or Show Sun to represent Light?) */
    /* Usually: If Dark, show Sun (meaning 'Switch to Light'). If Light, show Moon ('Switch to Dark'). */
}

/* When Body is Light Mode */
body.light-mode .sun-icon {
    display: none;
}

body.light-mode .moon-icon {
    display: block;
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10%;
    position: relative;
    overflow: hidden;
    background: url('assets/hero-bg.png') no-repeat center center/cover;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--hero-overlay);
    /* Variable for theme switching */
    /* Overlay to ensure text readability */
    z-index: 1;
    transition: background 0.3s ease;
}

.hero-content {
    max-width: 600px;
    z-index: 10;
}

.hero p {
    font-size: 1.25rem;
    margin: 2rem 0;
    opacity: 0.8;
    max-width: 450px;
}

.hero-actions {
    display: flex;
    gap: 1.5rem;
}

.primary-btn,
.secondary-btn {
    text-decoration: none;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    transition: var(--transition);
    display: inline-block;
}

.primary-btn {
    background: var(--text-color);
    color: var(--bg-color);
}

.primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1);
}

.secondary-btn {
    border: 1px solid var(--glass-border);
    color: var(--text-color);
    background: rgba(255, 255, 255, 0.05);
}

.secondary-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--text-color);
}

/* Hero Visual */
.glowing-orb {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--accent-color), transparent 60%);
    opacity: 0.4;
    filter: blur(80px);
    position: absolute;
    right: -100px;
    top: 50%;
    transform: translateY(-50%);
    animation: pulse-glow 8s infinite alternate;
}

/* Sections */
section {
    padding: 8rem 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 4rem;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 4px;
    background: var(--accent-color);
    border-radius: 2px;
}

/* Cards */
.about-grid,
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.about-card,
.project-card {
    background: var(--card-bg);
    padding: 2.5rem;
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    transition: var(--transition);
}

.about-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-5px);
}

.project-card {
    padding: 0;
    overflow: hidden;
}

.project-image {
    height: 250px;
    width: 100%;
    background-size: cover;
    background-position: center;
}

.project-info {
    padding: 2rem;
}

.project-link {
    display: inline-block;
    margin-top: 1rem;
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
}

/* Thoughts */
.thoughts-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 800px;
}

.thought-card {
    padding: 2rem;
    border-left: 1px solid var(--glass-border);
    transition: var(--transition);
    position: relative;
}

.thought-card::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 0;
    height: 0%;
    width: 2px;
    background: var(--accent-color);
    transition: height 0.3s ease;
}

.thought-card:hover {
    background: rgba(255, 255, 255, 0.02);
}

.thought-card:hover::before {
    height: 100%;
}

.thought-card .date {
    font-size: 0.85rem;
    opacity: 0.6;
    margin-bottom: 0.5rem;
    display: block;
}

.thought-card h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.read-more {
    color: var(--accent-color);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 1rem;
    display: inline-block;
    opacity: 0;
    transform: translateX(-10px);
    transition: var(--transition);
}

.thought-card:hover .read-more {
    opacity: 1;
    transform: translateX(0);
}

/* Contact */
.contact-wrapper {
    text-align: center;
    padding: 5rem 2rem;
    border-radius: 30px;
    background: linear-gradient(180deg, var(--card-bg) 0%, rgba(23, 23, 23, 0) 100%);
    border: 1px solid var(--glass-border);
}

.email-link {
    display: block;
    font-size: clamp(2rem, 5vw, 4rem);
    color: var(--text-color);
    text-decoration: none;
    font-weight: 800;
    margin: 2rem 0;
    transition: var(--transition);
    font-family: var(--font-heading);
}

.email-link:hover {
    color: var(--accent-color);
    letter-spacing: 2px;
}

.social-replacements {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.capsule {
    padding: 0.8rem 1.5rem;
    border: 1px solid var(--glass-border);
    border-radius: 100px;
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition);
}

.capsule:hover {
    background: var(--text-color);
    color: var(--bg-color);
}

/* Footer */
footer {
    text-align: center;
    padding: 3rem;
    opacity: 0.5;
    font-size: 0.9rem;
    border-top: 1px solid var(--glass-border);
}

/* Animations */
@keyframes gradient-flow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes pulse-glow {
    0% {
        opacity: 0.4;
        transform: translateY(-50%) scale(1);
    }

    100% {
        opacity: 0.6;
        transform: translateY(-50%) scale(1.1);
    }
}

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s forwards;
}

.delay-1 {
    animation-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
}

.delay-3 {
    animation-delay: 0.6s;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.scroll-reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
    .glass-nav {
        top: 0;
        border-radius: 0;
        width: 100%;
        max-width: none;
        padding: 1rem 1.5rem;
        backdrop-filter: blur(20px);
        background: var(--nav-bg);
    }

    /* On mobile, align the dropdown to the left or full width? */
    nav {
        left: 1rem;
        right: 1rem;
        width: auto;
        top: 100%;
        margin-top: 1rem;
    }

    nav ul {
        align-items: center;
    }

    nav a {
        font-size: 1.2rem;
        padding: 0.5rem 0;
    }

    .hero {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding-top: 100px;
    }

    .hero-actions {
        justify-content: center;
    }

    /* Mobile Adjustments */
    .logo {
        position: relative;
        z-index: 1002;
        /* Ensure clickable above other elements */
    }

    /* Mobile Adjustments for Cards and text */
    .about-card,
    .project-card,
    .thought-card,
    .contact-wrapper {
        padding: 1.5rem;
        /* Reduce padding from 2.5rem/5rem */
    }



    .about-grid,
    .projects-grid {
        grid-template-columns: 1fr;
        /* Force single column */
    }

    .email-link {
        font-size: 0.95rem;
        /* Increased size as requested */
        word-break: normal;
        white-space: nowrap;
    }
}