/* Quiet motion for the homepage. Everything is visible without JavaScript;
   motion.js adds html.motion only when the reader has not asked for reduced motion. */
:root{--ease-quiet:cubic-bezier(.22,.61,.36,1);--rail:#bec9ba;--rail-fill:var(--forest)}

/* Content that settles into place as the reader reaches it. */
html.motion [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease-quiet),transform .9s var(--ease-quiet),translate .5s var(--ease-quiet),box-shadow .5s var(--ease-quiet);transition-delay:var(--reveal-delay,0ms)}
html.motion [data-reveal].is-in{opacity:1;transform:none}

/* Eight-week arc: a rail that steps from checkpoint to checkpoint with the pointer. */
html.motion .roadmap{position:relative;padding-left:46px}
html.motion .roadmap::before,html.motion .roadmap::after{content:"";position:absolute;left:6px;top:0;width:1px;background:var(--rail)}
html.motion .roadmap::before{bottom:0}
html.motion .roadmap::after{width:2px;left:5.5px;height:var(--fill,0px);background:var(--rail-fill);transition:height .6s var(--ease-quiet)}
html.motion .roadmap li{position:relative}
html.motion .roadmap li::before{content:"";position:absolute;box-sizing:border-box;left:-46px;top:28px;width:13px;height:13px;border-radius:50%;border:1.5px solid #9fb29d;background:#e9eddf;transition:background-color .5s var(--ease-quiet),border-color .5s var(--ease-quiet)}
html.motion .roadmap li.is-done::before{background:var(--lime);border-color:var(--forest)}
html.motion .roadmap li:last-child.is-done::before{background:var(--lime);border-color:var(--forest)}
html.motion .roadmap li>span,html.motion .roadmap h4{transition:color .5s var(--ease-quiet)}
html.motion .roadmap li.is-done>span{color:var(--forest)}

/* Menu: the section in view is underlined. */
html.motion .wf-nav a[href^="/#"]{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;padding-bottom:4px;transition:background-size .45s var(--ease-quiet)}
html.motion .wf-nav a.is-active{background-size:100% 1.5px}
html.motion .wf-nav a.is-active:hover{text-decoration:none}

/* Project cards: a small lift, the name shifts, the link arrow leans forward. */
.story-card{transition:translate .5s var(--ease-quiet),box-shadow .5s var(--ease-quiet)}
.story-art strong{transition:translate .7s var(--ease-quiet)}
.story-copy .inline-link span{display:inline-block;transition:translate .4s var(--ease-quiet)}
@media(hover:hover){
  .story-card:hover{translate:0 -4px;box-shadow:0 18px 40px #132a2214}
  .story-card:hover .story-art strong{translate:6px -3px}
  .story-card:hover .inline-link span{translate:3px 0}
}

@media(max-width:760px){
  html.motion .roadmap{padding-left:34px}
  html.motion .roadmap li::before{left:-34px;top:22px}
}
@media(prefers-reduced-motion:reduce){
  .story-card,.story-art strong,.story-copy .inline-link span{transition:none}
  .story-card:hover,.story-card:hover .story-art strong,.story-card:hover .inline-link span{translate:none}
}

/* Opening: the headline rises line by line, then the rest of the hero settles in.
   html.motion is set in the page head so nothing flashes before the animation starts. */
@keyframes rise-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-line{display:inline-block}
html.motion .hero-line,html.motion .hero-gap,html.motion .hero-lede,html.motion .hero-actions,html.motion .hero-facts{animation:rise-in 1s var(--ease-quiet) both}
html.motion .hero-line:first-child{animation-delay:.1s}
html.motion em.hero-line{animation-delay:.25s}
html.motion .hero-gap{animation-delay:.5s}
html.motion .hero-lede{animation-delay:.6s}
html.motion .hero-actions{animation-delay:.7s}
html.motion .hero-facts{animation-delay:.85s}