html.print-reveal-ready .print-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(.2, .65, .3, 1);
  transition-delay: var(--print-delay, 0ms);
  will-change: opacity, transform;
}

html.print-reveal-ready .print-reveal.is-print-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

html.print-reveal-ready .print-reveal-title {
  position: relative;
  width: fit-content;
  max-width: 100%;
}

html.print-reveal-ready .print-reveal-title::after {
  position: absolute;
  right: auto;
  bottom: -11px;
  left: 0;
  display: block;
  width: clamp(64px, 34%, 128px);
  height: 3px;
  border-radius: 99px;
  background: #145bd7;
  content: "";
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 600ms cubic-bezier(.2, .65, .3, 1);
  transition-delay: var(--print-delay, 0ms);
}

html.print-reveal-ready .print-reveal-title.is-print-visible::after {
  transform: scaleX(1);
}

html.print-reveal-ready .print-reveal-image-card .showcase-card-media,
html.print-reveal-ready .print-reveal-image-card > img,
html.print-reveal-ready .print-reveal-image-card .promo-product-image {
  overflow: hidden;
}

html.print-reveal-ready .print-reveal-image-card img {
  clip-path: inset(0 100% 0 0);
  transform: scale(1);
  transition: clip-path 700ms ease var(--print-delay, 0ms), transform 700ms ease var(--print-delay, 0ms);
}

html.print-reveal-ready .print-reveal-image-card.is-print-visible img {
  clip-path: inset(0);
  transform: scale(1.025);
}

@media (max-width: 680px) {
  html.print-reveal-ready .print-reveal {
    transform: translateY(14px);
    transition-duration: 420ms;
  }

  html.print-reveal-ready .print-reveal-title::after {
    height: 2px;
    bottom: -9px;
    transition-duration: 420ms;
  }

  html.print-reveal-ready .print-reveal-image-card img {
    transition-duration: 500ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.print-reveal-ready .print-reveal,
  html.print-reveal-ready .print-reveal.is-print-visible,
  html.print-reveal-ready .print-reveal-title::after,
  html.print-reveal-ready .print-reveal-image-card img {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
    will-change: auto;
  }
}

/* arc-ui.css runs fp-rise on every showcase card at render time. Let the
   viewport observer own entrance opacity/transform for these cards instead. */
html.print-reveal-ready .showcase-card.print-reveal {
  animation: none !important;
}

/* Keep the existing card and image hover affordances after their reveal. */
html.print-reveal-ready .showcase-card.print-reveal.is-print-visible:hover,
html.print-reveal-ready .showcase-card.print-reveal.is-print-visible:focus-within {
  transform: translateY(-7px);
}

html.print-reveal-ready .showcase-card.print-reveal.is-print-visible:hover img,
html.print-reveal-ready .showcase-card.print-reveal.is-print-visible:focus-within img {
  transform: scale(1.04);
}

html.print-reveal-ready .showcase-category-panel .showcase-card.print-reveal.is-print-visible:hover img,
html.print-reveal-ready .showcase-category-panel .showcase-card.print-reveal.is-print-visible:focus-within img {
  transform: scale(1.08);
}

html.print-reveal-ready .promo-product-card.print-reveal.is-print-visible:hover,
html.print-reveal-ready .promo-product-card.print-reveal.is-print-visible:focus-visible {
  transform: translateY(-6px) rotate(-1deg);
}

html.print-reveal-ready .promo-product-card.print-reveal.is-print-visible:hover img,
html.print-reveal-ready .promo-product-card.print-reveal.is-print-visible:focus-visible img {
  transform: scale(1.08);
}
