/*---------- FONT LOCALI ----------*/
/* Scaricati da Google Fonts e serviti dal sito: stessi pesi di prima,
   nessuna chiamata a un dominio esterno per disegnare la pagina. */
@font-face{font-family:'Heebo';font-style:normal;font-weight:100;font-display:swap;src:url(../fonts/heebo-100-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Heebo';font-style:normal;font-weight:100;font-display:swap;src:url(../fonts/heebo-100-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Heebo';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/heebo-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Heebo';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/heebo-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Heebo';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/heebo-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Heebo';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/heebo-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Heebo';font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/heebo-900-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Heebo';font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/heebo-900-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/montserrat-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/montserrat-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Pirata One';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/pirata-one-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Pirata One';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/pirata-one-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
 --orange: #ffce00; /*giallo LEGO*/
 --red: #ff0000; /*rosso LEGO*/
 --blue: #00dbff; /*ciano LEGO*/
  --paleblue: #80A1C1;
  --green: #ededed;
  --cream: #F6D8AE;
  --darkgrey: #14151f; /*back*/
  --dark: #14151f; /*back*/
  --light: #ACBDBA;
  --nero: #060607; /*stesso nero della pagina ui-ux*/ /*nero sporco: fondo pagina*/
 --boxborder: 1px;
  --ballborder: 2px;
}

/*font-family: 'Pirata One', cursive;*/

html, body{overflow-x: hidden;width: 100%;margin: 0;padding: 0;}
html {
  font-size: 0.8em;
  color: var(--dark);
  background-color: var(--darkgrey);
  text-align: center;
}
/*header portfolio page*/
#header-page h1{font-family: 'Heebo', sans-serif;font-weight: bolder; color: #fff;font-size: 14em;line-height: 1em;}
#header-page h1 span.b{color: #00dbff;}
#header-page h1 span.r{color: #ff0000;}
#header-page h1 span.y{color: #ffce00;}
#header-page h1 span.punto{color: #ff0000;font-size: 1.2em;}

/*header home*/
#header{height: 100vh;background-color: var(--nero);display: flex;flex-direction:column;justify-content: center;position:relative;}
#header h6{font-family: 'Heebo', sans-serif;color: #fff;text-transform: uppercase;letter-spacing: 5px;font-size: 16px;font-weight: 400;margin: 0;transform: rotate(-5deg);}
#header h6 span{background-color: var(--nero);padding: 5px 10px;}

/*bodoni moda*/
#header h1{font-family: 'Pirata One', cursive;color: #fff;font-size:10rem;margin-bottom:0; }
#header h2{font-family: 'Heebo', sans-serif;color: rgba(255,255,255,0.9);font-size: 18px;font-weight: lighter;margin: 0;margin-top: 0;}
#header h2, #header h1, #header h6{z-index:11;}

/* il testo dell'apertura si muove come un pezzo solo: e' la macchina */
.hero-testo{position:relative;z-index:11;will-change:transform}

/* rimando al case study, piccolo sotto al titolo */
.sottotitolo-hero{position:relative;margin:0;font-family:'Heebo',sans-serif;
  letter-spacing:0;font-size:12px;font-weight:400}
.sottotitolo-hero a{color:rgba(255,255,255,.72);text-decoration:none;
  display:inline-flex;align-items:center;gap:.45em;
  border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:3px;
  transition:color .3s var(--curva),border-color .3s var(--curva)}
.sottotitolo-hero a:hover{color:#fff;border-bottom-color:#fff}
.sottotitolo-hero .freccia{display:inline-block;
  transition:transform .3s var(--curva)}
.sottotitolo-hero a:hover .freccia{transform:translateX(4px)}
#header .noise::before{opacity: 0.05 !important;}



/*scroll items*/
.icon-scroll {
	position: absolute;
	bottom: 5%;
	left: 50%;
  width: 1em;
	height: 3.125em;
	transform: translateX(-50%) scale(2);
	z-index: 99999;
      transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  cursor: pointer;
}
.icon-arrows::after{content: '';}
.icon-arrows span,
.icon-arrows::after{
	display: block;
	width: 0.315em;
	height: 0.315em;
	border-right: 1px solid rgba(255,255,255,.8);
	border-bottom: 1px solid rgba(255,255,255,.8);
	margin: 0 0 0.125em 0.315em;
	transform: rotate(45deg);
  animation: mouse-scroll 1s infinite;
	animation-direction: alternate;
}
        
.icon-scroll span {
	animation-delay: .2s;
}

.icon-arrows::after {
	animation-delay: .3s;
}

.icon-scroll .mouse {
	height: 1.375em;
	width: .875em;
	border: 1px solid rgba(255,255,255,.8);
	border-radius: 2em;
}

.icon-scroll .wheel {
  position: relative;
  display: block;
  height: 0.1875em;
  width: 0.1875em;
  margin: 0.1875em auto 0;
  background: rgba(255,255,255,.8);
  animation: mouse-wheel 1.2s ease infinite;
  border-radius: 50%;
}

@keyframes mouse-wheel {
	0% {
		opacity: 1;
		transform: translateY(0);
	}

	100% {
		opacity: 0;
		transform: translateY(.375em);
	}
}

@keyframes mouse-scroll {
	0%   { opacity: 0; }
	50%  { opacity: .5; }
	100% { opacity: 1; }
}

.icon-scroll:hover .wheel{background: var(--red);  transition: all 0.3s ease;-moz-transition: all 0.3s ease;-webkit-transition: all 0.3s ease;}
/* END scroll items*/


#project a {
  color: var(--dark);
}
/*#project svg:hover{
  background-color: var(--light);
}*/
/*
#project h3:hover {
    -webkit-box-shadow: 0px 0px 10px 0px rgba(255,206,0,0.5);
-moz-box-shadow: 0px 0px 10px 0px rgba(255,206,0,0.5);
box-shadow: 0px 0px 10px 0px rgba(255,206,0,0.5);
  transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
    border: var(--boxborder) solid var(--orange);
    color: var(--orange);
}*/

 

/*#project li img:hover {
  border-color: var(--light);
}*/

#project canvas {
  display: none;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 200vh;
}

/* la collezione non e' un elenco: i suoi li sono pezzi del collage.
   Senza questo il browser disegna i pallini incolonnati a sinistra. */
#project ul.collection{list-style:none;padding-left:0;margin:0}
#project ul.collection > li{list-style:none}

#project .anarchy {
  position: absolute;
  visibility: hidden;
}
#project img {
  width: 200px;
  height: 200px;
  display: block;
  border-radius: 100%;
  transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
}
#project .photo-progetto img {
  display: block;
  border-radius: 100%;
  transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
}
#project .photo-progetto img{
  width: 230px;
  height: 230px; 
      transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -webkit-transition: all 0.8s ease;
}
#project .photo-progetto:hover img{
        transition: all 1s ease;
  -moz-transition: all 1s ease;
  -webkit-transition: all 1s ease;
    transform: scale(1.1);
}


#project .photo img{
  width: 170px;
  height: 170px;
}

#project #intro {
  background-color: var(--dark);
  font-size:26px ;
  width: 210px;
  padding: 25px 20px;
    color: #fff;
  font-family: 'Heebo', sans-serif; font-weight: lighter;
}
/*#project #intro-tecniche {
  background-color: #14151f;
  font-size:0.9em;
  width: 250px;
  padding: 25px 20px;
    color: #fff;
  font-family: 'Heebo', sans-serif; font-weight: 300;
  border: var(--boxborder) solid var(--blue);
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,221,255,0.5);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,221,255,0.5);
box-shadow: 0px 0px 10px 0px rgba(0,221,255,0.5);
}*/
/* blocchi di testo: pieno bianco, spigoli vivi, nessun effetto */
#project #intro-tecniche,#project .block_p  {
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-size:1.3rem;
  width: 250px;
  padding: 22px 20px;
  color: #000;
  font-family: 'Heebo', sans-serif; font-weight: 400;
}

#project #intro-tecniche p, #project .block_p p{margin: 0;}

/* Due blocchi su cinque sono trapezi. Regola dichiarata e rispettata:
   spigoli sempre vivi, nessun raggio da nessuna parte, il taglio vale
   sempre il 7% dell'altezza e cambia solo di verso fra i due. */
#project .trapezio-a{clip-path:polygon(0 0, 100% 7%, 100% 100%, 0 93%);}
#project .trapezio-b{clip-path:polygon(0 7%, 100% 0, 100% 93%, 0 100%);}
#project .trapezio-a,#project .trapezio-b{padding-top:34px;padding-bottom:34px;}

/* la riga di apertura in negativo, come #header h6 span */
#project #intro-tecniche span, #project .block_p span{
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.9;
  color: #fff;
  background-color: var(--nero);
  padding: 2px 8px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}


.ball-icon {
  background-color: #fff;
  font-size:0.9em;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  padding: 25px 25px;
  color: #000;
  font-family: 'Heebo', sans-serif; font-weight: 300;
}

.ball-icon span{/*display: inline-block;*/text-align: left;text-transform: uppercase;letter-spacing: 2px;font-size: 11px;font-weight: 400;}
.ball-icon svg.icon{height: 40px !important;width: 40px !important;/*display: inline-block;margin-right: 5px;*/display: block;margin: 0 auto;text-align: center;margin-bottom: 15px;}

/*#project #intro-tecniche span{font-weight: 400;text-transform: uppercase;color: #ffce00;}*/


#project h1 {
  width: 320px;
  height: 140px;
  padding-top: 10px;
  font-family: 'Heebo', sans-serif;
  font-size: 70px;
  background-color: var(--orange);
  border: var(--boxborder) solid var(--dark); 
}

#project h2 {
  width: 150px;
  height: 100px;
  padding-top: 10px;
  font-family: 'Heebo', sans-serif;
  font-size: 50px;
  background-color: var(--orange);
  border: var(--boxborder) solid var(--dark); 
}
#project h6{font-family: 'Heebo', sans-serif;color: #fff;font-size: 16px;}

/*
#project h3 {
  padding: 10px 25px;
  font-family: 'Heebo', sans-serif;
  font-size: 40px;
    line-height: 37px;
    font-weight: 700;
color: #fff;
  background-color: var(--dark); 
  border: var(--boxborder) solid var(--blue); 
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,221,255,0.5);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,221,255,0.5);
box-shadow: 0px 0px 10px 0px rgba(0,221,255,0.5);
      transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
}
*/

#project h3 {

  font-family: 'Pirata One', cursive;
  font-size: 9rem;
    line-height: 37px;
    font-weight: 700;
color: #fff;
letter-spacing: 1px;
line-height: 0.8em;
/*text-shadow: 6px 0 #14151f, -6px 0 #14151f, 0 6px #14151f, 0 -6px #14151f,
               5px 5px #14151f, -5px -5px #14151f, 5px -5px #14151f, -5px 5px #14151f;*/
               -webkit-text-stroke-width: 10px;
	-webkit-text-stroke-color: #14151f;
     paint-order: stroke fill;
}




#project .smaller {
  width: 240px;
}


/*#project li > .block {
  background-color: rgba(20,21,31,1);
  width: 180px;
  padding: 10px;
  font-family: 'Heebo', sans-serif; font-size: 14px;
  border: var(--boxborder) solid var(--blue); 
    box-shadow:  0px 0px 10px 0px rgba(0,221,255,0.5);
    -webkit-box-shadow:  0px 0px 10px 0px rgba(0,221,255,0.5);
    -moz-box-shadow:  0px 0px 10px 0px rgba(0,221,255,0.5);
}*/
/*#project li > .block p{color: #fff;font-size: 0.9em;}

#project li > .block p span{color: #ffce00;font-weight: bold;}*/
#project p {
  margin-bottom: 10px;
}

/* le icone delle palline: nere e ingrossate col contorno, non piu' rosse sottili */
svg.icon .cls-1{fill:#ff0000;}
#project .ball-icon svg.icon .cls-1{fill:#000;stroke:#000;stroke-width:4.5;stroke-linejoin:round;}

#header h6{animation: float 8s ease-in-out infinite;}
@keyframes float {
	0% {
		transform: translatey(0px) rotate(-5deg); 
	}
	50% {
		transform: translatey(-30px) rotate(-7deg);
	}
	100% {
		transform: translatey(0px) rotate(-5deg);
	}
}
#introduzione{padding: 26vh 30%;}
#introduzione h2{text-align: center;color: #fff;}
.lineY{background-color: rgba(255,255,255,0.7);display: block;height: 41px;width: 1px;text-align: center;margin: 0 auto;}

/* Le due stanghette si allungano con lo scorrimento finche' non entrano nel
   titolo. Il titolo porta il fondo della pagina ed e' sopra di loro: cosi'
   la stanghetta sparisce dietro al testo invece di passarci davanti, ed e'
   il testo stesso che la ferma. */
#introduzione h2{position:relative;z-index:2;background:var(--nero)}
#introduzione .lineY{transform-origin:50% 0;position:relative;z-index:1;will-change:transform}
#introduzione div.lineY:last-of-type{transform-origin:50% 100%}
.js #introduzione .lineY{opacity:0}
@media (prefers-reduced-motion: reduce){
  .js #introduzione .lineY{opacity:1;transform:none}
}

#project li > .block-svg {  width: 110px;
  height: 110px;display: flex;align-items: center;justify-content: center;}

.block-social{width: auto !important;border-radius: 90px;}
.block-social ul{list-style: none;padding: 0 !important;}
.block-social ul li{float: left;margin-left: 5px;margin-right: 5px;border-radius: 100%;background-color:#14151f;}
.block-social ul li:hover{background-color:#ff0000;}
.block-social ul li img{height: 50px !important;width: 50px !important;}

/*mysocial*/

#header-mysocial{height: 100vh;background-color: #14151f;display: flex;flex-direction:column;justify-content: center;overflow-y: hidden;}
#header-mysocial h1{font-family: 'Pirata One', cursive;color: #fff;font-size: 12em;line-height: 1em;margin-top: 0;margin-bottom: 0;z-index: 11;}
#header-mysocial h2{font-family: 'Heebo', sans-serif;color: #fff;text-transform: uppercase;letter-spacing: 5px;font-size: 16px;font-weight: 400;margin-top: 2em;z-index: 11;}
#header-mysocial p{margin-bottom: 3em;}
#header-mysocial p a{font-family: 'Heebo', sans-serif;z-index: 11;text-align: center;color: #fff;font-size: 16px;text-decoration: none; border-bottom:2px solid #ff0000;font-weight: 400;}
#header-mysocial p:hover a{color: #fff;text-decoration: none;border-bottom:2px solid #fff;}

/*PG INTERNE*/
.txt-center-portfolio{/*margin-left: 120px;*/z-index: 11;}
#banda-sx{position: absolute;background-color:transparent;height: 100vh;top: 0;left: 0;width: 120px;z-index: 11;padding-top: 3em;}
#banda-sx .arrow{border-radius: 50%;height: 50px;width: 50px;text-align: center;border: 2px solid #fff;margin-left: 35px;}
#banda-sx .arrow:hover{border: 2px solid #ffce00;background-color: #ffce00;}
#banda-sx .arrow img{height: 20px;width: auto; margin-top: 13px;text-align: center;}
#banda-sx h5{font-family: 'Heebo', sans-serif;color: #fff;font-weight: 400;font-size: 16px;text-transform: uppercase;letter-spacing: 2px; text-align: center;transform: rotate(-90deg);margin-top: 40vh;}
#header-page{background-color: #14151f;height: 100vh;text-align: center;display: flex;flex-direction:column;justify-content: center;overflow: hidden;overflow: hidden !important;position:relative;}
#header-page h1{z-index: 11;}

.blocco-img{background-position: center;background-repeat: no-repeat;background-size: cover;height: 60vh;}
.blocco-img-full{background-position: center;background-repeat: no-repeat;background-size: cover;height: 75vh;}
.row-color{background-color: #14151f;}
/* La grana vive solo nella hero: e' ancorata a #header, che e' relative.
   La skill la vorrebbe fissa, ma qui e' un materiale dell'apertura. */
.noise::before{
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    content: "";
  
    opacity: .1;  
    z-index: 9;
    pointer-events: none;
    background: url(../img/noise.gif) ;
    /* la grana si spegne verso il basso, come i livelli della hero */
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 55%,rgba(0,0,0,.35) 82%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 55%,rgba(0,0,0,.35) 82%,transparent 100%);
    overflow: hidden;
}
.blocco-txt{text-align: center;display: flex;flex-direction:column;justify-content: center;}
.row-btn{display: flex;justify-content: center;}
.row-btn ul{list-style: none;padding-left: 0;}
.row-btn li{margin-left: 30px;margin-right: 30px; float: left;padding: 10px 15px;border-bottom: 2px solid #fff;cursor: pointer;}
.row-btn ul li a{font-family: 'Pirata One', cursive;color: #fff;font-size: 2em;text-decoration: none;letter-spacing: 1px;transition: all 0.4 ease;-ms-transition: all 0.4 ease;-webkit-transition: all 0.4 ease;-moz-transition: all 0.4 ease;}
.row-btn ul li a:hover{text-decoration: none;}
.row-btn li:hover{ border-bottom: 2px solid #ff0000;transition: all 0.4 ease;-ms-transition: all 0.4 ease;-webkit-transition: all 0.4 ease;-moz-transition: all 0.4 ease;}
.space-column-sx{border-left: 20px solid #fff;margin-top: 10em;}
.row-interfaccia img{width: 800px;height: auto;position: absolute;top: 10%;z-index: 11;}
.row-interfaccia{position: relative;min-height: 600px;text-align: center;margin-bottom: 5%;margin-top: 5%;}
.row-interfaccia #pg-1{animation: float-1 9s ease-in-out infinite;left: 0;}
.row-interfaccia #pg-2{animation: float-2 10s ease-in-out infinite;left: 5%;}
.row-interfaccia #pg-3{animation: float-3 11s ease-in-out infinite;left: 10%;}
.row-interfaccia #pg-4{animation: float-4 12s ease-in-out infinite;left: 15%;}
.row-interfaccia .noise::before{opacity: 0.05 !important;}
.paragrafo-portfolio{font-family: 'Heebo', sans-serif;color: #14151f;font-size: 17px;font-weight: 300;text-align: left;}
.txt-portfolio-title{position: absolute;right: 7%;top: 30%;z-index: 11;}
.txt-portfolio-title h5{font-family: 'Pirata One', cursive;color: #fff;font-size: 15em;}
.txt-portfolio-title p{font-family: 'Heebo', sans-serif;color: #fff;font-size: 0.9em;text-transform: uppercase;letter-spacing: 2px;}
.padding-txt{padding-left: 40%;padding-right: 10%;}
.padding-txt .paragrafo-portfolio{padding-top: 20%; padding-left: 25px;border-left: 1px solid #ff0000;}
.footer{padding-bottom: 5%;padding-top: 3%;}
.footer h3{font-family: 'Heebo', sans-serif;color: #14151f;font-size: 200px;font-weight: bolder;text-align: center;margin-top: 0;margin-bottom: 0;line-height: 1em;}
.footer h3 span{color: #ff0000;}
.footer .block-social{display: flex !important;
  align-items: center !important;
  justify-content: center !important;margin-top: 5%;}
.footer .block-social li{border-radius: 100%;overflow: hidden;border: 2px solid #fff; transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;}
.footer .block-social li:hover{ transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;border: 2px solid #ff0000;}
.footer .block-social ul li img{border: none;}


@keyframes float-1 {
	0% {
		transform: translatey(0px) rotate(-5deg); 
	}
	50% {
		transform: translatey(-30px) rotate(-7deg);
	}
	100% {
		transform: translatey(0px) rotate(-5deg);
	}
}
@keyframes float-2 {
	0% {
		transform: translatey(0px) rotate(-5deg); 
	}
	50% {
		transform: translatey(-30px) rotate(-7deg);
	}
	100% {
		transform: translatey(0px) rotate(-5deg);
	}
}
@keyframes float-3 {
	0% {
		transform: translatey(0px) rotate(-5deg); 
	}
	50% {
		transform: translatey(-30px) rotate(-7deg);
	}
	100% {
		transform: translatey(0px) rotate(-5deg);
	}
}
@keyframes float-4 {
	0% {
		transform: translatey(0px) rotate(-5deg); 
	}
	50% {
		transform: translatey(-30px) rotate(-7deg);
	}
	100% {
		transform: translatey(0px) rotate(-5deg);
	}
}
.linkz{font-family: 'Pirata One', cursive;color: #14151f;font-size: 6em;transform: rotate(-6deg);}
.linkz a{color: #14151f;}
.linkz a:hover{color: #ff0f8e;text-decoration: none;}
.linkz span{background-image: url(../img/bg-halftone.png);padding: 10px 30px;}
.go-down{text-align: center;position: absolute;bottom: 5vh;left: 50%;margin-left: -17px;animation: upDown 5s ease-in-out infinite;}
.go-down img{width: 34px;}


@keyframes upDown {
	0% {
		transform: translatey(0px); 
	}
	50% {
		transform: translatey(-30px);
	}
	100% {
		transform: translatey(0px);
	}
}

.row-strategia{background-color: #edefee;padding-bottom: 5%;padding-top: 5%;margin-bottom: 5%;margin-top: 5%;background-position: center left;background-size: 60% auto;background-repeat: no-repeat;background-image: url(../img/portfolio/strategia-marketing.jpg);height: 50vh;display: flex;align-items: center;}
.txt-strategia{text-align: center;float: right;}
.txt-strategia h5{font-family: 'Pirata One', cursive;color: #14151f;font-size: 12em;}
.txt-strategia p{font-family: 'Heebo', sans-serif;color: #14151f;font-size: 0.9em;text-transform: uppercase;letter-spacing: 2px;}

/*web*/
#web01{background-image: url(../img/portfolio/beton.gif);}
#web02{background-image: url(../img/portfolio/steriltom.jpg);}
#web03{background-image: url(../img/portfolio/gs.gif);}
#web04{background-image: url(../img/portfolio/river.gif);}
#web05{background-image: url(../img/portfolio/plastic.jpg);}
#web06{background-image: url(../img/portfolio/malcesine.gif);}
#web07{background-image: url(../img/portfolio/ws.gif);}
#web08{background-image: url(../img/portfolio/ashanti.gif);}
#web09{background-image: url(../img/portfolio/studiart.gif);}
/*art*/
#art01{background-image: url(../img/portfolio/elettrondata.jpg);}
#art02{background-image: url(../img/portfolio/pack-river.jpg);}
#art03{background-image: url(../img/portfolio/pack.jpg);}
#art04{background-image: url(../img/portfolio/amada-tour.gif);}
#art05{background-image: url(../img/portfolio/es.jpg);}
#art06{background-image: url(../img/portfolio/calendario.jpg);}
#art07{background-image: url(../img/portfolio/catalogo-gs.gif);}
#art08{background-image: url(../img/portfolio/stellafly.jpg);}
#art09{background-image: url(../img/portfolio/gallery.jpg);}

.finale{padding-left: 30%;padding-right: 30%;width: 100%;height: auto;margin-top: 5%;}




/*****************media query*****************/
@media screen and (max-width: 1300px) {
    .txt-portfolio-title{right: 5%;}
    .txt-portfolio-title h5{font-size: 11em;}
    
}
@media screen and (max-width: 1200px) {
    .row-interfaccia{min-height:400px;}
    .row-interfaccia img{width: 600px;}
}
@media screen and (max-width: 1100px) {
    .txt-portfolio-title p{font-size: 0.75em;}
    .txt-portfolio-title h5{font-size: 9em;}
     .row-interfaccia{min-height:300px;}
    .row-interfaccia img{width: 500px;}
    .blocco-img{height: 40vh;}
    .padding-txt{    padding-left: 20%;
    padding-right: 0;}
#introduzione{padding: 22vh 20%;}
    .paragrafo-portfolio{font-size: 15px;padding-left: 10%;}

}
@media screen and (max-width: 992px) {
    .finale{padding-left: 0;padding-right: 0;margin-top: 0;}
    .txt-portfolio-title{    right: auto;
    text-align: center;
    display: block;
    width: 100%;
    margin-top: 200px;}
    .txt-strategia{display: none;}
    .row-strategia{background-position: center;background-size: 100% auto;margin-bottom: 0;margin-top: 0;}
    .txt-portfolio-title p{font-size: 0.75em;}
        .row-interfaccia{min-height:550px;}
    .row-interfaccia img{width: 500px;}
    .txt-portfolio-title h5{font-size: 7em;}
.txt-center-portfolio{margin-left: 0;}
#banda-sx .arrow{background-color: rgba(255,255,255,1);border: 2px solid #fff;}
#banda-sx h5{font-size: 13px;color: #fff;}
#banda-sx{width: 90px;background-color: transparent;}
#header-page h1{font-size: 10em;}
.mobile-nope{display: none;}
.icon-scroll{display: none !important;}
#header h2{font-size: 16px;}
#header h6{font-size: 14px;}
#project {
    max-width: 100vw !important;
    overflow-x: hidden !important;
     box-sizing: border-box !important;
    flex-wrap: wrap !important; 
}
/*#header {
    width: 100vw !important;
    max-width: 100% !important;
    margin: 0 auto;
}*/
}
@media screen and (max-width: 890px) {
html, body{overflow-x:hidden !important;width:100vw;}
     .paragrafo-portfolio{font-size: 14px;padding-right: 5%;}
}
@media screen and (max-width: 790px) {
#header h1{font-size: 7em;line-height: 1em;margin-top: 0.7em;}
#header-page h1{font-size: 8em;}
}
@media screen and (max-width: 770px) {
    .padding-txt{margin-bottom: 5%;}
}
@media screen and (max-width: 620px) {
#header h1{font-size: 6em;margin-top: 0.6em;}
    #banda-sx h5{display: none;}
#header-mysocial h1{font-size: 9em;}
#header-mysocial h2{font-size: 13px;}
#header h2{font-size: 15px;}
#header-page h1{font-size: 7em;}
.footer .block-social{margin-top: 90px;margin-bottom: 50px;display: block;}
}
@media screen and (max-width: 580px) {
    .footer{margin-bottom: 5%;}
    .footer h3{font-size: 100px;}
.row-interfaccia{margin-top: 0;margin-bottom: 0;}
    .space-column-sx{border-left: 0px solid transparent;
    margin-top: 0;}
    .row-strategia{margin-bottom: 0;margin-top: 0;}
   .footer .block-social{display: none !important;}
}
@media screen and (max-width: 490px) {
#header h1{font-size: 5em;margin-top: 0.6em;}
    .footer h3{font-size: 80px;}
    .txt-portfolio-title{margin-top:150px; }
           .row-interfaccia{min-height:450px;}
    .row-interfaccia img{width: 400px;}
#header-page h1{font-size: 5em;}
.lineY{display: none;}
#introduzione{padding: 18vh 10%;}
#header h2{font-size: 14px;}
}
@media screen and (max-width: 420px) { .footer{margin-bottom: 10%;}.footer h3{font-size: 50px;}}
@media screen and (max-width: 390px) {
#header h1{font-size: 4em;}
    .txt-portfolio-title p{letter-spacing: 0;}
    .txt-portfolio-title h5{font-size: 6em;}
     .txt-portfolio-title{margin-top:100px; }
           .row-interfaccia{min-height:400px;}
    .row-interfaccia img{width: 300px;}
#header-mysocial h1{font-size: 8em;}
#header-mysocial h2{font-size: 12px;}
#header{padding-left: 10%;padding-right: 10%;}
#header h2{line-height: 13px;margin-top: 10px;}
}
@media screen and (max-width: 330px) {
#header h1{font-size: 3em;}
#header{padding-left: 10%;padding-right: 10%;}
#header h6{line-height: 40px;}
#header h2{font-size: 13px;}

}

html, body {
    width: 100vw;
    overflow-x: hidden !important;
    position: relative;
}

/* stessa tipografia dei titoli di /ui-ux: Montserrat 800, --d1.
   La' --d1 e' clamp(2.1rem,5.9vw,4.9rem) con radice 16px; qui html e' 0.8em,
   quindi le stesse misure vanno scritte in px per combaciare davvero. */
.anarko{font-family: 'Montserrat', sans-serif;opacity:1;
  font-size: clamp(33.6px, 5.9vw, 78.4px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: 0;}

/*
body {
    overflow-x: hidden !important;
}
*/
/*----------FAKE ALERT-------------*/

  #fake-alert {
    display: none;
    position: fixed;
    /* sotto al titolo della hero, che prima copriva per intero */
    top: 72%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #C0C0C0;
    color: black;
    font-family: 'Courier New', monospace;
    font-size: 1em;
    width: 400px;
    max-width: 90vw;
    border: 2px solid black;
    z-index: 999999999999;
    box-shadow: 4px 4px black;
  }

  #fake-alert-header {
    font-size: 1.3rem;
    background: navy;
    color: white;
    padding: 5px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #fake-alert-body {
    font-size: 1.3rem;
    padding: 15px;
    text-align: center;
  }
  /* il blu di sistema sul grigio dava 2,23 di contrasto: sotto la soglia.
     Navy e rosso scuro tengono la finestra del 1995 e si leggono. */
  #fake-alert-body a{color:#000080}
  #fake-alert-body a:hover{color:#8b0000}
  #close-alert {
    background: red;
    color: white;
    border: none;
    font-weight: bold;
    padding: 2px 8px;
    cursor: pointer;
  }

.anarko{font-family: 'Montserrat', sans-serif !important;}

.glitch {
  position: relative;
  color: white;
  animation: glitch 1s infinite;
}

@keyframes glitch {
  0% { text-shadow: 2px 0 red, -2px 0 blue; }
  20% { text-shadow: -2px -2px lime, 2px 2px magenta; }
  40% { text-shadow: 2px 2px cyan, -2px -2px red; }
  60% { text-shadow: 2px 0 yellow, -2px 0 blue; }
  80% { text-shadow: -1px 1px orange, 1px -1px purple; }
  100% { text-shadow: none; }
}
/*---------- HERO A STRATI ----------*/
/* I dieci elementi del montaggio, separati uno per livello.
   Ogni livello e' ritagliato stretto e piazzato in percentuale sulla tela,
   quindi l'inquadratura resta identica al montaggio di partenza.
   .hero-tela riproduce background-size:cover e in piu' sborda di --sbordo
   oltre il viewport, cosi' il taglio dell'immagine resta sempre fuori campo
   mentre i livelli si spostano. */

/* La scena sborda sotto la piega e li' si dissolve: dentro il viewport i
   livelli sono pieni, la sfumatura comincia esattamente a 100vh e si spegne
   nei 26vh successivi, gia' fuori campo. Le tappe sono in vh, non in
   percentuale, perche' devono cadere sul bordo dello schermo al pixel. */
.hero-strati{position:absolute;top:0;left:0;right:0;height:126vh;
  overflow:hidden;z-index:1;pointer-events:none;
  perspective:900px;perspective-origin:50% 50%;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 100vh,transparent 126vh);
  mask-image:linear-gradient(to bottom,#000 0,#000 100vh,transparent 126vh)}
.hero-tela{--sbordo:1.10;
  position:absolute;left:50%;top:50vh;
  width:calc(max(100vw, 100vh * var(--ar)) * var(--sbordo));
  height:calc(max(100vh, 100vw / var(--ar)) * var(--sbordo));
  transform-style:preserve-3d;
  transform:translate(-50%,-50%)}
.strato{position:absolute;display:block;
  background-size:100% 100%;background-repeat:no-repeat;
  will-change:transform,opacity}

/* tela 1920x1080 */
.hero-tela{--ar:1.77778}
.strato-01{left:2.2917%;top:0.0000%;width:20.5208%;height:37.5000%;--dx:-0.768;--dy:-0.641;background-image:url(../img/hero/desktop/hero-01.png)}
.strato-02{left:23.9583%;top:0.0000%;width:12.8646%;height:39.4444%;--dx:-0.544;--dy:-0.839;background-image:url(../img/hero/desktop/hero-02.png)}
.strato-03{left:65.8854%;top:0.0000%;width:13.5417%;height:21.4815%;--dx:0.500;--dy:-0.866;background-image:url(../img/hero/desktop/hero-03.png)}
.strato-04{left:76.4583%;top:0.0000%;width:23.5417%;height:37.0370%;--dx:0.772;--dy:-0.636;background-image:url(../img/hero/desktop/hero-04.png)}
.strato-05{left:72.6562%;top:33.8889%;width:27.3438%;height:17.0370%;--dx:0.979;--dy:-0.205;background-image:url(../img/hero/desktop/hero-05.png)}
.strato-06{left:0.0000%;top:49.2593%;width:23.8542%;height:23.8889%;--dx:-0.959;--dy:0.282;background-image:url(../img/hero/desktop/hero-06.png)}
.strato-07{left:75.4167%;top:59.8148%;width:24.5833%;height:36.1111%;--dx:0.804;--dy:0.594;background-image:url(../img/hero/desktop/hero-07.png)}
.strato-08{left:0.5729%;top:70.3704%;width:20.1562%;height:29.6296%;--dx:-0.745;--dy:0.667;background-image:url(../img/hero/desktop/hero-08.png)}
.strato-09{left:25.8854%;top:72.4074%;width:12.1354%;height:27.5926%;--dx:-0.446;--dy:0.895;background-image:url(../img/hero/desktop/hero-09.png)}
.strato-10{left:61.5104%;top:73.9815%;width:15.6250%;height:26.0185%;--dx:0.463;--dy:0.886;background-image:url(../img/hero/desktop/hero-10.png)}

/* schermi a densita' doppia: stesso montaggio dal master 4K */
@media (min-resolution: 2dppx) and (min-width: 1201px),
       (-webkit-min-device-pixel-ratio: 2) and (min-width: 1201px) {
/* tela 4001x2250 */
  .hero-tela{--ar:1.77822}
  .strato-01{left:2.1995%;top:0.0000%;width:20.6448%;height:37.5556%;--dx:-0.768;--dy:-0.640;background-image:url(../img/hero/desktop2x/hero-01.png)}
  .strato-02{left:23.8690%;top:0.0000%;width:12.9968%;height:39.5111%;--dx:-0.544;--dy:-0.839;background-image:url(../img/hero/desktop2x/hero-02.png)}
  .strato-03{left:65.8085%;top:0.0000%;width:13.6466%;height:21.5556%;--dx:0.500;--dy:-0.866;background-image:url(../img/hero/desktop2x/hero-03.png)}
  .strato-04{left:76.3809%;top:0.0000%;width:23.6191%;height:37.1111%;--dx:0.772;--dy:-0.636;background-image:url(../img/hero/desktop2x/hero-04.png)}
  .strato-05{left:72.5569%;top:33.7333%;width:27.4431%;height:17.2444%;--dx:0.979;--dy:-0.206;background-image:url(../img/hero/desktop2x/hero-05.png)}
  .strato-06{left:0.0000%;top:49.1111%;width:23.8940%;height:24.0889%;--dx:-0.960;--dy:0.281;background-image:url(../img/hero/desktop2x/hero-06.png)}
  .strato-07{left:75.3312%;top:59.6444%;width:24.6688%;height:36.3556%;--dx:0.804;--dy:0.594;background-image:url(../img/hero/desktop2x/hero-07.png)}
  .strato-08{left:0.4749%;top:70.2222%;width:20.2949%;height:29.7778%;--dx:-0.746;--dy:0.666;background-image:url(../img/hero/desktop2x/hero-08.png)}
  .strato-09{left:25.7936%;top:72.2667%;width:12.2719%;height:27.7333%;--dx:-0.447;--dy:0.894;background-image:url(../img/hero/desktop2x/hero-09.png)}
  .strato-10{left:61.4346%;top:73.8222%;width:15.7461%;height:26.1778%;--dx:0.464;--dy:0.886;background-image:url(../img/hero/desktop2x/hero-10.png)}
}

@media screen and (max-width: 1200px) {
/* tela 1598x1080 */
  .hero-tela{--ar:1.47963}
  .strato-01{left:0.0000%;top:0.0000%;width:21.0263%;height:30.7407%;--dx:-0.752;--dy:-0.659;background-image:url(../img/hero/mini/hero-01.png)}
  .strato-02{left:12.9537%;top:0.0000%;width:17.7722%;height:30.2778%;--dx:-0.628;--dy:-0.778;background-image:url(../img/hero/mini/hero-02.png)}
  .strato-03{left:68.6483%;top:0.0000%;width:15.0814%;height:17.4074%;--dx:0.536;--dy:-0.844;background-image:url(../img/hero/mini/hero-03.png)}
  .strato-04{left:78.7234%;top:1.3889%;width:21.2766%;height:29.9074%;--dx:0.760;--dy:-0.650;background-image:url(../img/hero/mini/hero-04.png)}
  .strato-05{left:78.3479%;top:31.2037%;width:21.6521%;height:12.5926%;--dx:0.953;--dy:-0.304;background-image:url(../img/hero/mini/hero-05.png)}
  .strato-06{left:0.0000%;top:45.1852%;width:22.0901%;height:19.8148%;--dx:-0.992;--dy:0.130;background-image:url(../img/hero/mini/hero-06.png)}
  .strato-07{left:75.4068%;top:55.3704%;width:24.5932%;height:31.4815%;--dx:0.873;--dy:0.489;background-image:url(../img/hero/mini/hero-07.png)}
  .strato-08{left:0.0000%;top:65.4630%;width:16.0826%;height:34.5370%;--dx:-0.788;--dy:0.615;background-image:url(../img/hero/mini/hero-08.png)}
  .strato-09{left:21.4018%;top:73.5185%;width:14.0175%;height:26.4815%;--dx:-0.506;--dy:0.862;background-image:url(../img/hero/mini/hero-09.png)}
  .strato-10{left:71.3392%;top:77.5926%;width:16.2078%;height:22.4074%;--dx:0.605;--dy:0.797;background-image:url(../img/hero/mini/hero-10.png)}
}

@media screen and (max-width: 992px) {
/* tela 800x1200 */
  .hero-tela{--ar:0.66667}
  .strato-01{left:0.0000%;top:0.0000%;width:22.0000%;height:27.5000%;--dx:-0.732;--dy:-0.681;background-image:url(../img/hero/tablet/hero-01.png)}
  .strato-02{left:28.8750%;top:0.0000%;width:23.2500%;height:26.7500%;--dx:-0.251;--dy:-0.968;background-image:url(../img/hero/tablet/hero-02.png)}
  .strato-03{left:56.7500%;top:0.0000%;width:32.3750%;height:24.7500%;--dx:0.521;--dy:-0.854;background-image:url(../img/hero/tablet/hero-03.png)}
  .strato-04{left:69.6250%;top:0.0000%;width:30.3750%;height:31.5000%;--dx:0.713;--dy:-0.701;background-image:url(../img/hero/tablet/hero-04.png)}
  .strato-05{left:75.6250%;top:57.0833%;width:24.3750%;height:13.7500%;--dx:0.938;--dy:0.346;background-image:url(../img/hero/tablet/hero-05.png)}
  .strato-06{left:0.0000%;top:59.7500%;width:35.0000%;height:22.6667%;--dx:-0.839;--dy:0.544;background-image:url(../img/hero/tablet/hero-06.png)}
  .strato-07{left:65.2500%;top:69.5833%;width:34.7500%;height:29.2500%;--dx:0.690;--dy:0.724;background-image:url(../img/hero/tablet/hero-07.png)}
  .strato-08{left:0.0000%;top:75.0833%;width:28.6250%;height:24.9167%;--dx:-0.689;--dy:0.725;background-image:url(../img/hero/tablet/hero-08.png)}
  .strato-09{left:54.7500%;top:80.5833%;width:26.1250%;height:19.4167%;--dx:0.404;--dy:0.915;background-image:url(../img/hero/tablet/hero-09.png)}
  .strato-10{left:29.3750%;top:80.9167%;width:22.8750%;height:19.0833%;--dx:-0.221;--dy:0.975;background-image:url(../img/hero/tablet/hero-10.png)}
}

@media screen and (max-width: 790px) {
/* tela 600x1100 */
  .hero-tela{--ar:0.54545}
  .strato-01{left:0.6667%;top:0.0000%;width:24.8333%;height:26.3636%;--dx:-0.708;--dy:-0.706;background-image:url(../img/hero/phone/hero-01.png)}
  .strato-02{left:23.5000%;top:0.0000%;width:24.5000%;height:22.8182%;--dx:-0.346;--dy:-0.938;background-image:url(../img/hero/phone/hero-02.png)}
  .strato-03{left:53.0000%;top:0.0000%;width:36.0000%;height:22.2727%;--dx:0.475;--dy:-0.880;background-image:url(../img/hero/phone/hero-03.png)}
  .strato-04{left:66.3333%;top:0.0000%;width:33.6667%;height:28.2727%;--dx:0.679;--dy:-0.734;background-image:url(../img/hero/phone/hero-04.png)}
  .strato-05{left:74.8333%;top:62.8182%;width:25.1667%;height:11.7273%;--dx:0.895;--dy:0.447;background-image:url(../img/hero/phone/hero-05.png)}
  .strato-06{left:0.0000%;top:63.3636%;width:31.0000%;height:17.8182%;--dx:-0.840;--dy:0.542;background-image:url(../img/hero/phone/hero-06.png)}
  .strato-07{left:65.8333%;top:72.5455%;width:34.1667%;height:27.4545%;--dx:0.672;--dy:0.741;background-image:url(../img/hero/phone/hero-07.png)}
  .strato-08{left:0.0000%;top:76.4545%;width:23.8333%;height:23.5455%;--dx:-0.706;--dy:0.708;background-image:url(../img/hero/phone/hero-08.png)}
  .strato-09{left:54.8333%;top:81.7273%;width:31.0000%;height:18.2727%;--dx:0.445;--dy:0.895;background-image:url(../img/hero/phone/hero-09.png)}
  .strato-10{left:24.1667%;top:82.0909%;width:27.6667%;height:17.9091%;--dx:-0.281;--dy:0.960;background-image:url(../img/hero/phone/hero-10.png)}
}

@media (prefers-reduced-motion: reduce){
  .strato{transform:none !important;opacity:1 !important}
}


/*---------- APERTURA: COLATA ----------*/
/* Una massa di nero che defluisce verso il basso e scopre la pagina.
   Perche' c'e': da' un inizio alla visita, e copre il momento in cui il
   collage fisico si sta ancora assestando. Dura 1,6s e non torna piu'. */
.colata{position:fixed;inset:0;z-index:2147483000;pointer-events:none}
.colata svg{display:block;width:100%;height:100%}
/* il pelo del liquido: una lama di luce sulla superficie e un filo netto,
   senza i due la colata su nero legge come una tendina qualunque */
.colata path{
  fill:url(#colata-luce);
  stroke:rgba(255,255,255,.17);
  stroke-width:1.5;
  vector-effect:non-scaling-stroke;
}
.colata.finita{display:none}

@media (prefers-reduced-motion: reduce){
  .colata{display:none}
}


/*---------- INTERAZIONI MINIME ----------*/
/* Movimento piccolo e sobrio, in contrasto con i tre momenti forti della
   pagina: la colata in apertura, la hero a strati, il collage fisico.
   Ogni voce qui sotto ha un motivo dichiarato, non e' decorazione. */

/* Riscontro: una finestra di dialogo arriva, non appare di scatto. */
#fake-alert{opacity:0;transform:translate(-50%,-50%) scale(.965);
  transition:opacity .2s ease, transform .24s cubic-bezier(.16,1,.3,1)}
#fake-alert.aperto{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* Riscontro alla pressione: l'elemento cede sotto il dito. */
#fake-alert-body a,.block-social ul li a,#close-alert{transition:transform .12s ease}
#fake-alert-body a:active,.block-social ul li a:active{transform:translateY(1px)}
#close-alert:active{transform:scale(.94)}

/* Cambio di stato: il cerchio social vira invece di scattare. */
.block-social ul li{transition:background-color .25s cubic-bezier(.16,1,.3,1)}

@media (prefers-reduced-motion: reduce){
  #fake-alert{opacity:1;transform:translate(-50%,-50%);transition:none}
}


/*---------- COMPARSE ----------*/
/* Stesso vocabolario della pagina ui-ux: una curva sola, tre durate.
   Gli elementi entrano sfocati e in salita, i titoli parola per parola.
   Si rigiocano ogni volta che rientrano in campo, come di la'. */
:root{
  --curva:cubic-bezier(.2,.7,.2,1);
  --t1:.7s; --t2:.85s; --t3:1s;
}

.js .vel{opacity:0;filter:blur(13px);transform:translateY(16px);
  transition:opacity var(--t2) var(--curva) var(--rit,0ms),
             filter var(--t2) var(--curva) var(--rit,0ms),
             transform var(--t2) var(--curva) var(--rit,0ms)}
.js .vel.dentro{opacity:1;filter:blur(0);transform:none}

.js .parola{display:inline-block;opacity:0;filter:blur(12px);transform:translateY(.24em);
  transition:opacity var(--t1) var(--curva) var(--d,0ms),
             filter var(--t1) var(--curva) var(--d,0ms),
             transform var(--t1) var(--curva) var(--d,0ms)}
.js .parola.dentro{opacity:1;filter:blur(0);transform:none}

.js .scala{opacity:0;transform:scale(.985) translateY(18px);
  transition:opacity var(--t3) var(--curva) var(--rit,0ms),
             transform var(--t3) var(--curva) var(--rit,0ms)}
.js .scala.dentro{opacity:1;transform:none}

/* il nastrino con il nome galleggia gia': la comparsa va sul suo riquadro */
.js #header h6 span.vel{display:inline-block}

@media (prefers-reduced-motion: reduce){
  .js .vel,.js .parola,.js .scala{opacity:1 !important;filter:none !important;
    transform:none !important;transition:none !important}
}


/*---------- PALLINE ICONA, TAGLIATE A MANO ----------*/
/* Non piu' dischi perfetti: ritagli storti, come pezzi staccati a forbice
   da una fotocopia. Tre sagome diverse, cosi' non si ripetono uguali.
   Niente bordi e niente aloni, come il resto dei cerchi. */
#project .ball-icon{border-radius:0}
#project .ball-icon.taglio-1{clip-path:polygon(94.9% 50.0%, 92.4% 60.4%, 92.0% 72.0%, 82.2% 78.5%, 76.4% 88.3%, 66.0% 92.3%, 55.2% 92.6%, 44.4% 96.0%, 34.8% 90.0%, 24.0% 87.7%, 17.8% 78.5%, 11.8% 70.1%, 5.6% 60.9%, 1.3% 50.0%, 7.8% 39.6%, 10.9% 29.5%, 14.7% 18.7%, 21.8% 9.2%, 33.4% 6.2%, 44.5% 4.9%, 56.0% 0.5%, 65.2% 9.9%, 77.8% 9.7%, 83.4% 20.4%, 88.6% 29.7%, 92.1% 39.6%)}
#project .ball-icon.taglio-2{clip-path:polygon(91.3% 67.5%, 89.0% 79.1%, 77.8% 83.9%, 70.2% 92.3%, 59.6% 96.3%, 48.3% 95.3%, 37.2% 94.8%, 28.6% 87.3%, 20.3% 81.1%, 12.8% 73.6%, 4.9% 65.2%, 4.5% 53.8%, 5.7% 42.9%, 6.8% 31.7%, 13.2% 22.5%, 21.6% 15.4%, 29.1% 6.3%, 40.3% 3.2%, 51.7% 5.7%, 62.9% 5.0%, 73.1% 9.7%, 83.9% 14.5%, 90.5% 24.2%, 92.3% 35.7%, 99.7% 45.9%, 92.8% 56.8%)}
#project .ball-icon.taglio-3{clip-path:polygon(78.4% 85.7%, 70.0% 93.8%, 58.1% 92.9%, 47.5% 96.1%, 37.5% 90.9%, 25.7% 90.8%, 16.1% 84.3%, 10.1% 74.5%, 3.2% 64.9%, 5.2% 53.0%, 3.0% 41.7%, 7.1% 31.0%, 12.9% 21.3%, 21.5% 14.0%, 29.7% 5.6%, 40.8% 1.3%, 52.5% 4.0%, 63.8% 4.6%, 72.0% 13.1%, 83.6% 16.0%, 90.4% 25.3%, 97.6% 34.8%, 98.6% 46.8%, 94.0% 57.8%, 91.5% 68.4%, 87.6% 79.1%)}

/* etichetta da stampino: pesante, stretta, tutta in alto */
#project .ball-icon span{font-weight:800;letter-spacing:1px;font-size:12px}
#project .ball-icon svg.icon{height:50px !important;width:50px !important;margin-bottom:10px}