/* --- GLOBAL VARIABLES & THEME --- */
:root {
    --bg-color: white;
    --text-color: black;
    --border-color: black;
    --tab-bg: #e0e0e0;
    --tab-header-bg: #c0c0c0;
    --overlay-color: rgba(255, 255, 255, 0.85);
}

body.dark-theme {
    --bg-color: black;
    --text-color: white;
    --border-color: white;
    --tab-bg: #2a2a2a;
    --tab-header-bg: #1a1a1a;
    --overlay-color: rgba(0, 0, 0, 0.45);
}

/* --- RESET & TYPOGRAPHY --- */
body {
    margin: 0;
    font-family: 'Lato', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: background-color 0.3s, color 0.3s;
}

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

/* --- HOMEPAGE SPECIFICS (No Scroll) --- */
body.home-page {
    height: 100vh;
    overflow: hidden; /* Locks scrolling completely */
}

body.home-page main {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* --- LAYOUT & HEADER --- */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--border-color);
    margin: 25px 25px 12px 25px;
    transition: border-color 0.3s;
    position: relative; /* Needed to absolutely center the points */
}

.logo {
    height: 16px;
    margin: 8px;
    z-index: 2;
}

.points, .page-title {
    position: absolute;
    left: 50%;
    top: 50%; 
    transform: translate(-50%, -50%); 
    font-weight: 900;
    white-space: nowrap;
    z-index: 2;
    text-align: center;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid var(--border-color);
    margin: 0 25px 25px 25px;
    transition: border-color 0.3s;
    overflow: hidden;
}

/* --- TOGGLE SWITCH --- */
.toggle-container {
    position: relative;
    z-index: 2;
}
.toggle-checkbox {
    display: none;
}
.toggle-label {
    display: block;
    width: 40px;
    height: 20px;
    background-color: #ccc;
    border-radius: 20px;
    cursor: pointer;
    position: relative;
}
.toggle-inner {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    background-color: #ccc;
    transition: background-color 0.3s;
}
.toggle-switch {
    display: block;
    width: 18px;
    height: 18px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 1px;
    left: 1px;
    transition: transform 0.3s;
}
.toggle-checkbox:checked + .toggle-label .toggle-inner {
    background-color: #f3624c;
}
.toggle-checkbox:checked + .toggle-label .toggle-switch {
    transform: translateX(20px);
}

/* --- MARQUEE (Seamless Fix) --- */
.slogan {
    font-weight: 500;
    font-size: 16px;
    width: 100%;
    display: flex;
    border-bottom: 1px solid var(--border-color);
    padding: 10px 0;
    position: relative;
    z-index: 2;
    background-color: var(--overlay-color); /* Now it shares the same transparency as the rest of the page */
    backdrop-filter: blur(8px); /* Creates the frosted glass effect */
    -webkit-backdrop-filter: blur(8px); /* Ensures it works on Safari/iPhones */
    transition: background-color 0.3s;
}

.marquee-container {
    overflow: hidden;
    width: 100%;
    /* Prevents the container from collapsing or behaving weirdly on iOS */
    display: block; 
}

.marquee-track {
    display: flex;
    width: max-content; /* Forces the track to be the exact width of both text blocks combined */
    
    /* We animate the TRACK, not the individual text blocks */
    animation: scrollMarquee 15s linear infinite;
    
    /* Hardware acceleration */
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.marquee {
    flex-shrink: 0;
    white-space: nowrap;
    padding-right: 0; /* Ensures no weird gaps ruin the perfect 50% split */
}

/* Move the track exactly half of its total width (which is exactly one text block) */
@keyframes scrollMarquee {
    0% { 
        transform: translate3d(0, 0, 0); 
        -webkit-transform: translate3d(0, 0, 0);
    }
    100% { 
        transform: translate3d(-50%, 0, 0); 
        -webkit-transform: translate3d(-50%, 0, 0);
    }
}

/* --- CANVAS & LINKS CENTERING --- */
#game {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Puts canvas behind everything */
}

.line-wrapper {
    flex: 1; /* Takes up all remaining vertical space */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    pointer-events: none; /* Allows mouse to click canvas "through" empty space */
}

.line-container {
    display: flex;
    gap: 60px;
    pointer-events: auto; /* Re-enables clicking on the links */
}

.links-and-social {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px; /* Space between the text links and the logos */
    pointer-events: none; /* Allows canvas clicks to pass through the empty space */
}

.social-container {
    display: flex;
    flex-direction: row !important; /* Forces them to stay side-by-side on mobile */
    gap: 25px;
    pointer-events: auto; /* Re-enables clicking on the logos */
}

.social-icon svg {
    width: 32px;
    height: 32px;
    /* stroke automatically hooks into your dark/light theme variables! */
    stroke: var(--text-color); 
    stroke-width: 10px;
    transition: stroke 0.3s ease, transform 0.2s ease;
}

.social-icon:hover svg {
    transform: translateY(-4px); /* Cute little hover bounce effect */
}

.projects {
    font-weight: 400;
    font-size: clamp(32px, 5vw, 48px); /* Responsive text size */
    margin: 0;
    cursor: pointer;
}

.line .projects {
    text-decoration: line-through;
    text-decoration-thickness: 3px; /* Makes the line bold and intentional */
}

#bottom-image {
    width: calc(100% - 60px);
    height: auto;
    margin: 0 30px 20px 30px;
    position: relative;
    z-index: 2;
    pointer-events: none;
    margin-top: auto; /* Forces image to the very bottom */
}

/* --- SUBPAGE TABS (CARDS) --- */
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 40px 20px;
    overflow-y: auto;
}

.tab {
    background-color: var(--tab-bg);
    border: 1px solid var(--border-color);
    width: 30%;
    min-width: 280px; /* Prevents getting too small */
    display: flex;
    flex-direction: column;
    box-shadow: 4px 4px 0px var(--border-color); /* Brutalist shadow */
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.tab-header {
    display: flex;
    justify-content: flex-end;
    background-color: var(--tab-header-bg);
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
}
.tab-header div {
    width: 24px;
    height: 24px;
    margin-left: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    border: 1px solid var(--border-color);
    color: var(--text-color);
}
.tab img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 1px solid var(--border-color);
}
.tab-content {
    padding: 20px;
}
.tab-content h3 {
    margin-top: 0;
    font-size: 24px;
}
.tab button {
    background: transparent;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 10px 20px;
    cursor: pointer;
    font-family: inherit;
    font-weight: bold;
    transition: background 0.2s;
}
.tab button:hover {
    background-color: var(--border-color);
    color: var(--bg-color);
}

/* --- OVERLAY FOR HOVER EFFECT --- */
#background-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--overlay-color);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 768px) {
    .tab { width: 45%; }

    .line, .static-line {
        display: block !important;
        text-align: center !important;
        width: auto !important;
    }
    
    /* 1. Disconnect the wrapper from the page flow and pin it exactly to the center */
    .line-wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: auto;
    }
    
    /* 2. Force the links to stack one below the other */
    .line-container { 
        display: flex;
        flex-direction: column !important; /* !important ensures it overrides the horizontal desktop layout */
        align-items: center;
        justify-content: center;
        gap: 30px; /* Space between CODE, IMAGE, and XYZ */
    }

    .toggle-container {
        display: none !important;
    }

    /* 2. Release the points from the center and let them snap to the right */
    .points, .page-title {
        position: static !important;
        transform: none !important;
        text-align: right !important;
        margin-right: 10px; /* Optional: gives it a little breathing room from the edge */
    }
}

@media (max-width: 500px) {
    .tab { width: 100%; }
    
    /* Shrink the font slightly on very small phones so it fits nicely */
    .projects { 
        font-size: 40px; 
    } 
}


/* ========================================= */
/* --- CODE PAGE: MINIMALIST LAYOUT --- */
/* ========================================= */

.scrollable-page {
    overflow-y: auto;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the content wrapper */
}

.content-wrapper {
    width: 100%;
    max-width: 1000px;
}

/* --- TWO-COLUMN BIO --- */
.bio-section {
    margin-bottom: 60px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--border-color);
}

.bio-container {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.bio-left {
    flex: 0 0 35%;
}

.bio-left h2 {
    margin: 0;
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1px;
}

.bio-right {
    flex: 1;
}

.bio-right p {
    font-size: 18px;
    line-height: 1.6;
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: 300; /* Lighter font weight for a clean look */
}

/* --- CLEAN PROJECTS GRID --- */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    padding-bottom: 50px;
}

.project-box {
    border: 1px solid var(--border-color);
    background-color: var(--bg-color);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.project-box:hover {
    transform: translateY(-5px); /* Minimal float effect */
    box-shadow: 6px 6px 0px var(--border-color);
}

.box-image-container {
    height: 200px;
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
}

.box-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%); /* Optional: makes images B&W until hovered */
    transition: filter 0.3s;
}

.project-box:hover .box-image-container img {
    filter: grayscale(0%);
}

.box-title {
    padding: 15px;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ========================================= */
/* --- OS MODAL POPUP (MOBILE CENTERED) --- */
/* ========================================= */

.os-overlay {
    position: fixed;
    top: 0; left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(0, 0, 0, 0.3); 
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    display: none; 
    justify-content: center;
    align-items: center;
    padding: 20px; /* This creates the even margin around the screen */
    box-sizing: border-box; /* This forces the padding inside the 100% width! */
}

.os-window {
    width: 100%; /* Take up the available space inside the overlay padding */
    max-width: 650px;
    max-height: 85vh; 
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    box-shadow: 6px 6px 0px var(--border-color);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    box-sizing: border-box; /* Forces borders/padding inside the width */
    margin-right: 6px; /* Visually balances the 6px shadow on the right */
    margin-bottom: 6px; /* Visually balances the 6px shadow on the bottom */
}

/* Maximize State Class */
.os-window.maximized {
    max-width: 100%;
    height: 100%;
    max-height: 100vh;
    box-shadow: none;
    border: none;
}

/* Minimize State Class */
.os-window.minimized .os-content {
    display: none; 
}

.os-titlebar {
    display: flex;
    align-items: center;
    background: #e0e0e0;
    border-bottom: 1px solid var(--border-color);
    padding: 12px 15px;
    color: black; 
}

.os-buttons {
    display: flex;
    gap: 8px;
    margin-right: 20px;
}

.os-btn {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.2);
    cursor: pointer;
}
.close-btn { background-color: #ff5f56; }
.min-btn { background-color: #ffbd2e; }
.max-btn { background-color: #27c93f; }

.os-title {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    flex: 1;
    text-align: center;
    padding-right: 50px; 
}

.os-content {
    padding: 30px;
    overflow-y: auto; /* Allows scrolling inside the window if text is long */
}

.os-content p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 25px;
    font-weight: 300;
}

.os-link {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-color);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
    transition: background 0.2s, color 0.2s;
}

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

.os-video-container {
    margin-top: 20px;
    position: relative;
    padding-bottom: 56.25%; 
    height: 0;
    border: 1px solid var(--border-color);
}

.os-video-container iframe {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
}

/* --- MOBILE RESPONSIVENESS FOR CODE PAGE --- */
@media (max-width: 768px) {
    .bio-container {
        flex-direction: column;
        gap: 20px;
    }
    
    .bio-left h2 {
        font-size: 48px;
    }
}

/* ========================================= */
/* --- BIO PAGE: TIMELINE & MARQUEE --- */
/* ========================================= */

.bio-main {
    display: flex;
    flex-direction: column;
    overflow: hidden; 
}

.bio-scroll-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden; /* MAGIC LINE 1: Strictly forbids horizontal scrolling */
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box; /* MAGIC LINE 2: Keeps padding inside the width boundaries */
}

.bio-intro {
    display: flex;
    gap: 60px;
    align-items: flex-start;
    max-width: 1000px; 
    width: 100%;
    box-sizing: border-box; /* Keeps padding/borders inside */
    margin-bottom: 60px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--border-color); 
}

.bio-intro .bio-left {
    flex: 0 0 40%;
}

.bio-intro .bio-left h2 {
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 900;
    margin: 0;
    line-height: 1;
    letter-spacing: -1px;
}

.bio-intro .bio-right {
    flex: 1;
}

.bio-intro .bio-right p {
    font-size: 18px;
    line-height: 1.6;
    font-weight: 300;
    margin: 0;
}

/* --- MINIMALIST TIMELINE --- */
.timeline {
    max-width: 800px;
    width: 100%;
    box-sizing: border-box; 
    position: relative;
    padding-left: 45px;
    border-left: 2px solid var(--border-color);
    margin-bottom: 40px;
}

.timeline-item {
    position: relative;
    margin-bottom: 60px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: -53px; /* Centered over the 2px border */
    top: 5px;
    width: 12px;
    height: 12px;
    background-color: var(--bg-color);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    transition: background-color 0.3s ease, transform 0.2s ease, border-color 0.3s ease;
}

/* Hover effects for the timeline dots */
.timeline-item:hover .timeline-dot {
    background-color: var(--text-color);
    border-color: var(--text-color);
    transform: scale(1.4);
}

.timeline-content h3 {
    margin: 0 0 5px 0;
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase;
}

.timeline-content h4 {
    margin: 0 0 15px 0;
    font-size: 14px;
    font-weight: 700;
    color: #888; 
    text-transform: uppercase;
    letter-spacing: 1px;
}

.timeline-content p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 300;
}

/* --- NEW BOTTOM MARQUEE --- */
.bottom-marquee {
    border-top: 1px solid var(--border-color);
    border-bottom: none; 
    margin-top: auto; 
    flex-shrink: 0; /* Prevents text squishing */
}

/* --- RESPONSIVE TIMELINE ADJUSTMENTS --- */
@media (max-width: 768px) {
    .bio-scroll-area {
        padding: 20px;
    }
    
    /* Stack the intro vertically and remove the bottom line on mobile */
    .bio-intro {
        flex-direction: column;
        gap: 20px;
        border-bottom: none; /* Removes the horizontal line */
        padding-bottom: 20px; /* Tightens up the space since the line is gone */
        margin-bottom: 40px;
    }

    /* Push the timeline right so dots don't get cut off */
    .timeline {
        padding-left: 30px; 
        margin-left: 15px; /* Adds breathing room on the left edge */
    }
    
    .timeline-dot {
        left: -38px; 
    }
}

/* --- BACK BUTTON --- */
.back-btn-container {
    width: 100%;
    display: flex;
    justify-content: center; /* MAGIC LINE: This perfectly centers the button */
    margin-top: 20px;        /* Gives it some breathing room below your content */
    margin-bottom: 5px;     /* Keeps it from touching the bottom border of the square */
}

.back-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    font-size: 16px;
    text-decoration: none;
    color: var(--text-color, black); /* Adapts to your theme */
    border: 2px solid var(--text-color, black);
    background-color: transparent;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-weight: bold;
}

/* The hover animation for the button */
.back-btn:hover {
    background-color: var(--text-color, black);
    color: var(--bg-color, white);
}

/* The sliding animation for the SVG arrow */
.back-btn svg {
    transition: transform 0.3s ease;
}

.back-btn:hover svg {
    transform: translateX(-6px); /* Slides the arrow backward! */
}