@import url("/styles/root.css");
@import url("/styles/header.css");
@import url("/styles/footer.css");
@import url("/styles/team.css");
@import url("/styles/contact.css");

#scopri {
    scroll-margin-top: calc(2em);
}

.hero-section {
    border-radius: var(--radius-2xl);
    width: 100%;
    position: relative;
    height: 50vh;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding: 20px;
    z-index: 5;
}

#hero-section-bg {
    border-radius: var(--radius-2xl);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    z-index: -1;
}

/* schermata finale nitida (compare a fine video, copre il frame sgranato) */
.hero-end-bg {
    border-radius: var(--radius-2xl);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom bottom;
    /* la SVG ha zone trasparenti (bordi decorativi): senza backing si vedrebbe
       il video sotto (soprattutto in alto su mobile). Il colore pagina le riempie
       come "prima", quando dietro non c'era il video. */
    background-color: var(--bg-light);
    z-index: 0;
    /* sopra il video (#hero-section-bg z-index -1), sotto hero-content (z-index 10) */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.hero-end-bg.is-visible {
    opacity: 1;
}

/* logo nitido dell'end screen: eredita dimensioni da .hero-content>img.
   Occupa già lo spazio (opacity 0) così a fine video appare senza spostare nulla. */
.hero-end-logo {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.hero-end-logo.is-shown {
    opacity: 1;
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 32px;
}

.hero-content>img {
    width: 75%;
    margin: auto;
}

.hero-content>a {
    width: 112px;
    margin: auto;
}

/* su mobile (schermo verticale, dove gira il video portrait) la hero è più alta */
@media (orientation: portrait) {
    .hero-section {
        height: 78vh;
        min-height: 480px;
    }
}

.cards-section {
    width: 100%;
    height: 1000px;
    margin-top: -60px;
    z-index: 4;
    position: relative;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    overflow: hidden;
}

#cards-section-bg {
    border-radius: var(--radius-2xl);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    object-fit: cover;
    object-position: center bottom;
    z-index: -1;

    transform: scale(1.05);
}

.cards-title {
    background: white;
    border-radius: var(--radius-2xl);
    width: 80%;
    margin: auto;
    padding: 16px;
    box-shadow: var(--shadow-xl);
}

.cards-title>h1 {
    font-size: var(--text-4xl);
    font-weight: bolder;
}

.cards-title>h4 {
    font-size: var(--text-base);
    margin-top: 16px;
}

.cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    margin-top: 64px;
}

.cards>.card {
    background: transparent;
    width: 164px;
    height: 164px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 0;
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.1));
    opacity: 0;
    will-change: transform, opacity;
}

.cards>.card.is-visible {
    animation: popInBounce 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.cards>.card:nth-child(1) {
    animation-delay: 0.1s;
}

.cards>.card:nth-child(2) {
    animation-delay: 0.4s;
}

.cards>.card:nth-child(3) {
    animation-delay: 0.7s;
}

@keyframes popInBounce {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(50px);
    }

    60% {
        opacity: 1;
        transform: scale(1.2) translateY(0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.cards>.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60%;
    background-color: white;
    border-radius: 20px 20px 0 0;
    transform-origin: top;
    z-index: -1;
}

.cards>.card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background-color: white;
    border-radius: 0 0 20px 20px;
    z-index: -1;
}

.card.left::before {
    transform: skewY(10deg);
    transform-origin: top left;
    top: 10px;
}

.card.left {
    padding-top: 32px;
}

.card.center::before {
    transform: skewY(0deg);
    top: 0;
}

.card.right::before {
    transform: skewY(-10deg);
    transform-origin: top right;
    top: 10px;
}

.card.right {
    padding-top: 32px;
}

.cards>.card img {
    width: 48px;
}

/* =========================
   TILT LAYER
========================= */
.card-tilt {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;

    transform-style: preserve-3d;
    transition: transform 0.15s ease-out;
}

.card-tilt>* {
    transform: translateZ(30px);
}

.divider-top,
.divider-top-blue {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -30px;

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

/* SOLUTIONS
*/

.solutions-section {
    position: relative;
    width: 100%;
    min-height: 800px;
    height: auto;
    background-color: var(--primary);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    overflow: hidden;
    text-align: center;

    padding-top: 128px;
    padding-bottom: 200px;
}


.solutions-title {
    font-size: var(--text-6xl);
    font-weight: 900;
    text-transform: uppercase;

    /* 1. Definisci il gradiente come sfondo */
    /* Va dal bianco puro (in alto) a un bianco trasparente (in basso) */
    background: linear-gradient(to bottom,
            #ffffff 25%,
            /* Bianco solido per il primo 30% */
            rgba(255, 255, 255, 0.25) 100%
            /* Sfumatura verso trasparenza in basso */
        );

    /* 2. "Ritaglia" lo sfondo usando il testo come maschera */
    -webkit-background-clip: text;
    /* Per Safari/Chrome */
    background-clip: text;

    /* 3. Rendi il testo trasparente (altrimenti copre lo sfondo) */
    color: transparent;

    /* Opzionale: nell'immagine sembra esserci un leggerissimo drop-shadow sotto */
    filter: drop-shadow(0px 2px 0px rgba(0, 0, 0, 0.1));
}

.solutions-subtitle {
    position: relative;
    z-index: 2;
    max-width: 620px;
    margin: 20px auto 0;
    padding: 0 24px;
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--text-lg);
    font-weight: var(--font-normal);
    line-height: var(--leading-relaxed);
}

.solutions-cards {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: min(1080px, 90%);
    margin-inline: auto;
    padding: 0 32px;

    position: relative;
    z-index: 2;
}

.solution-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 12px;

    position: relative;
    overflow: hidden;
    border-radius: var(--radius-3xl);
    padding: 28px;
    min-height: 200px;

    background-color: white;
    box-shadow: var(--shadow-lg);
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Accent bar that grows on hover */
.solution-card::after {
    content: "";
    position: absolute;
    left: 28px;
    bottom: 0;
    height: 4px;
    width: 40px;
    border-radius: var(--radius-full);
    background: var(--secondary);
    transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.solution-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-2xl);
}

.solution-card:hover::after {
    width: calc(100% - 56px);
}

/* Icon badge */
.solution-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-xl);
    background: rgba(29, 85, 165, 0.10);
    color: var(--primary);
    transition: background 0.35s ease, color 0.35s ease;
}

.solution-icon svg {
    width: 28px;
    height: 28px;
}

.solution-card:hover .solution-icon {
    background: var(--primary);
    color: white;
}

.solution-name {
    margin-top: auto;
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--primary);
}

.solution-text {
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    line-height: var(--leading-normal);
    color: #566072;
}

/* --- FEATURED (wide) CARD --- */
.solution-card.wide {
    grid-column: span 2;
    justify-content: center;
    gap: 16px;
    padding: 40px;
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(244, 65, 0, 0.16) 0%, transparent 55%),
        linear-gradient(150deg, #123e7a 0%, #1d55a5 60%, #2a68c0 100%);
    color: white;
}

.solution-card.featured::after {
    display: none;
}

.solution-eyebrow {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: white;
}

.solution-heading {
    font-size: var(--text-3xl);
    font-weight: 800;
    line-height: var(--leading-tight);
    color: white;
}

.solution-card.wide .solution-text {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--text-base);
    max-width: 46ch;
}

.solution-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    margin-top: 4px;
    padding: 12px 22px;
    border-radius: var(--radius-full);
    background: var(--secondary);
    color: white;
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}

.solution-cta svg {
    width: 18px;
    height: 18px;
    transition: transform 0.25s ease;
}

.solution-cta:hover {
    background: #ff5a1f;
}

.solution-cta:hover svg {
    transform: translateX(4px);
}

.solution-cta:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.25);
}

/* Entrance animation, staggered */
.solution-card {
    opacity: 0;
    transform: translateY(24px);
    animation: solution-reveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.solution-card:nth-child(1) { animation-delay: 0.05s; }
.solution-card:nth-child(2) { animation-delay: 0.15s; }
.solution-card:nth-child(3) { animation-delay: 0.25s; }
.solution-card:nth-child(4) { animation-delay: 0.35s; }
.solution-card:nth-child(5) { animation-delay: 0.45s; }

@keyframes solution-reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .solution-card {
        opacity: 1;
        transform: none;
        animation: none;
        transition: none;
    }
}

/* --- EFFETTO PARTICELLE --- */

.particles-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

/* LAYER 1: Particelle Piccole (ma visibili) */
.particles-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    /* Aumentato da 2px a 6px */
    width: 12px;
    height: 12px;
    background: transparent;
    border-radius: 50%;
    opacity: 0.9;

    /* Sintassi shadow: X | Y | BLUR (sfocatura) | COLORE */
    box-shadow:
        10vw 20vh 10px rgba(255, 255, 255, 5),
        /* Blur 10px per farle brillare */
        30vw 10vh 10px rgba(255, 255, 255, 5),
        80vw 40vh 10px rgba(255, 255, 255, 5),
        40vw 60vh 10px rgba(255, 255, 255, 5),
        90vw 10vh 10px rgba(255, 255, 255, 5),
        60vw 80vh 10px rgba(255, 255, 255, 5),
        20vw 90vh 10px rgba(255, 255, 255, 5);

    animation: floating 60s linear infinite;
}

/* LAYER 2: Particelle Grandi (Effetto Bokeh) */
.particles-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    /* Aumentato da 8px a 20px */
    width: 20px;
    height: 20px;
    background: transparent;
    border-radius: 50%;
    opacity: 0.4;
    /* Più trasparenti perché sono grandi */

    /* Blur molto alto (25px-40px) per renderle soffici come nuvole */
    box-shadow:
        15vw 15vh 30px rgba(255, 255, 255, 0.6),
        85vw 25vh 30px rgba(255, 255, 255, 0.6),
        45vw 55vh 30px rgba(255, 255, 255, 0.6),
        75vw 85vh 30px rgba(255, 255, 255, 0.6),
        25vw 75vh 30px rgba(255, 255, 255, 0.6);

    animation: floating 90s linear infinite reverse;
}

/* LAYER 3: Glow giganti di atmosfera (Background) */
.particles-bg {
    box-shadow:
        50vw 30vh 100px rgba(255, 255, 255, 0.8),
        10vw 80vh 120px rgba(255, 255, 255, 0.5),
        90vw 50vh 150px rgba(255, 255, 255, 0.6);
}

/* Animazione lenta per dare vita (fluttuano verso l'alto) */
@keyframes floating {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100vh);
    }
}

/* TABLET (Under 1024px) */
@media (max-width: 1024px) {
    .solutions-title {
        font-size: var(--text-4xl);
        padding: 0 16px;
    }

    .solutions-cards {
        width: 92%;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 0;
    }

    .solution-card.wide {
        grid-column: span 2;
    }

    .solution-heading {
        font-size: var(--text-2xl);
    }
}

/* MOBILE (Under 768px) */
@media (max-width: 768px) {
    .solutions-section {
        padding-top: 64px;
        padding-bottom: 150px;
    }

    .solutions-title {
        font-size: var(--text-3xl);
    }

    .solutions-subtitle {
        font-size: var(--text-base);
    }

    .solutions-cards {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0 16px;
    }

    .solution-card.wide {
        grid-column: span 1;
        padding: 32px 28px;
    }

    .solution-card {
        min-height: auto;
    }

    .solution-heading {
        font-size: var(--text-2xl);
    }
}


/* ===========================
   BASE WORKS SECTION (MOBILE)
   =========================== */
.works-section {
    padding: 64px 0;
    text-align: center;
}

.works-section p {
    margin: 3rem auto;
    max-width: 750px;
}

.works-section>h1 {
    font-size: var(--text-6xl);
    font-weight: 800;
}

.works-cards {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
}

.works-cards>.works-card {
    position: relative;
    width: 100%;
    max-width: 650px;
    height: 420px;
    overflow: hidden;
    border-radius: 24px;
    padding: 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* testo in basso */
    align-items: flex-start;
    text-align: left;
    color: white;
}

.works-cards>.works-card>img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.4s ease;
}

.works-cards>.works-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.0) 30%,
            rgba(0, 0, 0, 0.75) 100%);
    z-index: 2;
}

.works-cards>.works-card>.text {
    position: relative;
    z-index: 3;
    padding: 24px;
    width: 100%;
}

.works-cards>.works-card>.text h1 {
    color: var(--secondary);
    font-size: var(--text-2xl);
    font-weight: 800;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.works-cards>.works-card>.text p {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.5;
}


/* 
    Machinery
*/

.machinery-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;

    margin-top: 2rem;
}

.machinery-section>h1 {
    font-size: var(--text-6xl);
    font-weight: 800;

    z-index: 2;
}

.machinery-section>p {
    z-index: 2;
}

.machinery-section>.bg-image {
    position: absolute;
    top: 0;
    left: 0;

    width: 75%;
    z-index: -1;
}

.machinery-cards {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
    margin-top: 4rem;

    width: 100%;
}

.machinery-card {
    display: flex;
    flex-direction: column;
    background-color: white;
    width: 90%;
    height: 500px;
    border-radius: var(--radius-2xl, 16px);
}

.machinery-card h1 {
    font-size: var(--text-3xl);
}

.machinery-card>.top {
    flex: 1;
    overflow: hidden;
    border-radius: var(--radius-2xl, 16px) var(--radius-2xl, 16px) 0 0;
}

.machinery-card>.top>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.machinery-card>.bottom {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

/* .machinery-card>.bottom>a {
    margin: auto;
} */

.machinery-card>.bottom>a>img {
    width: 48px;
}

@media (min-width: 512px) {
    .machinery-card {
        width: 400px;
    }
}



/* Tablet */
@media (min-width: 768px) {

    .divider-top,
    .divider-top-blue {
        width: 115%;
    }

    .cards-title {
        padding: 32px;
        width: auto;
    }

    .cards {
        flex-direction: row;
        align-items: center;
        gap: 128px;
    }

    .card.center {
        top: 64px;
    }

    .machinery-card {
        width: 400px;
    }
}






/* Desktop */
@media (min-width: 1024px) {


    .team-column {
        margin-bottom: 160px
    }


    .hero-section {
        height: 600px;
    }

    .hero-content>img {
        width: 100%;
    }

    .cards-section {
        height: 800px;
    }

    .cards-title>h1 {
        font-size: var(--text-6xl);
    }

    .cards-title>h4 {
        font-size: var(--text-2xl);
    }
}

/* =========================================
   WORKS SECTION - DESKTOP OVERRIDE (AGGIORNATO)
   ========================================= */
@media (min-width: 1024px) {

    .works-cards {
        flex-direction: row;
        justify-content: center;
        width: 90%;
        max-width: 1400px;
        height: 600px;
        margin-left: auto;
        margin-right: auto;
        gap: 12px;
    }

    .works-cards>.works-card {
        width: auto;
        height: 100%;
        flex: 1;
        transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
        padding: 0;
        align-items: flex-start;
        justify-content: flex-end;
        position: relative;
        /* Assicurati che sia relativo per contenere il .text assoluto */
    }

    .works-cards>.works-card.active {
        flex: 3;
    }

    .works-cards>.works-card::after {
        display: none;
    }

    /* 1) STYLING DEL BLOCCO DI TESTO (PANNELLO FLUTTUANTE) */
    .works-cards>.works-card>.text {
        position: absolute;
        bottom: 24px;
        /* Staccato dal fondo */
        left: 24px;
        /* Staccato da sinistra */

        /* Larghezza fissa! Impedisce al testo di ricalcolarsi */
        max-width: calc(100% - 48px);
        /* Sicurezza per non far sbordare il box su schermi medi */

        padding: 32px;
        text-align: left;
        border-radius: 16px;
        /* Arrotondamento per creare l'effetto "carta di vetro" */

        /* Effetto Vetro */
        background: rgba(255, 255, 255, 0.15);
        /* Leggermente più opaco per staccarsi meglio */
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.4);
        /* Bordo su tutti i lati per definire il box */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        /* Ombra per profondità */

        /* Animazione comparsa testo - Stato Iniziale (Nascosto) */
        opacity: 0;
        transform: translateY(20px);
        pointer-events: none;
        /* Impedisce l'interazione quando nascosto */

        /* Transizione rapida in USCITA quando si toglie l'hover */
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    /* Stato ATTIVO del testo */
    .works-cards>.works-card.active>.text {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;

        /* Transizione in ENTRATA con DELAY (0.3s): aspetta che la card si allarghi prima di mostrare il testo */
        transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
    }

    .works-cards>.works-card>.text h1 {
        font-size: 2.5rem;
        /* Ridotto leggermente da 3rem per adattarsi meglio ai 420px senza andare a capo */
        color: #ff4500;
        margin-bottom: 0.5rem;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        white-space: nowrap;
        /* Forza il titolo a restare su una riga */
    }

    .works-cards>.works-card>.text p {
        color: #1a1a1a;
        font-weight: 600;
        font-size: 1.1rem;
        width: 100%;
        /* Sfrutta tutto il contenitore fisso */
        line-height: 1.5;
    }
}