.uoph-atelier {
    --uoph-atelier-bg: #fff;
    --uoph-atelier-ink: #191816;
    --um-atelier-before-after-position: 50%;

    position: relative;
    isolation: isolate;
    inline-size: 100vw;
    block-size: 100svh;
    margin: 0 calc(50% - 50vw);
    overflow: hidden;
    color: var(--uoph-atelier-ink);
    background: var(--uoph-atelier-bg);
    opacity: 1;
    transition: opacity 0.36s ease;
}

.uoph-atelier--text-light {
    --uoph-atelier-ink: #fff;
}

.uoph-atelier.uoph-atelier--loading { opacity: 0; }
.uoph-atelier.uoph-atelier--loading.is-ready { opacity: 1; }

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

.uoph-atelier__copy {
    position: absolute;
    z-index: 6;
    inset-inline-start: clamp(1.5rem, 5vw, 5rem);
    inset-block: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    inline-size: min(60rem, calc(100% - clamp(3rem, 10vw, 10rem)));
    color: var(--uoph-atelier-ink);
    pointer-events: none;
    isolation: isolate;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.uoph-atelier .um-home-atelier__comparison.is-copy-hidden .uoph-atelier__copy {
    opacity: 0;
    transform: translateY(0.75rem);
}

.uoph-atelier__copy h1 {
    max-inline-size: 11ch;
    margin: 0;
    font-family: "UOPH Gilroy", "UOPH Gilroy Fallback", Arial, Helvetica, sans-serif;
    font-size: clamp(3.453125rem, 8.84vw, 7.96875rem);
    font-weight: 800;
    line-height: 0.88;
    letter-spacing: -0.035em;
}

.uoph-atelier__copy p {
    max-inline-size: 38rem;
    margin: clamp(1.25rem, 2.5vw, 2.25rem) 0 0;
    font-family: "UOPH Gilroy", "UOPH Gilroy Fallback", Arial, Helvetica, sans-serif;
    font-size: clamp(1.25rem, 2vw, 2rem);
    font-weight: 400;
    line-height: 1.18;
}

.uoph-atelier .um-home-atelier__comparison {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    overflow: hidden;
    background: #fff;
    cursor: ew-resize;
    touch-action: pan-y;
    user-select: none;
    isolation: isolate;
}

.uoph-atelier.uoph-atelier--loading:not(.is-ready) .um-home-atelier__comparison {
    pointer-events: none;
}

.uoph-atelier .um-home-atelier__comparison.is-dragging { cursor: grabbing; }

.uoph-atelier .um-home-atelier__comparison-image {
    position: absolute;
    inset: 0;
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    user-select: none;
    pointer-events: none;
    -webkit-user-drag: none;
}

.uoph-atelier .um-home-atelier__comparison-image--after { z-index: 1; }

.uoph-atelier .um-home-atelier__comparison-before {
    position: absolute;
    z-index: 2;
    inset: 0;
    overflow: hidden;
    clip-path: inset(0 calc(100% - var(--um-atelier-before-after-position)) 0 0);
    will-change: clip-path;
}

.uoph-atelier .um-home-atelier__comparison-divider {
    position: absolute;
    z-index: 3;
    inset-block: 0;
    inset-inline-start: var(--um-atelier-before-after-position);
    inline-size: 2px;
    background: rgb(255 255 255 / 90%);
    transform: translateX(-50%);
    pointer-events: none;
    will-change: left;
}

.uoph-atelier button.um-home-atelier__comparison-control {
    position: absolute;
    z-index: 10;
    inset-block-start: 50%;
    inset-inline-start: var(--um-atelier-before-after-position);
    inline-size: 53px;
    block-size: 53px;
    margin: 0;
    padding: 0;
    border: 2px solid rgb(255 255 255 / 90%);
    border-radius: 50%;
    appearance: none;
    color: #fff;
    background: rgb(255 255 255 / 14%);
    backdrop-filter: blur(5px);
    cursor: ew-resize;
    transform: translate(-50%, -50%);
    transition: transform 0.25s ease, background 0.25s ease;
    touch-action: none;
    will-change: left;
}

.uoph-atelier button.um-home-atelier__comparison-control:hover {
    background: rgb(255 255 255 / 22%);
    transform: translate(-50%, -50%) scale(1.08);
}

.uoph-atelier button.um-home-atelier__comparison-control:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px #111;
}

.uoph-atelier button.um-home-atelier__comparison-control::before,
.uoph-atelier button.um-home-atelier__comparison-control::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inline-size: 10px;
    block-size: 10px;
    border-block-start: 1px solid currentColor;
    border-inline-start: 1px solid currentColor;
}

.uoph-atelier button.um-home-atelier__comparison-control::before {
    inset-inline-start: 13px;
    transform: translateY(-50%) rotate(-45deg);
}

.uoph-atelier button.um-home-atelier__comparison-control::after {
    inset-inline-end: 13px;
    transform: translateY(-50%) rotate(135deg);
}

@media (max-width: 47.99rem) {
    .uoph-atelier__copy {
        inset-inline-start: 1.25rem;
        padding-block-start: calc(16svh + 1.25rem);
        justify-content: flex-start;
        inline-size: calc(100% - 2.5rem);
    }
    .uoph-atelier__copy h1 {
        inline-size: min(100%, 11ch);
        margin-inline: auto;
        font-size: clamp(3.1875rem, 15.9375vw, 5.3125rem);
        text-align: center;
    }
    .uoph-atelier__copy p { display: none; }
    .uoph-atelier button.um-home-atelier__comparison-control { inline-size: 55px; block-size: 55px; }
}

@media (prefers-reduced-motion: reduce) {
    .uoph-atelier,
    .uoph-atelier__copy,
    .uoph-atelier button.um-home-atelier__comparison-control { transition: none !important; }
}