.opi-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 720ms ease, transform 720ms ease;
  transition-delay: var(--opi-reveal-delay, 0ms);
}

.opi-reveal--slide-left {
  transform: translateX(72px);
}

.opi-reveal--slide-right {
  transform: translateX(-72px);
}

.opi-reveal--scale-in {
  transform: scale(0.96);
}

.opi-reveal--fade-in {
  transform: none;
}

.opi-reveal--soft-hop {
  transform: translateY(38px) scale(0.98);
}

.opi-reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

.opi-reveal--soft-hop.is-visible {
  transform: translate(0, 0) scale(1);
}

.is-style-opi-motion-storybook-fade,
.is-style-opi-motion-crayon-slide,
.is-style-opi-motion-sunbeam-zoom,
.is-style-opi-motion-peekaboo-wipe,
.is-style-opi-motion-paper-curtain,
.is-style-opi-motion-building-hop,
.is-style-opi-motion-playful-tilt,
.is-style-opi-motion-circle-time {
  --opi-motion-duration: 760ms;
  --opi-motion-ease: cubic-bezier(0.2, 0.72, 0.18, 1);
  opacity: 0;
  transition:
    opacity var(--opi-motion-duration) ease,
    transform var(--opi-motion-duration) var(--opi-motion-ease),
    clip-path var(--opi-motion-duration) var(--opi-motion-ease);
  transition-delay: var(--opi-reveal-delay, 0ms);
  will-change: opacity, transform, clip-path;
}

.wp-block-image[class*="is-style-opi-motion-"],
.wp-block-cover[class*="is-style-opi-motion-"] {
  overflow: hidden;
}

.is-style-opi-motion-storybook-fade {
  transform: translateY(20px);
}

.is-style-opi-motion-crayon-slide {
  transform: translateX(-54px) rotate(-1.5deg);
}

.is-style-opi-motion-sunbeam-zoom {
  transform: scale(0.94);
}

.is-style-opi-motion-peekaboo-wipe {
  clip-path: inset(0 100% 0 0 round 4px);
  transform: translateY(12px);
}

.is-style-opi-motion-paper-curtain {
  clip-path: inset(0 0 100% 0 round 4px);
  transform: translateY(-18px);
}

.is-style-opi-motion-building-hop {
  transform: translateY(46px) scale(0.96);
}

.is-style-opi-motion-playful-tilt {
  transform: translateY(28px) rotate(2.5deg) scale(0.98);
}

.is-style-opi-motion-circle-time {
  transform: translateY(28px) rotate(-5deg) scale(0.96);
}

.is-style-opi-motion-sunbeam-zoom.wp-block-image img,
.is-style-opi-motion-sunbeam-zoom.wp-block-cover .wp-block-cover__image-background {
  transform: scale(1.08);
  transition: transform 1100ms cubic-bezier(0.2, 0.72, 0.18, 1);
}

.is-style-opi-motion-crayon-slide.wp-block-image img,
.is-style-opi-motion-crayon-slide.wp-block-cover .wp-block-cover__image-background,
.is-style-opi-motion-playful-tilt.wp-block-image img,
.is-style-opi-motion-playful-tilt.wp-block-cover .wp-block-cover__image-background {
  transform: scale(1.04);
  transition: transform 1000ms cubic-bezier(0.2, 0.72, 0.18, 1);
}

.is-style-opi-motion-storybook-fade.is-visible,
.is-style-opi-motion-crayon-slide.is-visible,
.is-style-opi-motion-sunbeam-zoom.is-visible,
.is-style-opi-motion-peekaboo-wipe.is-visible,
.is-style-opi-motion-paper-curtain.is-visible,
.is-style-opi-motion-building-hop.is-visible,
.is-style-opi-motion-playful-tilt.is-visible,
.is-style-opi-motion-circle-time.is-visible {
  opacity: 1;
  clip-path: inset(0 0 0 0 round 4px);
  transform: translate(0, 0) rotate(0) scale(1);
}

.is-style-opi-motion-building-hop.is-visible {
  animation: opi-building-hop 820ms cubic-bezier(0.2, 0.72, 0.18, 1) both;
}

.is-style-opi-motion-circle-time.is-visible {
  animation: opi-circle-time 900ms cubic-bezier(0.2, 0.72, 0.18, 1) both;
}

.is-style-opi-motion-sunbeam-zoom.is-visible.wp-block-image img,
.is-style-opi-motion-sunbeam-zoom.is-visible.wp-block-cover .wp-block-cover__image-background,
.is-style-opi-motion-crayon-slide.is-visible.wp-block-image img,
.is-style-opi-motion-crayon-slide.is-visible.wp-block-cover .wp-block-cover__image-background,
.is-style-opi-motion-playful-tilt.is-visible.wp-block-image img,
.is-style-opi-motion-playful-tilt.is-visible.wp-block-cover .wp-block-cover__image-background {
  transform: scale(1);
}

@keyframes opi-building-hop {
  0% {
    opacity: 0;
    transform: translateY(46px) scale(0.96);
  }

  58% {
    opacity: 1;
    transform: translateY(-8px) scale(1.015);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes opi-circle-time {
  0% {
    opacity: 0;
    transform: translateY(28px) rotate(-5deg) scale(0.96);
  }

  68% {
    opacity: 1;
    transform: translateY(-3px) rotate(1deg) scale(1.01);
  }

  100% {
    opacity: 1;
    transform: translateY(0) rotate(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .opi-reveal {
    opacity: 1;
    transform: none;
  }

  [class*="is-style-opi-motion-"],
  [class*="is-style-opi-motion-"] img,
  [class*="is-style-opi-motion-"] .wp-block-cover__image-background {
    animation: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .opi-hero .wp-block-cover__image-background {
    transform: none !important;
  }
}