/* =========================================
   APP SHELL
   ========================================= */
body {
    --site-header-height: calc(36px + (var(--space-24) * 2));
    --site-footer-height: calc(36px + (var(--space-24) * 4));
    width: 100%;
    min-height: 100vh;
    padding: 0 var(--space-32);
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--color-background-200);
}

main {
    width: 100%;
    max-width: 600px;
    margin-top: var(--site-header-height);
    margin-bottom: var(--site-footer-height);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-24);
}

section {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

/* =========================================
   UTILITIES
   ========================================= */
.u-container {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--space-16);
}

.u-mt-auto {
    margin-top: auto;
}

.u-p-0 {
    padding: 0;
}

.u-p-8 {
    padding: var(--space-8);
}

.u-p-12 {
    padding: var(--space-12);
}

.u-p-16 {
    padding: var(--space-16);
}

.u-p-24 {
    padding: var(--space-24);
}

.u-p-32 {
    padding: var(--space-32);
}

.u-px-0 {
    padding-inline: 0;
}

.u-px-8 {
    padding-inline: var(--space-8);
}

.u-px-12 {
    padding-inline: var(--space-12);
}

.u-px-16 {
    padding-inline: var(--space-16);
}

.u-px-24 {
    padding-inline: var(--space-24);
}

.u-px-32 {
    padding-inline: var(--space-32);
}

.u-py-0 {
    padding-block: 0;
}

.u-py-8 {
    padding-block: var(--space-8);
}

.u-py-12 {
    padding-block: var(--space-12);
}

.u-py-16 {
    padding-block: var(--space-16);
}

.u-py-24 {
    padding-block: var(--space-24);
}

.u-py-32 {
    padding-block: var(--space-32);
}

.u-pt-0 {
    padding-top: 0;
}

.u-pt-8 {
    padding-top: var(--space-8);
}

.u-pt-12 {
    padding-top: var(--space-12);
}

.u-pt-16 {
    padding-top: var(--space-16);
}

.u-pt-24 {
    padding-top: var(--space-24);
}

.u-pt-32 {
    padding-top: var(--space-32);
}

.u-pb-0 {
    padding-bottom: 0;
}

.u-pb-8 {
    padding-bottom: var(--space-8);
}

.u-pb-12 {
    padding-bottom: var(--space-12);
}

.u-pb-16 {
    padding-bottom: var(--space-16);
}

.u-pb-24 {
    padding-bottom: var(--space-24);
}

.u-pb-32 {
    padding-bottom: var(--space-32);
}

.u-text-display {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-display);
    font-weight: var(--font-weight-display);
    line-height: var(--line-height-display);
    color: var(--color-gray-900);
}

.u-text-label {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-label);
    line-height: var(--line-height-label);
    color: var(--color-gray-900);
}

span.u-text-label {
    display: inline-block;
}

.u-text-body {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-paragraph);
    font-weight: var(--font-weight-paragraph);
    line-height: var(--line-height-paragraph);
    color: var(--color-gray-800);
}

.u-text-secondary {
    color: var(--color-gray-800);
}

.u-surface-pill {
    padding: var(--space-8) var(--space-16);
    border-radius: var(--radius-medium);
    background-color: var(--color-background-200);
    box-shadow:
        inset 0 1px 1px 0 rgb(0 0 0 / 5%),
        inset 0 3px 6px 0 rgb(0 0 0 / 4%),
        0 1px 0 0.5px rgb(255 255 255);
}

/* =========================================
   COMPONENTS
   ========================================= */
.icon-button {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: var(--radius-medium);
    color: var(--color-gray-700);
    background-color: var(--color-gray-100);
    cursor: pointer;
    text-decoration: none;
    transition-property: background-color, transform;
    transition-timing-function: 
cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.icon-button:hover {
    background-color: var(--color-gray-200);
}

.icon-button:active {
    scale: 0.97;
}

.icon-button svg {
    width: 16px;
    height: 16px;
}

.icon-button--secondary {
    color: var(--color-gray-700);
    background-color: var(--color-gray-100);
}

.icon-button--primary {
    background-color: var(--color-gray-100);
    color: var(--color-blue);
}

.meta-bar {
    width: 100%;
    padding: var(--space-24) 0;
}

.meta-bar__inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    width: 100%;
    padding-inline: var(--space-32);
}

/* Unsure about whether or not I want to have the background blur effect behind the header and footer. Commenting out for now. */

/* .site-header::before,
.site-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: 0;
    height: calc(100% + var(--space-24));
    pointer-events: none;
}

.site-header::before {
    top: 0;
    background: linear-gradient(to bottom, var(--color-background-200) 0%, rgb(250 250 250 / 82%) 62%, transparent 100%);
} */

.site-header__inner {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.site-header__menu {
    position: relative;
    border: 0;
    appearance: none;
    cursor: pointer;
    background-color: var(--color-background-100);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.08);
}

.site-header__menu:hover {
    background-color: var(--color-background-200);
}

.site-header__menu-icon {
    grid-area: 1 / 1;
    display: grid;
    place-items: center;
    transition:
        opacity 0.18s ease-in-out,
        transform 0.18s ease-in-out;
}

.site-header__menu-icon svg path:nth-of-type(2) {
    transition: filter 0.18s ease;
}

.site-header__menu-icon--close,
.site-header__menu.is-open .site-header__menu-icon--info {
    opacity: 0;
    transform: scale(0.92);
}

.site-header__menu-icon--close svg path:nth-of-type(2),
.site-header__menu.is-open .site-header__menu-icon--info svg path:nth-of-type(2) {
    filter: blur(4px);
}

.site-header__menu.is-open .site-header__menu-icon--close {
    opacity: 1;
    transform: scale(1);
}

.site-header__menu.is-open .site-header__menu-icon--close svg path:nth-of-type(2) {
    filter: blur(0);
}

.site-menu {
    position: fixed;
    top: calc(var(--site-header-height) - var(--space-48));
    right: var(--space-32);
    z-index: 20;
    width: 320px;
    height: fit-content;
    padding: var(--space-20);
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
    border-radius: var(--radius-large);
    background-color: var(--color-background-100);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.08);
    /* adjust the transform origin depending on where the about button is placed */
    transform-origin: top right;
}

.site-menu:not([hidden]) {
    animation: site-menu-scale-in 0.38s cubic-bezier(0.34, 1.32, 0.64, 1);
}

.site-menu[hidden] {
    display: none;
}

@keyframes site-menu-scale-in {
    from {
        transform: scale(0.97);
    }

    to {
        transform: scale(1);
    }
}

.site-menu__image {
    /* width: 200px; */
    max-width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    display: block;
    object-fit: cover;
    border-radius: var(--space-16);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.1);
}

.site-menu__links {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-16);
}

.site-menu__link-item {
    width: 100%;
}

.site-menu__link {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-12);
    text-decoration: none;
    color: var(--color-gray-800);
}

.site-menu__link:hover {
    opacity: 0.7;
}

.site-menu__link-icon,
.site-menu__link-icon svg {
    width: 16px;
    height: 16px;
}

.site-menu__link-icon {
    display: inline-flex;
    color: var(--color-gray-800);
}

.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    width: 100%;
    padding-inline: var(--space-32);
}

.site-footer::before {
    bottom: 0;
    background: linear-gradient(to top, var(--color-background-200) 0%, rgb(250 250 250 / 82%) 62%, transparent 100%);
}

.site-footer__inner {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[data-current-time] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

@media (max-width: 480px) {
    .site-menu {
        left: var(--space-32);
        right: var(--space-32);
        width: auto;
    }

    .case-study__circle-diagram {
        aspect-ratio: 4 / 3;
    }
}

/* =========================================
   PROJECT LIST
   ========================================= */
.project-list {
    --project-highlight-y: 0px;
    --project-highlight-height: 0px;
    --project-highlight-opacity: 0;

    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.project-list::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: var(--project-highlight-height);
    /* background-color: var(--color-gray-100); */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-large);
    opacity: var(--project-highlight-opacity);
    pointer-events: none;
    transform: translate3d(0, var(--project-highlight-y), 0);
    transition:
        transform 0.38s cubic-bezier(0.34, 1.32, 0.64, 1),
        height 0.3s cubic-bezier(0.34, 1.32, 0.64, 1),
        opacity 0.12s ease;
}

.project-list:focus-within {
    --project-highlight-opacity: 1;
}

.project-list:hover .project-list__item:not(:hover) {
    filter: blur(2px);
    opacity: 0.5;
}

.project-list__item {
    width: 100%;
    position: relative;
    z-index: 1;
    will-change: padding, filter, opacity;
    transition:
        padding 0.38s cubic-bezier(0.34, 1.32, 0.64, 1),
        filter 0.2s ease-in-out,
        opacity 0.2s ease-in-out;
}

.project-list__item:hover,
.project-list__item:focus-within {
    padding: 0 var(--space-16);
    transition:
        padding 0.2s ease-in-out,
        filter 0.2s ease-in-out,
        opacity 0.2s ease-in-out;
}

.project-card {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-16) 0;
    text-decoration: none;
}

.project-card__body {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-16);
}

.project-card__media {
    flex-shrink: 0;
    width: clamp(40px, 12vw, 80px);
    min-width: 40px;
    max-width: 80px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-medium);
}

.project-card__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* =========================================
   PAGES
   ========================================= */
.page-hero {
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.case-study,
.case-study__header,
.case-study__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-48);
}

.case-study__image {
    width: 100%;
    display: block;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-medium);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.1);
}

.case-study__video {
    width: 100%;
    display: block;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-medium);
    background-color: var(--color-gray-100);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.1);
}

/*Case study diagram*/

.case-study__circle-diagram {
    --diagram-node-size: clamp(5.75rem, 20cqw, 7.75rem);
    --diagram-orbit-size: calc(var(--diagram-node-size) * 1.42);

    container-type: inline-size;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-medium);
    background-color: var(--color-background-200);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.1);
}

.case-study__circle-diagram-node {
    position: absolute;
    left: var(--diagram-node-x);
    top: var(--diagram-node-y);
    width: var(--diagram-node-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid var(--color-gray-900);
    border-radius: 50%;
    color: var(--color-gray-900);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(0.75rem, 4.2cqw, 0.875rem);
    line-height: 1;
    text-align: center;
    transform: translate(-50%, -50%);
}

.case-study__circle-diagram-node::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--diagram-orbit-size);
    aspect-ratio: 1;
    border: 1px dashed var(--color-gray-400);
    border-radius: 50%;
    animation: circle-diagram-orbit 18s linear infinite;
    transform: translate(-50%, -50%);
}

.case-study__circle-diagram-node span {
    position: relative;
    z-index: 1;
}

.case-study__circle-diagram-node--product {
    --diagram-node-x: 22.5%;
    --diagram-node-y: 68%;
}

.case-study__circle-diagram-node--design {
    --diagram-node-x: 50%;
    --diagram-node-y: 39%;
}

.case-study__circle-diagram-node--engineering {
    --diagram-node-x: 79%;
    --diagram-node-y: 53%;
}

@keyframes circle-diagram-orbit {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.case-study__metric-cycle {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    aspect-ratio: 3 / 2;
    padding: 0 var(--space-40) var(--space-40) var(--space-40);
    overflow: hidden;
    border-radius: var(--radius-medium);
    color: var(--color-background-100);
    background-color: var(--color-gray-900);
    box-shadow: var(--shadow-standard);
}

.case-study__metric-cycle-text-stack {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: var(--space-4);
}

.case-study__metric-cycle-text {
    margin: 0;
    color: var(--color-background-100);
    text-box-trim: trim-both;
    transition: filter 180ms ease-in-out, opacity 180ms ease-in-out;
}

.case-study__metric-cycle-text.is-blurred {
    filter: blur(2px);
    opacity: 0.6;
}

.case-study__metric-cycle-text--bottom {
    color: var(--color-gray-500);
}

.case-study__metric-cycle-svg {
    align-self: center;
    flex: 0 0 auto;
    width: 100px;
    height: 100px;
    margin-block: auto;
    color: var(--color-background-100);
    transform: rotate(var(--metric-cycle-degree));
    transition: transform 300ms cubic-bezier(0.34, 1.32, 0.64, 1), filter 180ms ease, opacity 180ms ease;
}

.case-study__metric-cycle-svg.is-blurred {
    filter: blur(1px);
    opacity: 0.6;
}

.case-study__metric-cycle-svg svg {
    width: 100%;
    height: 100%;
    display: block;
}

.case-study__text-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.case-study__text-list p {
    margin: 0;
}

.case-study__text-list ul,
.case-study__text-list ol {
    margin: 0;
    padding-inline-start: var(--space-16);
    color: inherit;
    list-style-position: outside;
}

.case-study__text-list ul {
    list-style-type: disc;
}

.case-study__text-list ol {
    list-style-type: decimal;
}

.case-study__text-list li + li {
    margin-top: var(--space-8);
}

.case-study__text-list li::marker {
    color: var(--color-gray-400);
}

/* =========================================
   MEDIA QUERIES
   ========================================= */
@media (max-width: 480px) {
    .case-study__metric-cycle {
        padding: 0 var(--space-24) var(--space-24) var(--space-24);
    }

    .case-study__metric-cycle-svg {
        width: 80px;
        height: 80px;
    }
}

@media (min-width: 64rem) {
    .project-card {
        gap: var(--space-16);
    }

    .case-study {
        gap: var(--space-64);
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}