/* Fast project expansion with a horizontal image pan and the logo PNG as title. */
html[data-ui-view="projects"] .case-panel {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    isolation: isolate;
    padding: 22px;
    background: #090909;
    color: #fff;
    clip-path: inset(0 50% 0 0);
    transition: opacity .14s cubic-bezier(.22,1,.36,1), transform .14s cubic-bezier(.22,1,.36,1), clip-path .14s cubic-bezier(.22,1,.36,1), visibility 0s linear .14s;
}
html[data-ui-view="projects"] .case-panel::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,.88), rgba(0,0,0,.3) 62%, rgba(0,0,0,.18));
    content: "";
    pointer-events: none;
}
html[data-ui-view="projects"] .case-panel-media {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #111;
}
html[data-ui-view="projects"] .case-panel-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--case-position-x,50%) var(--case-position-y,35%);
    opacity: .62;
    transform: none;
    transition: object-position .14s cubic-bezier(.22,1,.36,1);
}
html[data-ui-view="projects"] .case-panel-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    width: min(100%, 430px);
    margin: auto 0 0;
}
html[data-ui-view="projects"] .case-panel-meta {
    margin: 0;
    color: rgba(255,255,255,.72);
    font: 400 10px/1.2 Arial, Helvetica, sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
}
html[data-ui-view="projects"] .case-panel-logo {
    display: block;
    width: min(100%, 240px);
    max-height: 62px;
    object-fit: contain;
    object-position: left center;
}
html[data-ui-view="projects"] .case-panel-description {
    margin: 0;
    padding: 0;
    color: rgba(255,255,255,.9);
    font: 400 12px/1.5 Arial, Helvetica, sans-serif;
}
html[data-ui-view="projects"] .case-panel-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
}
html[data-ui-view="projects"] .case-panel-close svg { display: block; width: 16px; height: 16px; }
html[data-ui-view="projects"] .case-panel-close:hover { color: var(--accent); }
html[data-ui-view="projects"] .case-panel-close:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
html[data-ui-view="projects"] .case-panel-close {
    width: 32px;
    height: 32px;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #000 !important;
    aspect-ratio: 1;
}
html[data-ui-view="projects"] .case-panel-close svg { width: 16px; height: 16px; aspect-ratio: 1; }
html[data-ui-view="projects"] .case-panel-close:hover { background: #fff !important; color: #000 !important; }
html[data-ui-view="projects"] .case-panel-close { top: 0 !important; right: 0 !important; width: 32px !important; height: 32px !important; padding: 0 !important; }
html[data-ui-view="projects"] .dot-close-square,
html[data-ui-view="g2km"] .dot-close-square {
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #000 !important;
    aspect-ratio: 1 / 1 !important;
    line-height: 0 !important;
}
html[data-ui-view="projects"] .dot-close-square svg,
html[data-ui-view="g2km"] .dot-close-square svg {
    display: block !important;
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
    aspect-ratio: 1 / 1 !important;
    transform: rotate(0deg) scale(1);
    transform-origin: center;
    transition: transform .32s cubic-bezier(.22,1,.36,1);
}
html[data-ui-view="projects"] .dot-close-square:hover svg,
html[data-ui-view="projects"] .dot-close-square:focus-visible svg,
html[data-ui-view="g2km"] .dot-close-square:hover svg,
html[data-ui-view="g2km"] .dot-close-square:focus-visible svg {
    transform: rotate(90deg) scale(1.18);
}
html[data-ui-view="projects"] .dot-close-square:active svg,
html[data-ui-view="g2km"] .dot-close-square:active svg {
    transform: rotate(90deg) scale(.88);
}
@media (prefers-reduced-motion: reduce) {
    html[data-ui-view="projects"] .dot-close-square svg,
    html[data-ui-view="g2km"] .dot-close-square svg { transition: none; }
}
html[data-ui-view="projects"] .case-item.case-is-open,
html[data-ui-view="projects"] .case-item.case-is-closing { z-index: 10; }
html[data-ui-view="projects"] .case-item.case-is-open .case-panel {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: translateX(0);
    clip-path: inset(0);
    transition: opacity .14s cubic-bezier(.22,1,.36,1), transform .14s cubic-bezier(.22,1,.36,1), clip-path .14s cubic-bezier(.22,1,.36,1);
}
html[data-ui-view="projects"] .case-item.case-is-closing .case-panel {
    visibility: visible;
    pointer-events: auto;
    opacity: 0;
    clip-path: inset(0 50% 0 0);
}
html[data-ui-view="projects"] .case-item.case-is-open .case-panel-media img {
    object-position: 50% var(--case-position-y,35%);
}

@media (min-width: 761px) {
    html[data-ui-view="projects"] .case-panel {
        left: 0;
        right: auto;
        width: 200%;
        max-width: none;
        box-sizing: border-box;
    }
    html[data-ui-view="projects"] .case-item:nth-child(4n + 3) .case-panel,
    html[data-ui-view="projects"] .case-item:nth-child(4n) .case-panel {
        left: auto;
        right: 0;
        transform: translateX(18px);
        clip-path: inset(0 0 0 50%);
    }
    html[data-ui-view="projects"] .case-item.case-is-open .case-panel { transform: translateX(0); }
    html[data-ui-view="projects"] .case-item:nth-child(4n + 3).case-is-open .case-panel,
    html[data-ui-view="projects"] .case-item:nth-child(4n).case-is-open .case-panel { clip-path: inset(0); }
    html[data-ui-view="projects"] .case-item:nth-child(4n + 3).case-is-closing .case-panel,
    html[data-ui-view="projects"] .case-item:nth-child(4n).case-is-closing .case-panel {
        transform: translateX(18px);
        clip-path: inset(0 0 0 50%);
    }
}

@media (max-width: 760px) {
    html[data-ui-view="projects"] .case-panel,
    html[data-ui-view="projects"] .case-item:nth-child(4n + 3) .case-panel,
    html[data-ui-view="projects"] .case-item:nth-child(4n) .case-panel {
        position: relative;
        left: auto;
        right: auto;
        width: 100%;
        max-width: none;
        min-height: 0;
        padding: 0 12px;
        box-sizing: border-box;
        clip-path: none;
        transition: max-height .14s cubic-bezier(.22,1,.36,1), opacity .12s ease, padding .14s cubic-bezier(.22,1,.36,1), visibility 0s linear .14s;
    }
    html[data-ui-view="projects"] .case-item.case-is-open .case-panel,
    html[data-ui-view="projects"] .case-item.case-is-closing .case-panel {
        min-height: 270px;
        padding: 18px 12px;
        clip-path: none;
    }
    html[data-ui-view="projects"] .case-panel-copy { width: 100%; gap: 8px; }
    html[data-ui-view="projects"] .case-panel-description { font-size: 11px; }
    html[data-ui-view="projects"] .case-panel-media img,
    html[data-ui-view="projects"] .case-item.case-is-open .case-panel-media img {
        object-position: var(--case-position-x,50%) var(--case-position-y,35%);
    }
}

@media (max-width: 760px) and (hover: none) {
    html[data-ui-view="projects"] .case-item { height: 104px; }
    html[data-ui-view="projects"] .case-item.case-is-open { height: 374px; }
    html[data-ui-view="projects"] .case-item.case-is-open .case-panel {
        position: absolute;
        top: 104px;
        right: 0;
        left: 0;
        height: 270px;
        max-height: 270px;
        min-height: 270px;
        overflow: hidden;
        transition: opacity .12s ease, padding .12s ease;
    }
}