:root {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes softRise {
  from {
    opacity: 0;
    transform: translateY(6px);
    filter: blur(0.8px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}



/* ========== INTRO ANIM ========== */
.landing > * {
  opacity: 0;
  transform: translateY(6px);
  filter: blur(0.8px);
  animation: softRise 0.8s var(--ease-out-quart) forwards;
}

.landing > *:nth-child(1) { animation-delay: 0.05s; }
.landing > *:nth-child(2) { animation-delay: 0.15s; }
.landing > *:nth-child(3) { animation-delay: 0.25s; }
.landing > *:nth-child(4) { animation-delay: 0.35s; }

body {
  opacity: 0;
  animation: fadeInBody 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

body, nav.menu{ isolation:auto !important; }  /* assicurati che NON sia isolate */

@keyframes fadeInBody {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ===============================
   TIPOGRAFIA GENERALE — DESKTOP
   =============================== */

body,
.riga-1,
.riga-2,
.contacts,
.menu,
.messages .msg {
  font-size: 13pt;
  line-height: 0.9;
  font-family: "Diatype Variable", Icons, sans-serif;
  font-weight: 900;
  font-style: normal;
  font-variation-settings: 'slnt' 0, 'MONO' 0;
}

/* Differenze minime */
.riga-1 { font-weight: 1000; letter-spacing: 0.05em; }
.riga-2 { font-weight: 900; }
.menu { font-weight: 900; }
.contacts { font-weight: 900; }


/* ========== BASE ========== */
* { box-sizing:border-box; }
html, body { height:100%; margin:0; }
a { color:#000; text-decoration:none; }

body {
  width:100vw; height:100vh; overflow:hidden;
  background:#fff; color:#000;
  font-family:"Diatype Variable Black", Icons, sans-serif;
  font-weight:900;
  font-style:normal;
  font-variation-settings:'slnt' 0,'MONO' 0;
}

.page {
  width:100vw; height:100vh;
  display:flex; align-items:center; justify-content:center;
  margin:10px;
}

/* ========== SISTEMA GAP ========== */
.landing {
  width:100%; max-width:680px; text-align:center;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px;
}

/* ========== RADIO HIDDEN ========== */
.visually-hidden {
  position:absolute !important;
  left:-9999px !important;
  width:0 !important; height:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* ========== TIPO ========== */
.riga-1 {
  font-family:"Diatype Variable", Icons, sans-serif;
  font-weight:1000; 
  margin:2.5pt; letter-spacing:.05em;
}
.riga-2 {
  font-family:"Diatype Variable", Icons, sans-serif;
  margin:0; font-weight:900; 
  display:inline-block;
}
.no-click{ pointer-events:none; cursor:default; }
.em-space{ display:inline-block; width:1em; height:0; }
.refresh-link{ cursor:pointer; }
.refresh-link:hover{ opacity:.8; transition:opacity .3s ease; }

.contacts {
  display: inline-block;
  position: relative;
  text-align: center;
  font-family: "Diatype Variable", Icons, sans-serif;
  font-weight: 900;
}

/* Un solo T a sinistra e un solo E a destra */
.contacts::before,
.contacts::after {
  position: absolute;
  top: 0;
  color: #000;
  font-family: "Diatype Variable", Icons, sans-serif;
  font-weight: 900;
}

.contacts::before {
  content: "T";
  left: -2.1em;   /* regola distanza */
}

.contacts::after {
  content: "E";
  right: -2.1em;  /* regola distanza */
}

/* contenuto centrale */
.contacts .mid {
  display: inline-block;
  text-align: center;
}

/* ========== MENU ========== */
.menu{
  width:100%;
  display:flex; justify-content:center; align-items:center;
  gap:80px; margin:0 auto;
  position:relative;
  font-family:"Diatype Variable", Icons, sans-serif;
  font-weight:900; 

}
.menu > *{
  position:relative;
  display:inline-block;
  cursor:pointer;
}

nav.menu {
  opacity: 1;
  transform: none;
}

nav.menu > * {
  opacity: 0;
  transform: translateY(6px);
  filter: blur(0.8px);
  animation: softRise 0.8s var(--ease-out-quart) forwards;
}

/* continuità temporale: dopo le 4 righe */
nav.menu > *:nth-child(1) { animation-delay: 0.45s; } /* ABOUT */
nav.menu > *:nth-child(2) { animation-delay: 0.55s; } /* SERVICES */
nav.menu > *:nth-child(3) { animation-delay: 0.65s; } /* WORK */



/* base testo */
.menu .ink{
  color:#000;
  display:inline-block;
  transition:transform .6s ease;
  will-change:transform;
}

/* ABOUT / SERVICES hover-lift */
.menu .menu-link .ink{
  transform:translateY(0);
}
.menu .menu-link:hover .ink,
.menu .menu-link:focus-visible .ink{
  transform:translateY(-15px);
}

/* WORK fermo 
.menu .work .ink{
    z-index:1;               
  filter:none !important;   
  opacity:1 !important;     
  transition:none !important;
} */

/* ===== DESKTOP: hover WORK con difference ===== */
@media (min-width: 521px) {
  .work-wrap:hover .work .ink {
    color: #fff;
    mix-blend-mode: difference;
  }
}


/* ========== WORK: BOX + SLIDESHOW (DESKTOP) ========== */
.work-wrap {
  position: relative;
  display: inline-block;
}

/* Box ancorato a WORK, centrato visivamente */
.work-wrap .work-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-10%, -50%);   /* regola qui se vuoi spostarlo leggermente */
  width: 30vw;
  height: 37.5vw;                     /* 4:5 */
  overflow: hidden;
  display: none;                      /* nascosto finché non sei su WORK */
}

.work-wrap .work-burst{ z-index: 0; }     /* era -1 / -10: portalo a 0 */
nav.menu .work .ink{
  position: relative;
  z-index: 1;           /* WORK resta sopra all’immagine per il blend */
  filter: none !important;
  opacity: 1 !important;
}

/* Mostra il box quando sei su WORK o sopra il box */
.work-wrap:hover .work-burst,
.work-wrap .work-burst:hover {
  display: block !important;
}

/* Slideshow: tutte le immagini sovrapposte, 28 frame a 0.1s */
.work-burst .burst-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  animation: slot 2.8s steps(1, end) infinite;
  will-change: opacity;
}

/* Delays */
.work-burst .i1  { animation-delay: 0s; }
.work-burst .i2  { animation-delay:-0.1s; }
.work-burst .i3  { animation-delay:-0.2s; }
.work-burst .i4  { animation-delay:-0.3s; }
.work-burst .i5  { animation-delay:-0.4s; }
.work-burst .i6  { animation-delay:-0.5s; }
.work-burst .i7  { animation-delay:-0.6s; }
.work-burst .i8  { animation-delay:-0.7s; }
.work-burst .i9  { animation-delay:-0.8s; }
.work-burst .i10 { animation-delay:-0.9s; }
.work-burst .i11 { animation-delay:-1.0s; }
.work-burst .i12 { animation-delay:-1.1s; }
.work-burst .i13 { animation-delay:-1.2s; }
.work-burst .i14 { animation-delay:-1.3s; }
.work-burst .i15 { animation-delay:-1.4s; }
.work-burst .i16 { animation-delay:-1.5s; }
.work-burst .i17 { animation-delay:-1.6s; }
.work-burst .i18 { animation-delay:-1.7s; }
.work-burst .i19 { animation-delay:-1.8s; }
.work-burst .i20 { animation-delay:-1.9s; }
.work-burst .i21 { animation-delay:-2.0s; }
.work-burst .i22 { animation-delay:-2.1s; }
.work-burst .i23 { animation-delay:-2.2s; }
.work-burst .i24 { animation-delay:-2.3s; }
.work-burst .i25 { animation-delay:-2.4s; }
.work-burst .i26 { animation-delay:-2.5s; }
.work-burst .i27 { animation-delay:-2.6s; }
.work-burst .i28 { animation-delay:-2.7s; }

/* Cut secco (già usato prima) */
@keyframes slot {
  0%, 3.57%  { opacity: 1; }
  3.58%, 100%{ opacity: 0; }
}



/* ========== MESSAGES (ABOUT / SERVICES) ========== */

/* close-catcher: click ovunque per chiudere */
.close-catcher{
  position:fixed;
  inset:0;
  display:none;
}
#msg-about:checked ~ .close-catcher,
#msg-services:checked ~ .close-catcher{
  display:block;
}

:root{ --ease-out-quart: cubic-bezier(.25,1,.5,1); }

/* ---------- TESTI (restano sotto allo slideshow) ---------- */
.messages{
  position:fixed;
  top:70vh; bottom:15vh; left:0; right:0;
  z-index:-5;                 /* sotto alle immagini */
  pointer-events:none;
}
.messages .msg{
  position:absolute; top:0; left:0; right:0;
  margin:0; max-width:100vw; text-align:center;
  font-family:"Diatype Variable", Icons, sans-serif;
  font-weight:900; font-size:13pt; line-height:1.1; color:#000;
  opacity:0; transform:translateY(6px); filter:blur(.8px);
  transition:
    opacity .8s var(--ease-out-quart),
    transform .8s var(--ease-out-quart),
    filter  .8s var(--ease-out-quart);
}
#msg-about:checked   ~ .messages .msg[data-for="about"],
#msg-services:checked~ .messages .msg[data-for="services"]{
  opacity:1; transform:translateY(0); filter:blur(0);
}

/* Quando un testo è aperto, blocca il lift dei bottoni */
#msg-about:checked ~ nav.menu .menu-link .ink,
#msg-services:checked ~ nav.menu .menu-link .ink{
  transform:none !important;
}

/* ===== DESKTOP: WORK con blend difference ===== */
@media (min-width: 521px) {

  /* assicura che WORK sia sopra al box immagini */
  .work-burst {
    z-index: 0;
  }
  .work-wrap .work .ink {
    position: relative;
    z-index: 1;
  }

  /* HOVER: bianco + difference, con priorità massima */
  .work-wrap:hover .work .ink {
    color: #fff !important;
    mix-blend-mode: difference !important;
  }
}


/* ============ SOLO MOBILE ============ */
/* ============ SOLO MOBILE ============ */
/* ============ SOLO MOBILE ============ */
/* ============ SOLO MOBILE ============ */

@media (max-width: 520px) {

  html,
  body {
    height: 100vh;
    overflow: hidden;
  }

    body,
  .riga-1,
  .riga-2,
  .contacts,
  .menu,
  .messages .msg {
    font-size: 18px !important;   /* non sovrascrive desktop */
    line-height: 1.1 !important;
  }

   
    /* layout: tutto agganciato in alto */
  .page {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100vh;
    margin: 0;
    padding-top: 10px; /* regola se vuoi più / meno spazio top */
  }

    .landing {
    margin: 0 auto;
    padding: 0;
    padding-top: 10px;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 2px;
  }

  .riga-1 {
    font-size: 17px;
  }

  .riga-2 {
      padding-top: 5px;
    display: flex;
    flex-direction: column;
    gap: 1;
  }
    
  /* layout colonna, tutto centrato */
  .contacts {
      margin-top: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1;
    font-size: 18px;
    line-height: 1.1;
  }

  /* rimuovi T / E globali (evita doppioni) */
  .contacts::before,
  .contacts::after {
    content: none;
  }

  .contacts .mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5px;
    position: relative;
  }

  /* Riga telefono con T T */
  .contacts .mid a[href^="tel"] {
    position: relative;
  }
  .contacts .mid a[href^="tel"]::before,
  .contacts .mid a[href^="tel"]::after {
    content: "T";
    position: absolute;
    top: 0;
    color: #000;
  }
  .contacts .mid a[href^="tel"]::before { left: -30px; }
  .contacts .mid a[href^="tel"]::after  { right: -30px; }

  /* Riga email con E E */
  .contacts .mid a[href^="mailto"] {
    position: relative;
  }
  .contacts .mid a[href^="mailto"]::before,
  .contacts .mid a[href^="mailto"]::after {
    content: "E";
    position: absolute;
    top: 0;
    color: #000;
  }
  .contacts .mid a[href^="mailto"]::before { left: -50px; }
  .contacts .mid a[href^="mailto"]::after  { right: -50px; }
}
  /* MENU: ABOUT / SERVICES / WORK in linea, centrati */
   .menu {
    margin-top: 5px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 50px;           /* puoi regolare questo */
    font-size: 17px;
  }

  .menu > * {
    display: block;
    text-align: center;
    flex: 0 0 80px;      /* larghezza fissa per ABOUT / WORK / SERVICES */
  }

  /* WORK / (go) centrato dentro il suo blocco */
  .menu .work {
    display: flex;
    justify-content: center;
  }

  /* niente hover-lift su mobile */
  .menu .menu-link .ink {
    transform: none !important;
    transition: none !important;
  }

/* WORK sempre nero, nessun blend su mobile */
  .menu .work .ink,
  .work-wrap .work .ink {
    color: #000 !important;
    mix-blend-mode: normal !important;
    transform: none !important;
    transition: none !important;
  }



 /* WORK tap-to-go — solo mobile */
@media (max-width: 520px) {

  /* WORK torna cliccabile su mobile (solo per la funzione speciale) */
  .menu .work {
    pointer-events: auto !important;
  }
    
     .work.go-mode .ink {
    animation: softRise 0.8s cubic-bezier(.25,1,.5,1) forwards;
  }
    
       /* disattiva completamente la slideshow su mobile */
  .work-burst {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    animation: none !important;
  }
  .work-burst .burst-img {
    animation: none !important;
    opacity: 0 !important;  }



/* ======== MOBILE ONLY ======== */
@media (max-width: 520px) {

  /* posizione base per tutti i messaggi */
  .messages {
    position: fixed;
    left: 0;
    right: 0;
      top: 65vh;
    pointer-events: none;
  }

  .messages .msg {
    position: absolute;
    width: 100%;
    max-width: 100vw;
    text-align: center;
    font-family: "Diatype Variable", Icons, sans-serif;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.1;
    color: #000;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
    
      /* Attivazione su click */
  #msg-about:checked ~ .messages .msg[data-for="about"],
  #msg-services:checked ~ .messages .msg[data-for="services"] {
    opacity: 1;
    transform: translateY(0);
  }

  /* Chiudi */
  #msg-none:checked ~ .messages .msg {
    opacity: 0;
    transform: translateY(10px);
  }
}




}