/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ------------------------- END OF RESET CSS ------------------------ */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    height: 100vh;
    display: grid;
    place-items: center;
    background-color: #fff;
    color: #000;
    position: relative;
    overflow: hidden;
}

.site-header {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    z-index: 4;
    mix-blend-mode: difference;
    pointer-events: none;
    user-select: none;
}

.site-header a {
    pointer-events: auto;
    position: relative;
    z-index: 5;
    color: inherit;
    text-decoration: none;
}

.site-header a.site-title__contact:hover {
    text-decoration: underline;
    text-decoration-thickness: 0.05em;
}

body.title-blurred .site-title__contact {
    pointer-events: none;
}

.site-title,
.project-name,
.project-arrow {
    margin: 0;
    font-family: Arial, sans-serif;
    color: #fff;
    mix-blend-mode: inherit;
    filter: blur(0);
    transition: filter 200ms ease;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}

.site-title {
    font-size: min(clamp(3.5rem, 5vw, 11rem), 7.5vw);
    line-height: 1.0;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.project-name,
.project-arrow {
    font-size: clamp(0.75rem, 1vw, 1.2rem);
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: 0.02em;
}

body.title-blurred .site-title {
    filter: blur(6px);
}

.project-meta {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0 clamp(1.2rem, 2vw, 2rem);
    mix-blend-mode: difference;
    user-select: none;
    pointer-events: none;
}

.project-name,
.project-arrow {
    filter: none;
}

.project-name {
    text-align: left;
    text-decoration: none;
    display: inline-block;
    color: #fff;
    pointer-events: auto;
}

.project-name__link {
    position: relative;
    z-index: 5;
    cursor: pointer;
    pointer-events: auto !important;
    padding: 0.5rem 0.75rem;
    margin-left: -0.75rem;
    margin-right: 0.25rem;
}

.project-index-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    pointer-events: none;
}

.project-dots {
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
}

.project-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max(24px, 1.5rem);
    height: max(24px, 1.5rem);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.project-dot::before {
    width: 0.4rem;
    height: 0.4rem;
    transform: scale(var(--dot-scale, 1));
    border-radius: 50%;
    background-color: #646464;
    opacity: 0.5;
    content: '';
    transition: transform 240ms ease, opacity 200ms ease, background-color 200ms ease;
}

.project-dot.is-active::before {
    background-color: #fff;
    opacity: 1;
}

.project-dot:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
    .project-dot::before {
        transition-duration: 1ms;
    }
}

.project-arrow {
    appearance: none;
    border: none;
    background: transparent;
    color: #fff;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    opacity: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.project-arrow img {
    display: block;
    width: 1rem;
    height: auto;
    filter: brightness(0) invert(1);
}

.project-carousel__viewport {
    width: 100vw;
    height: 100vh;
    max-height: none;
    max-width: none;
    overflow: hidden;
    position: relative;
}

.project-grid {
    position: relative;
    width: 100%;
    height: 100%;
}

.project-card {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    pointer-events: none;
    opacity: 0;
    transform: translateY(0) scale(1);
    transition: opacity 0ms linear;
    z-index: 1;
}

.project-card.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    z-index: 2;
}

.project-card.is-entering {
    opacity: 1;
    z-index: 3;
}

.project-card.is-entering-forward,
.project-card.is-leaving-forward {
    animation-duration: 180ms;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.project-card.is-entering-forward {
    animation-name: enterFromBelow;
}

.project-card.is-entering-backward {
    animation: enterFromAbove 180ms ease forwards;
}

.project-card.is-leaving {
    opacity: 0;
    z-index: 1;
}

.project-card.is-leaving-forward {
    animation-name: leaveUp;
}

.project-card.is-leaving-backward {
    animation: leaveDown 180ms ease forwards;
}

@keyframes enterFromBelow {
    from { opacity: 0; transform: translateY(18px) scale(1.02); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes enterFromAbove {
    from { opacity: 0; transform: translateY(-18px) scale(1.02); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.project-name.is-title-leaving-forward {
    animation: titleLeaveUp 90ms ease forwards;
}

.project-name.is-title-leaving-backward {
    animation: titleLeaveDown 90ms ease forwards;
}

.project-name.is-title-entering-forward {
    animation: titleEnterFromBelow 90ms ease forwards;
}

.project-name.is-title-entering-backward {
    animation: titleEnterFromAbove 90ms ease forwards;
}

@keyframes titleLeaveUp {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-6px); }
}

@keyframes titleLeaveDown {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(6px); }
}

@keyframes titleEnterFromBelow {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes titleEnterFromAbove {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes leaveUp {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-18px) scale(1.01); }
}

@keyframes leaveDown {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(18px) scale(1.01); }
}

.project-card__blurred,
.project-card__detail,
.project-card__hit-area {
    display: block;
    width: min(100%, 100vh);
    height: auto;
    max-width: 100%;
    user-select: none;
    pointer-events: none;
}

.project-card__link {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
    cursor: default;
}

.project-card__blurred {
    opacity: 1;
    background: transparent;
    z-index: 0;
    transition: opacity 260ms ease;
}

.project-card__blurred--css {
    filter: blur(var(--project-blur-radius));
    -webkit-mask-image: var(--project-blur-mask);
    mask-image: var(--project-blur-mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.project-card__detail {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    z-index: 1;
    transition: opacity 260ms ease, transform 260ms ease;
}

.project-card.is-focused .project-card__blurred {
    opacity: 1;
}

.project-card.is-focused .project-card__detail {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.project-card__hit-area {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: auto;
    z-index: 2;
    cursor: default;
}

.project-card.is-returning .project-card__blurred {
    animation: projectReturnBlurAppear 620ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes projectReturnBlurAppear {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-card.is-returning .project-card__blurred {
        animation-duration: 1ms;
    }
}

.project-detail-gallery img,
.project-detail-gallery video {
    pointer-events: auto;
    cursor: zoom-in;
}

.fullscreen-gallery {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.0);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #111;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 0s linear 180ms;
}

.fullscreen-gallery.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 180ms ease, visibility 0s;
}

.fullscreen-gallery__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(82vw, 110rem);
    height: min(84vh, 62rem);
}

.fullscreen-gallery__stage img,
.fullscreen-gallery__stage video {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    animation: fullscreenGalleryMediaEnter 220ms ease both;
}

.fullscreen-gallery__stage .is-entering-from-left {
    animation-name: fullscreenGallerySlideFromLeft;
}

.fullscreen-gallery__stage .is-entering-from-right {
    animation-name: fullscreenGallerySlideFromRight;
}

@keyframes fullscreenGalleryMediaEnter {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fullscreenGallerySlideFromLeft {
    from {
        opacity: 0;
        transform: translateX(-16px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes fullscreenGallerySlideFromRight {
    from {
        opacity: 0;
        transform: translateX(16px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.fullscreen-gallery__close,
.fullscreen-gallery__arrow {
    position: absolute;
    z-index: 1;
    border: 0;
    padding: 0;
    background: transparent;
    color: #111;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 2.8rem;
    font-weight: 400;
    line-height: 1;
}

.fullscreen-gallery__close {
    top: 1.25rem;
    right: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    background: transparent;
    font-family: inherit;
    font-size: 1.8rem;
}

.fullscreen-gallery__arrow--prev {
    left: 1.5rem;
}

.fullscreen-gallery__arrow--next {
    right: 1.5rem;
}

body.fullscreen-gallery-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .fullscreen-gallery {
        transition-duration: 1ms;
        transition-delay: 0s;
    }

    .fullscreen-gallery.is-open {
        transition-duration: 1ms;
    }

    .fullscreen-gallery__stage img,
    .fullscreen-gallery__stage video {
        animation-duration: 1ms;
    }
}

@media (min-width: 701px) {
    body:not(.project-detail-page) {
        touch-action: pan-x pinch-zoom;
    }
}

@media (max-width: 700px) {
    body:not(.project-detail-page) {
        display: block;
        height: auto;
        min-height: 100svh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    body:not(.project-detail-page) .site-header {
        position: fixed;
        width: calc(100% - 2rem);
    }

    body:not(.project-detail-page) .site-title {
        width: 100%;
        font-size: clamp(2rem, 8vw, 3.4rem);
        white-space: normal;
        overflow-wrap: anywhere;
    }

    body:not(.project-detail-page) .project-meta {
        display: none;
    }

    body:not(.project-detail-page) .project-carousel__viewport,
    body:not(.project-detail-page) .project-grid {
        height: auto;
        overflow: visible;
    }

    body:not(.project-detail-page) .project-grid {
        display: flex;
        flex-direction: column;
        padding-block: 22.5svh;
    }

    body:not(.project-detail-page) .project-card {
        position: relative;
        min-height: 55svh;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    body:not(.project-detail-page) .project-card__link {
        position: relative;
        inset: auto;
        width: 100%;
        pointer-events: auto;
    }

    body:not(.project-detail-page) .project-card__blurred,
    body:not(.project-detail-page) .project-card__hit-area {
        display: none;
    }

    body:not(.project-detail-page) .project-card__detail,
    body:not(.project-detail-page) .project-card.is-focused .project-card__detail {
        position: static;
        width: min(84vw, 32rem);
        max-height: 65svh;
        object-fit: contain;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    body.project-detail-page .project-index-group {
        display: none;
    }

    body.project-detail-page .project-back-link {
        display: none;
    }

    body.project-detail-page .project-detail-gallery img,
    body.project-detail-page .project-detail-gallery video {
        cursor: default;
    }

    body.project-detail-page .project-detail-gallery {
        flex-direction: column;
    }

    body.project-detail-page .project-detail-gallery img,
    body.project-detail-page .project-detail-gallery video {
        max-width: min(74vw, 24rem);
        max-height: 24vh;
    }
}

@media (max-width: 600px) {
    .fullscreen-gallery__stage {
        width: 76vw;
        height: 78vh;
    }

    .fullscreen-gallery__arrow--prev {
        left: 0.75rem;
    }

    .fullscreen-gallery__arrow--next {
        right: 0.75rem;
    }
}