/* REVEAL EFFECT */
.text-reveal, .image-reveal {
  position: relative;
  overflow: hidden;
}

.image-reveal {
  display: block;
}

/* Elemento che fa il reveal */
.reveal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--paletta-1);
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 1;
}

/* Contenuto sotto l'overlay */
.text-reveal > *:not(.reveal-overlay),
.image-reveal > *:not(.reveal-overlay) {
  position: relative;
  z-index: 0;
}

/* DIREZIONI */

/* Da sinistra */
.reveal-from-left .reveal-overlay {
  transform: translateX(0%);
}
.reveal-from-left.revealed .reveal-overlay {
  transform: translateX(100%);
}

/* Da destra */
.reveal-from-right .reveal-overlay {
  transform: translateX(0%);
}
.reveal-from-right.revealed .reveal-overlay {
  transform: translateX(-100%);
}

/* Dall'alto */
.reveal-from-top .reveal-overlay {
  transform: translateY(0%);
}
.reveal-from-top.revealed .reveal-overlay {
  transform: translateY(100%);
}

/* Dal basso */
.reveal-from-bottom .reveal-overlay {
  transform: translateY(0%);
}
.reveal-from-bottom.revealed .reveal-overlay {
  transform: translateY(-100%);
}

/* Delay progressivi */
.reveal-delay-1 .reveal-overlay { transition-delay: 0.1s; }
.reveal-delay-2 .reveal-overlay { transition-delay: 0.2s; }
.reveal-delay-3 .reveal-overlay { transition-delay: 0.3s; }
.reveal-delay-4 .reveal-overlay { transition-delay: 0.4s; }
.reveal-delay-5 .reveal-overlay { transition-delay: 0.5s; }

/* Personalizzazioni colore reveal */
.reveal-paletta-2 .reveal-overlay {
  background-color: var(--paletta-2);
}
.reveal-paletta-3 .reveal-overlay {
  background-color: var(--paletta-3);
}
.reveal-white .reveal-overlay {
  background-color: #ffffff;
}
.reveal-black .reveal-overlay {
  background-color: #000000;
}