@import url(reset.css);

/*-------------- GLOBALS --------------*/
:root {
    --columns: 8;
    --bg: #FFFFFF;
    --text: #000000;
    --nav-bg: #E6E6E6;
    --current: #ACACAC;
    --img-height: 40vh;                      /* archive hover images, default height (was 25vh) */
    --dim: 0.35;                             /* opacity of hovered / selected images on selected projects */
}

/* archive page: inverted colours */
.archive {
    --bg: #000000;
    --text: #FFFFFF;
    --nav-bg: #676767;
    --current: #363636;

    /* light text on dark looks bolder on macOS, this thins it back out */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* colour schemes, switched with the dots top left (js/theme.js) */

/* dark */
:root[data-theme="dark"] {
    --bg: #000000;
    --text: #A4A4A4;
    --nav-bg: #2A2A2A;
    --current: #000000;

    /* light text on dark looks bolder on macOS, this thins it back out */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root[data-theme="dark"] .archive {
    --bg: #2A2A2A;                           /* background and nav bar swapped */
    --text: #A4A4A4;
    --nav-bg: #000000;
    --current: #3E3E3E;                      /* black would be invisible on the black bar */
}

/* neon */
:root[data-theme="neon"] {
    --bg: #E2DFDC;
    --text: #875B0F;
    --nav-bg: #CEFF10;
    --current: #C9BEAC;
}

:root[data-theme="neon"] .archive {
    --bg: #CEFF10;
    --text: #875B0F;
    --nav-bg: #E2DFDC;
    --current: #C9BEAC;
}

body {
    margin: 0;
    background-color: var(--bg);
    color: var(--text);
    transition: background-color 300ms ease, color 300ms ease;   /* soft change of colour scheme */
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
}

/* smooth crossfade between pages */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 300ms;               /* same timing as the link hover */
    animation-timing-function: ease;
}

/* arriving on the archive: slower, softer fade into black (also for the nav bar colour) */
html:has(body.archive)::view-transition-group(*),
html:has(body.archive)::view-transition-old(*),
html:has(body.archive)::view-transition-new(*) {
    animation-duration: 500ms;
    animation-timing-function: ease-in-out;  /* starts and ends gently */
}

.main-nav {
    position: fixed;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    z-index: 1000;
    view-transition-name: main-nav;          /* nav stays still, only the content fades */
}

.main-nav__list {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    grid-template-rows: 11px;
    align-items: end;
    column-gap: 11px;
    line-height: 1;
    margin: 0;
    padding: 0 11px;
    list-style: none;
    background-color: var(--nav-bg);
    transition: background-color 300ms ease;
}

/* colour scheme dots, top left (under the fullscreen view, above everything else) */
.theme-dots {
    position: fixed;
    top: 11px;                               /* same 11px gutter as the rest of the page */
    left: 11px;
    z-index: 1500;
    display: flex;
    gap: 5.5px;
}

.theme-dot {
    width: 16.5px;                           /* 1.5 × 11px */
    height: 16.5px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: opacity 300ms ease, background-color 300ms ease, box-shadow 300ms ease;
}

.theme-dot[data-set-theme="dark"] {
    background-color: #000000;
    box-shadow: inset 0 0 0 1px var(--text);  /* thin ring, so the black dot stays visible on black backgrounds */
}

.theme-dot[data-set-theme="neon"] {
    background-color: #CEFF10;
}

.theme-dot:hover {
    opacity: var(--dim);
}

/* on the neon archive the background is neon itself, so the neon dot takes the nav colour */
:root[data-theme="neon"] .archive .theme-dot[data-set-theme="neon"] {
    background-color: var(--nav-bg);
}

.main-nav__item {
    text-box: trim-both cap alphabetic;
}

/* smooth colour fade, both on hover and when the mouse leaves */
.main-nav__link {
    transition: color 300ms ease;
}

/* link colour on hover + link of the page you're currently on */
.main-nav__link:hover,
.main-nav__link[aria-current="page"] {
    color: var(--current);
}

/* diagonal arrow after external links (e.g. instagram) */
.main-nav__link[href^="http"]::after {
    content: "\2197";
    margin-left: 2px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.875rem;
}

/* last item (archive) sits in the last column, right-aligned */
.main-nav__item:last-child {
    grid-column: -2;
    justify-self: end;
}




/*-------------- ABOUT--------------*/
.about {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);   /* same grid as the nav */
    column-gap: 11px;
    padding: 0 11px;
    padding-top: calc(50vh + 5.5px + 11px);  /* middle of screen + half the nav bar + 11px space */
    line-height: 1.2;
}

.about__intro {
    grid-column: 1 / 4;                      /* columns 1–3 */
}

.cv {
    grid-column: 1 / 4;
    display: grid;
    grid-template-columns: subgrid;          /* reuse the page's columns inside the cv */
    margin-top: 1lh;                         /* one empty line above */
}

.cv__title {
    grid-column: 1;
    font: inherit;                           /* h2 looks like normal text */
}

.cv__list {
    grid-column: 2 / 4;                      /* columns 2–3 */
    list-style: none;
}

.cv__item {
    display: flex;
    justify-content: space-between;          /* text left, year right */
    gap: 11px;
}


/*-------------- ARCHIVE --------------*/
.projects {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);   /* same grid as the nav */
    column-gap: 11px;
    padding: 0 11px;
    padding-top: calc(50vh + 5.5px + 11px);  /* starts right below the nav */
    line-height: 1.5;                        /* row spacing */
}

.projects__list,
.projects__item {
    grid-column: 1 / -1;                     /* full width */
    display: grid;
    grid-template-columns: subgrid;          /* every row uses the page's 8 columns */
    list-style: none;
}

/* the 4 spans of each project, placed in their columns */
.projects__item span:nth-child(1) { grid-column: 1 / 3; }              /* title: columns 1–2 */
.projects__item span:nth-child(2) { grid-column: 3; }                  /* type: under @charoquinn */
.projects__item span:nth-child(3) { grid-column: 4 / 6; }              /* where: under selected projects */
.projects__item span:nth-child(4) { grid-column: -2; justify-self: end; } /* year: last column, right */

/* project images: hidden, shown above the nav when hovering the project row */
.projects__images {
    position: fixed;
    left: 11px;
    bottom: calc(50vh + 5.5px + 11px);       /* middle of screen + half the nav bar + 11px space */
    height: var(--img-height);               /* set in :root, can be overridden per project */
    display: flex;
    gap: 11px;
    align-items: center;                     /* images of different heights are centred vertically */
    opacity: 0;
    pointer-events: none;                    /* images never block the mouse */
    transition: opacity 300ms ease;
}

.projects__images img,
.projects__images video {
    height: 100%;
    width: auto;                             /* keeps the image proportions */
}

.projects__item:hover .projects__images {
    opacity: 1;
}

/* wider spacing, e.g. for the pictograms */
.projects__images--wide {
    gap: 44px;                               /* 4 × 11px */
}


/*-------------- SELECTED PROJECTS --------------*/
/* endless, side-scrollable image strip above the nav (behaviour in js/main.js) */
.strip {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(50vh + 5.5px + 11px);       /* 11px above the nav */
    height: 25vh;                            /* tallest image = half of the upper half */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;                   /* hide scrollbar (Firefox) */
    opacity: 0;                              /* hidden until the sizes are calculated */
    transition: opacity 300ms ease;
}

.strip::-webkit-scrollbar {
    display: none;                           /* hide scrollbar (Chrome, Safari) */
}

.strip.is-ready {
    opacity: 1;
}

.strip__track {
    display: flex;
    align-items: flex-end;                   /* all images sit on the same bottom line */
    width: max-content;
    height: 100%;
}

.strip__img {
    display: block;
    height: 100%;                            /* overwritten per image by js/main.js */
    width: auto;
    max-width: none;
    transition: opacity 300ms ease;          /* same timing as the link hover */
}

.strip__img:hover {
    opacity: var(--dim);
}

.strip__img {
    cursor: pointer;
}

/* a project is open: the strip fades out */
.project-open .strip {
    opacity: 0;
    pointer-events: none;
}

/* ---- opened project ---- */
.project-view {
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease, visibility 0s 300ms;   /* hide completely after fading out */
}

.project-open .project-view {
    opacity: 1;
    visibility: visible;
    transition: opacity 300ms ease;
}

/* upper half: all images of the project, same sizing as the strip */
.project-view__strip {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(50vh + 5.5px + 11px);       /* 11px above the nav */
    height: 25vh;
    display: flex;
    align-items: flex-end;
    gap: 11px;
    padding: 0 11px;
    overflow-x: auto;                        /* side-scrollable if a project has many images */
    overflow-y: hidden;
    scrollbar-width: none;
}

.project-view__strip::-webkit-scrollbar {
    display: none;
}

.project-view__thumb {
    flex-shrink: 0;
    display: block;
    height: 0;                               /* real height is set by js/main.js once the file is loaded */
    width: auto;
    max-width: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 300ms ease;
}

.project-view__thumb.is-sized {
    opacity: 1;
}

.project-view__thumb:hover,
.project-view__thumb.is-selected {
    opacity: var(--dim);
}

/* lower half: big image (columns 1–3) + text (columns 4–5) */
.project-view__detail {
    position: fixed;
    top: calc(50vh + 5.5px + 11px);          /* 11px below the nav */
    bottom: 11px;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    grid-template-rows: minmax(0, 1fr);
    column-gap: 11px;
    padding: 0 11px;
    line-height: 1.2;
}

.project-view__stage {
    grid-column: 1 / 4;
    min-height: 0;
    position: relative;                      /* old + new image lie on top of each other while cross-fading */
}

.project-view__big {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;                         /* as big as possible inside columns 1–3 ... */
    max-height: 100%;                        /* ... and inside the lower half, proportions kept */
    opacity: 0;
    transition: opacity 200ms ease-in-out;   /* cross-fade between images (same as FADE in js/main.js) */
}

/* parts of the old image that stick out beside a narrower new one fade away faster */
.project-view__big.is-leaving,
.lightbox__img.is-leaving {
    transition-duration: 100ms;
}

.project-view__big.is-visible {
    opacity: 1;
}

.project-view__text {
    grid-column: 4 / 6;
}

.project-view__text p + p {
    margin-top: 1lh;                         /* one empty line between paragraphs */
}

/* label + list of names next to it, e.g. "Mentored by:" */
.credits {
    display: grid;
    grid-template-columns: max-content 1fr;  /* column 1 = as wide as the label, column 2 = the names */
    column-gap: 0.25em;                      /* about one space between label and names */
}

.credits dd {
    grid-column: 2;                          /* every name goes into the second column, one per line */
    margin: 0;
}

.credits + p {
    margin-top: 1lh;                         /* one empty line after the names */
}

.project-view__stage {
    cursor: zoom-in;                         /* click the big image -> fullscreen */
}

/* ---- fullscreen (lightbox) ---- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;                           /* above the nav */
    background-color: color-mix(in srgb, var(--bg) 85%, transparent);   /* page shines through slightly */
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease, visibility 0s 300ms;
}

.lightbox-open .lightbox {
    opacity: 1;
    visibility: visible;
    transition: opacity 300ms ease;
}

.lightbox__stage {
    position: absolute;
    inset: 33px;                             /* 3 × 11px space to the screen edges */
}

.lightbox__img {
    position: absolute;
    inset: 0;
    margin: auto;                            /* centred */
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;                         /* as big as possible, proportions kept */
    max-height: 100%;
    opacity: 0;
    transition: opacity 200ms ease-in-out;
}

.lightbox__img.is-visible {
    opacity: 1;
}