/* Each website occupies a complete screen; project details sit over the image. */
.work-scene {
    padding: 0;
    height: 100svh;
    min-height: 600px;
    display: block
}

.work-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden
}

.work-track {
    height: 100%
}

.work-slide {
    height: 100%;
    padding: 0;
    display: block
}

.work .project,
.work .project:nth-child(2) {
    width: 100%;
    height: 100%;
    max-width: none;
    padding: 0;
    position: relative
}

.work .project-view {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: #090b0d
}

.work .project-media {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0
}

.work .site-snapshot>iframe {
    width: var(--snapshot-width, 1280px);
    height: var(--snapshot-height, 800px)
}

.work .site-snapshot>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top
}

.work-heading {
    position: absolute;
    left: 4.5%;
    top: 110px;
    right: auto;
    max-width: 410px;
    margin: 0;
    padding: 15px 18px;
    display: block;
    border-radius: 8px;
    background: #090b0dcc;
    backdrop-filter: blur(12px);
    z-index: 4;
    pointer-events: none
}

.work-heading .eyebrow {
    font-size: 8px;
    margin-bottom: 10px;
    color: #b4c0c9
}

.work-heading h2 {
    font-size: clamp(24px, 2.6vw, 38px);
    line-height: 1.05;
    letter-spacing: -.045em
}

.work-heading>p {
    font-size: 11px;
    max-width: 330px;
    line-height: 1.6;
    margin: 12px 0 0;
    color: #c3cdd4
}

.work .project-info {
    position: absolute;
    left: 4.5%;
    right: 4.5%;
    bottom: 96px;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px 35px;
    padding: 20px 24px;
    border-left: 2px solid #168cff;
    background: #090b0dd9;
    backdrop-filter: blur(14px);
    max-width: 790px;
    border-radius: 0 8px 8px 0;
    pointer-events: none
}

.work .project-info>span:first-child {
    font-size: 9px;
    color: #c0cbd4
}

.work .project-info h3 {
    font-size: clamp(25px, 3vw, 41px);
    margin: 0;
    line-height: 1.1;
    color: #f0efe9
}

.work .project-info p {
    font-size: 13px;
    line-height: 1.65;
    margin: 0;
    color: #c6d0d8;
    max-width: 370px
}

.work-controls {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 94%;
    z-index: 5;
    margin: 0;
    padding: 10px 18px;
    background: #090b0de6;
    backdrop-filter: blur(14px);
    border: 1px solid #ffffff26;
    border-radius: 40px;
    gap: 14px
}

.work-hint {
    margin-left: 14px;
    font-size: 9px;
    white-space: nowrap
}

.work .project-launch>span {
    display: none
}

@media(max-width:759px), (max-height:599px) {
    .work.section {
        height: auto
    }

    .work-scene {
        position: relative;
        height: 100svh;
        min-height: 560px;
        padding: 0
    }

    .work-stage {
        position: absolute;
        height: 100%;
        overflow-x: auto;
        scroll-snap-type: x mandatory
    }

    .work-track {
        height: 100%;
        width: max-content;
        padding: 0;
        gap: 0;
        flex-direction: row
    }

    .work-slide {
        flex: 0 0 100vw;
        width: 100vw;
        height: 100%;
        padding: 0;
        margin: 0;
        scroll-snap-align: start
    }

    .work-heading {
        top: 95px;
        left: 5%;
        max-width: calc(100% - 10%);
        padding: 12px 15px
    }

    .work-heading h2 {
        font-size: 25px
    }

    .work-heading>p {
        font-size: 10px;
        max-width: 300px;
        margin-top: 8px
    }

    .work .project-info {
        left: 5%;
        right: 5%;
        bottom: 92px;
        padding: 16px 18px;
        display: block;
        min-height: 0;
        margin: 0
    }

    .work .project-info h3 {
        font-size: 27px;
        margin: 9px 0
    }

    .work .project-info p {
        font-size: 12px;
        line-height: 1.6;
        max-width: 470px
    }

    .work-controls {
        bottom: 22px;
        padding: 8px 14px;
        gap: 12px
    }

    .work-hint {
        font-size: 8px;
        margin-left: 5px
    }

    .work .project-media {
        height: 100%;
        aspect-ratio: auto
    }
}

@media(prefers-reduced-motion:reduce) {
    .work.section {
        height: auto
    }

    .work-scene {
        position: relative;
        height: auto;
        min-height: 0;
        padding: 0
    }

    .work-stage {
        position: relative;
        height: auto;
        overflow: visible
    }

    .work-track {
        width: 100%;
        height: auto;
        display: block
    }

    .work-slide {
        width: 100%;
        height: 100svh;
        min-height: 560px;
        padding: 0;
        margin: 0
    }

    .work-controls {
        display: none
    }

    .work .project-info {
        bottom: 30px
    }

    .work-heading {
        display: block
    }

    .work .project-media {
        height: 100%;
        aspect-ratio: auto
    }
}

/* Fit the desktop Daze screenshot inside the phone instead of cropping its sides. */
@media(max-width:759px) {
    .work .site-snapshot>img {
        object-fit: contain;
        object-position: center;
        background: #090b0d
    }
}

/* Keep showcased site menus below the studio navigation on desktop. */
@media(min-width:760px) and (min-height:600px) {
    .work .project-view {
        top: 112px;
        height: calc(100% - 112px)
    }
}

.site-snapshot.preview-loading::after {
    content: 'Fitbox Studio · Preparing preview';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: #101820;
    color: #d6dce0;
    font-size: 14px;
    pointer-events: none
}