.has-reveal [data-reveal] {
  opacity: 0;
  transition:
    opacity var(--duration-reveal-fade) var(--ease) var(--reveal-delay, var(--reveal-delay-0)),
    translate var(--duration-reveal-rise) var(--ease) var(--reveal-delay, var(--reveal-delay-0)),
    scale var(--duration-reveal-draw) var(--ease) var(--reveal-delay, var(--reveal-delay-0));
}

.has-reveal [data-reveal="rise"] {
  translate: 0 16px;
}

.has-reveal [data-reveal="draw"] {
  opacity: 1;
  scale: 1 0;
  transform-origin: top;
}

.has-reveal .is-revealed [data-reveal] {
  opacity: 1;
  translate: none;
  scale: none;
}

.has-reveal .opening [data-reveal] {
  animation:
    reveal-fade var(--duration-reveal-fade) var(--ease) var(--reveal-delay, var(--reveal-delay-0)) forwards,
    reveal-rise var(--duration-reveal-rise) var(--ease) var(--reveal-delay, var(--reveal-delay-0)) forwards,
    reveal-draw var(--duration-reveal-draw) var(--ease) var(--reveal-delay, var(--reveal-delay-0)) forwards;
}

@keyframes reveal-fade {
  to {
    opacity: 1;
  }
}

@keyframes reveal-rise {
  to {
    translate: none;
  }
}

@keyframes reveal-draw {
  to {
    scale: none;
  }
}