/* 
=========================================================
IMPORTS
=========================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,200;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,600;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* 
=========================================================
CSS VARIABLES — DESIGN TOKENS
=========================================================
 */

:root {
    /* Colors */
    --bg-primary:     #121212;
    --bg-secondary:   #242424;
    --bg-nav:         #12121239;
    --text-primary:   #FAFAFA;
    --text-secondary: #d6dcd7;
    --text-paragraph: #a1a5a1;
    --text-muted:     #7d807e;
    --gold:           #fcc140;
    --gold-muted:     #d29001;
    --blue:           #0098d9;
    --blue-muted:     #25779a;
    --teal:           #00838F;
    --teal-muted:     #1b494d;

    /* Typography */
    --font-lato:      'Lato', sans-serif;
    --font-roboto:    'Roboto', sans-serif;
    --weight-fine:    100;
    --weight-thin:    200;
    --weight-light:   300;
    --weight-regular: 400;
    --weight-medium:  600;
    --weight-bold:    800;

    /* Spacing */
    --max-width:   1400px;
    --nav-height:  65px;
    --section-gap: 2rem;

    /* Mobile */
    --max-width-mobile:   92%;
    --nav-height-mobile:  60px;
    --section-gap-mobile: 1rem;
}

/* 
=========================================================
RESET & BASE
=========================================================
*/

*, *::before, *::after {
    margin:  0; /* Margin is space OUTSIDE the element, between it and neighboring elements */
    padding: 0; /* Padding is space INSIDE the element, between its border and its content */
}

html {
    font-size:       14px; /* Scale down, default is 16px */
    scroll-behavior: smooth;
}

body {
    color:            var(--text-primary);
    font-size:        16px;
    transition:       background-color 0.3s ease, color 0.3s ease;
    font-family:      var(--font-lato);
    font-weight:      var(--weight-light);
    line-height:      1.7rem;
    background-color: var(--bg-primary);
}

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

ul { list-style: none; }

img {
    display:   block;
    max-width: 100%;
}

/* 
=========================================================
TYPOGRAPHY
=========================================================
*/

/* Landing - Name */
h1 {
    color:          var(--text-primary);
    font-size:      3rem;
    font-weight:    var(--weight-regular);
    font-family:    var(--font-lato);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* Landing - Intro */
h2 {
    color:          var(--text-secondary);
    font-size:      1.5rem;
    font-weight:    var(--weight-light);
    font-family:    var(--font-lato);
    letter-spacing: 0.15em;
}

/* Detail Heading */
h3 {
    font-size:   2.5rem;
    font-weight: var(--weight-regular);
    font-family: var(--font-lato);
}

h4 {
    font-size:      1.3rem;
    font-weight:    var(--weight-light);
    font-family:    var(--font-lato);
    text-transform: uppercase;
}

/* Container rules */
.text-detail {
    min-width:      0;      /* Prevents flex items from overflowing the container, e.g. outgoing-link is anchored at bottom of About container */
    flex-direction: column; /* Stack my children vertically */
}

/* Paragraph specific rules */
.text-detail p {
    color:          var(--text-paragraph);
    font-size:      1.3rem;
    font-family:    var(--font-roboto);
    line-height:    1.5rem;
    font-weight:    var(--weight-light);
    margin-bottom:  1rem;
    letter-spacing: 0.020em;
}

/* Target only the list in text */
.text-list {
    color:               var(--text-paragraph);
    font-family:         var(--font-roboto);
    font-weight:         var(--weight-light);
    line-height:         1.5rem;
    padding-left:        2rem;            /* Indents the list */
    margin-bottom:       1rem;
    letter-spacing:      0.020em;
    list-style-type:     disc !important; /* Force bullets to show */
    list-style-position: outside;         /* Keeps bullets aligned with text */
}

.text-list li {
    font-size:      1.3rem;
    letter-spacing: 0.020em;
}

/* Text style */
.card-meta {
    color:          var(--text-secondary);
    margin:         0.5rem 0 0.5rem;
    font-size:      1rem;
    font-weight:    var(--weight-fine);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Bubble wrapper around block of content */
.content-card {
    padding:             2rem;
    box-shadow:          0 8px 20px rgb(0, 0, 0); /* Offset: horizontal, vertical, blur radius / rgba(0, 0, 0) = color and opacity */
    border-top:          1px solid rgba(255, 255, 255, 0.103);
    border-left:         1px solid rgba(255, 255, 255, 0.04);
    border-right:        1px solid rgba(255, 255, 255, 0.04);
    border-bottom:       1px solid rgba(0, 0, 0, 0.5);
    border-radius:       20px;
    background-size:     cover;
    background-position: center;
}

/* 
=========================================================
LAYOUT
=========================================================
*/

main {
    margin:    0 auto;
    padding:   calc(var(--nav-height) + 3rem) 2rem var(--section-gap);
    max-width: var(--max-width);
}

.grid-main {
    padding-top:    calc(10px);
    padding-bottom: calc(60px);
}

section { margin-bottom: var(--section-gap); }

.section-divider {
    margin:     5rem 0;
    border:     none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.outgoing-link { color: var(--text-secondary); }
.outgoing-link:hover { color: var(--gold); }

.outgoing-link-bubble {
    /* Layout */
    border:        none;
    cursor:        pointer;
    padding:       0.3rem 0.8rem 0.30rem; /* top, sides, bottom */
    outline:       none;
    font-weight:   var(--weight-regular);
    border-radius: 14px;

    /* Typography */
    color:           var(--text-primary);
    font-size:       1.25rem;
    text-align:      center;
    font-weight:     var(--weight-regular); 
    font-family:     var(--font-lato);
    text-transform:  uppercase;
    letter-spacing:  0.1em;
    text-decoration: none;

    /* Visual */
    background: var(--gold-muted);
    box-shadow: 0 8px 20px rgb(0, 0, 0);
}

.outgoing-link-bubble:hover {
    color:      var(--text-primary);
    transform:  translateY(2px);
    background: var(--gold);
}

.github-mobile { display: none; }
.link-wrapper { margin-top: 1.4rem; }

.card {
    display:       block;
    position:      relative;
    overflow:      hidden;
    box-shadow:    0 8px 20px rgb(0, 0, 0);
    border-top:    1px solid rgba(255, 255, 255, 0.103);
    border-left:   1px solid rgba(255, 255, 255, 0.04);
    border-right:  1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    aspect-ratio:  1 / 1; /* Square! */
    border-radius: 20px;
}

.card img {
    width:      100%;
    height:     100%;
    opacity:    0.75;
    object-fit: cover;
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.card:hover img {
    filter:    brightness(1); /* Brighten on hover */
    opacity:   1;
    transform: scale(1.05);   /* Zoom on hover */
}

.card:hover h2 { text-shadow: 0 8px 32px #000000; }

.card-overlay {
    left:       50%;
    bottom:     50%;
    position:   absolute;
    transform:  translate(-50%, 50%);
    text-align: center;
}

.card-overlay h2 {
    color:          var(--text-primary);
    font-size:      2.5rem;
    text-shadow:    0 8px 32px #000000;
    font-weight:    var(--weight-light);
    letter-spacing: 0.15em;
}

.card-overlay .card-meta {
    color:  var(--text-primary);
    margin: 0.25rem 0 0;
}

.mobile-break { display: none; }

/* 
=========================================================
NAV
=========================================================
*/

header {
    top:                     0;
    left:                    0;
    right:                   0;
    width:                   100%;
    height:                  var(--nav-height);
    z-index:                 100;
    position:                fixed;
    align-items:             center;
    border-bottom:           none;
    backdrop-filter:         blur(12px);
    background-color:        var(--bg-nav);
    -webkit-backdrop-filter: blur(12px);
}

nav {
    gap:         2rem;
    margin:      0 auto;
    width:       var(--max-width);
    height:      100%;
    display:     flex; /* Turns the element into a flex container; children are arranged in a row or column and can be aligned, spaced, and sized using flex properties */
    padding:     0 2rem;
    align-items: center;
}

.nav-home {
    color:       var(--gold);
    font-size:   1.5rem;
    font-weight: var(--weight-regular);
}

.nav-home:hover {
    color:     var(--blue);
    transform: translateY(2px);
}

.nav-home-inactive { color: var(--text-secondary); }

nav ul {
    gap:         1.5rem;
    display:     flex;
    align-items: right;
    margin-left: auto;
}

/* Nav bar, right side */
nav ul li a {
    color:          var(--text-secondary);
    font-size:      1.25rem;
    transition:     color 0.2s ease;
    font-weight:    var(--weight-light);
    margin-right:   auto;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

nav ul li a:hover {
    color:       var(--text-primary);
    font-weight: var(--weight-regular);
}

.nav-active {
    color:       var(--gold);
    font-weight: var(--weight-regular);
}

/* 
=========================================================
CONTACT LIST (HEADER)
=========================================================
*/

.nav-icons {
    gap:         1.5rem;
    display:     flex;
    align-items: right;
}

.nav-icons a {
    color:      var(--text-secondary);
    font-size:  1.5rem;
    transition: color 0.2s ease;
}

.nav-icons a:hover {
    color:     var(--blue);
    transform: translateY(2px);
}

/* Hide mobile icons */
.nav-icons-mobile { display: none; }
/* Hide mobile cheeseburger */
.nav-hamburger { display: none; }

/* 
=========================================================
LANDING
=========================================================
*/

#landing {
    width:       100%;
    height:      100vh; /* e.g. 100% of the screen height */
    display:     flex;
    overflow:    visible;
    position:    relative;
    align-items: center;
}

.landing-content {
    gap:             4rem;
    width:           var(--max-width);
    margin:          0 auto;
    display:         flex;
    padding:         0 2rem;
    align-items:     center;
    justify-content: center;
}

.landing-avatar img {
    width:         260px;
    border-radius: 50%;
}

.landing-content-card {
    padding:             2rem;
    box-shadow:          0 8px 20px rgb(0, 0, 0);
    border-top:          1px solid rgba(255, 255, 255, 0.103);
    border-left:         1px solid rgba(255, 255, 255, 0.04);
    border-right:        1px solid rgba(255, 255, 255, 0.04);
    border-bottom:       1px solid rgba(0, 0, 0, 0.5);
    border-radius:       20px;
    background-size:     cover;
    background-position: center;
}

.landing-text {
    gap:            1.5rem;
    display:        flex;
    flex-direction: column;
}

/* Landing - Name */
.landing-text h1 {
    color:          var(--text-primary);
    font-size:      3rem;
    font-weight:    var(--weight-regular);
    font-family:    var(--font-lato);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* Landing - Intro */
.landing-text h2 {
    color:          var(--text-secondary);
    font-size:      1.5rem;
    font-weight:    var(--weight-fine);
    font-family:    var(--font-lato);
    letter-spacing: 0.15em;
}

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

#about {
    width:          100%;
    display:        flex;
    position:       relative;
    min-height:     100vh;
    align-items:    center;
    padding-bottom: 18rem;
}

/* Outer card — inherits content-card styles */
.about-card {
    gap:            2rem;
    width:          var(--max-width);
    margin:         0 auto;
    display:        flex;
    flex-direction: column;
}

/* Top row: Photo | Bio | Tools */
.about-top {
    gap:         2rem;
    display:     flex;
    align-items: flex-start;
}

/* Thin divider between top and bottom */
.about-divider {
    margin:     0.5rem; 
    border:     none;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* Hide mobile divider */
.about-divider-mobile { display: none; }

/* Thin divider between Bio | Tools */
.about-divider-vertical {
    width:       1px;
    height:      auto;
    border:      none;
    background:  rgba(255, 255, 255, 0.07);
    align-self:  stretch;  /* Stretches full height of the flex row */
    flex-shrink: 0;
}

/* Bottom row: Affiliations marquee */
.about-bottom {
    gap:            0.75rem;
    display:        flex;
    flex-direction: column;
}

.about-bio {
    flex:          1;
    max-width:     635px; /* Prevent bio from stretching too wide */
    padding-right: 2rem;
}

.about-photo {
    width:           280px;
    filter:          grayscale(100%);
    object-fit:      cover;
    box-shadow:      0 8px 20px rgb(0, 0, 0);
    flex-shrink:     0; /* 0: the item refuses to shrink, it always keeps its defined size, 1: the item will shrink proportionally with other items when space is tight */
    border-radius:   20px;
    object-position: center top;
}

/* Tools column */
.about-tools {
    width:       300px;
    flex-shrink: 0;
}

.about-tools-label {
    color:          var(--text-muted);
    font-size:      1.5rem;
    line-height:    2rem;
    margin-bottom:  0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* 
=========================================================
TOOLS
=========================================================
*/

/* Bubble grid */
.tools-grid {
    gap:                   16px;
    display:               grid; /* Turns the element into a grid container; children are arranged in rows and columns defined by grid-template-columns and grid-template-rows */
    padding-top:           1rem;
    justify-content:       start; 
    grid-template-columns: repeat(4, 60px);
}

/* Individual tool bubble */
.tool-bubble {
    width:           42px;
    height:          42px;
    border:          1px solid rgba(255, 255, 255, 0.07);
    display:         flex;
    padding:         8px;
    position:        relative;
    transition:      transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    background:      var(--blue-muted);
    box-shadow:      0 8px 20px rgb(0, 0, 0);
    align-items:     center;
    border-radius:   10px;
    justify-content: center;
}

.tool-bubble img {
    width:      100%;
    height:     100%;
    filter:     brightness(0) invert(1); /* Low brightness, inverted */
    opacity:    0.5;                     /* Muted */
    object-fit: contain;
    transition: opacity 0.2s ease;
}

.tool-bubble:hover {
    transform:  translateY(2px);
    background: var(--blue);
}

.tool-bubble:hover img { opacity: 1; }

.tool-bubble::after {
    left:           50%;
    color:          var(--text-secondary);
    bottom:         calc(100% + 4px);
    border:         1px solid var(--text-muted);
    content:        attr(data-tooltip);
    padding:        0rem 0.3rem;
    opacity:        0;
    position:       absolute;
    font-size:      0.85rem;
    transform:      translateX(-50%);
    transition:     opacity 0.2s ease;
    background:     var(--bg-secondary);
    line-height:    1.3rem;
    font-family:    var(--font-lato);
    white-space:    nowrap;
    border-radius:  4px;
    letter-spacing: 0.05em;
    pointer-events: none;
}

.tool-bubble:hover::after { opacity: 1; }

/* 
=========================================================
AFFILIATIONS
=========================================================
*/

/* Clip window — logos scroll inside here */
.affiliations-wrapper {
    width:      952px;
    margin:     0 auto;          /* Center the strip */
    overflow:   hidden;
    position:   relative;
    mask-image: linear-gradient( /* Fade edges */
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
}

/* The moving track — CSS animation */
.affiliations-track {
    gap:         1rem;
    width:       max-content;
    display:     flex;
    animation:   marquee-scroll 45s linear infinite;
    align-items: center;
}

.affiliations-track a {
    display:     block;
    flex-shrink: 0;
}

.affiliations-track img {
    width:      120px;
    height:     80px;
    filter:     grayscale(100%);
    opacity:    0.4;
    max-width:  unset;
    object-fit: contain;
    transition: filter 0.25s ease, opacity 0.25s ease;
}

.affiliations-track img:hover {
    filter:  grayscale(0%);
    opacity: 1;
}

@keyframes marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* -50% because track is doubled */
}

.about-affiliations-label {
    color:          var(--text-muted);
    font-size:      1.5rem;
    text-align:     center;
    margin-bottom:  0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* 
=========================================================
EXPERIENCE MAIN
=========================================================
*/

#experience-landing {
    width:       100%;
    display:     flex;
    overflow:    visible;
    position:    relative;
    min-height:  100vh;
    align-items: flex-start;
    padding-top: calc(var(--nav-height) + 2rem); /* Sits just below nav on click */
}

#experience-grid {
    gap:                   5rem;
    margin:                0 auto;
    display:               grid;
    padding:               0rem 0rem 1.5rem; 
    max-width:             var(--max-width);
    grid-template-columns: repeat(4, 1fr);
}

#experience-grid .card img {
    width:      100%;
    height:     100%;
    opacity:    0.75;
    object-fit: cover;
    transition: opacity 0.2s ease, filter 0.2s ease;
}

#experience-grid .card:hover img {
    cursor:    pointer;
    opacity:   1;
    transform: scale(1.05);
}

/* Active card — full color, gold border bottom */
.card-active img {
    filter:  grayscale(0%) !important;
    opacity: 1 !important;
}

.card-active { border-bottom: 2px solid var(--gold); }
/* Inactive cards — grayscale, dimmed */
.card-inactive img { filter: grayscale(100%) !important; }

/* 
=========================================================
EXPERIENCE / PROJECTS - DETAIL MEDIA GRID
=========================================================
*/

.detail-content-card {
    padding:             2rem;
    box-shadow:          0 8px 20px rgb(0, 0, 0);
    border-top:          1px solid rgba(255, 255, 255, 0.103);
    border-left:         1px solid rgba(255, 255, 255, 0.04);
    border-right:        1px solid rgba(255, 255, 255, 0.04);
    border-bottom:       1px solid rgba(0, 0, 0, 0.5);
    border-radius:       20px;
    background-size:     cover;
    background-position: center;
}

/* Images */
.media-item {
    display:       block;
    position:      relative;
    overflow:      hidden;
    background:    var(--bg-secondary);
    box-shadow:    0 8px 20px rgb(0, 0, 0);
    border-top:    1px solid rgba(255, 255, 255, 0.103);
    border-left:   1px solid rgba(255, 255, 255, 0.04);
    border-right:  1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 2%;
    aspect-ratio:  1 / 1;
}

.media-item img {
    width:           100%;
    height:          100%;
    transition:      filter 0.2s ease, transform 0.2s ease;
    object-position: center;
}

.media-item:hover img {
    filter:    brightness(0.5);
    transform: scale(1.05);
}

/* Video only */
.media-item-video {
    display:       block;
    position:      relative;
    overflow:      hidden;
    background:    var(--bg-secondary);
    box-shadow:    0 8px 20px rgb(0, 0, 0);
    border-top:    1px solid rgba(255, 255, 255, 0.103);
    border-left:   1px solid rgba(255, 255, 255, 0.04);
    border-right:  1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 2%;
    aspect-ratio:  1 / 1;
}

.media-item-video img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: filter 0.2s ease, transform 0.2s ease;
}

.media-item-video:hover { filter: brightness(0.5); }

/* Play button overlay for video */
.media-play {
    top:             50%;
    left:            50%;
    color:           var(--text-primary);
    width:           60px;
    height:          40px;
    display:         flex;
    position:        absolute;
    font-size:       2rem;
    transform:       translate(-50%, -50%);
    background:      rgba(0, 0, 0, 0.55);
    transition:      background 0.2s ease;
    align-items:     center;
    border-radius:   4%;
    justify-content: center;
}

.media-item:hover .media-play { background: rgba(0, 0, 0, 0.85); }

.media-yt-link {
    right:      0.75rem;
    color:      var(--text-secondary);
    bottom:     0.75rem;
    opacity:    0.8;
    z-index:    2;
    position:   absolute;
    font-size:  1.5rem;
    transition: opacity 0.2s ease;
}

.media-yt-link:hover {
    color:   var(--text-primary);
    opacity: 1.5;
}

/* 
=========================================================
EXPERIENCE / PROJECTS - DETAIL PANEL
=========================================================
*/

/* Hidden by default — expands on card click */
.experience-detail {
    width:      100%;
    display:    none; /* Removes the element from the page entirely; takes up no space, invisible, inaccessible */
    margin-top: 2rem;
}

/* Element takes up the full width of its parent and stacks vertically; default for elements like div, p, h1 */
.experience-detail.open { display: block; }
/* Individual panels — only active one is shown */
.experience-detail-panel { display: none; }
.experience-detail-panel.active { display: block; }

/* Hidden by default — expands on card click */
.projects-detail {
    width:      100%;
    display:    none;
    margin-top: 2rem;
}

.projects-detail.open { display: block; }
/* Individual panels — only active one is shown */
.projects-detail-panel { display: none; }
.projects-detail-panel.active { display: block; }

.detail-header {
    text-align:    left;
    margin-bottom: 1.5rem;
}

.detail-header h3 {
    color:       var(--text-primary);
    line-height: 2rem;
}

.detail-header h4 {
    color:       var(--text-muted);
    line-height: 2.5rem;
}

/* Text left, media right */
.detail-body {
    gap:            1rem;
    width:          100%;
    display:        flex;
    align-items:    flex-start;
    flex-direction: row; /* Two columns, side by side */
}

/* 
flex-grow:   1 — the element can grow to fill available space 
flex-shrink: 1 — the element can shrink if space is tight
flex-basis:  0 — the element starts with a base size of 0 before growing 
*/

.detail-body .text-detail {
    flex:      1 1 0;
    min-width: 0;
}

/* Tools, outgoing links, media tiles */
.detail-right {
    gap:            1rem;
    width:          55%;      /* Let content determine width either side */
    display:        flex;
    flex-shrink:    0;
    align-items:    flex-end; /* Pushes everything to the right */
    flex-direction: column;
}

/* Media grid to the right of text */
.detail-media {
    gap:                   1rem;
    width:                 100%;
    display:               grid;
    align-content:         start;
    justify-content:       end;
    grid-template-columns: repeat(auto-fit, minmax(160px, 200px)); /* Cap tile max width */
}

.detail-tags-row {
    gap:             0.5rem;
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: flex-end; /* Tools + Outgoing link bubble in one row on the right */
}

/* For Experience and Projects details (tools and languages) */
.detail-tags {
    gap:       0.5rem;
    display:   flex;
    flex-wrap: wrap; /* Allows flex children to wrap onto a new line when they don't fit in a single row */
}

.detail-tag {
    color:          var(--text-muted);
    border:         1px solid rgba(255, 255, 255, 0.18);
    opacity:        0.7;
    padding:        0.15rem 0.65rem;
    font-size:      1.1rem;
    background:     var(--bg-secondary);
    box-shadow:     0 8px 20px rgb(0, 0, 0);
    font-family:    var(--font-lato);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* 
=========================================================
SCEC DETAIL - GRID
=========================================================
*/

.detail-right-scec {
    gap:            1rem;
    width:          32%; /* A little less room here */
    display:        flex;
    flex-shrink:    0;
    align-items:    flex-end;
    flex-direction: column;
}

.detail-media-scec {
    gap:                   1rem;
    width:                 100%;
    display:               grid;
    align-content:         start;
    justify-content:       end;
    grid-template-columns: repeat(2, minmax(170px, 170px));
}

/* 
=========================================================
ACCESS DETAIL - COMPARISON SLIDER
=========================================================
*/

.comparison-slider {
    cursor:        ew-resize;
    position:      relative;
    overflow:      hidden;
    aspect-ratio:  1 / 1;
    border-radius: 2%;
}

.comparison-before,
.comparison-after {
    top:      0;
    left:     0;
    width:    100%;
    height:   100%;
    position: absolute;
}

.comparison-before img,
.comparison-after img {
    width:      100%;
    height:     100%;
    display:    block;
    object-fit: cover;
}

.comparison-after { clip-path: inset(0 50% 0 0); }

.comparison-divider {
    top:            0;
    left:           50%;
    width:          2px;
    height:         100%;
    position:       absolute;
    transform:      translateX(-50%);
    background:     var(--text-primary);
    pointer-events: none;
}

.comparison-range {
    top:      0;
    left:     0;
    width:    100%;
    height:   100%;
    cursor:   ew-resize;
    margin:   0;
    opacity:  0;
    position: absolute;
}

.comparison-label {
    color:          var(--text-primary);
    bottom:         0.5rem;
    padding:        0.15rem 0.5rem;
    position:       absolute;
    font-size:      0.85rem;
    background:    rgba(0, 0, 0, 0.5);
    font-family:    var(--font-lato);
    font-weight:    var(--weight-regular);
    border-radius:  4px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
}

.comparison-label-left  { left:  0.5rem; }
.comparison-label-right { right: 0.5rem; }

/* 
=========================================================
PROJECTS MAIN
=========================================================
*/

#projects-landing {
    width:       100%;
    height:      auto;
    display:     flex;
    overflow:    visible;
    position:    relative;
    min-height:  100vh;
    align-items: flex-start;
    padding-top: 3.5rem;
}

#projects-grid {
    gap:                   1rem;
    margin:                0 auto;
    display:               grid;
    padding:               3rem 0rem 1.5rem;
    max-width:             var(--max-width);
    grid-template-columns: repeat(5, 1fr);
}

#projects-grid .card img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.4s ease, filter 0.4s ease;
}

#projects-grid .card:hover img {
    cursor:    pointer;
    filter:    brightness(1); /* Brighten on hover */
    transform: scale(1.05);   /* Zoom on hover */
}

#projects-card-last-mobile { display: none; }

/* 
=========================================================
PUBLICATIONS
=========================================================
*/

#publications {
    width:       100%;
    height:      100vh;
    display:     flex;
    overflow:    visible;
    position:    relative;
    align-items: center;
}

/* 
=========================================================
CONTACT LIST (FOOTER)
=========================================================
*/

.footer-icons {
    gap:             1.75rem; 
    margin:          0 auto;
    display:         flex;
    padding:         10rem 0rem 1rem; 
    align-items:     center;
    justify-content: center;
}

.footer-icons a {
    color:      var(--text-secondary);
    font-size:  1.75rem;
    transition: color 0.2s ease;
}

.footer-icons a:hover {
    color:     var(--blue);
    transform: translateY(2px);
}

.footer-copyright {
    margin:          0 auto;
    display:         flex;
    padding:         0rem 0rem 1rem; 
    align-items:     center;
    justify-content: center;
}

.footer-copyright p {
    color:       var(--text-muted);
    font-size:   1.20rem;
    align-items: center;
}

/* 
=========================================================
FUN FEATURES
=========================================================
*/

.landing-scroll-indicator {
    gap:            0.5rem;
    left:           50%;
    bottom:         2.5rem;
    opacity:        1;
    display:        flex;
    position:       absolute;
    transform:      translateX(-50%);
    transition:     opacity 0.4s ease;
    align-items:    center;
    flex-direction: column;
}

.landing-scroll-indicator.hidden {
    opacity:        0.4;
    pointer-events: none;
}

.about-scroll-indicator {
    gap:            0.5rem;
    left:           50%;
    bottom:         2.5rem;
    opacity:        1;
    display:        flex;
    position:       absolute;
    transform:      translateX(-50%);
    transition:     opacity 0.4s ease;
    align-items:    center;
    flex-direction: column;
}

.about-scroll-indicator.hidden {
    opacity:        0.4;
    pointer-events: none;
}

.scroll-line {
    width:      0.5px;
    height:     48px;
    animation:  bounce-line 1.6s ease-in-out infinite;
    background: var(--text-muted);
}

/* Bottom line bounces only */
.scroll-line:first-child { animation: none; }

.scroll-text {
    color:          var(--text-muted);
    font-size:      1rem;
    transition:     transform 0.2s ease;
    font-family:    var(--font-lato);
    font-weight:    var(--weight-fine);
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

.scroll-text:hover {
    color:  var(--gold);
    cursor: default;
}

/* Base state */
.explode {
    display:     inline-block;
    font-weight: var(--weight-bold);
}

/* Base state for each letter */
.explode span {
    display:    inline-block; /* Required for transform to work */
    transition: transform 3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 5s;
}

/* On hover: Each child span flies in a different direction */
.explode:hover span:nth-child(1) { transform: translate(-30px, -30px) rotate(-15deg); opacity: 0; }
.explode:hover span:nth-child(2) { transform: translate(-5px, -25px) rotate(20deg); opacity: 0; }
.explode:hover span:nth-child(3) { transform: translate(10px, -30px) rotate(-10deg); opacity: 0; }
.explode:hover span:nth-child(4) { transform: translate(15px, -15px) rotate(15deg); opacity: 0; }
.explode:hover span:nth-child(5) { transform: translate(5px, -20px) rotate(-10deg); opacity: 0; }
.explode:hover span:nth-child(6) { transform: translate(20px, -20px) rotate(15deg); opacity: 0; }

@keyframes bounce-line {
    0%, 100% { transform: scaleY(1);    transform-origin: top; }
    50%       { transform: scaleY(0.4); transform-origin: top; }
}

.experience-click-indicator {
    gap:            0.5rem;
    top:            30rem;
    left:           50%;
    opacity:        1;
    display:        flex;
    position:       absolute;
    transform:      translateX(-50%);
    transition:     opacity 0s ease;
    align-items:    center;
    flex-direction: column;
}

.projects-click-indicator {
    gap:            0.5rem;
    top:            30rem;
    left:           50%;
    opacity:        1;
    display:        flex;
    position:       absolute;
    transform:      translateX(-50%);
    transition:     opacity 0s ease;
    align-items:    center;
    flex-direction: column;
}

.click-indicator.hidden {
    opacity:        0;
    pointer-events: none;
}

.click-line {
    width:      0.5px;
    height:     48px;
    animation:  none;
    background: var(--text-muted);
}

/* Top line only bounces — bottom line is static */
.click-line:first-child { animation: bounce-line 1.6s ease-in-out infinite; }

.click-text {
    color:          var(--text-muted);
    font-size:      1rem;
    transition:     transform 0.2s ease;
    font-family:    var(--font-lato);
    font-weight:    var(--weight-fine);
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

.click-text:hover {
    color:  var(--gold);
    cursor: default;
}

/* Base state */
.pop {
    display:     inline-block;
    font-weight: var(--weight-bold);
}

/* Base state for each letter */
.pop span {
    display:    inline-block; /* Required for transform to work */
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 1s;
}

/* On hover: Each child span flies in a different direction */
.pop:hover span:nth-child(1) { transform: translate(-20px, -20px) rotate(-180deg); opacity: 0; }
.pop:hover span:nth-child(2) { transform: translate(-10px, 10px) rotate(90deg); opacity: 0; }
.pop:hover span:nth-child(3) { transform: translate(2px, 2px) rotate(-360deg); opacity: 0; }
.pop:hover span:nth-child(4) { transform: translate(10px, -10px) rotate(360deg); opacity: 0; }
.pop:hover span:nth-child(5) { transform: translate(20px, 20px) rotate(-30deg); opacity: 0; }

@keyframes bounce-line {
    0%, 100% { transform: scaleY(1);    transform-origin: bottom; }
    50%       { transform: scaleY(0.4); transform-origin: bottom; }
}

/* 
=========================================================
MOBILE - NAV (768px and below)
=========================================================
*/

@media (max-width: 768px) {

    main {
        margin:    0 auto;
        padding:   calc(var(--nav-height) + 3rem) 0rem var(--section-gap); /* Remove 2rem side padding */
        max-width: 100%;
    }

    .grid-main {
        margin:  0 auto;
        padding: 0rem;
    }

    .text-detail p {
        font-size:      1.25rem;
        line-height:    1.4rem;
        letter-spacing: 0.010em;
    }

    .text-list {
        line-height:    1.4rem;
        letter-spacing: 0.010em;
    }

    .text-list li {
        font-size:      1.25rem;
        letter-spacing: 0.010em;
    }

    header {
        width:    100dvw;
        height:   var(--nav-height-mobile);
        overflow: visible; /* Allows the fixed dropdown to escape the header bounds */
    }

    nav {
        gap:       0;
        width:     90%;
        padding:   0 1.5rem;
        max-width: var(--max-width-mobile);
    }

    .nav-home {
        z-index:     102;
        position:    relative;
        font-size:   2rem;
        flex-shrink: 0;
    }

    /* Full-screen nav */
    nav ul.nav-links {
        gap:                 2rem;
        top:                 0;
        left:                0;
        width:               100dvw;  /* Explicit dynamic viewport width */
        height:              100dvh;  /* Explicit dynamic viewport height */
        z-index:             100;
        display:             flex;
        position:            fixed;
        transform:           translateX(-100%);
        transition:          transform 0.75s ease, opacity 0.75s ease, visibility 0.75s ease;
        align-items:         center;
        margin-left:         0;
        flex-direction:      column;
        justify-content:     center;
        background-size:     cover;
        background-image:    url('media/mobile/texture.png'); /* Note: Created via Canva Design Studio */
        background-position: center;
    }

    nav ul.nav-links.open { transform: translateX(0); }

    nav ul li a {
        color:     var(--text-primary);
        font-size: 2rem;
    }

    .nav-icons { display: none; }

    .nav-icons-mobile {
        gap:       2.5rem;
        left:      50%;
        bottom:    calc(env(safe-area-inset-bottom) + 4rem); /* Adds the device's "safe area" + 4rem breathing room, so it works on any phone regardless of browser chrome height. */
        display:   flex;
        position:  absolute;
        transform: translateX(-50%);
    }

    .nav-icons-mobile a {
        color:     var(--text-secondary);
        font-size: 2rem;
    }

    .github-desktop { display: none; }
    .github-mobile { display: inline-block; }

    .outgoing-link-bubble.github-mobile {
        width:            25px;
        height:           23px;
        border:           1px solid rgba(255, 255, 255, 0.18);
        margin:           0;
        padding:          0;
        display:          flex;
        font-size:        1.5rem;
        box-shadow:       0 8px 20px rgb(0, 0, 0);
        align-items:      center;
        border-radius:    0%;
        letter-spacing:   0em;
        justify-content:  center;
        background-color: var(--blue-muted);
    }

    .outgoing-link-bubble:hover { transform: none; }
    .content-card { padding: 1rem; }

    /* 
    =========================================================
    MOBILE - HAMBURGER BUTTON
    =========================================================
    */

    .nav-hamburger {
        gap:            9px;
        border:         none;
        cursor:         pointer;
        display:        flex;
        z-index:        102;
        background:     none;
        margin-left:    auto;
        flex-direction: column;
    }

    .nav-hamburger span {
        width:      30px;
        height:     2px;
        display:    block;
        background: var(--text-secondary);
        transition: transform 0.5s ease, opacity 0.01s ease;
    }

    /* 9px gap + 2px bar height = 11px */
    .nav-hamburger.open span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
    .nav-hamburger.open span:nth-child(2) { opacity: 0; }
    .nav-hamburger.open span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

    /* 
    =========================================================
    MOBILE - LANDING
    =========================================================
    */

    #landing {
        width:           100dvw;
        height:          auto;
        margin:          0 auto;
        max-width:       var(--max-width-mobile);
        min-height:      100dvh;
        align-items:     center;
        flex-direction:  column;
        justify-content: center;
    }

    /* Stack text and avatar vertically, centered */
    .landing-content {
        gap:            2rem;
        width:          100%;
        padding:        2rem 1rem;
        max-width:      var(--max-width-mobile);
        text-align:     center;
        flex-direction: column;
    }

    .landing-avatar img { width: 200px; }
    .landing-text { align-items: center; }

    .landing-text h1 {
        font-size:      2.5rem;
        line-height:    3rem;
        letter-spacing: 0.3em;
    }

    .landing-text h2 {
        font-size:      1.25rem;
        line-height:    1.5rem;
        font-weight:    var(--weight-light);
    }

    /* Element only takes up as much width as its content and flows with surrounding text; can't set width/height; default for elements like span, a, i */
    .mobile-break { display: inline; }

    /* 
    =========================================================
    MOBILE - ABOUT
    =========================================================
    */

    #about {
        height:         auto;
        margin:         0 auto;
        max-width:      var(--max-width-mobile);
        padding-top:    2rem; /* External */
        padding-bottom: 12rem;
    }

    .about-card {
        gap:            0rem;
        width:          100%; /* 100% of its parent, not the viewport */
        margin:         0 auto;
        max-width:      var(--max-width-mobile);
    }

    /* Photo / Bio / Resume / Tools & Languages */
    .about-top {
        gap:            0rem;
        padding:        0.5rem; /* Internal */
        align-items:    center;
        flex-direction: column;
    }

    /* Affiliations */
    .about-bottom {
        gap:            0rem;
        padding-top:    1rem;
        padding-left:   0rem; /* A little more room horizontally for marquee on mobile */
        padding-right:  0rem;
        padding-bottom: 1rem;
    }

    .about-bio {
        max-width:      100%;
        text-align:     left;
        padding-top:    1.7rem;
        padding-right:  0rem;
        padding-bottom: 1rem;
    }

    .about-photo { width: 342px; }

    .about-divider {
        margin-top:    1.5rem;
        margin-bottom: 0.5rem;
    }

    .about-divider-mobile {
        width:         100%;
        border:        none;
        display:       block;
        border-top:    1px solid rgba(255, 255, 255, 0.07);
        margin-top:    1rem;
        margin-bottom: 0.5rem;
    }

    .about-divider-vertical { display: none; }

    /* 
    =========================================================
    MOBILE - TOOLS
    =========================================================
    */

    .about-tools {
        width:  100%;
        margin: 0 auto;
    }

    .tools-grid {
        gap:             10px;
        padding-top:     0rem;
        justify-content: center;
    }

    .about-tools-label {
        text-align:     center;
        padding:        0rem;
        margin-top:     1rem;
        margin-bottom:  1rem;
    }

    /* 
    =========================================================
    MOBILE - AFFILIATIONS
    =========================================================
    */

    .affiliations-wrapper {
        width:      100dvw;
        margin:     0 auto;
        max-width:  var(--max-width-mobile);
    }

    .affiliations-track {
        gap:       0rem;
        animation: marquee-scroll 20s linear infinite;
    }

    .affiliations-track img {
        width:   130px;
        filter:  grayscale(0);
        opacity: 1;
    }

    .about-affiliations-label { margin-bottom: 1rem; }

    /* 
    =========================================================
    MOBILE - EXPERIENCE MAIN
    =========================================================
    */

    #experience-landing {
        margin:         0 auto;
        max-width:      var(--max-width-mobile);
        min-height:     100dvh;
        padding-top:    5rem;
        padding-bottom: 0rem;
    }

    #experience-grid {
        gap:                   1rem;
        width:                 100%;
        padding:               0rem;
        max-width:             var(--max-width-mobile);
        justify-content:       center;
        grid-template-columns: repeat(2, 185px);
    }

    #experience-grid .card img { opacity: 1; }
    #experience-grid .card:hover img { transform: none; }

    /* 
    =========================================================
    MOBILE - EXPERIENCE / PROJECTS - DETAIL PANEL
    =========================================================
    */

    .detail-content-card {
        padding:   1rem;
        max-width: var(--max-width-mobile);
    }

    .detail-header {
        margin:        0 auto;
        margin-bottom: 1rem;
    }

    .detail-header h3 { font-size: 2rem; }

    .detail-header h4 {
        font-size:   1.25rem;
        line-height: 2rem;
    }

    .detail-body {
        gap:            0.5rem;
        max-width:      100%;
        text-align:     left;
        flex-direction: column;
    }

    /* Tools, outgoing links, media tiles */
    /* Note: Not right on mobile but we don't necessarily need to change the class name */
    .detail-right {
        width:           100%;
        display:         grid;
        align-content:   flex-start;
        padding-bottom:  0.5rem;
        justify-content: flex-start;
    }

    .detail-media {
        margin:                0 auto;
        justify-content:       flex-start;
        grid-template-columns: repeat(3, 1fr);
    }

    .detail-tags-row { justify-content: flex-start; }
    .detail-tags { gap: 0.4rem; }
    .detail-tag { padding: 0rem 0.3rem; }

    /* 
    =========================================================
    MOBILE - INDIVIDUAL DETAIL ADJUSTMENTS
    =========================================================
    */

    .detail-right-scec {
        width:          100%;
        display:        grid;
        padding-bottom: 0.5rem;
    }

    .detail-media-scec {
        align-content:         flex-start;
        justify-content:       flex-start;
        grid-template-columns: repeat(2, 1fr);
    }
    
    .detail-media-access { grid-template-columns: repeat(2, 1fr); }
    .detail-media-nasa { grid-template-columns: repeat(1, 1fr); }

    /* 
    =========================================================
    MOBILE - PROJECTS MAIN
    =========================================================
    */

    #projects-landing {
        margin:         0 auto;
        max-width:      var(--max-width-mobile);
        min-height:     unset;
        padding-top:    5rem;
        padding-bottom: 0rem;
    }

    #projects-grid {
        width:                 100%;
        padding:               0rem;
        max-width:             var(--max-width-mobile);
        justify-content:       center;
        grid-template-columns: repeat(2, 185px);
    }

    #projects-card-last-mobile {
        gap:                   1rem;
        width:                 100%;
        margin:                0 auto;
        display:               grid;
        max-width:             var(--max-width-mobile);
        padding-top:           1rem;
        justify-content:       center;
        grid-template-columns: repeat(1, 175px);
    }

    .projects-card-last-desktop { display: none; }
    #projects-grid .card img { opacity: 1; }
    #projects-grid .card:hover img { transform: none; }
    #projects-card-last-mobile .card img { opacity: 1; }
    #projects-card-last-mobile .card:hover img { transform: none; }

    /* 
    =========================================================
    MOBILE - CONTACT LIST (FOOTER)
    =========================================================
    */

    .footer-icons { padding: 15rem 0rem 1rem; }

    /* 
    =========================================================
    MOBILE - FUN FEATURES
    =========================================================
    */

    /* TODO (later): Text animation on indicators? */

    /* .landing-scroll-indicator { bottom: 0.5rem; } */
    .landing-scroll-indicator {
        left:       auto;
        bottom:     auto;
        position:   relative;
        transform:  none;
        margin-top: 2rem;
    }

    .scroll-line { height: 25px; }
    .experience-click-indicator { top: 34rem; }
    .click-line { height: 25px; }

    .projects-click-indicator { 
        top: 47rem; 
        margin-top: 1rem;
    }
}