/* Content is visible by default. Motion is finite, progressive and unhurried. */
.hero h1 .hero-line:first-child {
  color: inherit;
}
.hero h1 .hero-line {
  display: block;
}
@keyframes editorial-line {
  from {
    opacity: 0.22;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes editorial-rule {
  from {
    transform: scaleX(0.12);
  }
  to {
    transform: scaleX(1);
  }
}
@media (prefers-reduced-motion: no-preference) {
  [data-reveal].has-arrived {
    animation: none;
  }
  .hero-copy.has-arrived .audience,
  .hero-copy.has-arrived .hero-line,
  .hero-copy.has-arrived .hero-summary,
  .hero-copy.has-arrived .hero-actions,
  .hero-copy.has-arrived .hero-note,
  [data-reveal].has-arrived > .eyebrow,
  [data-reveal].has-arrived > h2,
  [data-reveal].has-arrived > h3,
  [data-reveal].has-arrived > p,
  [data-reveal].has-arrived > .button,
  .hero-index.has-arrived > a {
    animation: editorial-line 0.72s cubic-bezier(0.16, 0.65, 0.28, 1) both;
  }
  .hero-copy.has-arrived .hero-line:first-child {
    animation-delay: 0.08s;
  }
  .hero-copy.has-arrived .hero-line:nth-child(2) {
    animation-delay: 0.2s;
  }
  .hero-copy.has-arrived .hero-summary,
  [data-reveal].has-arrived > h2,
  [data-reveal].has-arrived > h3 {
    animation-delay: 0.16s;
  }
  .hero-copy.has-arrived .hero-actions,
  [data-reveal].has-arrived > p:not(.eyebrow) {
    animation-delay: 0.26s;
  }
  .hero-copy.has-arrived .hero-note {
    animation-delay: 0.36s;
  }
  .hero-index.has-arrived > a:nth-child(2) {
    animation-delay: 0.1s;
  }
  .hero-index.has-arrived > a:nth-child(3) {
    animation-delay: 0.2s;
  }
  .workflow-steps li.has-arrived {
    animation: editorial-line 0.65s cubic-bezier(0.16, 0.65, 0.28, 1) both;
  }
  .workflow-steps li.has-arrived:nth-child(2) {
    animation-delay: 0.08s;
  }
  .workflow-steps li.has-arrived:nth-child(3) {
    animation-delay: 0.16s;
  }
  .workflow-steps li.has-arrived:nth-child(4) {
    animation-delay: 0.24s;
  }
  .workflow-steps li.has-arrived::after {
    animation: editorial-rule 0.85s ease-out both;
  }
  .review-flow.has-arrived > ol > li {
    animation: editorial-line 0.7s ease-out both;
  }
  .review-flow.has-arrived > ol > li:nth-child(2) {
    animation-delay: 0.08s;
  }
  .review-flow.has-arrived > ol > li:nth-child(3) {
    animation-delay: 0.16s;
  }
  .review-flow.has-arrived > ol > li:nth-child(4) {
    animation-delay: 0.24s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .has-arrived,
  .has-arrived * {
    animation: none !important;
    transition: none !important;
  }
}

#example-project .ex-stages a {
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease;
}
@media (prefers-reduced-motion: no-preference) {
  #example-project .ex-stage.has-arrived > .ex-stage-heading {
    animation: editorial-line 0.6s cubic-bezier(0.16, 0.65, 0.28, 1) both;
  }
  #example-project .ex-stage.has-arrived > .ex-inspection-layout,
  #example-project .ex-stage.has-arrived > .ex-lab-compare,
  #example-project .ex-stage.has-arrived > .ex-doc-viewer {
    animation: editorial-line 0.7s cubic-bezier(0.16, 0.65, 0.28, 1) 0.1s both;
  }
}

/* Indicate section focus at its heading instead of boxing a long story panel. */
#example-project .ex-stage:focus-visible {
  outline: none;
}
#example-project .ex-stage:focus-visible > .ex-stage-heading h2 {
  outline: 2px solid #a66231;
  outline-offset: 6px;
}
@media (prefers-reduced-motion: no-preference) {
  .home-workflow-list li.has-arrived > a {
    animation: editorial-line 0.65s cubic-bezier(0.16, 0.65, 0.28, 1) both;
  }
  .home-workflow-list li.has-arrived:nth-child(2) > a {
    animation-delay: 0.06s;
  }
  .home-workflow-list li.has-arrived:nth-child(3) > a {
    animation-delay: 0.12s;
  }
  .home-workflow-list li.has-arrived:nth-child(4) > a {
    animation-delay: 0.18s;
  }
  .cap-lead-grid.has-arrived > div > .eyebrow,
  .cap-lead-grid.has-arrived > div > h1,
  .cap-lead-grid.has-arrived > div > .cap-hero-copy,
  .cap-lead-grid.has-arrived > div > .cap-actions {
    animation: editorial-line 0.7s cubic-bezier(0.16, 0.65, 0.28, 1) both;
  }
  .cap-lead-grid.has-arrived > div > h1 {
    animation-delay: 0.08s;
  }
  .cap-lead-grid.has-arrived > div > .cap-hero-copy {
    animation-delay: 0.16s;
  }
  .cap-lead-grid.has-arrived > div > .cap-actions {
    animation-delay: 0.24s;
  }
}