/*
 * ArsLudi landing — Demo
 * ----------------------
 * Styles specific to _LandingDemo.cshtml.
 * The Razor partial intentionally contains no inline style attributes.
 *
 * Demo is the third and final geometric statement in the landing:
 * a deliberately asymmetric dark band, cut independently on top and bottom.
 */

.landing-demo-section {
    /*
     * The section itself supplies the two neighbouring surfaces exposed by
     * the geometric cuts:
     *   top    -> Live (#fff)
     *   bottom -> Pricing (ivory-50)
     *
     * The dark geometric band is now a separate ::before layer, so clipping
     * never exposes the body/wrapper background by accident.
     */
    position: relative;
    isolation: isolate;
    overflow: hidden;

    --landing-demo-surface-before: #ffffff;
    --landing-demo-surface-after: var(--arsludi-ivory-0, #fffdf8);

    background:
        linear-gradient(
            to bottom,
            var(--landing-demo-surface-before) 0%,
            var(--landing-demo-surface-before) 50%,
            var(--landing-demo-surface-after) 50%,
            var(--landing-demo-surface-after) 100%
        );
}

.landing-demo-section::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;

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

    /*
     * Desktop geometry:
     * top and bottom remain intentionally asymmetric.
     */
    -webkit-clip-path: polygon(
        0 4.25%,
        43% 7.25%,
        100% 3.25%,
        100% 92.75%,
        71% 98.15%,
        37% 91.75%,
        0 97.25%
    );

    clip-path: polygon(
        0 4.25%,
        43% 7.25%,
        100% 3.25%,
        100% 92.75%,
        71% 98.15%,
        37% 91.75%,
        0 97.25%
    );
}

.landing-demo-content {
    position: relative;
    z-index: 1;

    /*
     * Safe space for the two geometric cuts.
     * These override the generic Tailwind py-* values because this stylesheet
     * loads after the global bundle.
     */
    padding-top: clamp(5.75rem, 8vw, 7.75rem);
    padding-bottom: clamp(5.75rem, 8vw, 7.5rem);
}

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

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



/*
 * Desktop only: the Demo is a geometric band, not a full viewport chapter.
 * Keep the current content and cuts, but let the section hug the 2x2 demo grid.
 */
@media (min-width: 1024px) {
    .landing-demo-content {
        min-height: 0 !important;
        padding-top: clamp(3.75rem, 4.4vw, 4.75rem);
        padding-bottom: clamp(3.75rem, 4.4vw, 4.75rem);
    }
}

/* Mobile: same idea, simplified and shallower so content remains dominant. */
@media (max-width: 639px) {
    .landing-demo-section::before {
        -webkit-clip-path: polygon(
            0 2.25%,
            46% 4.5%,
            100% 2.75%,
            100% 95.75%,
            62% 98.7%,
            31% 95.25%,
            0 98.2%
        );

        clip-path: polygon(
            0 2.25%,
            46% 4.5%,
            100% 2.75%,
            100% 95.75%,
            62% 98.7%,
            31% 95.25%,
            0 98.2%
        );
    }

    .landing-demo-content {
        padding-top: 4.75rem;
        padding-bottom: 4.75rem;
    }
}


/* Narrow-screen carousel navigation: swipe remains available, arrows add mouse/keyboard access. */
.landing-demo-scroll-shell {
    min-width: 0;
}

.landing-demo-scroll-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.landing-demo-scroll-status {
    margin-right: 0.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(204, 251, 241, 0.72);
}

.landing-demo-scroll-button {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 9999px;
    background: rgba(4, 47, 46, 0.72);
    color: #e2ca6c;
    transition: border-color 160ms ease, background-color 160ms ease, opacity 160ms ease;
}

.landing-demo-scroll-button:hover:not(:disabled) {
    border-color: rgba(226, 202, 108, 0.62);
    background: rgba(19, 78, 74, 0.9);
}

.landing-demo-scroll-button:disabled {
    cursor: default;
    opacity: 0.32;
}

.landing-demo-scroll-track {
    scroll-behavior: smooth;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.landing-demo-icon-chevron-left,
.landing-demo-icon-chevron-right {
    display: block;
    width: 0.9rem;
    height: 0.9rem;
    background: currentColor;
}

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

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

@media (min-width: 1024px) {
    .landing-demo-scroll-controls {
        display: none;
    }
}