html.mc-anim [data-mc-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 0.84, 0.44, 1), transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1);
  transition-delay: var(--mc-reveal-delay, 0ms);
}
html.mc-anim [data-mc-reveal=down] {
  transform: translateY(-28px);
}
html.mc-anim [data-mc-reveal=left] {
  transform: translateX(40px);
}
html.mc-anim [data-mc-reveal=right] {
  transform: translateX(-40px);
}
html.mc-anim [data-mc-reveal=scale] {
  transform: scale(0.92);
}
html.mc-anim [data-mc-reveal=zoom] {
  transform: scale(1.08);
}
html.mc-anim [data-mc-reveal=fade] {
  transform: none;
}
html.mc-anim [data-mc-reveal].is-in {
  opacity: 1;
  transform: none;
}
html.mc-anim [data-mc-mask] .mc-mask__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}
html.mc-anim [data-mc-mask] .mc-mask__line > * {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--mc-reveal-delay, 0ms);
}
html.mc-anim [data-mc-mask].is-in .mc-mask__line > * {
  transform: translateY(0);
}
html.mc-anim [data-mc-mask-now] .mc-mask__line > * {
  animation: mc-mask-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--mc-reveal-delay, 0ms);
}
html.mc-anim [data-mc-reveal-now] {
  animation: mc-reveal-rise 0.7s cubic-bezier(0.16, 0.84, 0.44, 1) both;
  animation-delay: var(--mc-reveal-delay, 0ms);
}
html.mc-anim [data-mc-parallax] {
  will-change: transform;
}

:where(html.mc-anim [data-mc-parallax]) {
  transform: translate3d(0, var(--mc-par, 0px), 0);
}

@keyframes mc-mask-rise {
  from {
    transform: translateY(115%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes mc-reveal-rise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.mc-anim [data-mc-reveal],
  html.mc-anim [data-mc-reveal-now],
  html.mc-anim [data-mc-mask] .mc-mask__line > *,
  html.mc-anim [data-mc-mask-now] .mc-mask__line > *,
  html.mc-anim [data-mc-parallax] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}
