/*
 * VSL NEW GENERATED HERO CARD IMAGES
 *
 * Six newly generated, slide-specific artworks placed behind the hero
 * narrative cards. The main full-width hero scene remains unchanged.
 */

#hero .hero-slide:nth-of-type(1) .hero-story-main {
    --vsl-generated-card-image:
        url("../images/hero/generated-card-art/hero-card-01-portfolio-overview.webp");
}

#hero .hero-slide:nth-of-type(2) .hero-story-main {
    --vsl-generated-card-image:
        url("../images/hero/generated-card-art/hero-card-02-ct-contrast.webp");
}

#hero .hero-slide:nth-of-type(3) .hero-story-main {
    --vsl-generated-card-image:
        url("../images/hero/generated-card-art/hero-card-03-pacemakers-stents.webp");
}

#hero .hero-slide:nth-of-type(4) .hero-story-main {
    --vsl-generated-card-image:
        url("../images/hero/generated-card-art/hero-card-04-ng-enfit.webp");
}

#hero .hero-slide:nth-of-type(5) .hero-story-main {
    --vsl-generated-card-image:
        url("../images/hero/generated-card-art/hero-card-05-giving-irrigation.webp");
}

#hero .hero-slide:nth-of-type(6) .hero-story-main {
    --vsl-generated-card-image:
        url("../images/hero/generated-card-art/hero-card-06-documentation.webp");
}

#hero .hero-story-main {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;

    background-color:
        rgba(249, 253, 255, 0.96) !important;

    background-image:
        linear-gradient(
            98deg,
            rgba(255, 255, 255, 0.985) 0%,
            rgba(255, 255, 255, 0.975) 38%,
            rgba(251, 254, 255, 0.91) 60%,
            rgba(244, 251, 255, 0.67) 78%,
            rgba(240, 249, 253, 0.46) 100%
        ),
        var(--vsl-generated-card-image) !important;

    background-position:
        center center !important;

    background-repeat:
        no-repeat !important;

    background-size:
        cover !important;

    border:
        1px solid rgba(255, 255, 255, 0.92) !important;

    box-shadow:
        0 28px 76px rgba(16, 46, 114, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset -1px 0 0 rgba(24, 181, 194, 0.10) !important;

    backdrop-filter:
        blur(18px)
        saturate(142%) !important;

    -webkit-backdrop-filter:
        blur(18px)
        saturate(142%) !important;
}

/* Keep all real card content above the generated artwork. */
#hero .hero-story-main > * {
    position: relative !important;
    z-index: 3 !important;
}

/* Preserve the original cyan-blue signature bar. */
#hero .hero-story-main::before {
    z-index: 4 !important;
}

/* Add a restrained premium illumination on the visual side. */
#hero .hero-story-main::after {
    content: "" !important;
    position: absolute !important;
    z-index: 1 !important;
    right: -92px !important;
    bottom: -118px !important;
    width: 300px !important;
    height: 300px !important;
    display: block !important;
    border-radius: 50% !important;

    background:
        radial-gradient(
            circle,
            rgba(22, 181, 194, 0.16) 0%,
            rgba(49, 69, 154, 0.06) 44%,
            transparent 72%
        ) !important;

    pointer-events: none !important;
}

/* Keep typography clear over the new photography. */
#hero .hero-story-main .eyebrow {
    background:
        rgba(255, 255, 255, 0.86) !important;

    border-color:
        rgba(24, 181, 194, 0.22) !important;

    backdrop-filter:
        blur(12px)
        saturate(135%) !important;

    -webkit-backdrop-filter:
        blur(12px)
        saturate(135%) !important;
}

#hero .hero-story-main h1 {
    max-width: 470px !important;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

#hero .hero-story-main h2,
#hero .hero-story-main p {
    max-width: 455px !important;
}

#hero .hero-mini-points span {
    background:
        rgba(251, 254, 255, 0.80) !important;

    border-color:
        rgba(49, 69, 154, 0.11) !important;

    backdrop-filter:
        blur(10px)
        saturate(132%) !important;

    -webkit-backdrop-filter:
        blur(10px)
        saturate(132%) !important;
}

/* A gentle artwork entrance when each slide becomes active. */
#hero .hero-slide.is-active .hero-story-main,
#hero .hero-slide.active .hero-story-main {
    animation:
        vslGeneratedHeroCardEnter
        720ms
        80ms
        cubic-bezier(.16, 1, .3, 1)
        both !important;
}

/* Dark theme: retain the images under a serious navy glass treatment. */
html[data-theme="dark"] #hero .hero-story-main {
    background-color:
        rgba(6, 16, 31, 0.94) !important;

    background-image:
        linear-gradient(
            98deg,
            rgba(6, 16, 31, 0.99) 0%,
            rgba(6, 16, 31, 0.975) 43%,
            rgba(7, 20, 38, 0.91) 64%,
            rgba(9, 27, 47, 0.74) 82%,
            rgba(10, 31, 51, 0.61) 100%
        ),
        var(--vsl-generated-card-image) !important;

    border-color:
        rgba(117, 227, 235, 0.14) !important;
}

html[data-theme="dark"] #hero .hero-story-main .eyebrow,
html[data-theme="dark"] #hero .hero-mini-points span {
    background:
        rgba(8, 25, 45, 0.80) !important;
}

/* Tablet */
@media (max-width: 980px) {
    #hero .hero-story-main {
        background-position:
            58% center !important;
    }
}

/* Mobile: stronger text veil, while preserving the new image. */
@media (max-width: 720px) {
    #hero .hero-story-main {
        background-image:
            linear-gradient(
                102deg,
                rgba(255, 255, 255, 0.995) 0%,
                rgba(255, 255, 255, 0.985) 64%,
                rgba(248, 252, 255, 0.80) 100%
            ),
            var(--vsl-generated-card-image) !important;

        background-position:
            67% center !important;
    }

    #hero .hero-story-main::after {
        width: 210px !important;
        height: 210px !important;
        right: -82px !important;
        bottom: -94px !important;
    }

    html[data-theme="dark"] #hero .hero-story-main {
        background-image:
            linear-gradient(
                102deg,
                rgba(6, 16, 31, 0.995) 0%,
                rgba(6, 16, 31, 0.975) 68%,
                rgba(8, 24, 43, 0.80) 100%
            ),
            var(--vsl-generated-card-image) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #hero .hero-slide.is-active .hero-story-main,
    #hero .hero-slide.active .hero-story-main {
        animation: none !important;
    }
}

@keyframes vslGeneratedHeroCardEnter {
    from {
        opacity: 0;
        transform:
            translateY(16px)
            scale(0.987);
        background-position:
            55% center;
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
        background-position:
            center center;
    }
}