.reveal {
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}

.reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

.reveal--fade {
  transform: none;
  transition-property: opacity, filter;
}

.reveal--noblur,
.reveal--noblur.is-visible { filter: none; }

.parallax {
  will-change: transform;
  transform: translate3d(0, var(--shift, 0px), 0);
}

.parallax--after {
  transform: translate3d(0, var(--shift, 0px), 0) var(--base-transform, );
}

.tilt {
  transform: translate3d(calc(var(--mx, 0) * var(--card-depth, 10px)),
                         calc(var(--my, 0) * var(--card-depth, 10px)), 0)
             scale(var(--hover-scale, 1));
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.tilt__layer {
  transform: translate3d(calc(var(--mx, 0) * var(--layer-depth, 4px)),
                         calc(var(--my, 0) * var(--layer-depth, 4px)), 0);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.tilt.is-hovered { transition-duration: 0.15s; }
.tilt.is-hovered .tilt__layer { transition-duration: 0.15s; }

@keyframes glitch-3d {
  0%   { transform: translate3d(0, 0, 0);     filter: none; }
  12%  { transform: translate3d(-4px, 2px, 0); filter: drop-shadow(-3px 0 rgba(248, 255, 19, 0.65)) drop-shadow(3px 0 rgba(255, 155, 5, 0.65)); }
  24%  { transform: translate3d(4px, -2px, 0);  filter: drop-shadow(3px 0 rgba(248, 255, 19, 0.55))  drop-shadow(-3px 0 rgba(255, 155, 5, 0.55)); }
  36%  { transform: translate3d(-2px, 1px, 0); filter: drop-shadow(-2px 0 rgba(248, 255, 19, 0.4))  drop-shadow(2px 0 rgba(255, 155, 5, 0.4)); }
  48%  { transform: translate3d(1px, -1px, 0);    filter: none; }
  100% { transform: translate3d(0, 0, 0);     filter: none; }
}
@media (hover: hover) and (pointer: fine) {
  .glitch:hover { animation: glitch-3d 0.5s ease-in-out 1; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
  .parallax,
  .parallax--after { transform: none; }
  .tilt,
  .tilt__layer {
    transform: none;
    transition: none;
  }
  .glitch:hover { animation: none; }
}