/* #region IMPOSTAZIONI GENERALI DEL FILE*/
    
    body {
        background-color: #F2F2F2;
        font-family: 'polymath', sans-serif;
        font-weight: 400;
        color: black;

        min-height: 100vh;
        margin: 0;

        display: flex;
        flex-direction: column;
    }

    /* MARGINI */
    .container, .container-fluid {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    @media (min-width: 1024px) {
        .container, .container-fluid {
            padding-left: 60px !important;
            padding-right: 60px !important;
        }
    }

    /*TESTO*/
    html {
        font-size: 18px;
        scroll-behavior: auto !important;
    }

    @media (min-width: 1024px) {
        html{ font-size: 18px;} 
    }

    @media (max-width:365px) {
        html {font-size: 15px;}
    }

    .text-weight-bold {
        font-weight: 700;
    }

    p[lang="en"] {
        hyphens: auto;
    }


    html, body {
    /*height: 100%;*/
    margin: 0;
    padding: 0;
    /* Impedisce piccoli spostamenti durante il cambio di orientamento o fullscreen */
    /*overflow-x: hidden; */
    background-color: #F2F2F2; /* Assicurati che il colore di sfondo sia lo stesso del sito */
}

    /*body {
        Questo trucco forza il browser a ridisegnare l'area dietro la barra di navigazione 
        min-height: 100dvh; 
    }*/

/*#endregion*/

/* #region NAVBAR */

    /* -------- IN COMUNE ----------*/

    .custom-navbar {
    height: 120px;
    z-index: 1000;
    }

    .navbar-brand,
    .open-menu-btn,
    .lang-link {
    color: black !important;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    margin-top: -45px;
    font-size: 18px;
    }

    @media (max-width:365px) {
        .navbar-brand,
        .open-menu-btn,
        .lang-link {
        font-size: 15px;
        }
    }


    /* -------- PER SINGOLA PAGINA ----------*/

    .navbar-spark {
        background: linear-gradient(180deg, 
        #D0E655 40%,     
        rgba(208, 230, 85, 0) 100%);
    }

    .navbar-dedoom {
        background: linear-gradient(180deg, 
        #F4B412 40%,     
        rgba(244, 180, 18, 0) 100%);
    }

    .navbar-shift {
        background: linear-gradient(180deg, 
        #2D62E7 40%,    
        rgba(45, 98, 231, 0) 100%);
    }

    .navbar-about {
        background: linear-gradient(180deg, 
        #f2f2f2 40%,    
        rgba(242, 242, 242, 0) 100%);
    }


/* #endregion */

/* #region FOOTER */

    .footer {
        display: flex;
        justify-content: space-between;
        align-items:start;
        padding-top: 150px;
        font-family: 'polymath', sans-serif;

        position: relative;
        overflow: hidden;
        padding-bottom: 10px;

        z-index: 1;

        margin-top: auto;
    }

    .footer::before {
        content: '';
        position: absolute;
        /* Copre tutto il footer */
        top: 0; left: 0;
        width: 100%; height: 100%;
        
        /* Parametri della tua griglia originale */
        background-image: 
            linear-gradient(to right, rgba(0, 0, 0, 8%) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(0, 0, 0, 8%) 1px, transparent 1px);
        background-size: 60px 60px;
        
        /* Posizionamento dietro al testo */
        z-index: 0; 
        
        /* Sfumatura verso l'alto (Fade out) */
        -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
        mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
        
        /* Impedisce alla griglia di bloccare i click sui link */
        pointer-events: none;
    }

    .footer-home {
        padding-top: 100px;
    }

    .social-links {
        /*background-color: red;*/
        display: flex;
        gap: 20px;
        color: black;
        position: relative;
    }

    .social-links a {
        color: black;         
        text-decoration: none;
    }

    .footer p {
        font-size: 15px;
        position: relative;
    } 

    @media (max-width: 1024px) {

        .footer {
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding-top: 90px;
        }

        .social-links {
        order:-1;
        padding-bottom: 10px;
        gap: 10px;}

        .footer p {
        font-size: 12px;} 

        .footer::before {
        background-size: 40px 40px;
        }


    }

    
/* #endregion */

/* #region OVERLAY MENU */

    /* ------ IN COMUNE -------*/

    .overlay {
        width: 100%;
        height:100dvh;
        clip-path: inset(0 0 100% 0);
        opacity: 0;

        visibility: hidden;
        
        position: fixed;
        z-index: 1001; /* Sopra la navbar */
        display: flex;
        overflow: hidden;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        transition: 
        clip-path 0.6s cubic-bezier(0.77, 0, 0.175, 1), 
        opacity 0.3s ease-in-out,
        visibility 0s linear 0.3s;
    }

    .overlay::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        
        /* La tua griglia */
        background-image: 
            linear-gradient(to right, rgba(0, 0, 0, 8%) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(0, 0, 0, 8%) 1px, transparent 1px);
        background-size: 60px 60px;
        
        /* Posizionamento: sopra il background colorato, sotto il testo */
        z-index: 0; 

        /* Sfumatura verso l'alto */
        -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%);
        mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%);
        
        pointer-events: none;
    }

    .overlay.open {
        opacity: 1;
        clip-path: inset(0 0 0 0);

        visibility: visible;
        transition: 
        clip-path 0.6s cubic-bezier(0.77, 0, 0.175, 1), 
        opacity 0.3s ease-in-out,
        visibility 0s linear 0s;
    }

    .overlay-header {
        position: absolute;
        top: 0;
        width: 100%;
        height: 120px;
        z-index: 2; 
    }

    .overlay-header .container-fluid {
        height: 100%;
    }

    /* Reset del tasto CLOSE */
    .close-menu-btn {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        text-transform: uppercase;
        color: black;

        position: relative; 
        margin-top: -45px; 
    }

    /*Link*/
    .overlay-content {
        text-align: center;
        position: relative; /* Questo può essere relative */
        z-index: 2;
    }

    .overlay-content a {
        display: block;
        color: black;
        text-decoration: none;
        margin-bottom: 20px;
        transition: 0.3s;
    }

    .lang-switch {
        margin-top: 40px;
    }

    .lang-switch a {
        display: inline !important;
        color: black;
        text-decoration: none;
    }

    .active-lang {
        font-weight: 700;
    }

    .separator {
        padding: 0 15px;
        color: black;
    }

    .overlay-footer {
        position: absolute;
        bottom: 10px;
        text-align: center;
        z-index: 2;
    }

    .social-icons {
        margin-bottom: 15px;
    }

    .social-icons a {
        color: black;
        margin: 0 10px;
        text-decoration: none;
    }

    .copyright {
        font-size: 12px;
        color: #000000;
    }

    /* ANIMAZIONE TESTO */
    .overlay-content, 
    .overlay-footer {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.9s ease, transform 0.9s ease;
    }

    .overlay.open .overlay-content {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.3s;
    }

    .overlay.open .overlay-footer {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.5s;
    }


    /* I singoli link dentro l'overlay */
    .overlay-content > a, .lang-switch {
        opacity: 0;
        transform: translateY(15px);
        transition: all 0.5s ease;
    }

    .overlay.open .overlay-content > a:nth-child(1) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
    .overlay.open .overlay-content > a:nth-child(2) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }
    .overlay.open .overlay-content > a:nth-child(3) { transition-delay: 0.6s; opacity: 1; transform: translateY(0); }
    .overlay.open .lang-switch { transition-delay: 0.7s; opacity: 1; transform: translateY(0); }

    /* --------- PER SINGOLA PAGINA ---------*/

    .overlay-spark {
        background: linear-gradient(180deg, #D0E655 0%, #F4FFB3 100%);
    }

    .overlay-dedoom {
        background: linear-gradient(180deg, #F4B412 0%, #F4E19F 100%);
    }

    .overlay-shift {
        background: linear-gradient(180deg, #2D62E7 0%, #A5BFFF 100%);
    }

    .overlay-about {
        background: linear-gradient(180deg, #f2f2f2 0%, #f2f2f2 100%);
    }

    @media (max-width: 1024px) {
        .overlay::before {
        background-size: 40px 40px; /* Griglia più piccola su mobile */
        }
    }

/* #endregion */

/* #region COPERTINA PROGETTO */

    /* ------ IN COMUNE ------ */

    /*SFONDO*/

    .project-cover {
        min-height: calc(100vh + 50px);
        min-height: -webkit-fill-available;
        min-height: calc(100lvh + 50px);
        width: 100%;
        position: relative;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }

    /* SFONDO - GRIGLIA */
    .project-cover::before {
        content: '';
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background-image: 
            linear-gradient(to right, rgba(0, 0, 0, 8%) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(0, 0, 0, 8%) 1px, transparent 1px);
        background-size: 60px 60px;
        z-index: 1;
    }

    /* CONTENITORE ELEMENTI COPERTINA */
    .project-cover-content {
        position: relative;
        z-index: 2; /*Sopra la griglia*/
        min-height: 100svh;
    }

    /* ELEMENTI COPERTINA */

    /* TITOLO-IMMAGINE-ANNO-DETTAGLI */
    
        .project-hero-area {
            position: relative;
            min-height: 100svh;
            width: 100%; /* Forza la larghezza piena subito */
            overflow: hidden;
        }

        /* TITOLO */
        .project-title-wrapper {
            position: absolute;
            top: 110px;
            left: 25%;
            z-index: 5; /* Sopra la griglia, sotto il telefono */
        }

        .project-title {
            font-size: 124px;
            font-weight: 600;
            line-height: 0.8;
        }

        /* ANNO */
        .project-year-wrapper {
            position: absolute;
            bottom: 110px; 
            right: 25%; 
            z-index: 5; 
            line-height: 0; 
        }

        .project-year {
            font-size: 124px;
            font-weight: 600;
            line-height: 0.8;
            margin-bottom: 0;
        }

        /*ANIMAZIONE*/

        .project-title, 
        .project-year {
            opacity: 1;
            transform: translateY(20px);
            animation-fill-mode: forwards;
            animation-timing-function: ease;
            animation-duration: 0.9s;
        }

        /* Animazione che porta il testo allo stato finale */
        @keyframes fadeUpIn {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .project-title, 
        .project-year {
            animation-name: fadeUpIn;
            animation-delay: 0s;
        }

        /* IMMAGINE */

        .project-mockup-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10;
        }

        .project-mockup-img {
            height: 60% !important;
            width: auto;
            backface-visibility: hidden;

            animation: mockUpZoomFromCenterSolid 1.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
        }

        @keyframes mockUpZoomFromCenterSolid {
            0% {
                opacity: 0; /* Invisibile all'inizio mentre il browser fa i calcoli */
                transform: scale(0.5) rotateX(15deg) rotateY(-10deg);
            }
            10% {
                opacity: 1; /* Appare morbidamente in una frazione di secondo */
            }
            100% {
                opacity: 1; 
                transform: scale(1) rotateX(0deg) rotateY(0deg);
            }
        }

        /* DETTAGLI */

        .project-details {
            margin: 0;
            line-height: 100%;
            position: absolute;
            bottom: 20px;

            left: 50%;
            width: 100%;
            transform: translateX(-50%);
        }

        .project-footer {
            text-align: center;
        }

    /* RESPONSIVE */
    
        @media (max-width: 1024px) {

        .project-title, .project-year {
            font-size: 105px;
        }

        .project-title-wrapper {
            left: 20%;
        }

        .project-year-wrapper {
            right: 20%;
        }
        
        /* Griglia */
        .project-cover::before {
            background-size: 40px 40px;
        }
        }

        @media (max-width: 768px) {

        .project-title, .project-year {
            font-size: 90px;
        }

        .project-title-wrapper {
            left: 10%; /* Più vicino al bordo su schermi stretti */
        }

        .project-year-wrapper {
            right: 10%;
        }
        }

        @media (max-width: 576px) {

        .project-title, .project-year {
            font-size: 75px;
        }

        .project-title-wrapper {
            left: 0%; /* Più vicino al bordo su schermi stretti */
        }

        .project-year-wrapper {
            right: 0%;
        }

        }

        @media (max-width:365px) {
            .project-title, .project-year {font-size: 60px;}
        }

        /* ------- PER SINGOLA PAGINA ------*/

        .project-cover.spark{
        background: #D0E655;
        background-image: linear-gradient(180deg, #D0E655 0%, #F1FFA0 100%);
        }

        .project-cover.dedoom{
        background: #F4B412;
        background-image: linear-gradient(180deg, #F4B412 0%, #F4E19F 100%);
        }

        .project-cover.shift{
        background: #2D62E7;
        background-image: linear-gradient(180deg, #2D62E7 0%, #A5BFFF 100%);
        }

        .project-title.spark{
            color: #616C28;
        }

        .project-title.dedoom{
            color: #6F5714;
        }

        .project-title.shift{
            color: #001670;
        }

        .project-year.spark {
            color: #616C28;
        }

        .project-year.dedoom {
            color: #6F5714;
        }

        .project-year.shift {
            color: #001670;
        }

        .project-details.spark {
            color: #616C28 ;
        }

         .project-details.dedoom {
            color: #6F5714 ;
        }

        .project-details.shift {
            color: #001670 ;
        }


    /* #endregion */

/* #region CONTATTI */

    /* 1. Impostiamo il body con sfondo bianco e posizione relativa per la griglia */
    body.contacts-page {
        background-color: #f2f2f2 !important; /* Forza il bianco */
        position: relative;
        min-height: 100vh;
    }

    /* 2. Creiamo la griglia sul body (coprirà tutta la pagina, non solo la finestra) */
    body.contacts-page::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; /* Si estende per tutta l'altezza del contenuto del body */
        background-image: 
            linear-gradient(to right, rgba(0, 0, 0, 8%) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(0, 0, 0, 8%) 1px, transparent 1px);
        background-size: 60px 60px;
        z-index: 0; 
        pointer-events: none;
    }

    /* Gestione griglia mobile */
    @media (max-width: 1024px) {
        body.contacts-page::before {
            background-size: 40px 40px;
        }
    }

    /* 4. Rimuove la griglia (::before) SOLO nella home */
    body.contacts-page .footer::before {
        display: none !important;
    }

    .contact-me-link {
        color: black;
    }

    .services-text {
        margin: 0;
        font-size: 40px;
        line-height: 90%;
        font-weight: 700;
    }

    /*FORM*/

    .project-form-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10;
    }

    .project-form-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 60% !important;
        max-width: 500px;
        backface-visibility: hidden;
        animation: mockUpZoomFromCenterSolid 1.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
        padding: 0 !important;
    }

    /* STILE INPUT E TEXTAREA */
    .contacts-form input[type="text"],
    .contacts-form input[type="email"],
    .contacts-form textarea {
        width: 100%;
        padding: 12px 14px;
        margin-bottom: 0px;
        border: 1px solid transparent;
        border-radius: 50px; /* Effetto arrotondato pillola */
        background-color: #ffffff;
        font-size: 16px;
        color: #000000;
        outline: none;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        box-sizing: border-box;
    }

    /* Textarea specifica con angoli meno pronunciati ma comunque arrotondati */
    .contacts-form textarea {
        border-radius: 25px;
        height: 150px;
    }

    @media (max-width:768px){
        .project-title-wrapper.contacts, 
        .project-year-wrapper.contacts {
            opacity: 0;
        }

         .contacts-form textarea {
        border-radius: 25px;
        height: 100px;
    }

    }
    

    /* Placeholder style */
    .contacts-form input::placeholder,
    .contacts-form textarea::placeholder {
        color: #999;
        font-weight: 400;
    }

    /* STILE PULSANTE SUBMIT */
    .contacts-form .btn-submit {
        background-color: #000000;
        color: white;
        padding: 12px;
        border: none;
        border-radius: 50px;
        font-size: 18px;
        font-weight: 600;
        width: 100%; /* Larghezza piena come nell'immagine */
        transition: all 0.3s ease;
        margin-top: -8px;
    }

    .contacts-form {
        width: 100%;
    }

    .contacts-form .btn-submit:hover {
        background-color: #000000;
        transform: scale(0.98);
    }

    .contacts-form .row {
        margin-left: 0;
        margin-right: 0;
    }

    .contacts-form input:invalid:focus {
        border: 1px solid red;
    }

    .was-validated input:invalid, 
    .was-validated textarea:invalid {
        border: 1px solid red;
    }

    .contacts-form input:focus,
    .contacts-form textarea:focus {
        border: 1px solid #000000 !important;
        outline: none; /* Rimuove il bordino blu/azzurro di default dei browser */
        box-shadow: none; /* Rimuove eventuali ombreggiature di Bootstrap */
    }

    .was-validated .contacts-form input:invalid, 
    .was-validated .contacts-form textarea:invalid {
        border: 1px solid #ff0000 !important; 
        background-color: #fff0f0;
    }

    /* Se un campo è valido dopo il submit, puoi decidere di lasciarlo neutro o farlo verde */
    .was-validated .contacts-form input:valid,
    .was-validated .contacts-form textarea:valid {
        border: none; /* Rimane pulito se corretto */
    }

    .form-legend {
        color: #000000;
        font-size: 13px;
        margin-bottom: 0;
        opacity: 0.9;
        font-weight: 400;
        text-align: left;
        padding-left: 5px;
    }

    /* Overlay che copre tutta la pagina */
    .popup-overlay {
        position: fixed !important;

        display: flex !important;
        align-items: center !important;    /* Centra verticalmente */
        justify-content: center !important;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;        
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.7); /* Sfondo scuro semitrasparente */
        z-index: 1100;

        opacity: 0;
        transition: opacity 0.5s ease, visibility 0.5s ease;
    }

    /* Quando il pop-up è visibile */
    .popup-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Il rettangolo del pop-up */
    .popup-content {

        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin: 0 !important;

        background: #f2f2f2;
        padding: 40px;
        border-radius: 25px; /* Arrotondato come il tuo form */
        text-align: center;
        max-width: 400px;
        width: 90%;
        
        transform: translateY(40px) scale(0.8);
        opacity: 0;

        /* Transizione più lunga e fluida */
        transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), 
        opacity 0.5s ease;
    }

    .popup-overlay.active .popup-content {
        transform: translateY(0) scale(1);
        opacity: 1;
        /* Opzionale: aggiungi un piccolo ritardo rispetto allo sfondo */
        transition-delay: 0.1s;
    }

    .popup-icon {
        font-size: 80px; 
        color: #000; 
        display: inline-block;
        margin-bottom: 10px;
        text-align: center; /* Assicura che l'immagine sia centrata */
    }

    .icon-success { 
        /* Animazione interna */
        transform: scale(0);
        transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s;
    }

    .popup-overlay.active .icon-success {
        transform: scale(1);
    }

    .popup-content h2 {
        font-weight: 700;
        margin-bottom: 10px;
    }

    .popup-content p {
        color: #666;
        margin-bottom: 30px;
        line-height: 120%;  
    }

    /* Stile del bottone nel Pop-up (stile "Nudo" con bordo) */
    .popup-content .btn-submit {
        background-color: transparent; /* Sfondo trasparente o bianco */
        color: #000000;                /* Testo nero */
        border: 1px solid #000000;   /* Bordo nero sottile */
        border-radius: 50px;           /* Forma a pillola perfetta */
        padding: 8px 25px;            /* Spazio interno */
        font-size: 14px;             /* Dimensione testo */
        font-weight: 600;              /* Testo un po' più spesso */
        text-transform: uppercase;     /* Tutto in maiuscolo come nell'immagine*/

        transition: all 0.3s ease;     /* Animazione fluida */
        cursor: pointer;
        width: auto;                   /* Non occupa tutta la larghezza, si adatta al testo */
        display: inline-block;
        margin-top: 20px;
    }

    /* Effetto Hover (Inversione colori) */
    .popup-content .btn-submit:hover {
        background-color: #000000;     /* Diventa nero */
        color: #ffffff;     
        border: 1px solid #000000;           /* Il testo diventa bianco */
    }

    /* PER FAR SPARIRE IL COSO DI CLOUDFLARE DOPO LA VERIFICA*/
    .cf-turnstile {
        transition: opacity 0.5s ease, transform 0.5s ease;
        opacity: 1;
    }

    .cf-turnstile.hidden {
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none; /* Impedisce al widget di bloccare i click anche se invisibile */
        margin-bottom: -60px; /* Recupera lo spazio vuoto che occupava */
    }
/* #endregion*/

/* #region ABOUT IMAGE FLIP */

    /* --- FLIP CARD STYLES --- */

    /* Contenitore principale con prospettiva */
    .flip-card {
        background-color: transparent;
        width: 100%;
        height: 100%;
        perspective: 1500px; /* Crea l'effetto 3D */
    }

    /* Contenitore interno che ruota */
    .flip-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        transform-style: preserve-3d;
        will-change: transform;
    }

    /* Classe attivata dal tasto via JS */
    .flip-card-inner.is-flipped {
        transform: rotateY(180deg);
    }

    /* Fronte e Retro */
    .flip-card-front, .flip-card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden; 
        backface-visibility: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .flip-card-front {
        z-index: 2;
        transform: rotateY(0deg);
    }

    /* Ruota il retro di 180 gradi inizialmente */
    .flip-card-back {
        z-index: 1;
        transform: rotateY(180deg);
    }

    /* Quando è flippata, invertiamo la priorità di visualizzazione */
    .flip-card-inner.is-flipped .flip-card-back {
        z-index: 2;
    }
    .flip-card-inner.is-flipped .flip-card-front {
        z-index: 1;
    }

    /* Applichiamo il backface-visibility anche alle immagini per sicurezza */
    .flip-card-front img, .flip-card-back img {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }


    

    .tap-to-flip-btn {
        /* POSIZIONAMENTO ORIGINALE */
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%); /* Mantiene il centramento orizzontale */
        z-index: 100;

        /* STILE AWSMD */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 25px;
        overflow: hidden; 
        
        background-color: transparent;
        color: #000000;
        border-radius: 50px;
        border: 1px solid black;
        
        font-size: 14px;
        font-weight: 400;
        text-transform: uppercase;
        cursor: pointer;
        
        /* Transizione fluida per colori e bordi */
        transition: border-color 0.4s ease, background-color 0.4s ease;
        will-change: background-color, border-color;
    }

    /* 1. LA BOLLA NERA CHE SI ESPANDE */
    .tap-to-flip-btn::before {
        content: "";
        position: absolute;
        top: 50%;
        left: -20px; /* Parte leggermente fuori a sinistra */
        width: 150px;
        height: 150px;
        background-color: #000;
        border-radius: 50%;
        
        transform: translate(-50%, -50%) scale(0);
        transition: transform 0.7s cubic-bezier(0.7, 0, 0.3, 1.4);
        will-change: transform;
        z-index: -1;
    }

    /* 2. LOGICA DELLA MASCHERA DEL TESTO */
    .btn-text-mask {
        display: flex;
        flex-direction: column;
        height: 16px; /* Leggermente ridotto per font-size 14px */
        overflow: hidden;
        position: relative;
    }

    .btn-text {
        display: block;
        line-height: 16px;
        height: 16px;
        transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
        white-space: nowrap;
        transition-delay: 0s !important; /* Forza l'immediatezza */
    }

    .btn-text-top {
        color: #000000;
    }

    .btn-text-bottom {
        position: relative;
        color: #ffffff; /* Testo bianco quando lo sfondo diventa nero */
    }

    /* --- EFFETTI HOVER --- */

    .tap-to-flip-btn:hover {
        /* Lo sfondo e il bordo diventano neri con un leggero ritardo per far vedere la bolla */
        background-color: #000;
        border-color: #000;
        transition-delay: 0.3s; 
    }

    .tap-to-flip-btn:hover::before {
        transform: translate(-50%, -50%) scale(3.5);
    }

    .tap-to-flip-btn:hover .btn-text {
        transform: translateY(-100%);
    }







    /* Assicurati che l'immagine occupi lo spazio correttamente */
    .project-mockup-img {
        max-height: 100%;
        width: auto;
    }

/*#endregion*/

/* #region CONTENUTO PROGETTO */

        .project-div {
            width: 100%;
            overflow: hidden;
        }

        .project-description {
            width: 50vw;
            margin-left: auto;
            margin-right: auto;
            padding-top: 25px;
            padding-bottom: 25px;
        }

        .description-title h1 {
            padding-top: 50px;
            font-size: 18px;
            text-transform: uppercase;
            font-weight: 700;
        }

        .description-text p[lang="en"] {
            hyphens: auto;
            margin: 0;
        }

        .project-owner-title h1 {
            font-size: 16px;
            text-transform: uppercase;
            font-weight: 600;
            line-height: 0.5;
        }

        .project-owner p[lang="en"] {
            font-size: 14px;
            line-height: 1.4;
            margin: 0;
            hyphens: none;
        }

        .image-wireframe {
            width: 100vw;
            position: relative;
            left: 50%;
            right: 50%;
            margin-left: -50vw;
            margin-right: -50vw;
            padding-top: 25px;
            padding-bottom: 25px;
        }

        .image-wireframe img {
            width: 100%;
            display: block;
        }

        .image-mockup {
            width: 100vw;
            position: relative;
            left: 50%;
            right: 50%;
            margin-left: -50vw;
            margin-right: -50vw;
            padding-top: 25px;
            padding-bottom: 25px;
        }

        .image-mockup img {
            width: 100%;
            display: block;
        }

        .image-mockup {
            display: flex;
            justify-content: right;
            overflow: hidden; 
        }

        .image-mockup.shift-post {
            display: flex;
            justify-content: center;
            overflow: hidden; 

            padding: 0;
        }
        
        .colored-mockup {
            width: 100vw;
            position: relative;
            left: 50%;
            right: 50%;
            margin-left: -50vw;
            margin-right: -50vw;
            padding-top: 25px;
            padding-bottom: 25px;
        }

        .colored-mockup img {
            width: 100%;
            display: block;
        }

        .img-logo-shift {
            
            width: 100vw;
            position: relative;
            left: 50%;
            right: 50%;
            margin-left: -50vw;
            margin-right: -50vw;
            padding-top: 25px;
            padding-bottom: 25px;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        .img-logo-shift img {
            width: 20%;
            display: block;
        }

        .img-logo-shift.typography {
            
            width: 100vw;
            position: relative;
            left: 50%;
            right: 50%;
            margin-left: -50vw;
            margin-right: -50vw;
            padding-top: 60px;
            padding-bottom: 40px;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        .palette-container {
            width: 100vw;
            position: relative;
            flex-direction: column; /* Dispone le righe una sotto l'altra */
            left: 50%;
            right: 50%;
            margin-left: -50vw;
            margin-right: -50vw;
            padding-top: 25px;
            padding-bottom: 25px;
        }

        .palette-row {
            width: 100%;
            height: 100px; /* Altezza fissa o vh per essere responsive */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .palette-color {
            /* Centrato ma con rispetto dei margini */
            width: 100vw;
            text-align: center;
            font-weight: 400;
        }

        /* Colori specifici */
        .blue-angel { background-color: #2D62E7; color: white; }
        .purple-rain { background-color: #B980FF; color: white; }
        .orange-spritz { background-color: #FF5C2B; color: white; }
        .green-lagoon { background-color: #9FEA35; color: white; }
        .black-russian { background-color: #242424; color: white; }
        .white-lady { background-color: #F0F0F0; color: rgb(0, 0, 0); border: solid black 1px}













        

        







        

        .shift-image-websitecountdown {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 25px;
            padding-bottom: 25px;

        }

        .shift-image-websitecountdown img {
            width: 50%;
        }

        /* SHIFT VIDEO MOCKUP*/

        .container-video-mockup {
            display: flex;
            width: 35vw;           /* Tutta la sezione è larga metà pagina */
            margin: 40px auto;    /* Centra la sezione nella pagina */
            justify-content: center;
            align-items: flex-start;
            gap: 20px;            /* Crea lo spazio tra i due video senza usare padding complessi */
        }

        .video-column {
            flex: 1;              /* Forza le due colonne a essere larghe uguali */
            min-width: 0;         /* Impedisce ai media di "spingere" fuori la colonna */
        }

        .media-element {
            width: 100%;          /* Il video/gif occupa tutto lo spazio della sua colonna */
            height: auto;         /* L'altezza si adatta per mantenere le proporzioni */
            display: block;
            border-radius: 8px;   /* Opzionale: rende i bordi più morbidi */
            /* Impedisce il "menù contestuale" al tocco prolungato su alcuni browser */
            -webkit-touch-callout: none;
            /* Assicura che il video non mostri controlli di sistema */
            pointer-events: none;
        }

        .container-promotionalvideo {
            display: flex;
            justify-content: center;
            width: 100%;
            margin: 0px 0;
            margin-bottom: 20px;
        }

        .container-promotionalvideo .plyr {
            width: 50vw;
            min-width: 320px;
            border-radius: 10px;
            overflow: hidden;
        }

        @media (max-width: 1024px) {

            .project-description {
                width: 70%;
            }

            .colored-mockup {
                display: flex;
                justify-content: center;
                overflow: hidden; 
            }

            .colored-mockup img {
                width: 150%; 
                max-width: none;
                flex-shrink: 0;
            }

            .colored-mockup.characters img {
                width: 120%; 
                max-width: none;
                flex-shrink: 0;
            }

            .image-mockup {
                display: flex;
                justify-content: right;
                overflow: hidden; 
            }

            .image-mockup img {
                width: 120%; 
                max-width: none;
                flex-shrink: 0;
            }

            .image-wireframe {
                
                display: flex;
                justify-content: center;
                overflow: hidden; 
            }

            .image-wireframe img {
                width: 150%; 
                max-width: none;
                flex-shrink: 0;
            }

            .img-logo-shift img {
            width: 30%;
            display: block;
            }

            .shift-image-websitecountdown img {
            width: 70%;
            }  
            
            .container-video-mockup {
            width: 60%;
            }

            .container-promotionalvideo .plyr {
                width: 70%;
            }

            .project-owner-title h1 {
            font-size: 14px;
            }

            .project-owner p[lang="en"] {
            font-size: 12px;
            }

		}

        @media (max-width: 768px) {

            .project-description {
                width: 85%;
            }
            .colored-mockup {
                display: flex;
                justify-content: center;
                overflow: hidden; 
            }

            .colored-mockup img {
                width: 180%; 
                max-width: none;
                flex-shrink: 0;
            }

            .colored-mockup.characters img {
                width: 140%; 
                max-width: none;
                flex-shrink: 0;
            }

            .image-mockup {
                display: flex;
                justify-content: right;
                overflow: hidden; 
            }
            
            .image-mockup img {
                width: 150%; 
                max-width: none;
                flex-shrink: 0;
            }

            .image-wireframe {
                
                display: flex;
                justify-content: center;
                overflow: hidden; 
            }

            .image-wireframe img {
                width: 180%; 
                max-width: none;
                flex-shrink: 0;
            }

            .img-logo-shift img {
            width: 40%;
            display: block;
            }

            .shift-image-websitecountdown img {
            width: 90%;
            }

            .container-video-mockup {
            width: 70%;
            }

            .container-promotionalvideo .plyr {
                width: 90%;
            }
		}

        @media (max-width: 576px) {

            .project-description {
                width: 100%;
            }

            .colored-mockup {
                
                display: flex;
                justify-content: center;
                overflow: hidden; 
                padding-bottom: 10px;
                padding-top: 10px;
            }

            .colored-mockup img {
                width: 220%; 
                max-width: none;
                flex-shrink: 0;
            }

            .colored-mockup.characters img {
                width: 300%; 
                max-width: none;
                flex-shrink: 0;
            }

            .image-mockup {
                display: flex;
                justify-content: right;
                overflow: hidden; 
            }
            
            .image-mockup img {
                width: 200%; 
                max-width: none;
                flex-shrink: 0;
            }

            .image-wireframe {
                
                display: flex;
                justify-content: center;
                overflow: hidden; 
            }

            .image-wireframe img {
                width: 220%; 
                max-width: none;
                flex-shrink: 0;
            }

            .img-logo-shift img {
            width: 50%;
            display: block;
            }

            .shift-image-websitecountdown img {
            width: 100%;
            }

            .video-mockup {
                height: 300px;
            }

            .container-video-mockup {
            width: 90%;
            }

            .container-promotionalvideo .plyr {
                width: 100%;
            }
        }

/* #endregion */

/* #region PROJECTS PAGE */

    /* ==================== STRUTTURA CARD ==================== */

    .project-card {
        position: relative;
        height: 100%;
        width: 100%;
        border-radius: 9.5px;
        overflow: hidden;
        background: white;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .project-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background-image: 
            linear-gradient(to right, rgba(0, 0, 0, 8%) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(0, 0, 0, 8%) 1px, transparent 1px);
        background-size: 50px 50px;
        background-position: -5px -5px;
        z-index: 1;
    }

    .project-card img {
        height: 100%;
        width: auto;
        object-fit: contain;
        display: block;
        z-index: 2;
        /* Effetto parallasse dell'immagine */
        transform: scale(1.08);
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: transform;
    }

    .project-item:hover .project-card img {
        transform: scale(1);
    }

    .project-card .card-text {
        position: absolute;
        bottom: 4cqw;  
        right: 5cqw;  
        margin: 0;
        font-size: 7cqw; 
        font-weight: 600;
        color: #000000;
        letter-spacing: -0.03em;
        z-index: 3;
        text-align: right;     
        white-space: nowrap; 
    }

    /* ======= COLORI SINGOLI ======== */

    .project-card.shift { background-image: linear-gradient(180deg, #2D62E7 0%, #A5BFFF 100%); }
    .project-card.spark { background-image: linear-gradient(180deg, #D0E655 0%, #F1FFA0 100%); }
    .project-card.dedoom { background-image: linear-gradient(180deg, #F4B412 0%, #F4E19F 100%); }
    .project-card.tracce { background-image: linear-gradient(180deg, #FF7F33 0%, #FFB589 100%); }

    .project-card.shift .card-text { color: #001670; }
    .project-card.spark .card-text { color: #616C28; }
    .project-card.dedoom .card-text { color: #6F5714; }
    .project-card.tracce .card-text  { color: #97410D; }


    /* ==================== LAYOUT E LISTA ==================== */

    .main-container {
        padding-top: 16vh;
    }

    .main-title {
        font-size: 124px;
        margin: 2rem 0 3.5rem 0;
        font-weight: 600;
        letter-spacing: -3%;
    }

    .project-list {
        pointer-events: none;
        animation: enableInteraction 0s linear forwards;
        animation-delay: 1.4s; 
    }

    @keyframes enableInteraction {
        to { pointer-events: auto; }
    }

    .project-item {
        display: block; 
        text-decoration: none; 
        color: inherit; 
        position: relative;
        /* Transizione hover lista più morbida */
        transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        overflow: visible;
        border-top: none;
    }

    .project-item::before {
        content: '';
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 1px;
        background-color: #000;
        transform: scaleX(0);
        transform-origin: left;
        /* Nuova curva fluida per la linea */
        animation: lineGrow 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes lineGrow {
        to { transform: scaleX(1); }
    }

    .project-item:nth-child(1)::before { animation-delay: 0.3s; }
    .project-item:nth-child(2)::before { animation-delay: 0.4s; }
    .project-item:nth-child(3)::before { animation-delay: 0.5s; }
    .project-item:nth-child(4)::before { animation-delay: 0.6s; }

    .main-title, 
    .project-header {
        opacity: 0; 
        transform: translateY(20px); 
        /* Curva cinematografica con leggero effetto ottico di ingresso */
        animation: fadeUpIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes fadeUpIn {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .main-title { animation-delay: 0.2s; }
    .project-item:nth-child(1) .project-header { animation-delay: 0.3s; }
    .project-item:nth-child(2) .project-header { animation-delay: 0.4s; }
    .project-item:nth-child(3) .project-header { animation-delay: 0.5s; }
    .project-item:nth-child(4) .project-header { animation-delay: 0.6s; }

    .project-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
    }

    .project-name, .project-yearr {
        font-size: 50px;
        font-weight: 600;
        letter-spacing: -3%;
        margin: -0.4rem 0 -0.4rem 0;
        color: #000000;
        /* Cambio colore più rapido per sensazione di reattività */
        transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* ==================== RESPONSIVE ======================*/

    @media (min-width: 769px) {

        .main-title {
            font-size: 60px;
            margin: 2rem 0 1.5rem 0;
        }

        .project-name, .project-yearr {
            font-size: 30px;
        }

        .project-list:hover .project-item .project-name,
        .project-list:hover .project-item .project-yearr {
            color: #bbb;
        }

        .project-list .project-item:hover .project-name,
        .project-list .project-item:hover .project-yearr {
            color: #000 !important;
        }

        .project-image-wrapper {
            position: fixed;
            /* Al posto di "top", usiamo transform per le performance */
            top: 0;
            right: 110px; 
            width: 30vw;        
            max-width: 400px;
            aspect-ratio: 1 / 1.2;
            pointer-events: none;
            opacity: 0;

            /* translateY calcola l'esatta coordinata Y. Usa la scheda video */
            transform: translateY(calc(var(--y, 50vh) - 50%)) scale(0.95); 
            
            /* Transizioni super fluide e curve "Premium" */
            transition: 
                opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
                
            will-change: transform, opacity;
            z-index: 10;
            container-type: inline-size;
        }

        .project-item:hover .project-image-wrapper {
            opacity: 1;
            /* All'hover la card va a scale(1) e segue var(--y) */
            transform: translateY(calc(var(--y, 50vh) - 50%)) scale(1);
        }
    }

    @media (min-width: 1024px) {
        .main-title {
            font-size: 80px;
            margin: 2rem 0 2rem 0;
        }
        .project-name, .project-yearr { font-size: 40px; }
        .project-image-wrapper { right: 170px; }
    }

    @media (min-width: 1400px) {
        .main-title {
            font-size: 124px;
            margin: 2rem 0 3.5rem 0;
        }
        .project-name, .project-yearr { font-size: 50px; }
        .project-image-wrapper { right: 200px; }
    }

    /* --- LOGICA MOBILE --- */

    @media (max-width: 768px) {
        .main-title { 
            font-size: 70px;
            margin: 1rem 0 2rem 0;
        }
        
        .project-name, .project-yearr {
            font-size: 40px;
            color: #000; 
            margin: 0.5rem 0 0.5rem 0;
        }

        .project-image-wrapper {
            display: block;
            position: static;
            width: 100%;
            aspect-ratio: 689 / 414;
            padding-bottom: 2rem;
            opacity: 1; 
            transform: none !important; /* Disattiva le logiche transform del desktop */
            container-type: inline-size;
        }

        .project-img {
            width: 100%;
            height: auto;
            border-radius: 4px;
        }

        .project-card .card-text {
            font-size: 4cqw;
            bottom: 2cqw; 
        }

        /* Reset animazioni automatiche */
        .project-header,
        .project-item::before,
        .project-card {
            animation: none !important; 
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .project-item::before {
            transform: scaleX(0);
            transform-origin: left;
        }

        /* Entrata su viewport */
        .project-item.is-visible .project-header {
            opacity: 1;
            transform: translateY(0);
        }

        .project-item.is-visible::before {
            opacity: 1;
            transform: scaleX(1);
        }

        .project-item.is-visible .project-card {
            opacity: 1;
            transform: translateY(0) scale(1);
            transition-delay: 0.15s; 
        }
    }

    @media (max-width: 576px) {
        .main-title { 
            font-size: 50px;
            margin: 1rem 0 1.3rem 0;
        }
        .project-name, .project-yearr { font-size: 30px; }
        .project-image-wrapper { aspect-ratio: 345 / 414; }
        .project-card .card-text {
            font-size: 7cqw;
            bottom: 4cqw; 
        }
    }

    @media (max-width:365px) {
            .main-title {font-size: 40px;
            margin: 1rem 0 1rem 0;}
        }

    /* ======================================================== */
    /* BLOCCO ANIMAZIONI INIZIALI SE SI USA IL TASTO "INDIETRO" */
    /* ======================================================== */

    /* Sblocca subito le interazioni del mouse sulla lista */
    html.skip-animations .project-list {
        animation: none !important;
        pointer-events: auto !important;
    }

    /* Fa apparire subito i testi */
    html.skip-animations .project-header,
    html.skip-animations .main-title {
        animation: none !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition: none !important;
    }

    /* RISOLUZIONE PROBLEMA LINEE: Forza la scala a 1 (dimensione reale) */
    html.skip-animations .project-item::before {
        animation: none !important;
        transform: scaleX(1) !important; 
        opacity: 1 !important;
        transition: none !important; 
    }

    /* Su mobile, forza l'apparizione immediata e divide correttamente card e linee */
    @media (max-width: 768px) {
        html.skip-animations .project-card,
        html.skip-animations .project-header {
            opacity: 1 !important;
            transform: translateY(0) scale(1) !important;
            transition: none !important;
        }
        
        html.skip-animations .project-item::before {
            transform: scaleX(1) !important;
            opacity: 1 !important;
            transition: none !important;
        }
    }

/* #endregion */

/* #region HOMEPAGE */

body.home-page {
    height: 100vh;
    overflow: hidden;
    position: relative;
}



.welcome-page {
    width: 100vw;
    height: 100vh;
}

.welcome-page::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        
        /* La tua griglia */
        background-image: 
            linear-gradient(to right, rgba(0, 0, 0, 8%) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(0, 0, 0, 8%) 1px, transparent 1px);
        background-size: 60px 60px;
        
        /* Posizionamento: sopra il background colorato, sotto il testo */
        z-index: 0; 
        
        pointer-events: none;
    }

    @media (max-width: 1024px) {
        .welcome-page::before {
            background-size: 40px 40px;
        }
    }

    .flex-container.welcome {
        display: flex;
        justify-content: center; /* Centra orizzontalmente */
        align-items: center;     /* Centra verticalmente */
        height: 100%;            /* Prende tutta l'altezza della .welcome-page (100vh) */
        width: 100%;
    }

    .welcome-message {
        display: flex;
        justify-content: center;
        width: 90%;
    }

    .break-mobile { 
    display: none; /* Nasconde i tagli del telefono */
    }
    .break-desktop { 
        display: block; /* Manda a capo dopo "my" */
    }

    @media (max-width: 576px) {
    .break-mobile { 
        display: block; /* Manda a capo dopo "to" e "creative" */
    }
    .break-desktop { 
        display: none; /* Disattiva l'accapo dopo "my" */
    }
}

    .welcome-message h1{
        width: 100%;
        font-size: 100px;
        text-align: center;
        line-height: 75%;
        letter-spacing: -3%;
        font-weight: 600;
    }

    @media (max-width: 1024px) {
        .welcome-message h1{
        width: 100%;
        font-size: 70px;
    }}

    @media (max-width: 768px) {
        .welcome-message h1{
        width: 100%;
        font-size: 70px;
    }}

    @media (max-width: 576px) {
        .welcome-message h1{
        width: 100%;
        font-size: 55px;
    }}

    /* ========= ANIMAZIONE TESTO ========== */


    .animated-title .word {
        display: inline-block; 
        opacity: 0;
        
        /* 1. Meno distanza da percorrere (25px invece di 40px) */
        transform: translateY(25px); 
        
        /* 2. Più tempo (1.2s) e una curva molto più morbida e progressiva */
        animation: fadeUpWord 1.2s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
    }

    /* 3. Ho dilatato leggermente i ritardi per far "respirare" l'ingresso */
    .animated-title .word:nth-of-type(1) { animation-delay: 0.15s; } /* welcome */
    .animated-title .word:nth-of-type(2) { animation-delay: 0.30s; } /* to */
    .animated-title .word:nth-of-type(3) { animation-delay: 0.45s; } /* my */
    .animated-title .word:nth-of-type(4) { animation-delay: 0.60s; } /* creative */
    .animated-title .word:nth-of-type(5) { animation-delay: 0.75s; } /* space */

    @keyframes fadeUpWord {
        0% {
            opacity: 0;
            transform: translateY(25px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }



/* ============ STELLINA =========== */


    .clickable-text {
    cursor: pointer;
    transition: color 0.4s ease;
    position: relative;
    display: inline;
    }

    
.keep-together {
    white-space: nowrap;
    position: relative;  /* Fondamentale: fa da "ancora" per la stellina */
    padding-right: 35px; /* Crea un buco vuoto fisso a destra della parola */
}

/* Attacchiamo la stellina direttamente a 'space' */
.keep-together::after {
    content: '\2726'; 
    
    /* === LA CHIAVE È QUI === */
    position: absolute;
    right: 5px; 
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;

    display: flex;
    align-items: center;
    justify-content: center;
    
    width: 30px; 
    height: 30px; 
    
    color: #ffcc00; 
    top: 5px; 
    font-style: normal;
    transform-origin: center center; 
    
    opacity: 0;
    transform: scale(0);
    
    animation: spin-and-stay 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 1.3s; 
    
}

    @keyframes spin-and-stay {
    0% {
        transform: rotate(0deg) scale(0);
        opacity: 0;
    }
    60% {
        transform: rotate(180deg) scale(1.4); /* Effetto "pop" ingrandito a metà */
        opacity: 1;
    }
    100% {
        transform: rotate(360deg) scale(1); /* Torna a grandezza normale e si ferma */
        opacity: 1;
    }
}

        /* Animazione della stellina quando la classe attiva */
        .clickable-text.active::after {
        opacity: 1;
        animation: spin-and-fade 1.5s forwards;
        }

        /* Timeline */
        @keyframes spin-and-fade {
        0% {
            transform: rotate(0deg) scale(0);
            opacity: 0;
        }
        50% {
            transform: rotate(180deg) scale(1.5);
            opacity: 1;
        }
        100% {
            transform: rotate(360deg) scale(0);
            opacity: 0;
        }
    }

    .full-page-link {
        display: block; /* Fa in modo che il link riempia lo spazio */
        text-decoration: none; /* Togli la sottolineatura standard dei link */
        color: inherit; /* Mantieni il colore del testo nero */
        
        /* NASCONDI IL MOUSE VERO SOLO QUANDO SEI SUL LINK */
        cursor: pointer; 
    }
    
    /* COMPORTAMENTO DI DEFAULT (TOUCH)*/
    .custom-cursor {
        position: fixed;
        /* Distanza di 30px dalla barra di Safari + safe area */
        bottom: calc(30px + env(safe-area-inset-bottom)); 
        left: 50%;
        top: auto;
        transform: translateX(-50%);
        
        visibility: visible;
        opacity: 1;

        /* Estetica */
        background-color: #f2f2f2;
        border: 1px solid black;
        border-radius: 50px;
        padding: 6px 12px;
        font-size: 14px;
        font-weight: 400;
        color: black;
        text-transform: uppercase;
        white-space: nowrap;
        width: max-content;
        display: flex;
        align-items: center;
        gap: 6px;
        pointer-events: none; 
        z-index: 9999; 
        transition: opacity 0.3s ease;
    }

    /* 2. COMPORTAMENTO SOLO CON MOUSE (Pointer: Fine) */
    @media (pointer: fine) {
        .custom-cursor {
        /* Reset totale delle posizioni mobile */
        top: 0;
        left: 0;
        bottom: auto;
        
        /* Nascondi finché non si muove il mouse */
        visibility: hidden;
        opacity: 0;
        
        /* Reset del transform per lasciare spazio al JS */
        transform: translate(-50%, -50%); 
    }

        /* Mostra il cursore solo quando si passa sopra il link della pagina */
        .full-page-link:hover ~ .custom-cursor {
            /* L'opacità viene gestita dal JS nel tuo caso per l'effetto "firstMove", 
            ma lasciamo questo per sicurezza */
            opacity: 1;
        }
    }

    


/* #endregion */










/* ============= BUTTON =============*/
/* ============= GENERALE ===========*/

.next-project-container {
    display: flex;
    justify-content: center; 
    margin-top: 50px; 
}

.awsmd-become-client-btn {
  /* Layout e Posizionamento */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 20px;
  overflow: hidden; /* Fondamentale per nascondere la bolla quando esce dai bordi */
  
  /* Stile di base */
  background-color: #f2f2f2;
  color: #000000;
  border-radius: 100px;
  text-decoration: none;
  border: 1px solid #000000;

  transition: border-color 0.8s ease, background-color 0.8s ease; 
  will-change: transform, background-color, border-color;
  
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -3%;
  
  cursor: pointer;
  z-index: 1;
}

/* 1. L'animazione della BOLLA DA SINISTRA A DESTRA */
.awsmd-become-client-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -20px;
  width: 150px;
  height: 150px;
  background-color: #000;
  border-radius: 50%;
  
  /* Posizioniamo il centro della bolla sul bordo sinistro e la scaliamo a 0 */
  transform: translate(-50%, -50%) scale(0);
  
  /* Transizione fluida ed elastica */
  transition: transform 0.7s cubic-bezier(0.7, 0, 0.3, 1.4);
  will-change: transform;
  
  z-index: -1; /* Dietro al testo */
}

/* 2. L'animazione di SCORRIMENTO DEL TESTO */
.btn-text-mask {
  display: flex;
  flex-direction: column;
  height: 20px; /* Line-height del testo */
  overflow: hidden;
  position: relative;
}

.btn-text {
  display: block;
  line-height: 20px;
  height: 20px;
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1),
              color 0.3s ease;
  will-change: transform, color;
  white-space: nowrap;
}

.btn-text-top {
  color: #000000;
    text-align: center;
}

.btn-text-bottom {
  position: relative;
  color: #f2f2f2;
  text-align: center;
}

/* --- EFFETTI HOVER --- */

.awsmd-become-client-btn:hover {
  /* ECCO LA SOLUZIONE: il bottone intero diventa viola solido */
  background-color: #000;
  border-color: #000;
}

/* A. La bolla si espande dal lato sinistro fino a coprire tutto */
.awsmd-become-client-btn:hover::before {
  /* Scale(3.5) assicura che il diametro copra tutta la larghezza del bottone verso destra */
  transform: translate(-50%, -50%) scale(3.5);
}

/* B. Scorrimento del testo */
.awsmd-become-client-btn:hover .btn-text-top {
  transform: translateY(-100%);
}

.awsmd-become-client-btn:hover .btn-text-bottom {
  transform: translateY(-100%);
}

/* C. L'icona e il testo inferiore diventano bianchi (visibili sul viola) */
.awsmd-become-client-btn:hover .btn-icon {
  color: #ffffff;
}

/* ========== CUSTOM ==========*/

/*

.shift-page .awsmd-become-client-btn::before {
  background-color: #F4B412;
}

.shift-page .awsmd-become-client-btn:hover {
  background-color: #F4B412;
  border-color: #F4B412;
}

.dedoom-page .awsmd-become-client-btn::before {
  background-color: #D0E655;
}

.dedoom-page .awsmd-become-client-btn:hover {
  background-color: #D0E655;
  border-color: #D0E655;
}

.spark-page .awsmd-become-client-btn::before {
  background-color: #2D62E7;
}

.spark-page .awsmd-become-client-btn:hover {
  background-color: #2D62E7;
  border-color: #2D62E7;
}

.spark-page .btn-text-bottom {
  color: #f2f2f2;
}
  
*/