:root {
  --gf-baseline: 50vh;
}

/* =========================================================
   GLOBAL TYPOGRAPHY
   ========================================================= */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  background: #ffffff;
  font-family: "Diatype Variable", Icons, sans-serif;
  font-weight: 900;
  font-variation-settings: 'slnt' 0, 'MONO' 0;
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  font-style: normal;
  color: #000;
}

/* span / testo base */

.gf-top-row span,
.gf-info-overlay span,
.gf-segment span {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

/* =========================================================
   TOP ROW PAGINA
   ========================================================= */

/* top row animabile + blend state */
.gf-top-row {
  position: fixed;
  top: calc(50vh - 0.5em);
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: row;
  width: 100vw;
  padding: 0 10px;

  /* AGGIUNGI QUESTO: */
  mix-blend-mode: difference;
  color: #fff;


  transition: color 150ms ease;
}

/* quando un frame è in hover → difference */
.gf-top-row.gf-diff {
  mix-blend-mode: difference;
  color: #fff;
}


.gf-segment {
  flex: 1;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.gf-segment.align-left  { justify-content: flex-start; }
.gf-segment.align-right { justify-content: flex-end; }

/* titolo progetto (seg-3) */

.gf-seg3-text {
  opacity: 0;
  transition: opacity 600ms ease;
    transition-timing-function: 
cubic-bezier(.1, 0, 0, 1);
}

.gf-seg3-text.gf-visible {
  opacity: 1;
}

/* seg2: fade con scroll */
.gf-seg2 {
  opacity: 1;
  transition: opacity 600ms ease;
    transition-timing-function: 
cubic-bezier(.1, 0, 0, 1);
}




/* =========================================================
   FULLSCREEN + SCROLL AREA + FRAME
   ========================================================= */

.gf-fullscreen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.gf-scroll-area {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  z-index: 0;
}

.gf-frames {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
}

/* frame base */

.gf-frame {
  background: rgba(255, 255, 255, 1);
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  /* ANIMAZIONE FADE-IN SU SCROLL */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
transition-timing-function: 
cubic-bezier(.1, 0, 0, 1);
}

.gf-frame-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}


/* quando il frame è “entrato” in viewport */
.gf-frame.gf-visible {
  opacity: 1;
  transform: translateY(0);
}

/* larghezze */

.f-80 { width: 80vw; }
.f-60 { width: 60vw; }
.f-40 { width: 40vw; }
.f-20 { width: 20vw; }

/* allineamento orizzontale dei frame */

.frame-left   { margin-left: 0;        margin-right: auto; }
/* niente più centering: i frame "center" diventano "left" */
.frame-center {
  margin-left: 0;
  margin-right: auto;
}

.frame-right  { margin-left: auto;     margin-right: 0; }

/* aspect ratios */

.ar-4-5  { aspect-ratio: 4 / 5; }
.ar-5-4  { aspect-ratio: 5 / 4; }
.ar-9-16 { aspect-ratio: 9 / 16; }

/* media (img / video) */



/* =========================================================
   OVERLAY INFO
   ========================================================= */

/* overlay nascosto */
.gf-info-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 1000;

  opacity: 0;
  pointer-events: none;

  transition: opacity 600ms ease;
    transition-timing-function: 
cubic-bezier(.1, 0, 0, 1);
}

/* overlay visibile */
.gf-info-overlay.active {
  opacity: 1;
  pointer-events: auto;
}


.gf-info-header {
  flex: 1;
  width: 100vw;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 0 10px;
  padding-top: calc(50vh - 0.5em); /* stessa baseline della top row */
}

/* segmenti dentro overlay */

.gf-info-header .gf-segment {
  flex: 1;
  display: flex;
  align-items: flex-start;
}

.gf-info-header .gf-info-seg2 {
  flex: 2;
  display: flex;
  flex-direction: column;
  height: 100%;      /* prende tutta l’altezza che il parent le dà */
}

/* ULTIMO span sempre giù in basso, anche se ci sono <br> dopo */
.gf-info-header .gf-info-seg2 span:last-of-type {
  margin-top: auto;
}

/* testo interno allineato a sinistra */

.gf-info-header .gf-info-seg2 span {
  text-align: left;
}

.gf-link {
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: none !important;
  cursor: pointer;
}


#gf-refresh,
#gf-refresh-overlay, #gf-info-close {
  cursor: pointer;
}
#gf-refresh:hover,
#gf-refresh-overlay:hover, 
#gf-info-close:hover, #gf-info-toggle:hover {
  opacity: .5;
}

/* DESKTOP: comportamente originale */
@media (min-width: 769px) {
  #gf-refresh-overlay,
  #gf-info-close {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    mix-blend-mode: normal;
    color: #000;
    opacity: 1;
  }
}


/* =========================================================
   MOBILE LAYOUT
   ========================================================= */
@media (max-width: 768px) {

  /* ---------- FRAME / GRID ---------- */

  .gf-frames {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .gf-frame {
    margin-top: 0;
    margin-bottom: 0;
    width: 100vw; /* base */
      
  }

  /* pattern larghezze:
     - 1°, 4°, 7°...  → 100vw
     - 2°, 5°, 8°...  → 60vw
     - 3°, 6°, 9°...  → 40vw
  */
  .gf-frame:nth-child(3n+2) {
    width: 60vw;
  }

  .gf-frame:nth-child(3n+3) {
    width: 40vw;
  }

  /* allineamento: solo left o right, mai center */
  .frame-left {
    margin-left: 0;
    margin-right: auto;
  }

  .frame-right {
    margin-left: auto;
    margin-right: 0;
  }

  .frame-center {
    margin-left: 0;
    margin-right: auto; /* center = trattato come left */
  }

  /* seg2 disattivato */
  .gf-seg2 {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
  }

  /* ---------- TOP ROW MOBILE: giulia a sinistra, info a destra ---------- */

  .gf-top-row {
    pointer-events: none; /* la barra non prende click */
  }

  #gf-refresh,
  #gf-info-toggle {
    position: fixed;
    top: 2vh;
    z-index: 5;
    mix-blend-mode: difference;
    color: #fff;
    pointer-events: auto; /* ma gli span sì */
  }

  #gf-refresh {
    left: 10px;
  }

  #gf-info-toggle {
    right: 10px;
  }

  /* ---------- TITOLO PROGETTO (seg-3) ---------- */

  .gf-seg3 {
    flex: 0 0 auto;
    width: 0;
    overflow: visible;
  }

  .gf-seg3-text {
    position: fixed;
    top: calc(50vh - 0.5em);
    left: 0;
    width: 100vw;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    mix-blend-mode: difference;
    opacity: 0;
    transition: opacity 250ms ease;
    z-index: 3;
    pointer-events: none;
  }

  .gf-seg3-text.gf-visible {
    opacity: 1;
  }

  /* ---------- OVERLAY MOBILE ---------- */


    /* L'overlay intero prende tutta la viewport */
  .gf-info-overlay {
    display: flex;
    align-items: stretch;   /* stretch orizzontale */
  }

  /* Contenitore del testo: colonna a tutta altezza */
  .gf-info-header {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;   /* stretch orizzontale */
    height: 100vh;          /* esattamente la viewport */
    box-sizing: border-box;
    padding: 60px 12px 16px;
  }

  /* Blocco centrale con tutto il testo:
     Visual designer ... + lista + contatti + copyright  */
  .gf-info-header .gf-info-seg2 {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;  /* top + bottom */
  }

  .gf-info-seg2 span {
    display: block;
    text-align: left;
    line-height: 1.25;
    margin-bottom: 14px;
  }

  /* niente trucchi con margin-top:auto qui */
  .gf-info-seg2 span:last-of-type {
    margin-bottom: 0;
  }

  /* giulia fumagalli + close fissi in alto, lato sinistro / destro */
  #gf-refresh-overlay,
  #gf-info-close {
    position: fixed;
    top: 2vh;
    z-index: 1100;
    mix-blend-mode: difference;
    color: #fff;
    opacity: 1;
    transition: opacity 150ms ease;
  }

  #gf-refresh-overlay { left: 10px; }
  #gf-info-close      { right: 10px; }

  #gf-refresh-overlay:active,
  #gf-info-close:active {
    opacity: 0.5;
  }

 /* niente underline sotto mail / link */
  .gf-info-seg2 a,
  .gf-info-seg2 a:link,
  .gf-info-seg2 a:visited {
    text-decoration: none !important;
    -webkit-text-decoration-skip: none;
  }
}

@media (max-width: 768px) {
  #gf-refresh-overlay,
  #gf-info-close {
    color: #000;
    mix-blend-mode: normal;
    opacity: 1;
    transition: opacity 150ms ease;
  }

  #gf-refresh-overlay:active,
  #gf-info-close:active {
    opacity: 0.5;
  }
}

a[href^="mailto"],
a[href^="mailto"]:link,
a[href^="mailto"]:visited,
a[href^="mailto"]:hover,
a[href^="mailto"]:active {
  text-decoration: none !important;
  border-bottom: none !important;
  color: inherit !important;
}

@media (max-width: 768px) {

  /* Il contenitore dell'overlay testo riempie tutta la viewport */
  .gf-info-header {
    display: flex;
    flex-direction: column;
    height: 100vh;           /* stessa altezza dello schermo */
    width: 100vw;
    box-sizing: border-box;
    padding: 60px 12px 16px; /* spazio sopra per il testo, sotto per il bordo */
  }

  /* Tutti i segment dentro info-header allineati a sinistra */
  .gf-info-header .gf-segment {
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 12px;
  }

  /* Il blocco centrale (intro + servizi + contatti + ©) occupa
     tutto lo spazio verticale disponibile */
  .gf-info-header .gf-info-seg2 {
    flex: 1 1 auto;           /* ← questo è il pezzo che mancava */
    display: flex;
    flex-direction: column;
  }

  .gf-info-seg2 span {
    display: block;
    text-align: left;
    line-height: 1.25;
    margin-bottom: 14px;
  }

  /* Copyright spinto in fondo al blocco = in fondo alla viewport */
  .gf-info-seg2 span:last-of-type {
    margin-top: auto;         /* lo porta in basso */
    margin-bottom: 0;
  }
}


/* Nascondi completamente seg2 tra 768px e 1239px */
@media (min-width: 768px) and (max-width: 1239px) {
  .gf-seg2 {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
  }
}

@media (max-width: 768px) {

  .gf-frame {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
    transition-delay: 40ms;  
  }

  .gf-frame.gf-visible {
    opacity: 1;
    transform: translateY(0);
  }

}

/* --------------------------------------------------
   OVERLAY: NON cambiare desktop
-------------------------------------------------- */

/* (Optional ma consigliato) niente underline in overlay, anche per tel: autogenerati da Chrome */
.gf-info-overlay a,
.gf-info-overlay a:link,
.gf-info-overlay a:visited,
.gf-info-overlay a:hover,
.gf-info-overlay a:active {
  color: inherit;
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
}

/* --------------------------------------------------
   MOBILE ONLY – overlay layout corretto
-------------------------------------------------- */
@media (max-width: 768px) {

  .gf-info-header{
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 60px 16px 16px;
    box-sizing: border-box;
  }

  /* blocco testo prende tutto lo spazio */
  .gf-info-header .gf-info-seg2{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  /* ripristiniamo i line-break */
  .gf-info-header .gf-info-seg2 br{
    display: inline;
  }

  /* ogni span è un blocco verticale */
  .gf-info-header .gf-info-seg2 > span{
    display: block;
    margin-bottom: 20px;
    line-height: 1.25;
  }

  /* CONTATTI: niente underline (Chrome tel/mail) */
  .gf-info-header .gf-info-seg2 a{
    text-decoration: none !important;
    color: inherit;
  }

  /* COPYRIGHT: sempre in fondo */
  .gf-info-header .gf-info-seg2 > span:last-of-type{
    margin-top: auto;        /* <-- chiave */
    margin-bottom: 0;
    opacity: 1;
  }

}
/* Rimuove underline SOLO da tel: e mailto: */
a[href^="tel:"],
a[href^="mailto:"] {
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
  text-decoration-skip-ink: none;
  color: inherit;
}