/* HOME */
.home main {
  transition: background-color 0.3s linear;
}

/* REEL HOME */
.reel .close-button {
  position: absolute;
  left: auto;
  right: 20px;
  top: 20px;
  transform: none;
  width: 100px;
  height: auto;
  aspect-ratio: 1/1;
  border: 1px solid var(--grigio-chiaro);
  border-radius: 50%;
  z-index: 3;
}
.reel .close-button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  -webkit-mask: url(../media/icons/close.svg) no-repeat 50% 50%;
  mask: url(../media/icons/close.svg) no-repeat 50% 50%;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--grigio-chiaro);
}

/* MARQUEE SECTION */
.home section:first-of-type {
  padding: 0;
}
.marquee-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  transition: var(--transition);
  z-index: 1;
}
@keyframes circular-marquee {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: var(--transition);
  z-index: 1;
  pointer-events: none;
}
.bg-image.visible {
  opacity: 1;
}
.bg-image::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: var(--grigio-scuro);
  pointer-events: none;
  z-index: 3;
}
.bg-image.hovered {
  opacity: 1;
}

.cerchio svg,
.circle-placeholder {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  width: 99vw;
  max-width: var(--max-width);
  height: auto;
  aspect-ratio: 1/1;
  border-radius: 50%;
  transition: var(--transition);
  z-index: 10;
  animation: circular-marquee 50s infinite linear;
}
.cerchio svg a,
.cerchio svg a:focus,
.cerchio svg a:visited,
.cerchio svg a:hover {
  text-decoration: none !important;
}
.circle-placeholder {
  width: 20vw;
  max-width: 360px;
  border: 1px solid var(--text-color);
  animation: none;
}
.page-transition .marquee-section .circle-placeholder {
  opacity: 0;
}
.marquee-section.svg-hovered .circle-placeholder {
  border-color: var(--grigio-chiaro);
}
.page-transition .marquee-section .cerchio svg {
  opacity: 0;
}
.cerchio.mid svg {
  animation: circular-marquee 45s infinite linear reverse;
}
.cerchio.small svg {
  animation: circular-marquee 40s infinite linear;
}
.svg-hovered .cerchio svg {
  border-color: var(--grigio-chiaro);
}
.cerchio svg.stopped {
  animation-play-state: paused !important;
}
.cerchio svg a {
  fill: var(--grigio-scuro);
}
.svg-hovered .cerchio svg a {
  fill: rgb(235, 235, 235, 0.5);
}
.svg-hovered .cerchio svg a.active {
  fill: rgb(235, 235, 235, 1);
}
.cerchio svg {
  pointer-events: none;
}
.cerchio svg a[data-elem] {
  pointer-events: all !important;
}
.cerchio svg .background {
  fill: rgba(255, 255, 255, 0);
}
.cerchio svg .occhiello {
  fill: rgba(255, 255, 255, 0);
}
.cerchio svg .bordi {
  fill: none;
  stroke: var(--grigio-scuro);
  stroke-miterlimit: 10;
  transition: var(--transition);
}
.svg-hovered .cerchio svg .bordi {
  stroke: var(--grigio-chiaro);
}
.cerchio svg text {
  text-decoration: none;
  border: none;
  outline: none;
  stroke: none;
  fill: var(--grigio-scuro);
  font-size: 1.8rem;
}
.cerchio.big svg text,
.cerchio.small svg text textPath:first-of-type {
  letter-spacing: 2px;
}
.svg-hovered .cerchio svg a text {
  fill: rgb(235, 235, 235, 0.5);
}
.svg-hovered .cerchio svg a.active text {
  fill: var(--grigio-chiaro);
}

/* PROGETTI IN EVIDENZA */
.progetti-in-evidenza {
  /* pointer-events: none; */
}
.progetti-in-evidenza .wrapper {
  width: 100%;
  max-width: none;
}
.cont-progetti {
  /* pointer-events: none; */
  padding: 100svh 0 var(--distance-big);
}
.card-progetto {
  position: relative;
  display: block;
  box-shadow: 10px 10px 100px 0 rgba(0, 0, 0, 0.2);
  pointer-events: all;
}
.card-progetto::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
  z-index: 1;
}
.card-progetto h3 {
  position: absolute;
  left: calc(var(--distance-medium) / 2);
  top: calc(var(--distance) / 3);
  width: calc(100% - var(--distance-medium));
  z-index: 3;
}
.card-progetto img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/11;
}
.card-progetto.vertical img {
  width: 100%;
  height: auto;
  aspect-ratio: 9/15;
}

/* HERO SINGLE PROGETTO */
.single main::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  transform: translateY(-50%);
  height: 100vh;
  width: 100%;
  background: var(--grigio-chiaro);
  z-index: 3;
  pointer-events: none;
}
.single.scrolled main::before {
  opacity: 0;
}

.single section {
  background: var(--grigio-chiaro);
  z-index: 4;
}
.hero-single {
  display: flex;
  align-items: end;
  justify-content: center;
  padding-bottom: calc(calc(var(--wrapper-padding) / 2) + 10px);
}
.hero-single .bg-image {
  /* height: 80svh; */
  height: 100svh;
  top: auto;
  bottom: 0;
  transition: var(--page-transition);
  pointer-events: all;
  opacity: 1;
}
.page-loaded .hero-single .bg-image {
  height: 100%;
}
.hero-single .wrapper {
  opacity: 0;
  transform: translate(0, 20px);
  transition: var(--page-transition);
}
.page-loaded .hero-single .wrapper {
  opacity: 1;
  transform: translate(0, 0);
}

.scheda-progetto {
  list-style: none;
  padding: 0;
  margin-top: calc(var(--distance-medium) * 2);
}
.scheda-progetto li {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  padding: calc(var(--distance-medium) / 2);
  margin: 0;
}
.scheda-progetto li::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  top: 0;
  left: 0;
  background: rgba(var(--nero-rgb), 0.2);
  transform: scaleX(0);
  transform-origin: left;
  transition: all 0.6s ease;
}
.scheda-progetto li:last-of-type::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background: rgba(var(--nero-rgb), 0.2);
  transform: scaleX(0);
  transform-origin: left;
  transition: all 0.6s ease;
}
.scheda-progetto.visible li::before,
.scheda-progetto.visible li::after {
  transform: scaleX(1);
}
.scheda-progetto li span {
  display: block;
  width: 40%;
  font-size: 1.8rem;
}
.scheda-progetto li span + div {
  width: 60%;
}

.marquee-section-xs {
  height: 0;
  overflow: hidden;
}

/* CONTENT SINGLE PROGETTO */
.row.cont-single {
  margin-top: calc(var(--distance-big) * 1.5);
}
.cont-single .cont-img img {
  opacity: 0;
  transform: scale(0.95);
  transform-origin: center;
  transition: var(--transition);
}
.cont-single .cont-img img.visible {
  opacity: 1;
  transform: scale(1);
}

.fixed-cta {
  position: fixed;
  left: calc(calc(var(--wrapper-padding) / 2) + 7.5px);
  bottom: calc(calc(var(--wrapper-padding) / 2) - 10px);
  opacity: 0;
  transition: all 0.3s ease-in;
  z-index: 10;
  mix-blend-mode: difference;
  pointer-events: none;
}
.fixed-cta.visible {
  opacity: 1;
  pointer-events: all;
}
.fixed-cta .cta {
  font-family: var(--grotesk);
  font-size: 6rem;
  line-height: 1;
  letter-spacing: normal;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  transition: var(--transition);
}

/* SECTION PROGETTO NEXT */
.progetto-next {
  /* height: 80svh; */
  position: fixed;
  left: 0;
  bottom: 0;
  height: 100svh;
  width: 100%;
  margin-top: -20svh;
  padding: 0;
  overflow: hidden;
  z-index: 1 !important;
}
.progetto-next .wrapper {
  opacity: 0;
  transform: translate(0, 20px);
  transition: var(--transition);
}
.progetto-next a {
  position: relative;
  display: flex;
  align-items: end;
  width: 100%;
  height: 100%;
  padding: calc(var(--distance-medium) * 2) 0 var(--distance-medium);
  text-decoration: none !important;
  z-index: 1;
}
.progetto-next a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: var(--grigio-scuro);
  pointer-events: none;
  z-index: 3;
}
.progetto-next a .bg-image {
  opacity: 1;
}
.progetto-next a .bg-image::before {
  content: none;
}
.progetto-next .cta {
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, calc(-50% + 30px));
  font-family: var(--grotesk);
  font-size: 6rem;
  line-height: 1.3;
  letter-spacing: normal;
  font-weight: 700;
  text-transform: uppercase;
  transition: var(--transition);
  opacity: 0;
  z-index: 4;
}
.page-loaded .progetto-next .cta {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.page-loaded .progetto-next .wrapper {
  opacity: 1;
  transform: translate(0, 0);
}

/* ELENCO PROGETTI */
.page-template-page-progetti footer,
.page-template-page-progetti-new footer {
  display: none;
}
.elenco-progetti .wrapper,
.transition-images .wrapper {
  width: 100%;
}
.elenco-progetti .title-progetto,
.elenco-progetti .title-progetto:focus,
.elenco-progetti .title-progetto:visited,
.elenco-progetti .title-progetto:hover {
  display: flex;
  align-items: end;
  font-family: var(--grotesk);
  font-size: 13rem;
  line-height: 1;
  letter-spacing: normal;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--grigio-scuro);
  opacity: 0.3;
  transition: var(--transition);
  overflow: hidden;
  /* pointer-events: none; */
}
.elenco-progetti .title-progetto > div {
  font-family: var(--roobert);
  opacity: 0;
  margin-bottom: calc(var(--distance-medium) / 1.8);
  margin-left: calc(var(--distance) / 3);
  pointer-events: none;
  transform: translateY(20px);
  transition: var(--transition);
}
.elenco-progetti .swiper-slide-active .title-progetto {
  opacity: 1;
  pointer-events: all;
}
.elenco-progetti .swiper-slide-active .title-progetto > div {
  transform: translateY(0);
  opacity: 1;
}
.elenco-progetti .swiper-vertical-images {
  margin-left: 16.666666666666668%;
  margin-right: calc(var(--wrapper-padding) / 2);
}
.swiper-vertical-images-mobile,
.swiper-vertical-text-mobile {
  display: none;
}
.elenco-progetti .swiper-vertical-images {
  height: 100svh;
  overflow: hidden;
}

.cont-swiper-text {
  position: relative;
  /* height: 100svh; */
  height: 100%;
  overflow: hidden;
}
.elenco-progetti .swiper-vertical-text {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  /* height: var(--slide_height); */
  height: 100svh;
  width: 100%;
  margin-left: calc(var(--wrapper-padding) / 2);
  overflow: visible;
}
/* .elenco-progetti .swiper-vertical-text .swiper-slide {
  height: var(--slide_height) !important;
} */
.elenco-progetti .swiper-vertical-images .swiper-slide {
  height: auto !important;
}
.elenco-progetti .img-progetto {
  position: relative;
  display: block;
  aspect-ratio: 16/10;
  overflow: hidden;
  /* pointer-events: none; */
  transition: transform 0.3s ease;
}
/* .elenco-progetti .swiper-slide-active .img-progetto {
  pointer-events: all;
} */
.elenco-progetti .img-progetto::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--grigio-scuro);
  transition: var(--transition);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
/* .elenco-progetti .img-progetto::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 130px;
  -webkit-mask: url(../media/icons/arrow.svg) no-repeat 50% 50%;
  mask: url(../media/icons/arrow.svg) no-repeat 50% 50%;
  -webkit-mask-size: contain;
  mask-size: contain;
  background: var(--grigio-chiaro);
  transition: var(--transition);
  opacity: 0;
  z-index: 2;
} */
.elenco-progetti .img-progetto:hover::before {
  opacity: 0.5;
}
/* .elenco-progetti .img-progetto:hover::after {
  opacity: 1;
} */
.elenco-progetti .img-progetto img {
  display: block;
  position: absolute;
  width: 150%;
  height: 150%;
  left: -25%;
  top: -25%;
}

/* PAGE ABOUT */
.page-template-page-about section {
  z-index: 2;
}
section.chi-siamo {
  padding-top: 0;
  padding-bottom: 0;
}
section.chi-siamo .cerchio svg {
  width: 180%;
  max-width: none;
}
.chi-siamo .wrapper {
  margin-left: 0;
  width: calc(100% - calc(var(--wrapper-padding) / 2));
}
.chi-siamo .sticky {
  height: 100svh;
  top: 0;
}
.chi-siamo .sticky-content {
  position: relative;
  width: 100%;
  height: 100%;
}
.chi-siamo .marquee-section {
  position: relative;
  height: 100%;
  width: 100%;
}
.chi-siamo .cerchio svg,
.chi-siamo .circle-placeholder {
  position: absolute;
  left: 0;
  pointer-events: none;
}
.chi-siamo .wrapper .content {
  margin-top: 75svh;
}
.chi-siamo .wrapper .cont-testo > p {
  width: 100%;
}
.chi-siamo .row + .row {
  margin-top: calc(var(--distance-medium) * 3);
}
.chi-siamo .cont-about .row:last-of-type {
  margin-bottom: calc(var(--distance-big) * 1.5);
}
.chi-siamo ul.team {
  list-style: none;
  padding: 0;
  margin-top: var(--distance-half);
  border-top: 1px solid var(--grigio-chiaro);
  mix-blend-mode: difference;
  width: calc(100% - 1px);
  z-index: 3;
}
.chi-siamo ul.team li {
  position: relative;
  padding: var(--distance) 0;
  cursor: pointer;
}
.chi-siamo ul.team li::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--grigio-chiaro);
  mix-blend-mode: difference;
}
.chi-siamo ul.team li * {
  pointer-events: none;
}
.text-scroll {
  position: relative;
  padding-top: var(--distance-medium);
  margin-top: calc(var(--distance-medium) / 2);
  display: block;
  color: var(--grigio-scuro);
}
.text-scroll span {
  opacity: 0.2;
  transition: opacity 0.4s ease;
}
.text-scroll span.visible {
  opacity: 1;
}
.text-scroll::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: var(--grigio-scuro);
  opacity: 0.5;
}

.cont-team {
  display: flex;
  justify-content: space-between;
  align-items: start;
  background: var(--grigio-chiaro);
}
.img-team {
  position: sticky;
  width: 1px;
  height: 540px;
  top: calc(var(--distance-medium) * 2);
  margin-top: calc(var(--distance-medium) * 2);
  z-index: 2;
}
.img-team img {
  position: absolute;
  right: 0;
  top: 0;
  width: 450px;
  height: auto;
  aspect-ratio: 1/1.2;
  opacity: 0;
  transition: all 0.2s linear;
}
.cont-team .img-team img.visible {
  opacity: 1;
}

.premi {
  padding: calc(var(--distance-medium) * 3) 0 0;
}
.elenco-premi {
  margin-top: var(--distance-half);
}
.elenco-premi .premio {
  position: relative;
  padding: var(--distance-half) 0;
  border-top: 1px solid var(--grigio-chiaro);
}
.elenco-premi .premio:last-of-type {
  border-bottom: 1px solid var(--grigio-chiaro);
}
.elenco-premi .premio::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--grigio-scuro);
  z-index: 4;
  transform-origin: bottom;
  transition: all 0.75s ease-in;
}
.elenco-premi.visible .premio::before {
  transform: scaleY(0);
}

.servizi {
  padding: calc(var(--distance-medium) * 3) 0 0;
}
.elenco-servizi {
  margin-top: var(--distance-half);
  padding-top: var(--distance);
  border-top: 1px solid var(--grigio-chiaro);
}
.elenco-servizi ul {
  padding: 0;
  list-style: none;
}
.elenco-servizi ul li {
  position: relative;
  margin-top: calc(var(--distance) / 3);
}
.elenco-servizi ul li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--grigio-scuro);
  z-index: 4;
  transform-origin: right;
  transition: all 0.5s ease-in;
}
.elenco-servizi ul.visible li::before {
  transform: scaleX(0);
}

.clienti {
  padding: calc(var(--distance-medium) * 3) 0;
  z-index: 2;
}
.elenco-clienti {
  column-count: 4;
  margin-top: var(--distance-half);
  padding-top: var(--distance);
  border-top: 1px solid var(--grigio-chiaro);
}
.elenco-clienti a {
  text-decoration: none !important;
}
.elenco-clienti p {
  position: relative;
  margin-bottom: calc(var(--distance) / 3);
}
.elenco-clienti p::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--grigio-scuro);
  z-index: 4;
  transform-origin: right;
  transition: all 0.5s ease-in;
}
.elenco-clienti.visible p::before {
  transform: scaleX(0);
}

.vedi-reel {
  aspect-ratio: 16/9;
  width: 100%;
  padding: 0;
  z-index: 1;
}
.vedi-reel .video-js {
  max-width: 100vw;
  width: 100%;
  height: 100%;
}

/* FORM SECTION */
.cont-form {
  display: flex;
  align-items: end;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  padding-top: 20svh;
  padding-bottom: var(--distance-big);
  z-index: 1 !important;
}
.page-template-page-contatti .cont-form,
.page-template-page-about .cont-form,
.page-template-page-landing .cont-form {
  position: relative;
  height: auto;
  padding-top: calc(var(--distance-big) * 2);
  margin-top: calc(var(--distance-big) * -1);
}
.cont-form .grotesk2 {
  margin-top: var(--distance-half);
  padding-top: var(--distance);
  border-top: 1px solid currentColor;
}

/* CONTATTI */
section.contacts {
  padding: calc(var(--distance-big) * 3) 0 0;
  z-index: 2;
}
.contacts .roobert3 {
  font-size: 1.8rem;
  line-height: 4rem;
}
.contacts .container-fluid > .row {
  padding-top: calc(var(--distance-big) / 4);
  padding-bottom: calc(var(--distance-big) * 1.25);
  border-top: 1px solid var(--grigio-scuro);
}

.contacts .img-sede {
  position: absolute;
  right: 0;
  top: calc(var(--distance-big) / -2);
  max-width: 50%;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: -1;
}
.contacts a:hover + .img-sede {
  opacity: 1;
}

.page-template-page-contatti .cont-form .grotesk2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.page-template-page-contatti .cont-form .nav-tabs {
  margin-top: var(--distance-half);
  padding-top: var(--distance);
  border: 0;
  border-top: 1px solid var(--grigio-chiaro);
  column-gap: 15px;
}
.nav-tabs .nav-link {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  opacity: 0.2;
  transition: var(--transition);
}
.nav-tabs .nav-link.active {
  opacity: 1;
}