/* ============================================================
   SoluzioneSoftware - MVC v4
   First Home: loader + entrance.
   Subsequent MVC navigation: fade-out / fade-in only.
   ============================================================ */

:root {
    --mvc-header-height: 4.63542vw;
    --page-fade-duration: 220ms;
}

/* ------------------------------------------------------------
   Base viewport
   ------------------------------------------------------------ */

html,
body {
    height: 100%;
}

@media screen and (min-width: 769px) {
    html,
    body {
        overflow: hidden;
    }
}

.mvc-main {
    width: 100%;
    height: 100vh;
    min-height: 0 !important;
    opacity: 1 !important;
    overflow: hidden;
}

/*
   Every normal page starts transparent, then site.js applies
   .page-visible. This gives the fade-in after every MVC request.
*/
.mvc-home-page {
    position: relative !important;
    display: block !important;
    box-sizing: border-box;
    width: 100%;
    height: 100vh !important;
    min-height: 0 !important;
    padding-top: var(--mvc-header-height);
    overflow: hidden !important;

    opacity: 0;
    transition: opacity var(--page-fade-duration) ease;
}

body.page-visible .mvc-home-page {
    opacity: 1;
}

body.page-leaving .mvc-home-page {
    opacity: 0;
}

.mvc-home-page .mvc-section {
    display: flex !important;
    position: relative !important;
    box-sizing: border-box;
    width: 100%;
    height: calc(100vh - var(--mvc-header-height)) !important;
    min-height: 0 !important;
    max-height: calc(100vh - var(--mvc-header-height));
    overflow: hidden;
}

.mvc-home-page .mvc-section .content {
    box-sizing: border-box;
    width: 100vw;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden;
}

.mvc-home-page .sticky-title {
    position: relative !important;
    height: 100% !important;
    min-height: 0 !important;
    flex-shrink: 0;
}

.mvc-home-page .content__left,
.mvc-home-page .content__right {
    height: 100% !important;
    min-height: 0 !important;
}

.header__letter {
    color: #E2DCC8;
    text-decoration: none;
}

.header__menu a {
    cursor: pointer;
}

.header__menu li.active a {
    color: #B66449;
}

.mvc-socials a {
    width: auto !important;
    height: auto !important;
    min-width: 1.2vw;
    font-size: .78vw;
    font-weight: 500;
}

/* ------------------------------------------------------------
   Loader
   Default: NEVER visible.
   Only .first-home-load may show it.
   ------------------------------------------------------------ */

@keyframes animate-circle {
    from { transform: scale(0); opacity: .9; }
    to   { transform: scale(1); opacity: 0; }
}

#preloader {
    display: none;
}

body.first-home-load #preloader {
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    inset: 0;
    z-index: 9999;

    opacity: 1;

    background: #1C1C1C;
    background: linear-gradient(
        to right,
        rgba(36,31,31,1) 0%,
        rgba(36,31,31,1) 32%,
        rgba(74,71,70,1) 100%
    );
}

.loader {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 5.25rem;
    height: 5.25rem;
    transform: translate(-50%, -50%);
}

.loader > .circle {
    position: absolute;
    width: inherit;
    height: inherit;
    background: #B66449;
    animation: animate-circle .62s cubic-bezier(.9,.24,.62,.79) infinite;
}

.loader > .circle:nth-of-type(1) { animation-delay: 0s; }
.loader > .circle:nth-of-type(2) { animation-delay: -.20s; }
.loader > .circle:nth-of-type(3) { animation-delay: -.40s; }

/* ------------------------------------------------------------
   HOME - common final layout
   ------------------------------------------------------------ */

.mvc-section.home .home__circles {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.mvc-section.home .home__circles-lines {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/*
   Normal / returning Home:
   grid is already in its final state. Only the whole page fades.
*/
.mvc-section.home .home__circles-lines > div {
    display: block;
    width: 1px;
    height: 100%;
    min-height: 100%;
    flex: 0 0 1px;
    background: rgba(230,227,217,.24);
    opacity: 1;
}

.mvc-section.home .home__circle {
    top: 50%;
    width: 31.66667vw;
    height: 31.71875vw;
    min-width: 390px;
    min-height: 390px;
    max-width: 610px;
    max-height: 610px;
}

.mvc-section.home .home__circle--left {
    left: 50% !important;
    right: auto !important;
    transform: translateY(-50%) translateX(-95%) !important;
    opacity: 1;
}

.mvc-section.home .home__circle--right {
    left: auto !important;
    right: 50% !important;
    transform: translateY(-50%) translateX(95%) !important;
    opacity: 1;
    z-index: 3;
}

/*
   The recovered JPG came from a screenshot of an already circular
   crop. It contains a few pixels of the surrounding dark background.
   A 1.09 scale removes that crescent while preserving the circle itself.
*/
.mvc-section.home .home__circle-img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
    transform: scale(1.09);
    transform-origin: center center;
}

.mvc-section.home .home__circle-text {
    position: relative;
    z-index: 4;
}

.mvc-section.home .content__left {
    justify-content: flex-start;
}

.mvc-section.home .content__description {
    margin-top: 2vw;
}

.mvc-section.home .content__description + .content__btn-block {
    margin-top: 3.5vw;
}

/* ------------------------------------------------------------
   FIRST HOME ONLY:
   reproduce the original entrance choreography.
   ------------------------------------------------------------ */

body.first-home-load .mvc-section.home .home__circles-lines > div {
    height: 0;
    min-height: 0;
    opacity: 0;

    transition:
        height 1.15s cubic-bezier(.22,.61,.36,1),
        opacity .45s ease;
}

body.first-home-load .mvc-section.home .home__circle--left {
    left: 250% !important;
    opacity: 0;

    transition:
        left 1.25s cubic-bezier(.22,.61,.36,1) .12s,
        opacity .6s ease .12s;
}

body.first-home-load .mvc-section.home .home__circle--right {
    right: 250% !important;
    opacity: 0;

    transition:
        right 1.25s cubic-bezier(.22,.61,.36,1) .12s,
        opacity .6s ease .12s;
}

body.first-home-load.home-intro-running
.mvc-section.home .home__circles-lines > div {
    height: 100%;
    min-height: 100%;
    opacity: 1;
}

body.first-home-load.home-intro-running
.mvc-section.home .home__circle--left {
    left: 50% !important;
    opacity: 1;
}

body.first-home-load.home-intro-running
.mvc-section.home .home__circle--right {
    right: 50% !important;
    opacity: 1;
}

/* ------------------------------------------------------------
   Progetti
   ------------------------------------------------------------ */

.mvc-section.projects .content__left {
    overflow: hidden;
}

.mvc-projects-right {
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.mvc-project-grid {
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 1.25rem;
}

.mvc-project-grid .projects__block {
    display: block !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    opacity: 1 !important;
    transform: none !important;
    margin-bottom: 1.5vw;
}

.mvc-project-grid .projects__block img {
    max-height: 38vh;
    width: 100%;
    object-fit: cover;
}

.mvc-project-grid .projects__block h2 {
    margin-top: .55rem;
    font-size: 1vw;
    text-transform: uppercase;
}

/* ------------------------------------------------------------
   Esperienze
   ------------------------------------------------------------ */

.mvc-section.experience .content__right {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mvc-section.experience .experience__list {
    padding-bottom: 1rem;
}

.mvc-experience-bg {
    background:
        radial-gradient(circle at 70% 35%, rgba(182,100,73,.20), transparent 35%),
        linear-gradient(135deg, rgba(0,0,0,.05), rgba(0,0,0,.35));
}

/* ------------------------------------------------------------
   Contatti
   ------------------------------------------------------------ */

.mvc-section.contacts .content__right {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mvc-contact-form textarea {
    width: 100%;
    min-height: 6rem;
    resize: vertical;
    border: 0;
    border-bottom: 1px solid rgba(226,220,200,.35);
    background: transparent;
    color: #E2DCC8;
    font: inherit;
    padding: .8rem 0 .4rem;
}

.mvc-contact-form .content__form-input {
    display: block;
    position: relative;
    margin-bottom: 1rem;
}

.mvc-contact-form .content__form-placeholder {
    pointer-events: none;
}

.field-validation-error,
.contact-validation {
    display: block;
    margin-top: .35rem;
    color: #e2a38e;
    font-size: .8rem;
}

.contact-success {
    padding: .8rem 1rem;
    margin: 1rem 0;
    border: 1px solid rgba(226,220,200,.35);
    color: #E2DCC8;
}

.mvc-simple-page {
    height: calc(100vh - var(--mvc-header-height));
    padding: 5rem 8vw;
    overflow-y: auto;
}

/* ------------------------------------------------------------
   Short desktop screens
   ------------------------------------------------------------ */

@media screen and (min-width: 769px) and (max-height: 760px) {
    .mvc-section.home .home__circle {
        min-width: 330px;
        min-height: 330px;
        width: 28vw;
        height: 28vw;
    }

    .mvc-section.home .content__description {
        margin-top: 1.2vw;
    }

    .mvc-section.home .content__description + .content__btn-block {
        margin-top: 1.8vw;
    }
}

/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */

@media screen and (max-width: 768px) {
    :root {
        --mvc-header-height: 18.66667vw;
    }

    html,
    body {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .mvc-main {
        height: auto;
        min-height: 100vh !important;
        overflow: visible;
    }

    .mvc-home-page {
        height: auto !important;
        min-height: 100vh !important;
        padding-top: var(--mvc-header-height);
        overflow: visible !important;
    }

    .mvc-home-page .mvc-section {
        display: block !important;
        height: auto !important;
        max-height: none;
        min-height: 0 !important;
        overflow: visible;
    }

    .mvc-home-page .sticky-title {
        position: sticky !important;
        top: var(--mvc-header-height);
        height: 13.33333vw !important;
    }

    .mvc-home-page .mvc-section .content,
    .mvc-home-page .content__left,
    .mvc-home-page .content__right {
        height: auto !important;
        overflow: visible !important;
    }

    .mvc-section.home .home__circles {
        position: relative !important;
        inset: auto;
        height: 105vw;
        margin-top: 3vw;
    }

    .mvc-section.home .home__circle {
        min-width: 0;
        min-height: 0;
        width: 74.66667vw;
        height: 74.66667vw;
    }

    .mvc-section.home .home__circle--left,
    body.first-home-load .mvc-section.home .home__circle--left {
        left: 0 !important;
        transform: translateY(-50%) !important;
    }

    .mvc-section.home .home__circle--right,
    body.first-home-load .mvc-section.home .home__circle--right {
        right: 0 !important;
        transform: translateY(-50%) !important;
    }

    body.first-home-load .mvc-section.home .home__circle--left,
    body.first-home-load .mvc-section.home .home__circle--right {
        opacity: 0;
        transition: opacity .5s ease;
    }

    body.first-home-load.home-intro-running
    .mvc-section.home .home__circle--left,
    body.first-home-load.home-intro-running
    .mvc-section.home .home__circle--right {
        opacity: 1;
    }

    .mvc-socials a {
        font-size: 3.5vw;
    }

    .mvc-project-grid {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 8vw;
    }

    .mvc-project-grid .projects__block {
        margin-bottom: 0;
    }

    .mvc-project-grid .projects__block img {
        max-height: none;
    }

    .mvc-project-grid .projects__block h2 {
        font-size: 4vw;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* ============================================================
   v7 - GS monogram + cleaned identity links area
   ============================================================ */

.header__brandmark {
    padding: 0;
    overflow: hidden;
}

.header__brandmark-img {
    display: block;
    width: 2.5vw;
    min-width: 26px;
    max-width: 42px;
    height: auto;
}

.header__identity-links {
    gap: 1.2vw;
    padding-left: 1.45vw;
    padding-right: 1.45vw;
}

.header__identity-links a {
    width: auto !important;
    min-width: auto !important;
    height: auto !important;
    padding: .22rem 0;
    font-size: .72vw;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #E2DCC8;
    opacity: .86;
    text-decoration: none;
    position: relative;
}

.header__identity-links a:hover {
    opacity: 1;
}

.header__identity-links a + a {
    margin-left: 0 !important;
    padding-left: 1.2vw;
}

.header__identity-links a + a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: .95vw;
    min-height: 10px;
    transform: translateY(-50%);
    background: rgba(230, 227, 217, 0.28);
}

@media screen and (max-width: 768px) {
    .header__brandmark-img {
        width: 9.8vw;
        min-width: 34px;
        max-width: none;
    }

    .header__identity-links {
        gap: 4vw;
        padding-left: 4vw;
        padding-right: 4vw;
    }

    .header__identity-links a {
        font-size: 2.8vw;
        letter-spacing: .08em;
    }

    .header__identity-links a + a {
        padding-left: 4vw;
    }

    .header__identity-links a + a::before {
        height: 3.8vw;
    }
}


/* ============================================================
   v8 - Home Editorial
   One abstract visual, no second circle, no vertical background grid.
   ============================================================ */

.home-editorial-page .content__right {
    overflow: hidden !important;
}

/* The old .home__circles element is no longer rendered.
   Keep the new area intentionally quiet: no vertical grid, no pattern. */
.home-editorial {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(12rem, 15vw, 18rem);
    gap: clamp(1.4rem, 2.4vw, 3rem);
    align-items: center;
    padding: clamp(1.2rem, 2vw, 2.5rem) clamp(1.5rem, 2.4vw, 3rem) !important;
    background:
        radial-gradient(circle at 36% 45%, rgba(182, 100, 73, .065), transparent 34%),
        linear-gradient(90deg, rgba(255,255,255,.012), rgba(255,255,255,.025));
}

.home-editorial::before {
    content: "";
    position: absolute;
    width: 20vw;
    height: 20vw;
    min-width: 260px;
    min-height: 260px;
    right: 9%;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid rgba(226, 220, 200, .08);
    border-radius: 50%;
    pointer-events: none;
}

/* Main abstract visual */
.home-editorial__visual-wrap {
    position: relative;
    width: 100%;
    max-width: 760px;
    justify-self: center;
}

.home-editorial__visual {
    position: relative;
    width: 100%;
    aspect-ratio: 1.06 / 1;
    overflow: hidden;

    /*
       An editorial "soft architecture" shape rather than the old circle.
       It reads as intentional design, not as a photo mask.
    */
    border-radius: 26% 5% 24% 5% / 20% 5% 22% 5%;
    border: 1px solid rgba(226, 220, 200, .16);

    background: #171514;
    box-shadow:
        0 1.8rem 5rem rgba(0,0,0,.18),
        inset 0 0 0 1px rgba(255,255,255,.02);
}

.home-editorial__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(226,220,200,.035), transparent 35%),
        linear-gradient(0deg, rgba(18,16,16,.13), transparent 28%);
}

.home-editorial__visual img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
    transform: scale(1.015);
}

/* Tiny editorial legend, deliberately secondary. */
.home-editorial__caption {
    position: absolute;
    left: 1.4rem;
    bottom: 1.25rem;
    z-index: 2;

    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
}

.home-editorial__caption span {
    padding: .38rem .58rem;
    border: 1px solid rgba(226,220,200,.18);
    background: rgba(24,21,20,.72);
    backdrop-filter: blur(5px);

    color: rgba(226,220,200,.78);
    font-size: .62rem;
    line-height: 1;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Independent experience text: no second circle. */
.home-editorial__experience {
    position: relative;
    z-index: 2;
    align-self: center;
    padding: 1.1rem 0 1.1rem clamp(1rem, 1.3vw, 1.6rem);
    border-left: 1px solid rgba(226,220,200,.28);
}

.home-editorial__experience-number {
    display: block;
    color: #E2DCC8;
    font-size: clamp(2.7rem, 4.1vw, 5rem);
    line-height: .9;
    font-weight: 400;
    letter-spacing: -.055em;
}

.home-editorial__experience-label {
    display: block;
    margin-top: .55rem;
    color: #B66449;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.home-editorial__experience p {
    margin: 1.35rem 0 0;
    color: rgba(226,220,200,.78);
    font-size: clamp(.78rem, .9vw, 1rem);
    line-height: 1.55;
}

/* Slightly more editorial copy rhythm on the left. */
.home-editorial-page .home-editorial__copy .content__description {
    margin-top: 1.6vw;
}

.home-editorial-page .home-editorial__copy .content__description + .content__btn-block {
    margin-top: 2.65vw;
}

/* ------------------------------------------------------------
   First Home only: restrained entrance, no lines/circle choreography.
   ------------------------------------------------------------ */

body.first-home-load .home-editorial__visual-wrap {
    opacity: 0;
    transform: translateX(5vw) scale(.975);
    transition:
        opacity .72s ease,
        transform 1.05s cubic-bezier(.22,.61,.36,1);
}

body.first-home-load .home-editorial__experience {
    opacity: 0;
    transform: translateY(1.3rem);
    transition:
        opacity .62s ease .18s,
        transform .8s cubic-bezier(.22,.61,.36,1) .18s;
}

body.first-home-load .home-editorial__copy .content__title,
body.first-home-load .home-editorial__copy .content__description,
body.first-home-load .home-editorial__copy .content__btn-block {
    opacity: 0;
    transform: translateY(.75rem);
    transition:
        opacity .55s ease,
        transform .72s cubic-bezier(.22,.61,.36,1);
}

body.first-home-load .home-editorial__copy .content__description {
    transition-delay: .08s;
}

body.first-home-load .home-editorial__copy .content__btn-block {
    transition-delay: .14s;
}

body.first-home-load.home-intro-running .home-editorial__visual-wrap,
body.first-home-load.home-intro-running .home-editorial__experience,
body.first-home-load.home-intro-running .home-editorial__copy .content__title,
body.first-home-load.home-intro-running .home-editorial__copy .content__description,
body.first-home-load.home-intro-running .home-editorial__copy .content__btn-block {
    opacity: 1;
    transform: none;
}

/* ------------------------------------------------------------
   Short desktop screens
   ------------------------------------------------------------ */

@media screen and (min-width: 769px) and (max-height: 760px) {
    .home-editorial {
        grid-template-columns: minmax(0, 1fr) clamp(10rem, 13vw, 14rem);
        gap: 1.4rem;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .home-editorial__visual-wrap {
        max-width: 600px;
    }

    .home-editorial__experience-number {
        font-size: 3.2rem;
    }

    .home-editorial__experience p {
        font-size: .76rem;
        line-height: 1.45;
    }
}

/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */

@media screen and (max-width: 768px) {
    .home-editorial {
        display: flex !important;
        flex-direction: column;
        gap: 7vw;
        padding: 6vw 5.33333vw 10vw !important;
        overflow: visible !important;
        background:
            radial-gradient(circle at 50% 35%, rgba(182,100,73,.07), transparent 34%);
    }

    .home-editorial::before {
        display: none;
    }

    .home-editorial__visual-wrap {
        width: 100%;
        max-width: none;
    }

    .home-editorial__visual {
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 22% 4% 20% 4% / 18% 4% 18% 4%;
    }

    .home-editorial__caption {
        left: 4vw;
        bottom: 4vw;
    }

    .home-editorial__caption span {
        font-size: 2.3vw;
    }

    .home-editorial__experience {
        width: 100%;
        box-sizing: border-box;
        padding: 5vw 0 1vw 5vw;
    }

    .home-editorial__experience-number {
        font-size: 14vw;
    }

    .home-editorial__experience-label {
        font-size: 2.7vw;
    }

    .home-editorial__experience p {
        max-width: 80vw;
        font-size: 3.55vw;
    }

    body.first-home-load .home-editorial__visual-wrap {
        transform: translateY(4vw) scale(.985);
    }
}