/* =========================================================
   SO & SO / HOVER REVEAL
   Elementor-compatible component

   Global So & So typography is the default.
   Elementor can override text size and line height.
   SVG artwork keeps its natural proportions by default.
   ========================================================= */

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

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


/* =========================================================
   MENU
   ========================================================= */

.hover-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

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


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.hover-title {
    /*
     * Defaults to the site's global H3 scale.
     * Elementor's Text Size control can override this.
     */
    --hrw-title-size:
        var(--ss-type-h3-size, clamp(28px, 2.4vw, 42px));

    /*
     * Defaults to the site's global H3 line height.
     * Elementor's Line Height control can override this.
     */
    --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.3s ease,
        transform 0.25s ease;

    will-change:
        transform;
}


/* =========================================================
   HERO HEADLINE
   ========================================================= */

/*
   Selecting "SS Hero Headline" makes the widget inherit
   the global hero scale:

   1920px → 190px
   1440px → 143px
   1024px → 101px
   768px  → 76px
   430px  → 64px

   Elementor Text Size and Line Height controls can
   override these values independently.
 */

.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 specificity */

.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;
}


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

.hover-image {
    position: absolute;

    top: 0;
    left: calc(100% + 120px);

    width:
        var(--hrw-image-width);

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

    height:
        auto;

    opacity: 0;

    pointer-events:
        none;

    z-index:
        10;

    transition:
        opacity 0.3s ease;
}


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

.hover-image img {
    display: block;

    width: 100%;

    /*
     * Auto is deliberate.
     * SVG artwork retains its natural aspect ratio.
     */
    height:
        var(--hrw-image-height, auto);

    max-width:
        none;

    object-fit:
        contain;

    object-position:
        center;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        scale(0.95);

    transition:
        opacity 0.4s ease,
        transform 0.35s ease;
}


.hover-image img.is-visible {
    opacity:
        1;

    visibility:
        visible;

    transform:
        scale(1);
}




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

@media (max-width: 1024px) {

    .hover-reveal-widget {
        display:
            flex;

        flex-direction:
            column;

        width:
            100%;

        padding-bottom:
            0;
    }

    .hover-image {
        position:
            relative;

        top:
            auto;

        left:
            auto;

        margin:
            20px auto 0;

        opacity:
            1;
    }
}


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

@media (max-width: 767px) {

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

        margin-top:
            20px;
    }
}


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

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


/* =========================================================
   V11 VISIBILITY / SVG
   GSAP controls visibility during hover.
   ========================================================= */

.hover-image {
    visibility: hidden;
}

.hover-image img {
    visibility: hidden;
    height: auto;
}

.hover-image img[style*="visibility: inherit"],
.hover-image[style*="visibility: inherit"] {
    visibility: inherit;
}