/* Always start at the first keyframe, rather than reversing a fade-out. */
.profile-surface[data-template] .block-reveal { --block-distance: 48px; }
.template-preview.profile-surface[data-template] .block-reveal { --block-distance: 32px; }
.profile-surface[data-reveal-motion="on"] .block-reveal.is-pending {
  opacity: 0; translate: 0 var(--block-distance); pointer-events: none;
  transition: none; animation: none;
}
.profile-surface[data-reveal-motion="on"] .block-reveal.is-entering {
  animation: block-entrance 850ms cubic-bezier(.16,1,.3,1) both;
}
.profile-surface[data-reveal-motion="on"] .block-reveal.is-entering[data-block-step="1"] { animation-delay: 120ms; }
.profile-surface[data-reveal-motion="on"] .block-reveal.is-entering[data-block-step="2"] { animation-delay: 240ms; }
@keyframes block-entrance {
  from { opacity: 0; translate: 0 var(--block-distance); }
  to { opacity: 1; translate: 0 0; }
}
.profile-surface[data-template] .block-reveal:focus-within {
  opacity: 1; translate: none; pointer-events: auto; animation: none;
}
/* A deliberate click on replay opts in for this page only. */
@media (prefers-reduced-motion: reduce) {
  .profile-surface:not([data-reveal-override="true"]) .block-reveal {
    opacity: 1 !important; translate: none !important; pointer-events: auto !important; animation: none !important;
  }
}
@media print {
  .profile-surface[data-template] .block-reveal {
    opacity: 1 !important; translate: none !important; pointer-events: auto !important; animation: none !important;
  }
}