/* =========================================================
   LM IMPIANTI — SERVICES SHOWCASE
   Cinematic / Editorial / Premium
   ========================================================= */


/* =========================================================
   01 — SECTION
   ========================================================= */

.home-services.section-space {
    --lm-services-width: 1180px;
    --lm-services-side: 30px;

    --lm-services-ink: #171b1e;
    --lm-services-muted: #737b7f;
    --lm-services-accent: #7045ff;

    --lm-services-mono: "IBM Plex Mono", monospace;
    --lm-services-body: "Instrument Sans", sans-serif;

    --lm-services-duration: 6500ms;
    --lm-services-ease: cubic-bezier(.22, 1, .36, 1);

    position: relative;
    z-index: 5;

    width: 100%;
    margin: 0;

    padding:
        110px
        var(--lm-services-side)
        130px;

    background: #ffffff;
    color: var(--lm-services-ink);
}

.home-services,
.home-services * {
    box-sizing: border-box;
}

.lm-services__container {
    width: 100%;
    max-width: var(--lm-services-width);
    margin-inline: auto;
}


/* =========================================================
   02 — INTRODUZIONE
   ========================================================= */

.lm-services__intro {
    max-width: 900px;
    margin-bottom: 54px;
}

.lm-services__eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;

    margin: 0 0 21px;

    font-family: var(--lm-services-mono);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .13em;

    text-transform: uppercase;
    color: var(--lm-services-muted);
}

.lm-services__eyebrow-mark {
    display: inline-block;

    width: 5px;
    height: 5px;
    flex: 0 0 5px;

    background: var(--lm-services-accent);
}

.lm-services__heading {
    max-width: 850px;
    margin: 0;

    font-family: var(--lm-services-body);
    font-size: clamp(34px, 4.2vw, 60px);
    font-weight: 500;
    line-height: 1.09;
    letter-spacing: -.055em;

    color: var(--lm-services-ink);
    text-wrap: balance;
}


/* =========================================================
   03 — SHOWCASE
   ========================================================= */

.lm-services__showcase {
    position: relative;
    isolation: isolate;

    width: 100%;
    height: clamp(420px, 39vw, 500px);

    overflow: hidden;
    border-radius: 5px;

    background: #101417;
    color: #ffffff;
}


/* =========================================================
   04 — PANNELLI
   ========================================================= */

.lm-services__panels {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.lm-services__panel {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;
    margin: 0;

    overflow: hidden;
    background: #101417;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .8s ease,
        visibility .8s ease;
}

.lm-services__panel[hidden] {
    display: none !important;
}

.lm-services__panel.is-active {
    opacity: 1;
    visibility: visible;
}

/* Bordo interno molto discreto */

.lm-services__panel::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 6;

    pointer-events: none;

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


/* =========================================================
   05 — IMMAGINE CINEMATOGRAFICA
   ========================================================= */

.lm-services__media {
    position: absolute;
    inset: 0;
    z-index: 0;

    overflow: hidden;
    pointer-events: none;

    background: #090d10;
}

.lm-services__image {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    /*
     * Immagine più scura e leggermente
     * desaturata, senza perdere dettaglio.
     */

    filter:
        brightness(.76)
        contrast(1.1)
        saturate(.83);

    transform: scale(1.045);

    transition:
        transform 7s linear,
        filter 1.2s ease;
}

/* Lieve movimento cinematografico */

.lm-services__panel.is-active
.lm-services__image {
    transform: scale(1);
}

/* Scuritura verticale */

.lm-services__media::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(5, 8, 11, .58) 0%,
            rgba(5, 8, 11, .26) 23%,
            rgba(5, 8, 11, .07) 44%,
            rgba(5, 8, 11, .20) 60%,
            rgba(5, 8, 11, .65) 81%,
            rgba(5, 8, 11, .93) 100%
        );
}

/* Vignettatura morbida */

.lm-services__media::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 2;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 50% 43%,
            transparent 22%,
            rgba(3, 7, 10, .10) 52%,
            rgba(3, 7, 10, .43) 100%
        );
}

/* Leggera profondità tonale */

.lm-services__image-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;

    pointer-events: none;

    background:
        linear-gradient(
            115deg,
            rgba(9, 17, 22, .22) 0%,
            transparent 48%,
            rgba(4, 9, 13, .12) 100%
        );
}


/* =========================================================
   06 — TITOLO E NUMERO
   ========================================================= */

.lm-services__top {
    position: relative;
    z-index: 4;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 28px;
    width: 100%;

    padding: 33px 34px 0;
}

/* Titolo in alto a sinistra */

.lm-services__panel-title {
    max-width: 560px;
    margin: 0;

    font-family: var(--lm-services-mono);
    font-size: clamp(22px, 2.3vw, 31px);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -.065em;

    text-transform: uppercase;
    color: #ffffff;

    text-shadow:
        0 2px 18px rgba(0, 0, 0, .12);
}

/* Numero in alto a destra */

.lm-services__number {
    display: block;

    flex: 0 0 auto;
    margin: 0;

    font-family: var(--lm-services-mono);
    font-size: clamp(25px, 2.5vw, 35px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.07em;

    color: #ffffff;
    opacity: 1;
}


/* =========================================================
   07 — TESTI IN BASSO A SINISTRA
   ========================================================= */

.lm-services__bottom {
    position: relative;
    z-index: 4;

    display: flex;
    align-items: flex-end;

    flex: 1;

    width: 100%;

    /*
     * Spazio riservato alle quattro voci
     * di navigazione sottostanti.
     */

    padding:
        25px
        34px
        113px;
}

.lm-services__panel-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 10px;

    width: 100%;
    max-width: 320px;
}

/* Breve introduzione */

.lm-services__panel-kicker {
    margin: 0;

    font-family: var(--lm-services-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.025em;

    color: #ffffff;
}

/* Descrizione */

.lm-services__panel-description {
    max-width: 315px;
    margin: 0;

    font-family: var(--lm-services-body);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.48;
    letter-spacing: -.01em;

    color: rgba(255, 255, 255, .84);

    text-wrap: pretty;
}


/* =========================================================
   08 — NAVIGAZIONE INFERIORE
   ========================================================= */

.lm-services__navigation {
    position: absolute;

    left: 34px;
    right: 34px;
    bottom: 25px;

    z-index: 8;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;

    gap: 20px;
}

/* Singola voce */

.lm-services__tab {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;

    width: 100%;
    min-width: 0;
    min-height: 43px;

    padding: 0;

    appearance: none;
    border: 0;
    border-radius: 0;

    background: transparent;

    color: rgba(255, 255, 255, .58);
    text-align: left;

    cursor: pointer;

    transition: color .3s ease;
}

.lm-services__tab:hover,
.lm-services__tab:focus-visible {
    color: rgba(255, 255, 255, .94);
}

.lm-services__tab.is-active {
    color: #ffffff;
}

.lm-services__tab-content {
    display: flex;
    align-items: center;

    width: 100%;
    min-width: 0;
    min-height: 25px;

    margin-bottom: 10px;
}

.lm-services__tab-name {
    display: block;

    min-width: 0;

    font-family: var(--lm-services-body);
    font-size: clamp(11px, 1.03vw, 13px);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -.015em;

    color: inherit;

    text-align: left;
    text-transform: none;

    transition: color .3s ease;
}

.lm-services__tab.is-active
.lm-services__tab-name {
    font-weight: 500;
}

/* Nessun numero nella navigazione */

.lm-services__tab-number {
    display: none;
}


/* =========================================================
   09 — PROGRESS BAR
   ========================================================= */

.lm-services__progress-track {
    position: relative;
    display: block;

    width: 100%;
    height: 1px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, .38);
}

.lm-services__progress-fill {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    background: #ffffff;

    transform: scaleX(0);
    transform-origin: left center;
}

/* Progress bar del servizio attivo */

.lm-services__tab.is-active
.lm-services__progress-fill {
    animation:
        lm-services-progress
        var(--lm-services-duration)
        linear
        forwards;
}

@keyframes lm-services-progress {

    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }

}


/* =========================================================
   10 — FOCUS
   ========================================================= */

.lm-services__tab:focus-visible {
    outline: 1px solid #ffffff;
    outline-offset: 6px;
}


/* =========================================================
   11 — TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .home-services.section-space {
        --lm-services-side: 38px;

        padding-top: 95px;
        padding-bottom: 110px;
    }

    .lm-services__intro {
        margin-bottom: 45px;
    }

    .lm-services__heading {
        max-width: 730px;
        font-size: clamp(34px, 4.5vw, 48px);
    }

    .lm-services__showcase {
        height: clamp(470px, 55vw, 550px);
    }

    .lm-services__top {
        padding:
            30px
            30px
            0;
    }

    .lm-services__panel-title {
        font-size: clamp(22px, 2.8vw, 29px);
    }

    .lm-services__number {
        font-size: 30px;
    }

    .lm-services__bottom {
        padding:
            25px
            30px
            110px;
    }

    .lm-services__navigation {
        left: 30px;
        right: 30px;

        gap: 15px;
    }

    .lm-services__tab-name {
        font-size: 11px;
    }

}


/* =========================================================
   12 — MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .home-services.section-space {
        --lm-services-side: 22px;

        padding-top: 75px;
        padding-bottom: 90px;
    }

    /* Introduzione */

    .lm-services__intro {
        max-width: 100%;
        margin-bottom: 34px;
    }

    .lm-services__eyebrow {
        margin-bottom: 17px;
        font-size: 9px;
    }

    .lm-services__heading {
        max-width: 100%;

        font-size: clamp(30px, 7.5vw, 42px);
        line-height: 1.12;
        letter-spacing: -.047em;
    }

    /* Fotografia */

    .lm-services__showcase {
        height: 610px;
        border-radius: 5px;
    }

    .lm-services__image {
        object-position: center;
    }

    .lm-services__media::before {
        background:
            linear-gradient(
                180deg,
                rgba(5, 8, 11, .65) 0%,
                rgba(5, 8, 11, .22) 30%,
                rgba(5, 8, 11, .20) 47%,
                rgba(5, 8, 11, .74) 75%,
                rgba(5, 8, 11, .96) 100%
            );
    }

    /* Titolo e numero */

    .lm-services__top {
        gap: 14px;

        padding:
            24px
            22px
            0;
    }

    .lm-services__panel-title {
        max-width: 260px;

        font-size: clamp(20px, 5vw, 27px);
        line-height: 1.08;
        letter-spacing: -.055em;
    }

    .lm-services__number {
        font-size: 25px;
    }

    /* Testi */

    .lm-services__bottom {
        padding:
            20px
            22px
            161px;
    }

    .lm-services__panel-copy {
        max-width: 290px;
        gap: 8px;
    }

    .lm-services__panel-kicker {
        font-size: 13px;
    }

    .lm-services__panel-description {
        max-width: 290px;

        font-size: 11px;
        line-height: 1.5;
    }

    /* Navigazione 2 × 2 */

    .lm-services__navigation {
        left: 22px;
        right: 22px;
        bottom: 24px;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap: 20px;
        row-gap: 16px;
    }

    .lm-services__tab {
        min-height: 36px;
    }

    .lm-services__tab-content {
        min-height: 21px;
        margin-bottom: 8px;
    }

    .lm-services__tab-name {
        font-size: 11px;
        line-height: 1.3;
    }

}


/* =========================================================
   13 — SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

    .lm-services__showcase {
        height: 630px;
    }

    .lm-services__panel-title {
        max-width: 210px;
        font-size: 19px;
    }

    .lm-services__number {
        font-size: 23px;
    }

    .lm-services__bottom {
        padding-bottom: 174px;
    }

    .lm-services__navigation {
        column-gap: 14px;
        row-gap: 14px;
    }

    .lm-services__tab-name {
        font-size: 10px;
    }

}


/* =========================================================
   14 — ACCESSIBILITÀ
   ========================================================= */

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

    .lm-services__panel,
    .lm-services__image,
    .lm-services__tab,
    .lm-services__tab-name {
        transition: none !important;
    }

    .lm-services__tab.is-active
    .lm-services__progress-fill {
        animation: none;
        transform: scaleX(1);
    }

}