/* =========================================================
   SO & SO / HOVER REVEAL
   v14
   ========================================================= */

.hover-reveal-widget {
    --hrw-image-width: clamp(240px, 22vw, 520px);
    --hrw-image-height: auto;

    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    padding-bottom: 120px;
}

.hover-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 2;
}

.hover-item {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 20px;
    cursor: pointer;
    position: relative;
    z-index: 3;
}

.hover-title {
    --hrw-title-size: var(--ss-type-h3-size, clamp(28px, 2.4vw, 42px));
    --hrw-title-line: var(--ss-type-h3-line, 1);
    --hrw-title-track: var(--ss-type-h3-track, -1.5px);

    display: block;
    margin: 0;
    padding: 0;

    font-family: var(--ss-font-display, "neue-haas-grotesk-display", sans-serif) !important;
    font-size: var(--hrw-title-size) !important;
    font-weight: 600 !important;
    line-height: var(--hrw-title-line) !important;
    letter-spacing: var(--hrw-title-track) !important;
    text-transform: lowercase !important;

    transition: color 0.25s ease, transform 0.25s ease;
    will-change: transform;
}

.hover-title.ss-hero-headline {
    --hrw-title-size: var(--ss-type-hero-size, clamp(64px, 9.9vw, 190px));
    --hrw-title-line: var(--ss-type-hero-line, 0.95);
    --hrw-title-track: var(--ss-type-hero-track, clamp(-4px, -0.18vw, -1.5px));
}

.elementor-element .hover-title {
    font-family: var(--ss-font-display, "neue-haas-grotesk-display", sans-serif) !important;
    font-size: var(--hrw-title-size) !important;
    font-weight: 600 !important;
    line-height: var(--hrw-title-line) !important;
    letter-spacing: var(--hrw-title-track) !important;
    text-transform: lowercase !important;
}


/* =========================================================
   IMAGE
   ========================================================= */

/*
   The image is deliberately positioned INSIDE the widget
   by default. This means a 100% width value is usable and
   cannot place the artwork completely outside the viewport.
*/

.hover-image {
    position: absolute;

    top: 50%;
    right: 0;

    width: var(--hrw-image-width);
    max-width: 100%;

    height: auto;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    z-index: 1;

    transform: translateY(-50%);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.hover-image.is-visible {
    opacity: 1;
    visibility: visible;
}


/*
   SVG and raster images retain their natural proportions.
*/

.hover-image img {
    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;

    object-fit: contain;

    opacity: 0;
    visibility: hidden;

    transform: scale(0.96);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;
}

.hover-image img.is-visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 1024px) {

    .hover-reveal-widget {
        padding-bottom: 0;
    }

    .hover-image {
        position: relative;

        top: auto;
        right: auto;

        width: var(--hrw-image-width);
        max-width: 80vw;

        margin: 32px auto 0;

        transform: none;
    }
}

@media (max-width: 767px) {

    .hover-image {
        max-width: 90vw;
    }
}


/* =========================================================
   SAFETY
   ========================================================= */

.hover-reveal-widget,
.hover-reveal-widget * {
    box-sizing: border-box;
}