/*
  Base styles for the game developer portfolio site.
  The design uses a dark, neon-inspired colour palette with clean typography
  to evoke a futuristic gaming aesthetic. Sections are clearly separated and
  spaced to make the content easy to scan. Responsive behaviours ensure the
  layout adapts gracefully on tablets and phones.
*/

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

html {
    scroll-behavior: smooth;
}

:root {
    /*
      Use a rich dark palette with muted accent colours. This palette
      keeps the overall feel in “dark mode” but avoids the neon look of the
      original. The primary colour is a subtle pinkish purple and the
      secondary colour is a muted green teal. Headings are nearly white
      while body text is a soft grey for comfortable reading.
    */
    --bg: #0d1017;
    --surface-light: #161b22;
    --surface-medium: #0d1117;
    --surface-dark: #010409;
    --primary: #c778dd;
    --secondary: #6bc7a5;
    --secondary-hover: rgba(107, 199, 165, 0.7);
    --heading: #e5e5e6;
    --text: #a9a9b2;
    --about-portrait-size: 240px;
    --max-width: 1200px;
    --transition: 0.3s ease;
    font-size: 16px;
}

body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    background-color: var(--bg);
    color: var(--text);
    overflow-x: hidden;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition);
}

    a:hover {
        color: var(--secondary-hover);
    }

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(6, 8, 13, 0.8);
    backdrop-filter: blur(6px);
    z-index: 1000;
    height: 60px;
    display: flex;
    align-items: center;
}

    .navbar .container {
        width: 100%;
        max-width: var(--max-width);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 1rem;
    }

    .navbar .logo {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1.05;
        white-space: normal; 
        color: var(--heading);
    }
        .navbar .logo .logo-name {
            font-size: inherit; 
        }

        .navbar .logo .logo-sub {
            font-size: 0.7em; /* relative to logo font-size */
            font-weight: 500;
            line-height: 1;
            margin-top: 0.1rem;
            color: var(--text);
            opacity: 0.9;
        }




    .navbar .nav-links {
        list-style: none;
        display: flex;
        gap: 1.5rem;
    }

        .navbar .nav-links li {
            list-style: none;
        }

        .navbar .nav-links a {
            font-weight: 500;
            color: var(--text);
            position: relative;
            padding: 0.25rem 0;
        }

            .navbar .nav-links a::after {
                content: '';
                position: absolute;
                left: 0;
                bottom: -2px;
                width: 0;
                height: 2px;
                background: var(--primary);
                transition: width var(--transition);
            }

            .navbar .nav-links a:hover::after {
                width: 100%;
            }

.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

    .menu-toggle span {
        width: 26px;
        height: 3px;
        background: var(--text);
        margin: 4px 0;
        transition: transform var(--transition), opacity var(--transition);
    }

/* Hero Section */
.hero {
    height: 100vh;
    background: url('../assets/images/hero.jpg') center/cover no-repeat;
    /* Fixed background gives a subtle parallax feel on desktop */
    background-attachment: fixed;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /*
      Override the default heading colour in the hero to ensure the text
      contrasts against the dark overlay and the lighter background image.
      Using white here keeps the content legible while the rest of the
      site uses the darker palette defined in :root.
    */
    color: #ffffff;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(6, 8, 13, 0.6);
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 0 1rem;
    /* Hero fade-in: start invisible and slightly lower */
    opacity: 0;
    transform: translateY(20px);
    /* Run once on page load to introduce the hero smoothly */
    animation: hero-fade-in 0.9s ease-out forwards;
    animation-delay: 0.2s;
}

    .hero-content h1 {
        font-size: 3rem;
        font-weight: 700;
        margin-bottom: 1rem;
        /* Explicitly set the hero heading colour to white so it remains legible
           when using the lighter background. Without this the inherited value
           from the root palette (dark blue) can make the heading hard to see. */
        color: #ffffff;
        /* Add a subtle shadow behind the text to ensure it stays readable
           against detailed backgrounds. The shadow is almost black and
           slightly blurred. */
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    }

        .hero-content h1 .highlight {
            color: var(--primary);
        }

    .hero-content p {
        font-size: 1.2rem;
        margin-bottom: 2rem;
        /* Use a lighter colour for the supporting text in the hero so it
           stands out on the overlay. */
        color: #f2f3f6;
        /* Shadow to improve contrast against busy backgrounds */
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    }

.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Buttons: make hover feel more "alive" with lift and glow */
.btn,
.btn-outline {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    /* Use one place for all animated properties so behaviour is predictable */
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), color var(--transition), transform var(--transition);
}

/* Solid main button */
.btn {
    background: var(--primary);
    color: #fff;
    border: 2px solid var(--primary);
}

    .btn:hover {
        background: var(--secondary-hover);
        border-color: var(--secondary-hover);
        /* Slight lift and glow on hover */
        transform: translateY(-2px);
        box-shadow: 0 0 20px rgba(108, 99, 255, 0.5);
    }

/* Outline button variant */
.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}

    .btn-outline:hover {
        background: var(--primary);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 0 20px rgba(108, 99, 255, 0.5);
    }

/* Section Styles */
section {
    padding: 5rem 0;
}

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1rem;
}

h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 1.5rem;
}

.section-subtitle {
    font-size: 1rem;
    margin-bottom: 2rem;
    color: var(--text);
    max-width: 600px;
}

/* About Section */
.about {
    background: var(--surface-light);
}

    .about p {
        margin-bottom: 2rem;
        max-width: 800px;
    }

.about-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
}

.about-content {
    min-width: 0;
}

.about-portrait {
    width: var(--about-portrait-size);
    height: var(--about-portrait-size);
    border-radius: 50%;
    border: 4px solid var(--primary);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-dark);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.about-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 900px) {
    .about-layout {
        grid-template-columns: 1fr;
        text-align: left;
        justify-items: center;
    }

    .about-portrait {
        margin: 0 auto;
    }
}

.skills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.skill h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--heading);
}

.skill ul {
    list-style: none;
}

.skill li {
    margin-bottom: 0.35rem;
    padding-left: 1rem;
    position: relative;
    font-size: 0.95rem;
}

    .skill li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0.4rem;
        width: 0.4rem;
        height: 0.4rem;
        background: var(--primary);
        border-radius: 50%;
    }

/* Projects Section */
.projects {
    background: var(--surface-medium);
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    position: relative;
    overflow: visible;
}

.project-card {
    position: relative;
    background: var(--surface-dark);
    border-radius: 8px;
    overflow: visible;
    /* Start with a subtle shadow */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    /* Border is transparent by default; we light it up on hover */
    border: 1px solid transparent;
    /* Smooth transform, shadow and border colour changes */
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

/* Featured project card: elevated but restrained emphasis without hover dependency. */
.project-card--featured {
    /* Slightly brighter surface keeps the same palette while lifting importance. */
    background: #252830;
    /* Thicker, tasteful border to signal "featured" at a glance. */
    border: 2px solid rgba(199, 120, 221, 0.25);
    /* Mild glow to separate from the grid without overpowering. */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}

    .project-card--featured::before {
        /* Low-contrast star points embedded in the border for a subtle motif. */
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 8px;
        padding: 2px;
        background:
            radial-gradient(2px 2px at 12px 10px, rgba(229, 229, 230, 0.35), transparent 60%),
            radial-gradient(1.5px 1.5px at 85% 12px, rgba(199, 120, 221, 0.3), transparent 60%),
            radial-gradient(1.5px 1.5px at 18px 85%, rgba(229, 229, 230, 0.25), transparent 60%),
            radial-gradient(2px 2px at 85% 85%, rgba(199, 120, 221, 0.25), transparent 60%);
        pointer-events: none;
        /* Mask confines the star points to the border thickness. */
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        z-index: 0;
    }

    .project-card--featured > * {
        /* Keep content above the decorative border layer. */
        position: relative;
        z-index: 1;
    }

    .project-card--featured:hover {
        /* Optional hover lift without removing the featured baseline. */
        border-color: rgba(199, 120, 221, 0.35);
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.65);
    }

    .project-card:hover {
        /* Slightly stronger lift than before to feel more reactive */
        transform: translateY(-6px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.7);
        border-color: var(--primary);
        z-index: 10;
    }

    .project-card:focus-within {
        z-index: 10;
    }

    .project-card img {
        width: 100%;
        height: 160px;
        object-fit: cover;
        border-radius: 8px 8px 0 0;
    }

.project-info {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .project-info h3 {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: var(--heading);
    }

    .project-info p {
        font-size: 0.9rem;
        line-height: 1.4;
        color: var(--text);
        margin-bottom: 1rem;
        flex-grow: 1;
    }

.project-links {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap; /* optional: prevents overflow if you ever add more links */
}

    .project-links a {
        display: inline-flex; 
        align-items: center;
        gap: 0.5rem; 
        width: auto; 
        height: auto; 
        white-space: nowrap; 
        color: var(--primary);
        transition: color var(--transition);
    }

        .project-links a:hover {
            color: var(--secondary-hover);
        }

    .project-links svg {
        width: 24px;
        height: 24px;
        flex: 0 0 24px; /* icon stays 24px, text gets the rest */
        fill: currentColor;
    }

.project-status {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--secondary);
    border: 1px solid var(--secondary);
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    white-space: nowrap;
}

.project-popover {
    position: absolute;
    top: 1rem;
    left: calc(100% + 1rem);
    width: clamp(19rem, 28vw, 24rem);
    padding: 1.25rem;
    background: rgba(13, 17, 23, 0.98);
    border: 1px solid rgba(199, 120, 221, 0.45);
    border-radius: 12px;
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition);
    z-index: 20;
}

.project-popover--left {
    left: auto;
    right: calc(100% + 1rem);
}

.project-popover h4 {
    color: var(--heading);
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}

.project-popover p {
    font-size: 0.9rem;
    color: var(--text);
    margin-bottom: 0.75rem;
}

.project-popover__images {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.project-popover__images img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Single-media variant: one wide gif/screenshot instead of the 2-column grid */
.project-popover__images--single {
    grid-template-columns: 1fr;
}

    .project-popover__images--single img {
        height: auto;
    }

.project-popover__details {
    list-style: none;
    display: grid;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text);
}

.project-popover__details li::before {
    content: '•';
    color: var(--primary);
    margin-right: 0.4rem;
}

.project-card:hover .project-popover,
.project-card:focus-within .project-popover {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* Filled icons (GitHub, external) */
.icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
    flex: 0 0 24px;
}

/* Outline icons (LinkedIn + mail) */
.icon-stroke {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 24px;
}



/* Experience Section */
.experience {
    background: var(--surface-dark);
}

.exp-list {
    display: grid;
    gap: 1.25rem;
    max-width: 860px;
}

.exp-item {
    display: grid;
    grid-template-columns: 168px 1fr;
    gap: 1.5rem;
    background: var(--surface-light);
    border: 1px solid transparent;
    border-left: 3px solid rgba(199, 120, 221, 0.4);
    border-radius: 8px;
    padding: 1.4rem 1.6rem;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

    .exp-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55);
        border-color: var(--primary);
    }

.exp-item--current {
    background: #1b2230;
    border-left-color: var(--secondary);
}

.exp-period {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.exp-dates {
    color: var(--heading);
    font-weight: 600;
    font-size: 0.9rem;
}

.exp-place {
    color: var(--text);
    font-size: 0.8rem;
}

.exp-badge {
    display: inline-block;
    width: fit-content;
    margin-top: 0.45rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--secondary);
    border: 1px solid var(--secondary);
    border-radius: 999px;
    padding: 0.12rem 0.55rem;
}

.exp-body h3 {
    color: var(--heading);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.exp-company {
    color: var(--primary);
    font-weight: 600;
}

.exp-body > p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.85rem;
}

.exp-points {
    list-style: none;
    display: grid;
    gap: 0.4rem;
    margin-bottom: 0.95rem;
}

    .exp-points li {
        position: relative;
        padding-left: 1rem;
        font-size: 0.88rem;
        line-height: 1.45;
    }

        .exp-points li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.55rem;
            width: 0.4rem;
            height: 0.4rem;
            background: var(--primary);
            border-radius: 50%;
        }

.exp-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

    .exp-tags li {
        font-size: 0.72rem;
        color: var(--text);
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 999px;
        padding: 0.16rem 0.6rem;
    }

@media (max-width: 640px) {
    .exp-item {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .exp-period {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.6rem;
    }
}

/* Resume Section */
.resume {
    background: var(--surface-medium);
    text-align: center;
}

    .resume p {
        margin-bottom: 2rem;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

/* Contact Section */
.contact {
    background: var(--surface-light);
    text-align: center;
}

    .contact p {
        max-width: 600px;
        margin: 0 auto 2rem;
    }

.contact-links {
    list-style: none; 
    padding-left: 0; 
    margin: 0;
}


.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

    .social-icons a {
        color: var(--primary);
        transition: color var(--transition);
    }

        .social-icons a:hover {
            color: var(--secondary-hover);
        }

    .social-icons svg {
        width: 32px;
        height: 32px;
        fill: currentColor;
    }

.contact-info p {
    color: var(--text);
}

/* Footer */
footer {
    background: var(--surface-dark);
    text-align: center;
    padding: 1rem 0;
    font-size: 0.8rem;
    color: var(--text);
}

/* Scroll reveal:
   Elements with class .reveal start hidden and slide up when .in-view is added.
   .in-view is meant to be toggled by a small IntersectionObserver in script.js. */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .reveal.in-view {
        opacity: 1;
        transform: translateY(0);
    }

/* Hero keyframes for initial fade-in */
@keyframes hero-fade-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .navbar .nav-links {
        position: fixed;
        top: 60px;
        right: 0;
        background: rgba(6, 8, 13, 0.95);
        flex-direction: column;
        width: 200px;
        transform: translateX(100%);
        height: calc(100vh - 60px);
        padding: 2rem 1rem;
        gap: 1rem;
        transition: transform var(--transition);
    }

    .navbar .logo {
        font-size: 1rem;
        white-space: normal; /* allow wrapping */
        line-height: 1.2;
        max-width: 70vw; /* prevent overflow */
    }
    .navbar .logo-sub {
        font-size: 0.65rem;
        font-weight: 500;
        color: var(--text);
    }

        .navbar .nav-links.active {
            transform: translateX(0);
        }

    .menu-toggle {
        display: flex;
    }
}

@media (max-width: 900px) {
    .project-popover {
        position: static;
        width: auto;
        margin: 1rem 1rem 1.5rem;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
}

/*
  Hero-scoped canvas for animated falling stars and fireworks.
  Positioned inside the hero so it scrolls away with the hero background.
*/
#star-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/*
  Star counter: displays the number of stars collected. Scoped to the hero
  so it only appears while the hero is visible.
*/
.star-counter {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    z-index: 2;
    font-size: 0.95rem;
    color: var(--heading);
    background: rgba(0, 0, 0, 0.4);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.hero--stars-hidden #star-canvas,
.hero--stars-hidden .star-counter {
    opacity: 0;
    visibility: hidden;
}