/*
================================================

Space Vanta Theme 1.0

Module:
Bundle Hero Brand Extension

File:
public/bundle-template/bundle-hero/hero-image.css

Version:
3.3

Responsibility:
Bundle Hero Brand Typography / Visual Expression

Depends on:
public/bundle-template/bundle-hero.css

Update:
- Adaptive Main Image Presentation
- Desktop Thumbnail Frame Enhancement
- Thumbnail Frame Visual Family
- Mobile Thumbnail Size Preserved

================================================
*/


/* =================================================
   1. Hero Title
================================================= */

.sv-bundle-hero__title {
    position: relative;

    margin: 0;

    font-family:
        var(--sv-font-bundle,
            var(--sv-font-brand));

    font-size: clamp(46px, 4.7vw, 72px);

    font-weight: 600;

    line-height: 0.98;

    letter-spacing: -0.035em;

    color:
        var(--sv-color-text, #111);

    text-wrap: balance;
}


/* =================================================
   2. Desktop Title
================================================= */

@media (min-width: 769px) {

    .sv-bundle-hero__title {
        /*
     * Title begins at the exact top of the
     * Hero media.
     *
     * No vertical offset is introduced.
     */
        white-space: nowrap;
    }

}


/* =================================================
   3. Title Accent
================================================= */

.sv-bundle-hero__title::after {
    content: "";

    display: block;

    width: 52px;
    height: 1px;

    margin-top: 17px;

    background:
        linear-gradient(90deg,
            rgba(139, 146, 155, 0.9),
            rgba(205, 209, 214, 0.58),
            transparent);
}


/* =================================================
   4. Hero Description
================================================= */

.sv-bundle-hero__description {
    max-width: 410px;

    margin-top: 19px;

    font-family:
        var(--sv-font-ui,
            var(--sv-font-brand));

    font-size: 14px;

    font-weight: 400;

    line-height: 1.72;

    letter-spacing: 0.005em;

    color:
        rgba(17, 17, 17, 0.66);
}


/* =================================================
   5. Spatial Image Frame
================================================= */

.sv-bundle-hero__media {
    position: relative;

    /*
   * Slightly softened asymmetric corners.
   *
   * This avoids the feeling of a conventional
   * rectangular product image.
   */
    border-radius:
        24px 10px 24px 10px;

    background:
        linear-gradient(135deg,
            #f8f9fa 0%,
            #dfe2e6 42%,
            #f4f5f6 72%,
            #c9ced4 100%);

    border: 1px solid rgba(143, 149, 157, 0.52);

    box-shadow:
        0 16px 34px rgba(25, 30, 36, 0.10),

        0 3px 8px rgba(25, 30, 36, 0.06),

        inset 0 1px 0 rgba(255, 255, 255, 0.88),

        inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}


/* =================================================
   6. Spatial Frame Inner Reflection
================================================= */

.sv-bundle-hero__media::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    border-radius:
        24px 10px 24px 10px;

    background:
        linear-gradient(132deg,
            rgba(255, 255, 255, 0.28),
            transparent 28%,
            transparent 68%,
            rgba(76, 101, 128, 0.07));

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}


/* =================================================
   7. Spatial Cold Reflection
================================================= */

.sv-bundle-hero__media::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    border-radius:
        24px 10px 24px 10px;

    background:
        linear-gradient(116deg,
            transparent 0%,
            transparent 56%,
            rgba(74, 104, 138, 0.055) 78%,
            rgba(67, 92, 122, 0.085) 100%);

    mix-blend-mode: multiply;

    opacity: 0.8;
}


/* =================================================
   8. Main Image
================================================= */

.sv-bundle-hero__image {
    position: relative;

    z-index: 1;

    display: block;

    width: 100%;
    height: 100%;

    /*
   * Preserve the complete uploaded image.
   *
   * The image is allowed to adapt to the
   * existing Hero Frame instead of being cropped.
   */
    object-fit: contain;

    object-position: center;

    /*
   * The image itself follows the same
   * spatial corner language as the frame.
   */
    border-radius:
        24px 10px 24px 10px;

    opacity: 1;

    transform: scale(1);

    transition:
        opacity 180ms ease,
        transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* =================================================
   9. Image Hover
================================================= */

@media (hover: hover) and (pointer: fine) {

    .sv-bundle-hero__media:hover .sv-bundle-hero__image {

        transform: scale(1.012);
    }

}


/* =================================================
   10. Image Switching
================================================= */

.sv-bundle-hero__image.is-switching {
    opacity: 0.72;
}


/* =================================================
   11. Feature Navigation
================================================= */

.sv-bundle-hero__feature {
    /*
   * Keep the button as the interaction layer.
   *
   * Its existing circular interaction area is
   * intentionally preserved.
   */
    border-radius: 50%;

    opacity: 0.62;

    transition:
        opacity 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}


/* =================================================
   12. Feature Image
================================================= */

.sv-bundle-hero__feature-image {
    /*
   * Thumbnail is now treated as a smaller
   * spatial image frame rather than a circular
   * avatar-style thumbnail.
   *
   * Desktop dimensions are controlled by:
   * public/bundle-template/bundle-hero.css
   */

    display: block;

    object-fit: contain;

    object-position: center;

    /*
   * Stronger asymmetric corner language.
   *
   * Main Frame:
   * 24px 10px 24px 10px
   *
   * Thumbnail:
   * 18px 7px 18px 7px
   */
    border-radius:
        18px 7px 18px 7px;

    border: 1px solid rgba(153, 159, 167, 0.52);

    background:
        linear-gradient(135deg,
            #f8f9fa 0%,
            #e1e4e8 42%,
            #f4f5f6 72%,
            #cdd1d6 100%);

    box-shadow:
        0 5px 14px rgba(20, 25, 32, 0.10),

        0 2px 5px rgba(20, 25, 32, 0.05),

        inset 0 1px 0 rgba(255, 255, 255, 0.78),

        inset 0 0 0 1px rgba(255, 255, 255, 0.24);

    /*
   * Keep the thumbnail visually integrated
   * with the existing feature interaction.
   */
    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}


/* =================================================
   13. Feature Hover
================================================= */

@media (hover: hover) and (pointer: fine) {

    .sv-bundle-hero__feature:hover {

        opacity: 0.92;

        transform:
            translateY(-1px);
    }


    .sv-bundle-hero__feature:hover .sv-bundle-hero__feature-image {

        box-shadow:
            0 7px 16px rgba(20, 25, 32, 0.12),

            0 2px 6px rgba(20, 25, 32, 0.06),

            inset 0 1px 0 rgba(255, 255, 255, 0.82),

            inset 0 0 0 1px rgba(255, 255, 255, 0.26);
    }

}


/* =================================================
   14. Active Feature
================================================= */

.sv-bundle-hero__feature.is-active {

    opacity: 1;

    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.92),

        0 0 0 2px rgba(93, 118, 148, 0.24),

        0 6px 18px rgba(48, 69, 94, 0.12);
}


/* =================================================
   15. Active Feature Image
================================================= */

.sv-bundle-hero__feature.is-active .sv-bundle-hero__feature-image {

    box-shadow:
        0 7px 18px rgba(48, 69, 94, 0.14),

        0 0 0 1px rgba(255, 255, 255, 0.88),

        inset 0 1px 0 rgba(255, 255, 255, 0.84),

        inset 0 0 0 1px rgba(93, 118, 148, 0.12);
}


/* =================================================
   16. Hero CTA
================================================= */

.sv-bundle-hero__button {
    position: relative;

    min-height: 46px;

    padding:
        0 20px 0 22px;

    gap: 12px;

    overflow: hidden;

    isolation: isolate;

    border: 1px solid transparent;

    border-radius: 999px;

    /*
   * Default state:
   * visibly metallic.
   *
   * Silver / white / gray remain dominant.
   */
    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #e6e8eb 22%,
            #b9bec5 48%,
            #eef0f2 70%,
            #c7cbd0 100%) padding-box,

        linear-gradient(135deg,
            #9da4ac 0%,
            #f9fafb 24%,
            #8f969e 53%,
            #ffffff 74%,
            #a2a8b0 100%) border-box;

    color: #191c20;

    font-family:
        var(--sv-font-ui,
            var(--sv-font-brand));

    font-size: 11px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    /*
   * Stronger metallic depth in resting state.
   */
    box-shadow:
        0 7px 16px rgba(28, 34, 40, 0.10),

        0 2px 5px rgba(28, 34, 40, 0.08),

        inset 0 1px 0 rgba(255, 255, 255, 0.96),

        inset 0 -1px 0 rgba(117, 123, 131, 0.24);

    transform:
        translateY(0);

    transition:
        color 360ms ease,
        background 520ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* =================================================
   17. CTA Metallic Highlight
================================================= */

.sv-bundle-hero__button::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        linear-gradient(108deg,
            transparent 12%,
            rgba(255, 255, 255, 0.18) 34%,
            rgba(255, 255, 255, 0.72) 48%,
            rgba(255, 255, 255, 0.12) 63%,
            transparent 82%);

    transform:
        translateX(-125%);

    transition:
        transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* =================================================
   18. CTA Cold Blue Layer
================================================= */

.sv-bundle-hero__button::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    border-radius: inherit;

    /*
   * The blue layer is intentionally translucent.
   *
   * It does NOT replace the metallic surface.
   */
    background:
        linear-gradient(118deg,
            rgba(205, 211, 219, 0.05),
            rgba(98, 122, 150, 0.24) 46%,
            rgba(38, 62, 89, 0.52) 100%);

    opacity: 0;

    transform:
        translateX(-14%);

    transition:
        opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* =================================================
   19. CTA Arrow
================================================= */

.sv-bundle-hero__button span {
    position: relative;

    z-index: 2;
}


/* =================================================
   20. CTA Hover
================================================= */

@media (hover: hover) and (pointer: fine) {

    .sv-bundle-hero__button:hover {

        /*
     * The metallic base remains visible.
     * Cold blue becomes a surface transition.
     */
        color: #f8fafc;

        background:
            linear-gradient(135deg,
                #f2f4f6 0%,
                #d4d9df 20%,
                #aeb8c4 42%,
                #7e91a7 68%,
                #aeb9c5 100%) padding-box,

            linear-gradient(135deg,
                #ffffff 0%,
                #aeb9c5 30%,
                #4f6781 66%,
                #dce1e6 100%) border-box;

        box-shadow:
            0 15px 30px rgba(35, 57, 80, 0.19),

            0 5px 12px rgba(35, 57, 80, 0.12),

            inset 0 1px 0 rgba(255, 255, 255, 0.78),

            inset 0 -1px 0 rgba(48, 69, 91, 0.22);

        transform:
            translateY(-3px);
    }


    .sv-bundle-hero__button:hover::before {

        transform:
            translateX(125%);
    }


    .sv-bundle-hero__button:hover::after {

        opacity: 1;

        transform:
            translateX(0);
    }

}


/* =================================================
   21. Mobile Typography
================================================= */

@media (max-width: 768px) {

    .sv-bundle-hero__title {

        font-size:
            clamp(40px, 11vw, 58px);

        line-height: 1;

        letter-spacing: -0.03em;

        white-space: normal;
    }


    .sv-bundle-hero__title::after {

        margin-top: 14px;
    }


    .sv-bundle-hero__description {

        max-width: 100%;

        font-size: 14px;

        line-height: 1.68;
    }


    .sv-bundle-hero__button {

        min-height: 46px;

        padding:
            0 18px 0 20px;
    }


    .sv-bundle-hero__media {

        border-radius:
            20px 8px 20px 8px;
    }


    .sv-bundle-hero__media::before,
    .sv-bundle-hero__media::after,
    .sv-bundle-hero__image {

        border-radius:
            20px 8px 20px 8px;
    }

}


/* =================================================
   22. Reduced Motion
================================================= */

@media (prefers-reduced-motion: reduce) {

    .sv-bundle-hero__image,
    .sv-bundle-hero__feature,
    .sv-bundle-hero__feature-image,
    .sv-bundle-hero__button,
    .sv-bundle-hero__button::before,
    .sv-bundle-hero__button::after {

        transition: none;
    }

}