/* A single, quiet sequence follows the three stages of an electrical project. */
@media (prefers-reduced-motion: no-preference) {
  .process-motion .section-heading,
  .process-motion .rot {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 650ms ease, transform 650ms cubic-bezier(.22, 1, .36, 1);
  }

  .process-motion .section-heading.is-visible,
  .process-motion .rot.is-visible {
    opacity: 1;
    transform: none;
  }

  .process-motion .steps { position: relative; }
  .process-motion .steps::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--line);
    pointer-events: none;
  }

  .process-motion .steps article { position: relative; border-top-color: transparent; }
  .process-motion .steps article::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: calc(100% + 50px);
    height: 2px;
    background: var(--green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 680ms cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--step-delay);
    pointer-events: none;
  }

  .process-motion .steps article:last-child::before { width: 100%; }
  .process-motion .steps article::after {
    content: "";
    position: absolute;
    top: -4px;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0;
    transition: opacity 300ms ease, background 650ms ease;
    transition-delay: var(--step-delay);
    pointer-events: none;
  }

  .process-motion .steps article > * {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 600ms ease, transform 600ms cubic-bezier(.22, 1, .36, 1), color 600ms ease;
    transition-delay: var(--step-delay);
  }

  .process-motion .steps.is-visible article::before { transform: scaleX(1); }
  .process-motion .steps.is-visible article::after { opacity: 1; background: var(--green); }
  .process-motion .steps.is-visible article > * { opacity: 1; transform: none; }
  .process-motion .steps.is-visible article > span { color: var(--green); }

  @media (max-width: 760px) {
    .process-motion .steps::before { top: 0; bottom: 0; right: auto; width: 1px; height: auto; }
    .process-motion .steps article { padding-left: 64px; border: 0; }
    .process-motion .steps article > span { left: 22px; }
    .process-motion .steps article::before,
    .process-motion .steps article:last-child::before {
      top: 0;
      width: 2px;
      height: calc(100% + 28px);
      transform: scaleY(0);
      transform-origin: top;
    }
    .process-motion .steps article:last-child::before { height: 100%; }
    .process-motion .steps article::after { top: 29px; left: -3px; }
    .process-motion .steps.is-visible article::before { transform: scaleY(1); }
  }
}