:where(main)
  :is(
    .main-reveal,
    .entry-card,
    .project-hero__content,
    .project-card,
    .project-pagination,
    .detail-back,
    .detail-intro,
    .detail-activity,
    .not-found-page__content > *
  ) {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    translate 700ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-ready
  :where(main)
  :is(
    .main-reveal,
    .entry-card,
    .project-hero__content,
    .project-card,
    .project-pagination,
    .detail-back,
    .detail-intro,
    .detail-activity,
    .not-found-page__content > *
  ) {
  opacity: 0;
  translate: 0 var(--reveal-distance, 32px);
}

.reveal-ready
  :where(main)
  :is(
    .main-reveal,
    .entry-card,
    .project-hero__content,
    .project-card,
    .project-pagination,
    .detail-back,
    .detail-intro,
    .detail-activity,
    .not-found-page__content > *
  ).is-visible {
  opacity: 1;
  translate: 0 0;
}

@media (max-width: 700px) {
  :where(main)
    :is(
      .main-reveal,
      .entry-card,
      .project-hero__content,
      .project-card,
      .project-pagination,
      .detail-back,
      .detail-intro,
      .detail-activity,
      .not-found-page__content > *
    ) {
    --reveal-distance: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready
    :where(main)
    :is(
      .main-reveal,
      .entry-card,
      .project-hero__content,
      .project-card,
      .project-pagination,
      .detail-back,
      .detail-intro,
      .detail-activity,
      .not-found-page__content > *
    ) {
    opacity: 1 !important;
    translate: none !important;
    transition: none !important;
  }
}