[data-image-cover-reveal] {
  --image-cover-reveal-color: var(--paper);
  isolation: isolate;
}

[data-image-cover-tone="signal"] {
  --image-cover-reveal-color: var(--signal);
}

[data-image-cover-tone="ink"] {
  --image-cover-reveal-color: var(--ink);
}

.image-cover-reveal--pending::after {
  content: "";
  position: absolute;
  z-index: 8;
  inset: 0;
  background: var(--image-cover-reveal-color);
  transform: scaleX(1);
  transform-origin: left center;
  pointer-events: none;
  will-change: transform;
}

.image-cover-reveal--pending img {
  scale: 1.2;
  transform-origin: center center;
  will-change: scale, transform;
}

.image-cover-reveal--active::after {
  animation: image-cover-away 680ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.image-cover-reveal--active img {
  animation: image-cover-scale-down 680ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes image-cover-away {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

@keyframes image-cover-scale-down {
  from {
    scale: 1.2;
  }
  to {
    scale: 1;
  }
}

@media (max-width: 767.98px) {
  .image-cover-reveal--active::after,
  .image-cover-reveal--active img {
    animation-duration: 560ms;
  }
}

@media print, (prefers-reduced-motion: reduce) {
  .image-cover-reveal--pending::after,
  .animations-paused .image-cover-reveal--pending::after {
    display: none;
    animation: none;
  }

  .image-cover-reveal--pending img,
  .animations-paused .image-cover-reveal--pending img {
    scale: 1;
    animation: none;
    will-change: auto;
  }
}

.animations-paused .image-cover-reveal--pending::after {
  display: none;
  animation: none;
}

.animations-paused .image-cover-reveal--pending img {
  scale: 1;
  animation: none;
  will-change: auto;
}