/* =========================================================
   SO & SO / HOVER REVEAL
   v15

   Typography inherits from the global So & So CSS system.

   H3:
   --ss-type-h3-size
   --ss-type-h3-line
   --ss-type-h3-track

   Hero:
   --ss-type-hero-size
   --ss-type-hero-line
   --ss-type-hero-track

   Elementor Text Size and Line Height remain optional
   per-widget overrides.

   Image width defaults to the global So & So token
   --ss-hover-image-width, with a 30vw fluid fallback.
   ========================================================= */


/* =========================================================
   01. COMPONENT
   ========================================================= */

.hover-reveal-widget {

    --hrw-image-width:
        var(
            --ss-hover-image-width,
            clamp(260px, 30vw, 600px)
        );

    --hrw-image-height:
        auto;

    position:
        relative;

    display:
        block;

    width:
        100%;

    max-width:
        100%;

    padding-bottom:
        120px;

}


/* =========================================================
   02. MENU
   ========================================================= */

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

}


/* =========================================================
   03. TYPOGRAPHY
   ========================================================= */

/*
   The global stylesheet is the source of truth.

   Nothing is hard-coded here unless the global variable
   does not exist.
*/

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

}


/* =========================================================
   04. SS HERO HEADLINE
   ========================================================= */

/*
   This is the important connection.

   The plugin uses exactly the same variables as:

   .ss-hero-headline

   in the global stylesheet.

   Therefore changing the master CSS automatically changes
   this plugin.
*/

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

}


/*
   Also expose the hero class on the widget wrapper.

   This allows the component to be identified by the same
   design-system class without changing the markup.
*/

.hover-reveal-widget.ss-hero-headline-widget {

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

}


/* =========================================================
   05. IMAGE
   ========================================================= */

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

}


/* =========================================================
   06. SVG / IMAGE
   ========================================================= */

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

}


/* =========================================================
   07. TABLET
   ========================================================= */

@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;

    }

}


/* =========================================================
   08. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .hover-image {

        max-width:
            90vw;

    }

}


/* =========================================================
   09. SAFETY
   ========================================================= */

.hover-reveal-widget,
.hover-reveal-widget * {

    box-sizing:
        border-box;

}