@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 (hover: hover) and (pointer: fine) {
  .process-step {
    --step-accent: var(--pink);
    isolation: isolate;
  }

  .process-step:nth-child(2) { --step-accent: var(--sage); }
  .process-step:nth-child(3) { --step-accent: var(--yellow); }

  .process-step::before,
  .process-step::after {
    position: absolute;
    content: "";
    pointer-events: none;
    opacity: 0;
  }

  .process-step::before {
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(ellipse at top right, hsl(var(--step-accent) / .32), transparent 72%);
  }

  .process-step::after {
    inset: auto 1.75rem .7rem;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, hsl(var(--step-accent)), transparent);
    transform-origin: left center;
  }

  .process-step:hover {
    border-color: hsl(var(--step-accent));
    box-shadow: 0 3px 0 hsl(var(--step-accent) / .45),
                0 22px 38px -16px hsl(var(--navy) / .3);
  }

  .process-step:hover::before,
  .process-step:hover::after { opacity: 1; }

  .process-step:hover > span:first-child {
    box-shadow: 0 0 0 5px hsl(var(--step-accent) / .24);
  }

  @media (prefers-reduced-motion: no-preference) {
    .process-step {
      transition: translate 280ms cubic-bezier(.2, .75, .3, 1),
                  border-color 280ms ease, box-shadow 280ms ease;
    }

    .process-step::before { transition: opacity 280ms ease; }

    .process-step::after {
      scale: .18 1;
      transition: opacity 260ms ease, scale 380ms cubic-bezier(.2, .75, .3, 1);
    }

    .process-step > span:first-child {
      transition: scale 280ms cubic-bezier(.2, .75, .3, 1), box-shadow 280ms ease;
    }

    .process-step:hover { translate: 0 -6px; }
    .process-step:hover::after { scale: 1 1; }
    .process-step:hover > span:first-child { scale: 1.08; }
  }
}

@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;
  }
}