.portfolio-carousel {
    --portfolio-disc-size: clamp(11rem, 54vw, 17rem);
    --portfolio-side-offset: calc(var(--portfolio-disc-size) * 0.82);
}

.portfolio-stage {
    position: relative;
    height: calc(var(--portfolio-disc-size) + 10.5rem);
    overflow: hidden;
    isolation: isolate;
}

.portfolio-card {
    --x: 0px;
    --y: 0px;
    --scale: 1;
    position: absolute;
    top: 0;
    left: 50%;
    display: flex;
    width: var(--portfolio-disc-size);
    min-width: 0;
    flex-direction: column;
    align-items: center;
    padding: 0;
    border: 0;
    color: var(--sw-color-ink);
    background: transparent;
    text-align: center;
    cursor: pointer;
    opacity: 1;
    visibility: visible;
    transform: translateX(calc(-50% + var(--x))) translateY(var(--y)) scale(var(--scale));
    transform-origin: center top;
    transition: transform 550ms ease, opacity 550ms ease, visibility 550ms;
}

.portfolio-card[data-position="center"] {
    z-index: 3;
}

.portfolio-card[data-position="left"],
.portfolio-card[data-position="right"] {
    --y: 1.25rem;
    --scale: 0.76;
    z-index: 2;
    opacity: 0.8;
}

.portfolio-card[data-position="left"] {
    --x: calc(-1 * var(--portfolio-side-offset));
}

.portfolio-card[data-position="right"] {
    --x: var(--portfolio-side-offset);
}

.portfolio-card[data-position="far-left"],
.portfolio-card[data-position="far-right"] {
    --y: 2.5rem;
    --scale: 0.55;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.portfolio-card[data-position="far-left"] {
    --x: calc(-2 * var(--portfolio-side-offset));
}

.portfolio-card[data-position="far-right"] {
    --x: calc(2 * var(--portfolio-side-offset));
}

.portfolio-disc {
    position: relative;
    display: block;
    width: var(--portfolio-disc-size);
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
    background: var(--sw-color-surface-muted);
    -webkit-mask-image: radial-gradient(circle, transparent 0 6%, #000 6.6%);
    mask-image: radial-gradient(circle, transparent 0 6%, #000 6.6%);
}

.portfolio-disc img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portfolio-disc::after {
    position: absolute;
    inset: 0;
    border: 1px solid rgb(255 255 255 / 55%);
    border-radius: 50%;
    background: conic-gradient(
        from 28deg,
        transparent 0deg 70deg,
        rgb(255 255 255 / 17%) 95deg,
        transparent 120deg 240deg,
        rgb(0 0 0 / 10%) 275deg,
        transparent 300deg
    );
    box-shadow: inset 0 0 0 0.35rem rgb(0 0 0 / 13%), inset 0 0 0 0.6rem rgb(255 255 255 / 22%);
    content: "";
    pointer-events: none;
}

.portfolio-card.is-playing .portfolio-disc {
    animation: portfolio-spin 8s linear infinite;
}

.portfolio-card-copy {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding-top: 1.25rem;
}

.portfolio-card-service {
    color: var(--sw-color-smoke);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.portfolio-card-title {
    display: -webkit-box;
    overflow: hidden;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.portfolio-card-summary {
    display: -webkit-box;
    overflow: hidden;
    color: var(--sw-color-smoke);
    font-size: 0.875rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.portfolio-card:focus-visible,
.portfolio-arrow:focus-visible {
    outline: 0.18rem solid var(--sw-color-ink);
    outline-offset: 0.2rem;
}

.portfolio-card:focus-visible {
    border-radius: 0.25rem;
}

.portfolio-panel[hidden] {
    display: none;
}

.portfolio-audio {
    padding: 1rem;
    border: 1px solid var(--sw-color-border);
    border-radius: 0.5rem;
    background: var(--sw-color-surface-muted);
}

.portfolio-card[data-wrap="left-to-right"] {
    animation: portfolio-wrap-left 550ms ease both;
}

.portfolio-card[data-wrap="right-to-left"] {
    animation: portfolio-wrap-right 550ms ease both;
}

@keyframes portfolio-spin {
    to { transform: rotate(360deg); }
}

@keyframes portfolio-wrap-left {
    0% { opacity: 0.8; transform: translateX(calc(-50% - var(--portfolio-side-offset))) translateY(1.25rem) scale(0.76); }
    45% { opacity: 0; transform: translateX(calc(-50% - 2 * var(--portfolio-side-offset))) translateY(2.5rem) scale(0.55); }
    55% { opacity: 0; transform: translateX(calc(-50% + 2 * var(--portfolio-side-offset))) translateY(2.5rem) scale(0.55); }
    100% { opacity: 0.8; transform: translateX(calc(-50% + var(--portfolio-side-offset))) translateY(1.25rem) scale(0.76); }
}

@keyframes portfolio-wrap-right {
    0% { opacity: 0.8; transform: translateX(calc(-50% + var(--portfolio-side-offset))) translateY(1.25rem) scale(0.76); }
    45% { opacity: 0; transform: translateX(calc(-50% - 2 * var(--portfolio-side-offset))) translateY(2.5rem) scale(0.55); }
    55% { opacity: 0; transform: translateX(calc(-50% - var(--portfolio-side-offset))) translateY(1.25rem) scale(0.55); }
    100% { opacity: 0.8; transform: translateX(calc(-50% - var(--portfolio-side-offset))) translateY(1.25rem) scale(0.76); }
}

@media (min-width: 768px) {
    .portfolio-carousel {
        --portfolio-disc-size: clamp(15rem, 28vw, 20rem);
        --portfolio-side-offset: calc(var(--portfolio-disc-size) * 1.12);
    }
}

@media (max-width: 767px) {
    .portfolio-card:not([data-position="center"]) .portfolio-card-copy {
        visibility: hidden;
    }

    /* The discs on either side reach past the page's side padding. The stage hides what overflows it, so on a narrow
       screen it runs out to the edges of the screen, by the padding the container adds, and the side discs peek in
       from the edge instead of being cut short inside the margin. */
    .portfolio-stage {
        margin-inline: -1.25rem;
    }
}

@media (min-width: 640px) and (max-width: 767px) {
    .portfolio-stage {
        margin-inline: -2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-card,
    .portfolio-card[data-wrap] {
        animation: none;
        transition: none;
    }

    .portfolio-card.is-playing .portfolio-disc {
        animation: none;
    }
}