/*
 * ArsLudi landing hero
 * --------------------
 * Styles specific to _LandingHero.cshtml.
 * The Razor partial intentionally contains no inline style attributes.
 */

.landing-hero-band {
    --hero-v-depth: clamp(2.75rem, 4.5vw, 4rem);
    --hero-v-gap: clamp(3.75rem, 6vw, 5.5rem);

    min-height: calc(100svh - 4.5rem - var(--hero-v-gap));
    margin-bottom: var(--hero-v-gap);

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(20, 184, 166, 0.12),
            transparent 34rem
        ),
        var(--landing-brand-green-gradient);

    -webkit-clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--hero-v-depth)),
        50% 100%,
        0 calc(100% - var(--hero-v-depth))
    );

    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--hero-v-depth)),
        50% 100%,
        0 calc(100% - var(--hero-v-depth))
    );
}

@media (max-width: 639px) {
    .landing-hero-band {
        --hero-v-depth: 2.15rem;
    }
}

.landing-hero-atmosphere {
    background:
        linear-gradient(
            115deg,
            transparent 0%,
            rgba(255, 255, 255, 0.035) 42%,
            transparent 70%
        );
}

.landing-hero-icon-terminal {
    -webkit-mask:
        url("/icons/fontawesome/free/solid/terminal.svg")
        center / contain no-repeat;
    mask:
        url("/icons/fontawesome/free/solid/terminal.svg")
        center / contain no-repeat;
}

.landing-hero-icon-leaf {
    -webkit-mask:
        url("/images/logo/arsludi_leaf_solid.svg")
        center / contain no-repeat;
    mask:
        url("/images/logo/arsludi_leaf_solid.svg")
        center / contain no-repeat;
}

.landing-hero-icon-eye {
    -webkit-mask:
        url("/icons/fontawesome/free/solid/eye.svg")
        center / contain no-repeat;
    mask:
        url("/icons/fontawesome/free/solid/eye.svg")
        center / contain no-repeat;
}

.landing-hero-icon-globe {
    -webkit-mask:
        url("/icons/fontawesome/free/solid/globe.svg")
        center / contain no-repeat;
    mask:
        url("/icons/fontawesome/free/solid/globe.svg")
        center / contain no-repeat;
}


/* --------------------------------------------------------------------------
 * Hero actions
 * -------------------------------------------------------------------------- */

.landing-hero-actions {
    width: 100%;
    overflow: visible;
}

.landing-hero-action {
    width: min(100%, 19rem);
    min-height: 3.5rem;
    padding-inline: 2rem;
    font-size: 0.92rem;
    overflow: visible;
}

.landing-hero-action:hover {
    transform: none !important;
    box-shadow: 0 14px 32px rgba(2, 44, 42, 0.22);
}

@media (min-width: 640px) {
    .landing-hero-actions {
        width: auto;
    }

    .landing-hero-action {
        width: 20rem;
        white-space: nowrap;
    }
}


/* --------------------------------------------------------------------------
 * Product reveal
 * -------------------------------------------------------------------------- */

.landing-hero-proof {
    --hero-proof-notch-depth: clamp(2rem, 3.2vw, 3rem);

    max-width: none;
    isolation: isolate;
}

.landing-hero-proof::after {
    content: "";
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: -1px;
    left: 0;
    height: var(--hero-proof-notch-depth);
    pointer-events: none;

    background: #ffffff;

    -webkit-clip-path: polygon(
        0 100%,
        50% 0,
        100% 100%
    );

    clip-path: polygon(
        0 100%,
        50% 0,
        100% 100%
    );
}

.landing-hero-proof-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
}

.landing-hero-proof-buttons {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    overflow: visible;
}

.landing-hero-proof-action {
    width: min(100%, 18rem);
    min-height: 3.5rem;
    padding-inline: 2rem;
    font-size: 0.9rem;
    overflow: visible;
}

.landing-hero-proof-action:hover {
    transform: none !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
}

@media (max-width: 639px) {
    .landing-hero-proof {
        --hero-proof-notch-depth: 1.55rem;
    }
}

@media (min-width: 640px) {
    .landing-hero-proof-buttons {
        width: auto;
        flex-direction: row;
        justify-content: center;
    }

    .landing-hero-proof-action {
        width: 18rem;
        white-space: nowrap;
    }
}


/* Broader audience signal: secondary to the main hero claim. */
.landing-hero-audience-bridge {
    margin: 1rem auto 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    color: rgba(240, 253, 250, 0.74);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2rem;
    letter-spacing: 0.015em;
}

.landing-hero-audience-dot {
    width: 0.38rem;
    height: 0.38rem;
    flex: 0 0 auto;
    border-radius: 9999px;
    background: #d6b23a;
    box-shadow: 0 0 0 0.22rem rgba(214, 178, 58, 0.09);
}

@media (min-width: 640px) {
    .landing-hero-audience-bridge {
        margin-top: 1.05rem;
        font-size: 0.8rem;
    }
}


/* --------------------------------------------------------------------------
 * Hero title reveal support
 * -------------------------------------------------------------------------- */

[data-hero-soft-title-first],
[data-hero-soft-title-second] {
    overflow: clip;
    will-change: opacity, transform, filter, clip-path;
}

@supports not (overflow: clip) {
    [data-hero-soft-title-first],
    [data-hero-soft-title-second] {
        overflow: hidden;
    }
}