/* cc-reveal.css v1.0.0
   Scroll reveal (CSS defines motion; JS toggles visibility class)asdasd
*/

:root{
  --reveal-distance: 14px;
  --reveal-duration: 520ms;
  --reveal-delay: 0ms;
  --reveal-ease: cubic-bezier(.2,.8,.2,1);
}

/* Base reveal */
.reveal{
  opacity: 0;
  transform: none;
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
  transition-delay: var(--reveal-delay);
  will-change: opacity, transform;
}

/* Visible */
.reveal.is-visible{
  opacity: 1;
  transform: none;
}
/* Variants (extended) */
.reveal[data-reveal="fade"]{ transform: none; }

/* Slide */
.reveal[data-reveal="up"]{ transform: translateY(var(--reveal-distance)); }
.reveal[data-reveal="down"]{ transform: translateY(calc(var(--reveal-distance) * -1)); }
.reveal[data-reveal="left"]{ transform: translateX(calc(var(--reveal-distance) * -1)); }
.reveal[data-reveal="right"]{ transform: translateX(var(--reveal-distance)); }

/* Scale */
.reveal[data-reveal="scale"]{ transform: scale(0.96); }
.reveal[data-reveal="scale-up"]{ transform: scale(0.92); }

/* Blur */
.reveal[data-reveal="blur"]{
  transform: none;
  filter: blur(10px);
}
.reveal[data-reveal="blur-up"]{
  transform: translateY(var(--reveal-distance));
  filter: blur(10px);
}

/* Clip (vertical wipe) */
.reveal[data-reveal="clip-up"]{
  transform: none;
  clip-path: inset(100% 0 0 0);
}

/* Flip */
.reveal[data-reveal="flip-up"]{
  transform: perspective(900px) rotateX(10deg) translateY(var(--reveal-distance));
  transform-origin: 50% 60%;
}

/* When visible, everything resolves to “final” */
.reveal.is-visible[data-reveal="fade"],
.reveal.is-visible[data-reveal="up"],
.reveal.is-visible[data-reveal="down"],
.reveal.is-visible[data-reveal="left"],
.reveal.is-visible[data-reveal="right"],
.reveal.is-visible[data-reveal="scale"],
.reveal.is-visible[data-reveal="scale-up"],
.reveal.is-visible[data-reveal="blur"],
.reveal.is-visible[data-reveal="blur-up"],
.reveal.is-visible[data-reveal="clip-up"],
.reveal.is-visible[data-reveal="flip-up"]{
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}
