[data-tpm-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 520ms ease, transform 520ms ease;
}

[data-tpm-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.tpm-notice {
  padding: 16px 18px;
  border-left: 4px solid var(--tpm-pink);
  background: #fff7fb;
  color: var(--tpm-ink);
}

@keyframes tpm-hero-rise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tpm-hero-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-18px);
  }
}