@keyframes atlas-heading-in {
  from {
    opacity: .55;
    translate: 0 10px;
  }
}

@keyframes atlas-underline-in {
  from { scale: 0 1; }
}

@keyframes atlas-frame-in {
  from {
    opacity: .72;
    translate: 0 12px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  main h1 {
    animation: atlas-heading-in 460ms cubic-bezier(.2, .75, .3, 1) both;
  }

  main h1 > span > svg {
    transform-origin: left center;
    animation: atlas-underline-in 540ms 150ms cubic-bezier(.2, .75, .3, 1) both;
  }

  @supports (animation-timeline: view()) {
    main .paper-frame {
      animation: atlas-frame-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    main a.inline-flex.rounded-full > svg {
      transition: translate 200ms ease;
    }

    main a.inline-flex.rounded-full:hover > svg {
      translate: 3px 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  main a, main button, main .paper-frame {
    transition-duration: 0s !important;
  }
}