/* Reset e Stili Generali */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg-color: #070709;
    --text-color: #f3f3f3;
    --text-muted: #5e5e6e;
    --primary-color: #565ec4;
    --accent-color: #69e2fd;
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Inter', sans-serif;
    --cursor-x: 0px;
    --cursor-y: 0px;
    --ease-out-expo: cubic-bezier(.16,1,.3,1);
    --ease-soft: cubic-bezier(.22,.61,.36,1);
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-sans);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    position: relative;
}

/* Background raffinato con gradiente impercettibile */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(19, 18, 38, 0.5) 0%, rgba(7, 7, 9, 0) 80%);
    pointer-events: none;
    z-index: -1;
}

/* Header */
.header {
    padding: 30px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background: transparent;
}

.logo {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 700;
    font-style: italic;
    letter-spacing: -0.5px;
    color: var(--text-color);
}

.info-link {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.info-link:hover {
    color: var(--accent-color);
    text-shadow: 0 0 10px rgba(105, 226, 253, 0.2);
}

/* Contenuto Principale */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 120px 20px 80px 20px;
    width: 100%;
}

.page-title {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 300;
    font-style: italic;
    color: var(--primary-color);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 60px;
    opacity: 0.8;
}

/* Contenitore Lista Progetti */
.project-list-container {
    width: 100%;
    max-width: 900px;
    position: relative;
}

/* Anteprima, bordo e linee condividono lo stesso sistema SVG. */
.preview-stage {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 90;
    pointer-events: none;
    overflow: visible;
    visibility: hidden;
}

.preview-stage.is-visible,
.preview-stage.is-hiding {
    visibility: visible;
}

.preview-lines path {
    fill: none;
    stroke: var(--accent-color);
    stroke-width: 0.85;
    vector-effect: non-scaling-stroke;
    stroke-linecap: square;
    stroke-linejoin: miter;
    path-length: 1;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 150ms cubic-bezier(.2, .72, .18, 1);
}

.preview-stage.is-drawn .preview-lines path {
    stroke-dashoffset: 0;
}

.preview-lines path:nth-child(1) { transition-delay: 0ms; }
.preview-lines path:nth-child(2) { transition-delay: 24ms; }
.preview-lines path:nth-child(3) { transition-delay: 48ms; }
.preview-lines path:nth-child(4) { transition-delay: 72ms; }
.preview-stage.is-hiding .preview-lines path { transition-delay: 0ms; transition-duration: 120ms; }

.preview-card {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity 120ms linear, transform 220ms cubic-bezier(.16, 1, .3, 1);
    transform: scale(.82);
}

.preview-stage.is-visible .preview-card,
.preview-stage.is-drawn .preview-card {
    opacity: 1;
    transform: scale(1);
}

#preview-border {
    fill: none;
    stroke: var(--accent-color);
    stroke-width: 0.85;
    vector-effect: non-scaling-stroke;
}

.project-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Progetto Singolo */
.project-item {
    position: relative;
    z-index: 2;
    padding: 25px 0;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    text-decoration: none;
    display: block;
}

.project-item:last-child {
    border-bottom: none;
}

/* Testo del link */
.project-name {
    font-family: var(--font-serif);
    font-size: 3.8rem;
    font-weight: 300;
    font-style: italic;
    color: #4a4a5e; /* Colore spento di default */
    position: relative;
    display: inline-block;
    transition: color 0.4s ease, transform 0.4s ease;
    cursor: pointer;
    line-height: 1.1;
}

/* Custom strike-through animato */
.project-name::after {
    content: none;
}

/* Effetto Hover sui Progetti */
.project-item:hover .project-name {
    color: var(--text-color);
    transform: scale(1.02);
}


.footer {
    padding: 40px;
    text-align: left;
    color: var(--text-muted);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Responsive */
@media (max-width: 768px) {
    .project-name {
        font-size: 2.5rem;
    }
    
    .cms-link {
        padding: 6px 14px;
        font-size: 11px;
    }
    
    /* Disattiva l'effetto follower mouse sui dispositivi touch */
    .preview-stage {
        display: none !important;
    }
    
    /* Su mobile visualizziamo la linea di sbarramento o un'interazione semplificata */
    .project-item:active .project-name {
        color: var(--accent-color);
    }
}


/* Sottotitolo rollover: elemento separato dall'immagine, con inerzia autonoma */
.subtitle-follower {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 110;
    max-width: 300px;
    pointer-events: none;
    color: var(--text-color);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0.04em;
    padding: 10px 14px;
    border-left: 2px solid var(--accent-color);
    background: rgba(7, 7, 9, 0.78);
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: translate3d(var(--subtitle-x, 0px), var(--subtitle-y, 0px), 0) translateY(12px);
    transition: opacity 0.28s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.subtitle-follower.active {
    opacity: 1;
    transform: translate3d(var(--subtitle-x, 0px), var(--subtitle-y, 0px), 0) translateY(0);
}

.project-mobile-subtitle {
    display: none;
}


@media (max-width: 768px), (hover: none) {
    .subtitle-follower { display: none !important; }
    .project-mobile-subtitle {
        display: block;
        margin-top: 9px;
        color: var(--text-muted);
        font-size: 12px;
        line-height: 1.45;
        letter-spacing: 0.04em;
    }
}


/* Portfolio 1.0 — page transition */
body { transition: background-color .35s ease, color .35s ease, opacity .22s ease; }
body.is-leaving { opacity: 0; }
@media (prefers-reduced-motion: reduce) { body, body.is-leaving { transition: none; } }

@media (prefers-reduced-motion: reduce) {
    .corner-lines path { transition-duration: .01ms; }
}


/* =========================================================
   PORTFOLIO 2.1 — refinement layer
   ========================================================= */
html { -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
.header { background: transparent !important; }
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    opacity: .022;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.62'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
}
.project-name { transition: color .38s ease, transform .55s var(--ease-out-expo); }
.project-item:hover .project-name { transform: scale(1.018); }
.preview-card { transition: opacity 110ms linear, transform 360ms var(--ease-out-expo); }
.preview-stage.is-page-transition .preview-card { transform: scale(1.045); }
.preview-stage.is-page-transition .preview-lines path { stroke-dashoffset: 0; transition-duration: 150ms; }
.subtitle-follower { transition: opacity .22s ease, transform .56s var(--ease-out-expo); }
body.is-leaving .header, body.is-leaving .main-content, body.is-leaving .footer, body.is-leaving .subtitle-follower {
    opacity: 0;
    transition: opacity .18s linear;
}
body.is-leaving { opacity: 1; }
@media (prefers-reduced-motion: reduce) { body::after { display:none; } }


/* v2.2.3 — compact top navigation */
.header {
    padding: 14px 18px;
    min-height: 52px;
    align-items: flex-start;
}
.logo {
    font-size: 17px;
    line-height: 1;
}
.info-link {
    font-size: 11px;
    line-height: 1;
    letter-spacing: 1.7px;
}
.header .theme-toggle {
    font-size: 16px;
    line-height: 1;
    padding: 0 0 0 8px;
}
@media (max-width: 800px) {
    .header { padding: 12px 14px; min-height: 46px; }
    .logo { font-size: 16px; }
    .info-link { font-size: 10px; }
}

/* v3.0.22 — elenco progetti elastico in homepage */
.project-item {
    --elastic-shift: 0px;
    --elastic-x-shift: 0px;
    transform: translate3d(var(--elastic-x-shift), var(--elastic-shift), 0);
    transition: border-color 300ms ease;
    will-change: transform;
}

.project-item.is-active-project {
    z-index: 2;
}

@media (hover: none), (pointer: coarse), (max-width: 768px) {
    .project-item {
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-item {
        transition-duration: .01ms !important;
        transform: none !important;
    }
}


/* v3.0.29 — progetto attivo fermo e cursore mano sull'anteprima */
body.has-preview-cursor,
body.has-preview-cursor .project-list,
body.has-preview-cursor .project-item,
body.has-preview-cursor .project-name {
    cursor: pointer !important;
}

.project-item.is-active-project {
    --elastic-shift: 0px !important;
}

/* v3.0.30 — il titolo attivo scivola lateralmente fuori dall'immagine */
.project-item.is-active-project .project-name {
    position: relative;
    z-index: 1;
}



/* Modalità idle: il portfolio suggerisce delicatamente un progetto senza simulare il cursore. */
body.is-idle-preview .preview-card {
    animation: idlePreviewBreath 3.6s ease-in-out both;
}
body.is-idle-preview .subtitle-follower.active {
    animation: idleSubtitleBreath 3.6s ease-in-out both;
}
@keyframes idlePreviewBreath {
    0% { opacity: 0; transform: scale(.965); }
    18% { opacity: 1; transform: scale(1); }
    72% { opacity: 1; transform: scale(1.012); }
    100% { opacity: 0; transform: scale(.985); }
}
@keyframes idleSubtitleBreath {
    0%, 100% { opacity: 0; }
    18%, 75% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    body.is-idle-preview .preview-card,
    body.is-idle-preview .subtitle-follower.active { animation: none; }
}


/* v3.0.52 — preloader rapido, mobile e leggibile */
.site-preloader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    overflow: hidden;
    background: var(--bg-color);
    color: var(--accent-color);
    opacity: 1;
    visibility: visible;
    transition: opacity .42s var(--ease-soft), visibility 0s linear .42s;
}
body.is-preloading { overflow: hidden; }
body.is-preloading > :not(.site-preloader) { visibility: hidden; }
.site-preloader.is-complete {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.preloader-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.preloader-line,
.preloader-rect {
    fill: none;
    stroke: currentColor;
    vector-effect: non-scaling-stroke;
    shape-rendering: geometricPrecision;
}
.preloader-line {
    stroke-width: 1px;
    stroke-linecap: square;
    opacity: .96;
}
.preloader-rect {
    stroke-width: 1px;
    opacity: .82;
}
.preloader-status {
    position: absolute;
    z-index: 2;
    left: 32%;
    top: 35%;
    transform: translate(12px, 12px);
    display: flex;
    align-items: baseline;
    gap: 7px;
    pointer-events: none;
    white-space: nowrap;
    color: var(--accent-color);
    font-family: var(--font-sans);
    font-size: 11px;
    line-height: 1;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.preloader-progress { font-variant-numeric: tabular-nums; }
@media (max-width: 800px) {
    .preloader-status {
        transform: translate(9px, 9px);
        font-size: 9px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .site-preloader { transition-duration: .15s; }
}

/* v3.0.35 — durante l'idle il cursore scompare e perde autorità sui link. */
body.is-idle-control-locked,
body.is-idle-control-locked * {
    cursor: none !important;
}

/* In idle il cursore sparisce, ma i link restano cliccabili:
   il primo clic deve aprire subito il progetto, non soltanto risvegliare la pagina. */

/* v3.0.44 — i link restano sempre il livello interattivo principale. */
.project-item {
    position: relative;
    z-index: 20;
}
.project-name,
.project-mobile-subtitle {
    pointer-events: none;
}
#preview-stage,
#preview-lines,
#preview-image,
#subtitle-follower {
    pointer-events: none !important;
}

/* v3.0.53 — scala reale preview e apertura cinematografica */
.site-preloader .preloader-geometry {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .78s cubic-bezier(.22,.72,.18,1), opacity .58s ease;
}
.site-preloader.is-opening {
    background: transparent;
    transition: background-color .42s ease, opacity .58s ease .18s, visibility 0s linear .8s;
}
.site-preloader.is-opening .preloader-geometry {
    transform: scale(1.85);
    opacity: 0;
}
.site-preloader.is-opening .preloader-status {
    opacity: 0;
    transform: translate(12px, 12px) scale(1.08);
    transition: opacity .24s ease, transform .42s ease;
}
body.is-home-entering > :not(.site-preloader):not(.adesso-marquee) {
    opacity: 0;
    transform: scale(.955) translateY(10px);
    filter: blur(8px);
}
body.is-home-entering.is-home-entering-active > :not(.site-preloader):not(.adesso-marquee) {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
    transition: opacity .62s ease, transform .82s cubic-bezier(.22,.72,.18,1), filter .62s ease;
}
@media (prefers-reduced-motion: reduce) {
    .site-preloader .preloader-geometry,
    body.is-home-entering > :not(.site-preloader):not(.adesso-marquee) {
        transform: none !important;
        filter: none !important;
    }
}

/* RC4.92 — titoli opere Home leggermente più piccoli. */
.project-name{
  font-size:3.45rem!important;
}
@media(max-width:768px){
  .project-name{
    font-size:2.2rem!important;
  }
}

/* STEP 9.10 — mobile Home: non creare uno scroll-container sul body.
   Safari mantiene così il marquee fixed nello stesso riferimento di Info. */
@media(max-width:820px),(pointer:coarse){
  body.home-page{
    overflow-x:clip!important;
  }
}

/* Home — rollover più ampio e titoli ridotti */
.project-name { font-size: 3.25rem; }
@media (max-width: 768px) {
    .project-name { font-size: 2.15rem; }
}

/* Home rollover — prospettiva 3D reale */
#preview-card {
    transform-box: fill-box;
    transform-origin: center center;
    transform-style: preserve-3d;
    will-change: transform;
}




}


/* Home — equilibrio finale tra ultima opera, footer e marquee */
body.home-page .project-list-container{
    padding-bottom:90px!important;
}

body.home-page > .footer{
    padding-bottom:52px!important; /* 40px marquee + circa 12px di respiro */
}

@media(max-width:700px){
    body.home-page .project-list-container{
        padding-bottom:76px!important;
    }
    body.home-page > .footer{
        padding-bottom:49px!important; /* 37px marquee + circa 12px */
    }
}


/* In idle il titolo dell'opera accompagna immagine e didascalia.
   È separato dal mouse e non richiede auto-scroll della lista. */
.idle-title-follower{
    position:fixed;
    left:0;
    top:0;
    z-index:112;
    max-width:min(330px,32vw);
    color:var(--theme-text,var(--text-color));
    font-family:var(--theme-font-display,'Playfair Display',serif);
    font-size:2.20rem;
    font-weight:300;
    font-style:italic;
    line-height:1.08;
    pointer-events:none;
    opacity:0;
    transform:translate3d(var(--idle-title-x,0px),var(--idle-title-y,0px),0) translateY(-50%);
    transition:opacity .28s ease;
    white-space:normal;
}
.idle-title-follower.is-left{
    text-align:right;
    transform:translate3d(var(--idle-title-x,0px),var(--idle-title-y,0px),0) translate(-100%,-50%);
}
.idle-title-follower.is-right{
    text-align:left;
    transform:translate3d(var(--idle-title-x,0px),var(--idle-title-y,0px),0) translate(0,-50%);
}
body.is-idle-preview .idle-title-follower.active{
    opacity:1;
    animation:idleTitleBreath 3.6s ease-in-out both;
}
@keyframes idleTitleBreath{
    0%,100%{opacity:0}
    18%,75%{opacity:1}
}
@media(max-width:768px),(hover:none),(pointer:coarse){
    .idle-title-follower{display:none!important}
}
@media(prefers-reduced-motion:reduce){
    body.is-idle-preview .idle-title-follower.active{animation:none}
}


/* HOME — calibrazione finale dimensioni titoli */
.project-name{
    font-size:2.20rem!important;
    line-height:1.08!important;
}

/* Le linee separatrici non attraversano più tutta la Home */
.project-item{
    width:min(82%,1080px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
}

/* In idle il titolo laterale è l'unico titolo attivo visibile:
   evita lo sdoppiamento tra lista e follower automatico. */
body.is-idle-preview .project-item.is-active-project .project-name{
    opacity:0!important;
}

@media(max-width:768px){
    .project-name{
        font-size:1.95rem!important;
    }
    .project-item{
        width:90%!important;
    }
}




/* HOME desktop — footer stabile nel flusso, senza sticky e senza reazioni all’hover */
@media(min-width:801px){
  body.home-page > .footer{
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    margin:0!important;
    padding:12px 40px 52px!important;
    z-index:1!important;
  }
  body.home-page .project-list-container{
    padding-bottom:110px!important;
  }
}


/* HOME DESKTOP — footer stabile nella zona finale */
.home-footer-sentinel{
  display:block;
  width:100%;
  height:64px;
  pointer-events:none;
}
@media(min-width:801px) and (pointer:fine){
  body.home-page.is-footer-pinned > .footer{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:52px!important;
    z-index:39!important;
    width:100%!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:0 40px!important;
    transform:none!important;
    transition:none!important;
  }
}


/* =========================================================
   HOME — FIX DOPPIA SCROLLBAR DURANTE LE ANTEPRIME
   L'SVG resta full viewport ma non può creare overflow pagina.
   ========================================================= */
#preview-stage.preview-stage{
  overflow:hidden!important;
  contain:paint!important;
}


/* =========================================================
   HOME — UN SOLO SCROLL CONTAINER
   html gestisce lo scroll verticale; body non crea una seconda scrollbar.
   ========================================================= */
html{
  overflow-x:clip!important;
  overflow-y:auto!important;
}

body.home-page{
  overflow-x:clip!important;
  overflow-y:visible!important;
}

/* L'anteprima fullscreen non partecipa mai al calcolo dello scroll. */
body.home-page #preview-stage.preview-stage{
  overflow:hidden!important;
  contain:strict!important;
}


/* =========================================================
   HOME — DIDASCALIA SOPRA ALL'ANTEPRIMA
   ========================================================= */
body.home-page .subtitle-follower{
  z-index:1600!important;
}

body.home-page .subtitle-follower.active{
  z-index:1600!important;
}


/* HOME — sequenza immagini gallery nel rollover */
#preview-image{
  opacity:1;
  transition:opacity 180ms ease!important;
}
#preview-image.is-gallery-swapping{
  opacity:0;
}


/* HOME — gallery manuale: transizione rapida e stabile */
#preview-image{
  transition:opacity 110ms ease-out!important;
}


/* HOME — crossfade gallery senza passaggio al bianco */
#preview-image{
  opacity:1!important;
}
#preview-image-next{
  opacity:0;
  pointer-events:none;
  transition:opacity 300ms ease!important;
  will-change:opacity;
}
#preview-image-next.is-crossfading{
  opacity:1;
}


/* HOME — zoom morbido al cambio opera */
.preview-card{
  transform-origin:center center!important;
  will-change:transform,opacity;
}