*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body.crezzio-portfolio-index-body {
    margin: 0;
    padding: 0;
    background: #080808;
}

body.crezzio-portfolio-index-body {
    color: #f5f0e8;
    overflow-x: hidden;
}

.crezzio-portfolio-index {
    --black: #080808;
    --white: #f5f0e8;
    --display: 'Bebas Neue', sans-serif;
    --serif: 'Playfair Display', serif;
    --mono: 'Space Mono', monospace;

    position: relative;
    width: 100%;
    background: var(--black);
}

.portfolio-scroll-track {
    position: relative;
    min-height: calc(var(--portfolio-count) * 100vh);
    background: var(--black);
}

.portfolio-fixed {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background: var(--black);
}




.portfolio-backgrounds,
.portfolio-background,
.portfolio-background-shade,
.portfolio-background-noise {
    position: absolute;
    inset: 0;
}

.portfolio-backgrounds {
    z-index: 0;
    overflow: hidden;
    background: #080808;
}

.portfolio-background {
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    clip-path: inset(100% 0 0 0);
    will-change: opacity, clip-path, transform;
    transition:
        opacity .65s cubic-bezier(.22,1,.36,1),
        clip-path .8s cubic-bezier(.22,1,.36,1);
}

.portfolio-background.is-active {
    z-index: 3;
    opacity: 1;
    visibility: visible;
    clip-path: inset(0 0 0 0);
}

.portfolio-background.is-previous {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    clip-path: inset(0 0 0 0);
}

.portfolio-background img {
    position: absolute;
    inset: -4%;
    width: 108%;
    height: 108%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(.1) brightness(.52) contrast(1.04);
    transform: scale(1.02);
    will-change: transform;
}

.portfolio-background-shade {
    z-index: 5;
    background:
        linear-gradient(90deg, rgba(8,8,8,.50) 0%, rgba(8,8,8,.08) 46%, rgba(8,8,8,.30) 100%),
        linear-gradient(180deg, rgba(8,8,8,.30) 0%, transparent 30%, transparent 70%, rgba(8,8,8,.42) 100%);
    pointer-events: none;
}

.portfolio-background-noise {
    z-index: 6;
    opacity: .035;
    pointer-events: none;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}




.portfolio-heading {
    position: absolute;
    z-index: 20;
    top: clamp(84px, 9vh, 120px);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;

    font-family: var(--display);
    font-size: clamp(70px, 10vw, 150px);
    line-height: .78;
    letter-spacing: .02em;
    color: var(--white);
}

.portfolio-heading span {
    display: block;
}

.portfolio-heading .outline,
.portfolio-footer-title .outline {
    color: var(--white);
    -webkit-text-stroke: 0;
}




.portfolio-category-nav {
    position: absolute;
    z-index: 30;
    top: 50%;
    left: clamp(28px, 5vw, 80px);
    width: min(30vw, 430px);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.portfolio-category-link {
    position: relative;
    display: block;
    width: 100%;
    padding: 5px 0;

    appearance: none;
    border: 0;
    background: transparent;
    color: var(--white);
    text-align: left;
    cursor: pointer;

    opacity: .28;
    transform: translateX(0);

    transition:
        opacity .38s ease,
        transform .5s cubic-bezier(.22,1,.36,1),
        padding .5s cubic-bezier(.22,1,.36,1);
}

.portfolio-category-link:hover {
    opacity: .72;
}

.portfolio-category-link.is-active {
    opacity: 1;
    transform: translateX(12px);
    padding-left: 14px;
}

.portfolio-category-link.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: var(--white);
}

.portfolio-category-label {
    font-family: var(--display);
    font-size: clamp(22px, 2.4vw, 38px);
    line-height: .95;
    letter-spacing: .025em;
    text-transform: uppercase;
}




.portfolio-featured {
    position: absolute;
    z-index: 25;
    top: 50%;
    left: 50%;

    width: min(34vw, 520px);
    min-height: clamp(280px, 36vh, 440px);

    transform: translate(-50%, -50%);
}

.portfolio-featured-item {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 22px;

    color: var(--white);
    text-decoration: none;
    text-align: center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.portfolio-featured-item.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.portfolio-featured-mask {
    display: block;

    width: 100%;
    max-width: 100%;

    overflow: hidden;

    padding:
        .14em
        .05em
        .20em;
}

.portfolio-featured-name {
    display: block;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;

    font-family: var(--display);
    font-style: normal;
    font-weight: 400;

    font-size: clamp(56px, 6vw, 96px);
    line-height: .84;

    letter-spacing: .02em;
    text-transform: uppercase;

    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;

    transform: translateY(0);
    opacity: 1;

    will-change: transform, opacity;
}

.portfolio-featured-item.is-entering-down .portfolio-featured-name {
    animation:
        portfolio-name-in-down
        .72s
        cubic-bezier(.22,1,.36,1)
        both;
}

.portfolio-featured-item.is-entering-up .portfolio-featured-name {
    animation:
        portfolio-name-in-up
        .72s
        cubic-bezier(.22,1,.36,1)
        both;
}

.portfolio-featured-item.is-leaving-down .portfolio-featured-name {
    animation:
        portfolio-name-out-down
        .42s
        cubic-bezier(.55,0,1,.45)
        both;
}

.portfolio-featured-item.is-leaving-up .portfolio-featured-name {
    animation:
        portfolio-name-out-up
        .42s
        cubic-bezier(.55,0,1,.45)
        both;
}

@keyframes portfolio-name-in-down {
    from {
        transform: translateY(110%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes portfolio-name-in-up {
    from {
        transform: translateY(-110%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes portfolio-name-out-down {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(-110%);
        opacity: 0;
    }
}

@keyframes portfolio-name-out-up {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(110%);
        opacity: 0;
    }
}

.portfolio-featured-action {
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: .38em;
    text-transform: uppercase;
    color: rgba(245,240,232,.58);
    transition: color .25s ease;
}

.portfolio-featured-item:hover .portfolio-featured-action {
    color: var(--white);
}




.portfolio-footer {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    bottom: clamp(28px, 5vh, 64px);
    pointer-events: none;
}

.portfolio-footer-title {
    text-align: center;
    font-family: var(--display);
    font-size: clamp(62px, 9vw, 132px);
    line-height: .78;
    letter-spacing: .02em;
}

.portfolio-footer-title span {
    display: block;
}

.portfolio-progress {
    width: 170px;
    margin: 0 auto;
}

.portfolio-progress-numbers {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;

    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: .18em;

    color: rgba(245,240,232,.72);
}

.portfolio-progress-track {
    position: relative;
    height: 1px;
    overflow: hidden;
    background: rgba(245,240,232,.25);
}

.portfolio-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    background: var(--white);

    transition:
        width
        .55s
        cubic-bezier(.22,1,.36,1);
}




.portfolio-scroll-steps {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.portfolio-scroll-step {
    height: 100vh;
}




.crezzio-portfolio-empty {
    min-height: 100vh;
    display: grid;
    place-items: center;

    background: #080808;
    color: rgba(245,240,232,.6);

    font-family: 'Space Mono', monospace;
}




@media (max-width: 1100px) and (min-width: 769px) {

    .portfolio-featured {
        width: min(58vw, 760px);
        min-height: clamp(200px, 28vh, 320px);
    }

    .portfolio-featured-name {
        font-size: clamp(54px, 8vw, 105px);
        line-height: .88;
    }

    .portfolio-category-nav {
        width: min(32vw, 360px);
    }

    .portfolio-category-label {
        font-size: clamp(20px, 2.7vw, 32px);
    }
}




@media (max-width: 768px) {

    .portfolio-scroll-track {
        min-height: auto;
    }

    .portfolio-fixed {
        position: relative;

        height: auto;
        min-height: 100svh;

        overflow: visible;

        padding:
            96px
            20px
            42px;
    }

    .portfolio-backgrounds {
        position: fixed;
    }

    .portfolio-heading {
        position: relative;

        top: auto;
        left: auto;

        transform: none;

        font-size:
            clamp(
                64px,
                22vw,
                110px
            );

        margin-bottom: 56px;
    }

    .portfolio-category-nav {
        position: relative;

        top: auto;
        left: auto;

        transform: none;

        width: 100%;

        gap: 0;
    }

    .portfolio-category-link {
        padding: 15px 0;

        border-bottom:
            1px solid
            rgba(245,240,232,.12);

        opacity: .7;
    }

    .portfolio-category-link.is-active {
        padding-left: 0;
        transform: none;
    }

    .portfolio-category-link.is-active::before {
        display: none;
    }

    .portfolio-category-label {
        font-size:
            clamp(
                30px,
                10vw,
                52px
            );
    }

    .portfolio-featured {
        display: none;
    }

    .portfolio-footer {
        position: relative;
        bottom: auto;
        margin-top: 70px;
    }

    .portfolio-footer-title {
        font-size:
            clamp(
                60px,
                20vw,
                100px
            );
    }

    .portfolio-progress,
    .portfolio-scroll-steps {
        display: none;
    }

    .portfolio-background {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .portfolio-background:first-child {
        opacity: 1 !important;
        visibility: visible !important;
        clip-path: none;
    }

    .portfolio-background-shade {
        background:
            rgba(8,8,8,.64);
    }
}




@media (prefers-reduced-motion: reduce) {

    .portfolio-background,
    .portfolio-category-link,
    .portfolio-progress-fill,
    .portfolio-featured-name {
        transition: none;
        animation: none !important;
    }
}