:root {
  --reveal-distance: 32px;
  --reveal-duration: 780ms;
  --reveal-ease: cubic-bezier(.22, 1, .36, 1);
}

.reveal {
  --reveal-y: var(--reveal-distance);
}

.reveal-fade {
  --reveal-y: 0px;
}

.reveal-up {
  --reveal-y: var(--reveal-distance);
}

.reveal-image {
  overflow: clip;
}

.reveal-image img {
  transform-origin: center;
}

.reveal-ready .reveal {
  opacity: 0;
  translate: 0 var(--reveal-y, var(--reveal-distance));
  will-change: opacity, translate;
}

.reveal-ready .reveal.is-revealed {
  opacity: 1;
  translate: 0 0;
  animation: crownSweetyRevealIn var(--reveal-duration) var(--reveal-ease) var(--reveal-delay, 0ms) both;
  will-change: auto;
}

.reveal-ready .reveal-image img {
  scale: 1.045;
  transition: scale 1050ms var(--reveal-ease);
}

.reveal-ready .reveal.is-revealed .reveal-image img,
.reveal-ready .reveal-image.is-revealed img {
  scale: 1;
}

@keyframes crownSweetyRevealIn {
  from {
    opacity: 0;
    translate: 0 var(--reveal-y, var(--reveal-distance));
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@media (max-width: 767.98px) {
  :root {
    --reveal-distance: 24px;
    --reveal-duration: 680ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready .reveal {
    opacity: 1 !important;
    translate: none !important;
    animation: none !important;
    will-change: auto !important;
  }

  .reveal-ready .reveal-image img {
    scale: none !important;
    transition: none !important;
  }
}