/* =========================================================
   PROJECTS PAGE
   Custom styling for projects.html
   ========================================================= */

:root {
    --project-bg: #080808;
    --project-text: #ffffff;
    --project-accent: #00ffee;
}


/* =========================================================
   TOP NAVIGATION
   ========================================================= */

.navbar {
    position: sticky;
    top: 0;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;

    padding: 1rem 2rem;

    background: rgba(8, 8, 8, 0.92);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    z-index: 10003;
}


/* Normal navigation links */

.navbar a {
    display: inline-block;

    color: var(--project-text) !important;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;

    border-bottom: 3px solid transparent;

    text-decoration: none;

    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        font-size 0.3s ease,
        text-shadow 0.3s ease;
}


/* Hovered link + current page */

.navbar a:hover,
.navbar a.active {
    color: var(--project-accent) !important;

    border-bottom: 3px solid var(--project-accent);

    font-size: 1.03rem;

    text-shadow:
        0 0 2px rgba(0, 255, 238, 0.75),
        0 0 5px rgba(0, 255, 238, 0.35);
}


/* =========================================================
   PROJECT GALLERY
   ========================================================= */

/* Make project titles easier to read */

#main .thumb > h2 {
    color: #ffffff;

    font-weight: 700;

    text-shadow:
        0 1px 4px rgba(0, 0, 0, 0.9),
        0 0 8px rgba(0, 0, 0, 0.7);
}


/* Smooth project tile effect */

#main .thumb {
    transition:
        opacity 1.25s ease-in-out,
        box-shadow 0.3s ease;
}


/* Cyan edge when hovering over a project */

#main .thumb:hover {
    box-shadow:
        inset 0 0 0 2px var(--project-accent),
        inset 0 0 20px rgba(0, 255, 238, 0.15);
}


/* =========================================================
   PROJECT POPUP
   ========================================================= */

.poptrox-popup {
    background: rgba(8, 8, 8, 0.96);
}


/* Project information area */

/* Project information area */

.poptrox-popup .caption {
    padding: 1.5rem 2rem 2rem;

    background:
        linear-gradient(
            to top,
            rgba(8, 8, 8, 0.98) 20%,
            rgba(8, 8, 8, 0.92) 70%,
            rgba(8, 8, 8, 0.55) 100%
        );

    /*
       Allows more room for longer project descriptions
       before an internal scrollbar is needed.
    */

    max-height: 68%;

    overflow-y: auto;

    box-sizing: border-box;
}


/* Project title inside popup */

.poptrox-popup .caption h2 {
    color: var(--project-accent);

    font-weight: 700;

    margin-bottom: 0.75rem;

    text-shadow:
        0 0 2px rgba(0, 255, 238, 0.65),
        0 0 5px rgba(0, 255, 238, 0.25);
}


/* Project description */

.poptrox-popup .caption p {
    color: #ffffff;

    line-height: 1.6;

    margin-bottom: 0.85rem;
}


/* =========================================================
   GITHUB PROJECT BUTTON
   ========================================================= */

.poptrox-popup .project-links {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}


/* Main GitHub button */

.poptrox-popup .project-links a {
    position: relative;

    display: inline-block;

    padding: 0.8rem 1.4rem;

    background: #080808;

    color: var(--project-accent) !important;

    border: 2px solid var(--project-accent);

    border-radius: 7px;

    font-weight: 700;

    letter-spacing: 0.03rem;

    text-decoration: none;

    text-shadow: none;

    box-shadow:
        0 0 6px rgba(0, 255, 238, 0.8),
        0 0 14px rgba(0, 255, 238, 0.45),
        inset 0 0 8px rgba(0, 255, 238, 0.12);

    overflow: visible;

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}


/* =========================================================
   MOVING LIGHT AROUND BUTTON BORDER
   ========================================================= */

/*
   Allows the light's angle to animate smoothly.
*/

@property --project-border-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}


/*
   Small white/yellow light that moves directly
   along the cyan border.
*/

.poptrox-popup .project-links a::before {
    content: "";

    position: absolute;

    inset: -5px;

    padding: 2px;

    border-radius: 10px;

    /*
       Nearly the entire outline is transparent.
       Only this short section becomes the moving light.
    */

    background:
        conic-gradient(
            from var(--project-border-angle),

            transparent 0deg,
            transparent 305deg,

            rgba(255, 215, 70, 0.05) 312deg,

            rgba(255, 215, 70, 0.35) 320deg,

            #ffd94a 327deg,

            #ffffff 334deg,

            #ffffff 338deg,

            #ffd94a 345deg,

            rgba(255, 215, 70, 0.35) 352deg,

            transparent 360deg
        );


    /*
       Removes the center of the pseudo-element,
       leaving only the thin border-shaped area.
    */

    -webkit-mask:
        linear-gradient(#ffffff 0 0) content-box,
        linear-gradient(#ffffff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    pointer-events: none;


    /*
       Glow attached only to the moving light.
    */

    filter:
        drop-shadow(0 0 2px rgba(255, 255, 255, 1))
        drop-shadow(0 0 4px rgba(255, 220, 80, 0.9))
        drop-shadow(0 0 7px rgba(255, 220, 80, 0.5));


    animation:
        project-border-light 3s linear infinite;
}


/*
   Moves the small light around the perimeter.
*/

@keyframes project-border-light {

    from {
        --project-border-angle: 0deg;
    }

    to {
        --project-border-angle: 360deg;
    }

}


/* =========================================================
   GITHUB BUTTON HOVER
   ========================================================= */

.poptrox-popup .project-links a:hover {
    background: var(--project-accent);

    color: #080808 !important;

    transform: translateY(-3px);

    box-shadow:
        0 0 8px var(--project-accent),
        0 0 18px rgba(0, 255, 238, 0.8),
        0 0 30px rgba(0, 255, 238, 0.45),
        inset 0 0 8px rgba(255, 255, 255, 0.25);
}


/*
   Make the border light move a little faster
   when the visitor hovers over the button.
*/

.poptrox-popup .project-links a:hover::before {
    animation-duration: 1.75s;
}


/* =========================================================
   POPUP SCROLLBAR
   ========================================================= */

.poptrox-popup .caption::-webkit-scrollbar {
    width: 8px;
}


.poptrox-popup .caption::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}


.poptrox-popup .caption::-webkit-scrollbar-thumb {
    background: var(--project-accent);

    border-radius: 10px;
}


/* =========================================================
   TABLET NAVIGATION
   ========================================================= */

@media screen and (max-width: 980px) {

    .navbar {
        gap: 1.5rem;

        padding-left: 1rem;
        padding-right: 1rem;
    }


    .navbar a {
        font-size: 0.85rem;
    }


    .navbar a:hover,
    .navbar a.active {
        font-size: 0.92rem;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 736px) {

    /* Navigation */

    .navbar {
        flex-wrap: wrap;

        gap: 0.5rem 1.2rem;

        padding: 0.75rem 1rem;
    }


    .navbar a {
        font-size: 0.8rem;
    }


    .navbar a:hover,
    .navbar a.active {
        font-size: 0.87rem;
    }


    /* -----------------------------------------------------
       Mobile project popup
       ----------------------------------------------------- */

    .poptrox-popup .caption {
        display: block !important;

        padding: 1.25rem;

        max-height: 50%;

        overflow-y: auto;

        background: rgba(8, 8, 8, 0.96);
    }


    .poptrox-popup .caption h2 {
        font-size: 1.15rem;
    }


    .poptrox-popup .caption p {
        font-size: 0.9rem;

        line-height: 1.5;
    }


    /* -----------------------------------------------------
       Mobile GitHub button
       ----------------------------------------------------- */

    .poptrox-popup .project-links {
        margin-top: 1.25rem;
    }


    .poptrox-popup .project-links a {
        padding: 0.65rem 1rem;

        font-size: 0.85rem;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .poptrox-popup .project-links a::before {
        animation: none;
    }


    .navbar a,
    #main .thumb,
    .poptrox-popup .project-links a {
        transition: none;
    }

}

/* =========================================================
   BOTTOM HOME / ABOUT BAR
   ========================================================= */

#header {
    bottom: 0;

    height: 4em;
    line-height: 4em;

    background: rgba(8, 8, 8, 0.96);

    border-top: 1px solid rgba(0, 255, 238, 0.65);

    box-shadow:
        0 -2px 10px rgba(0, 255, 238, 0.12),
        0 -5px 25px rgba(0, 255, 238, 0.08);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* Cam Lee Home */

#header h1 {
    color: #ffffff;
    font-weight: 500;
}


#header h1 strong {
    color: var(--project-accent);

    text-shadow:
        0 0 3px rgba(0, 255, 238, 0.7),
        0 0 7px rgba(0, 255, 238, 0.3);
}


#header h1 a {
    color: #ffffff !important;

    transition:
        color 0.25s ease,
        text-shadow 0.25s ease;
}


#header h1 a:hover {
    color: var(--project-accent) !important;

    text-shadow:
        0 0 3px rgba(0, 255, 238, 0.7),
        0 0 7px rgba(0, 255, 238, 0.3);
}


/* =========================================================
   ABOUT BUTTON
   ========================================================= */

#header nav > ul > li a {
    color: var(--project-accent) !important;

    background: rgba(0, 255, 238, 0.06);

    border-left: 1px solid rgba(0, 255, 238, 0.6);

    box-shadow:
        inset 0 0 10px rgba(0, 255, 238, 0.05);

    font-weight: 700;

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        box-shadow 0.25s ease;
}


/* Make the About icon cyan too */

#header nav > ul > li a.icon:before {
    color: var(--project-accent);
}


/* About button hover */

#header nav > ul > li a:hover {
    color: #080808 !important;

    background: var(--project-accent);

    box-shadow:
        0 0 8px rgba(0, 255, 238, 0.8),
        0 0 18px rgba(0, 255, 238, 0.45),
        inset 0 0 8px rgba(255, 255, 255, 0.2);
}


#header nav > ul > li a:hover.icon:before {
    color: #080808;
}


/* About button while About panel is open */

#header nav > ul > li a.active {
    color: #080808 !important;

    background: var(--project-accent);

    box-shadow:
        0 0 8px rgba(0, 255, 238, 0.8),
        0 0 18px rgba(0, 255, 238, 0.45);
}


#header nav > ul > li a.active.icon:before {
    color: #080808;
}


/* =========================================================
   KEEP BOTTOM BAR AT BOTTOM ON MOBILE
   The original template moves it to the top on phones.
   ========================================================= */

@media screen and (max-width: 736px) {

    body {
        padding: 0 0 4em 0;
    }


    #header {
        top: auto;
        bottom: 0;

        height: 4em;

        padding: 0 1em;
    }

}