/* Reveal FX */

/* Base commune parent + items */

.reveal, .reveal-item{
  --delay: 0s;                 /* utilisé pour le parent (items = 0 par JS) */
  opacity: 0;
  /*position: relative;*/
  backface-visibility: hidden;
  will-change: mask, -webkit-mask, opacity;
  transition:
    opacity .4s ease-out var(--delay),
    -webkit-mask-size var(--speed, 1.5s) ease-out var(--delay),
    mask-size         var(--speed, 1.5s) ease-out var(--delay);
}

/* Directions (initialement masquées) */
.reveal.fromleft,   .reveal-item.fromleft{
  -webkit-mask-image: linear-gradient(90deg,#000 0 100%);
  mask-image: linear-gradient(90deg,#000 0 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left center; mask-position: left center;
  -webkit-mask-size: 0% 100%; mask-size: 0% 100%;
}
.reveal.fromright,  .reveal-item.fromright{
  -webkit-mask-image: linear-gradient(90deg,#000 0 100%);
  mask-image: linear-gradient(90deg,#000 0 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: right center; mask-position: right center;
  -webkit-mask-size: 0% 100%; mask-size: 0% 100%;
}
.reveal.fromtop,    .reveal-item.fromtop{
  -webkit-mask-image: linear-gradient(0deg,#000 0 100%);
  mask-image: linear-gradient(0deg,#000 0 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center top; mask-position: center top;
  -webkit-mask-size: 100% 0%; mask-size: 100% 0%;
}
.reveal.frombottom, .reveal-item.frombottom{
  -webkit-mask-image: linear-gradient(0deg,#000 0 100%);
  mask-image: linear-gradient(0deg,#000 0 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center bottom; mask-position: center bottom;
  -webkit-mask-size: 100% 0%; mask-size: 100% 0%;
}

/* État visible */
.reveal.is-visible, .reveal-item.is-visible{
  opacity: 1;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-item{ transition: none; }
}