@font-face {
  font-family: "Neue Machina";
  src: url("assets/PPNeueMachina-PlainRegular.otf") format("truetype");
}

#about {
  filter: blur(2px);
  transition: filter 0.3s;
}

#about:hover {
  filter: blur(0px);
}

.container-mobile {
  padding-top: 6vh;
}

/* DOPO AVER CORRETTO TUTTO COME EXHOIL NON SERVE PIù */
.cartiglio {
  font-family: "Neue Machina", sans-serif;
  font-size: 6rem;
  font-weight: 600;
  padding-top: 5%;
  width: 100%;
  display: flex;
  justify-content: center;
  -webkit-animation: text-focus-in 0.7s cubic-bezier(0.55, 0.085, 0.68, 0.53)
    both;
  animation: text-focus-in 0.7s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

.proj-title {
  font-family: "Neue Machina", sans-serif;
  font-size: 6rem;
  font-weight: 600;
  height: 15vh;
  /* font-size: 2.7rem; */
  -webkit-animation: text-focus-in 0.7s cubic-bezier(0.55, 0.085, 0.68, 0.53)
    both;
  animation: text-focus-in 0.7s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

.proj-attribute {
  font-family: "roc-grotesk", sans-serif;
  font-size: 1.4rem;
  line-height: 1.9rem;
  font-weight: 400;
  /* padding-bottom: 1.5%; */
  align-self: flex-start;
  text-align: right;
  /* margin-right: 0.5%; */
  -webkit-animation: text-focus-in 0.7s cubic-bezier(0.55, 0.085, 0.68, 0.53)
    both;
  animation: text-focus-in 0.7s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

.data {
  font-family: "roc-grotesk", sans-serif;
  font-weight: 200;
  font-size: 1.2rem;
  display: inline-block;
  vertical-align: top;
  -webkit-animation: text-focus-in 0.7s cubic-bezier(0.55, 0.085, 0.68, 0.53)
    both;
  animation: text-focus-in 0.7s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

mark {
  -webkit-animation: 1s highlight normal 0.5s forwards;
  animation: 1s highlight normal 0.5s forwards;
  background-color: none;
  background: linear-gradient(90deg, #ff7f3c 50%, rgba(255, 255, 255, 0) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
}

.play span {
  -webkit-animation: highlight2 normal 0.8s forwards;
  animation: highlight2 normal 0.8s forwards;
  background-color: none;
  background: linear-gradient(90deg, #ff7f3c 50%, rgba(255, 255, 255, 0) 50%);
  background-size: 210% 100%;
  background-position: 0 0;
}

.play span:hover {
  -webkit-animation: highlight normal 0.8s forwards;
  animation: highlight normal 0.8s forwards;
  background-size: 200% 100%;
  background-position: 100% 0;
}

@-webkit-keyframes highlight {
  to {
    background-position: 0 0;
  }
}

@keyframes highlight {
  to {
    background-position: 0 0;
  }
}

@-webkit-keyframes highlight2 {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}

@keyframes highlight2 {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}

.video-container {
  /* position: relative; */
  /* border-radius: 20px; */
  /* QUESTO ERA PER AVERE VIDEO CHE RISPETTA I MARGINI */
  /* margin-left: 8.3%; */
  overflow: hidden;
  display: block;
  /* QUI ERA 83% PER NON OCCUPARE TUTTO */
  width: 100%;
  height: 70vh;
  margin-bottom: 5vh;
  top: 30vh;

  -webkit-animation: text-focus-in 0.7s cubic-bezier(0.55, 0.085, 0.68, 0.53)
    both;
  animation: text-focus-in 0.7s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

.video-container video {
  position: absolute;
  width: 100%;
  margin-top: -3.8%;
}

.title {
  font-family: "roc-grotesk", sans-serif;
  font-weight: 400;
  font-size: 1.8rem;
  /* line-height: 1.8rem; */
  margin-top: 15vh;
  margin-bottom: 15vh;
}

.subtitle {
  font-family: "roc-grotesk", sans-serif;
  font-weight: 300;
  font-size: 1.2rem;
  margin-bottom: 2vh;
}

.img-and-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.text {
  font-family: "roc-grotesk", sans-serif;
  /* padding-top: 1%; */
  font-size: 1.2rem;
  font-weight: 300;
  /* line-height: 1.5rem; */
  /* padding-bottom: 1%; */
  position: sticky;
  display: flex;
  justify-content: center;
  align-self: flex-end;
  align-items: flex-start;
}

.text-animate {
  -webkit-animation: text-focus-in 0.7s cubic-bezier(0.55, 0.085, 0.68, 0.53)
    both;
  animation: text-focus-in 0.7s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;

  -webkit-animation-delay: 0.3s; /* Aggiungi il delay */
  animation-delay: 0.3s; /* Aggiungi il delay */
}

.empty-space {
  height: 20vh;
}

/* .cartiglio,
.video-container,
.brief {
    padding-left: 2%;
    padding-right: 2%;
} */

.inline-img {
  display: flex;
  justify-content: center;
  /* border-radius: 20px; */
}

.img-container {
  position: relative;
  overflow: hidden; /* Nascondiamo la parte fuori dal container */
}

/* REVEAL IMMAGINI */
/* Immagine che si ingrandisce */
.reveal-image {
  width: 100%;
  display: block;
  transform: scale(1.3); /* Leggero ingrandimento iniziale */
  opacity: 0; /* Nascondi completamente l'immagine finché non viene rivelata */
  transition: opacity 1.2s ease-in-out, transform 1.2s ease-in-out; /* Transizione sia per opacità che per scala */
}

/* Maschera che copre l'immagine */
.reveal-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #e8e8e8; /* Puoi cambiare colore se necessario */
  transform-origin: bottom; /* L'animazione partirà dall'alto */
  transform: scaleY(
    1
  ); /* La maschera copre completamente l'immagine all'inizio */
  z-index: 100; /* Posiziona la maschera sopra l'immagine */
  transition: transform 0.8s ease-in-out; /* Effetto di reveal */
}

/* Ritardo per la maschera */
.reveal-mask.delay-mask {
  transition-delay: 0.2s; /* Aggiungi ritardo per la maschera */
}

/* Quando l'immagine è visibile, la maschera si "restringe" */
.reveal-image.visible + .reveal-mask {
  transform: scaleY(0); /* La maschera si riduce in altezza fino a scomparire */
}

/* Effetto quando l'immagine è visibile */
.reveal-image.visible {
  opacity: 1;
  transform: scale(1); /* Torna alla scala normale */
}

/* Aggiungi un ritardo per la seconda immagine */
.reveal-image.delay {
  transition-delay: 0.5s; /* Ritardo di 0.2s per la seconda immagine */
}
/* FINE REVEAL */

@-webkit-keyframes scale-in-ver-top {
  0% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    opacity: 1;
  }
}
@keyframes scale-in-ver-top {
  0% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    opacity: 1;
  }
}

/* .mario {
    height:55vh;
} */

[class*="img-container-vert"] {
  height: 67vh;
  overflow: hidden;
  /* border-radius: 20px; */
  margin-bottom: 1.5%;
}
.img-container-vert-rize {
  height: 88vh;
}
.videomockup-vert {
  margin-top: -5%;
  width: 105%;
}

.img-container-big {
  height: 70vh;
  overflow: hidden;
  /* border-radius: 20px; */
  margin-top: 1.5%;
}

.mermaid-big {
  height: 68vh;
}

.mermaid-big2 {
  height: 78vh;
}

.mario-big {
  height: 80vh;
}

[class*="img-container-big-lv"] {
  overflow: hidden;
  /* border-radius: 20px; */
  margin-top: 3%;
}

.img-container-big-lv1 {
  height: 20vh;
}

.img-container-big-lv2 {
  height: 14vh;
}

.img-container-big-lv3 {
  height: 31vh;
}

img {
  width: 100%;
}

/* QUESTO PER EFFETTO */
/* img,
.videomockup,
.videomockup-vert,
.videomockup-mermaid {
  transition: transform 1.5s;
}

img:hover,
.videomockup:hover,
.videomockup-vert:hover,
.videomockup-mermaid:hover {
  transform: scale(1.05);
} */

/* .img-container-vert img {
    width: 100%;
} */

.videomockup {
  width: 145%;
  margin-top: -8%;
  margin-left: -22%;
}

.videomockup-mermaid {
  width: 100%;
}

.i-container {
  padding-top: 1.5%;
  padding-bottom: 1.5%;
}

/* .img-container-big img {
    width: 100%;
    border-radius: 20px;
} */

.blur-up {
  filter: blur(5px);
}

.blur-down {
  filter: blur(0px);
  transition: filter 1000ms;
}

.lozad {
  opacity: 0;
}

.play {
  font-family: "roc-grotesk", sans-serif;

  font-size: 1.7rem;
  padding-top: 3%;
  padding-bottom: 3%;
  text-align: center;
}

.credits {
  font-family: "roc-grotesk", sans-serif;
  text-align: center;
  padding-top: 1.5%;
  padding-bottom: 4%;
}

.credits p {
  font-weight: 600;
  padding-bottom: 1%;
}

.nav-proj {
  display: flex;
  justify-content: space-between;
  font-family: "roc-grotesk", sans-serif;
  font-size: 1.2rem;
}

#prev-proj,
#next-proj {
  background-color: #ff7f3c;
}

footer {
  position: relative;
  padding-top: 3%;
}

@media only screen and (max-width: 800px) {
  .container-mobile {
    padding-left: 5%;
    padding-right: 5%;
  }

  .video-container {
    height: 230px;
    margin-left: 0%;
    width: 100%;
  }

  .text,
  .inline-img {
    display: block;
    font-size: 1rem;
    line-height: 1.2rem;
  }

  .proj-title {
    font-size: 4rem;
    padding-top: 15%;
  }

  .proj-attribute,
  .data {
    font-size: 1rem;
    line-height: 1.2rem;
  }

  .title {
    font-size: 1.2rem;
  }

  [class*="img-container"] {
    margin-bottom: 4%;
  }

  .play {
    font-size: 1.2rem;
  }
}