/* ===============================
   REVEAL (Standalone)
=============================== */
.reveal{
  position: relative;
 overflow: hidden!important;

  --reveal-delay: 0s;
  --reveal-duration: 1.1s;
  --reveal-bg: #f5f5f5; /* default overlay */

  /* opzionale: migliore consistenza */
  transform: translateZ(0);
}

/* neutralizza eventuale visibility:hidden del tema */
.reveal, .reveal *{ visibility: visible !important; }

/* immagine */
.reveal img{
  display:block;
/*  width:100%;
  height:auto;*/

  opacity: 1; /* fallback visibile */
  transform: translate3d(0,0,0) scale(1.06);

  transition:
    opacity .25s ease,
    transform var(--reveal-duration) ease;
  transition-delay: var(--reveal-delay);

  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* quando JS è attivo: nascondi SOLO se armato e non visibile */
html.reveal-js .reveal.reveal-armed:not(.is-visible) img{
  opacity: 0;
}

/* overlay */
.reveal::after{
  content:"";
  position:absolute;
  inset:0;
  background: var(--reveal-bg);
  z-index:2;
  pointer-events:none;

  will-change: transform;
  backface-visibility: hidden;

  /* default: copre */
  transform: translate3d(0,0,0);
  transition: transform var(--reveal-duration) cubic-bezier(.77,0,.18,1);
  transition-delay: var(--reveal-delay);
}

/* overlay attivo SOLO quando armato (così niente bianco al load) */
html.reveal-js .reveal:not(.reveal-armed)::after{
  display:none;
}

/* stato visibile */
.reveal.is-visible img{
  opacity:1;
  transform: translate3d(0,0,0) scale(1);
}

/* ===============================
   DIREZIONI
=============================== */

/* DEFAULT: overlay scorre a destra e sparisce */
.reveal.is-visible::after{
  transform: translate3d(101%,0,0);
}

/* VERTICALE: overlay scende */
.reveal--vertical::after{
  transform: translate3d(0,0,0);
}
.reveal--vertical.is-visible::after{
  transform: translate3d(0,101%,0);
}

/* DIAGONALE: overlay skew e scorre */
.reveal--diagonal::after{
  transform: translate3d(0,0,0) skewX(-12deg);
  transform-origin: left top;
}
.reveal--diagonal.is-visible::after{
  transform: translate3d(120%,0,0) skewX(-12deg);
}

/* SINISTRA: overlay va a sinistra */
.reveal--left::after{
  transform: translate3d(0,0,0);
}
.reveal--left.is-visible::after{
  transform: translate3d(-101%,0,0);
}