/* Page-load intro + scroll reveals. Only active when JS has added .js to <html>,
   so without JS (or with reduced motion) everything is simply visible. */

@keyframes in-up    { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes in-down  { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes in-left  { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes draw-y   { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pop      { 0% { opacity: 0; transform: scale(.6) rotate(-8deg); } 70% { opacity: 1; transform: scale(1.06) rotate(2deg); } 100% { transform: none; } }
@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }

html.js.intro .gridlines span { transform-origin: top; animation: draw-y 1.1s cubic-bezier(.6,0,.2,1) both; }
html.js.intro .gridlines span:nth-child(2) { animation-delay: .08s; }
html.js.intro .gridlines span:nth-child(3) { animation-delay: .16s; }
html.js.intro .gridlines span:nth-child(4) { animation-delay: .24s; }

/* nav: each item (and the little minor ticks) slides in one after another, like a dial being set */
html.js.intro .ruler__list > li { animation: in-left .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.25s + var(--i, 0) * .045s); }
html.js.intro .ruler__indicator { animation: fade-in .4s ease .75s both; }

html.js.intro .toplinks > * { animation: in-down .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.35s + var(--i, 0) * .06s); }

/* hero: photo pops, hi fades up, tagline types (JS), then the copy settles in */
html.js.intro .avatar { animation: pop .7s cubic-bezier(.3,1.4,.5,1) .35s both; }
html.js.intro .hero__hi { animation: in-up .5s cubic-bezier(.2,.8,.2,1) .55s both; }
html.js.intro .hero__copy > p { animation: in-up .6s cubic-bezier(.2,.8,.2,1) both; }
html.js.intro .hero__copy > p:nth-child(1) { animation-delay: 1.15s; }
html.js.intro .hero__copy > p:nth-child(2) { animation-delay: 1.27s; }
html.js.intro .hero__more { animation: in-up .6s cubic-bezier(.2,.8,.2,1) 1.4s both; }

/* About page intro lives in css/about.css */

/* scroll reveals: things rise into place the first time they come on screen */
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.8,.2,1) var(--rd, 0s), transform .8s cubic-bezier(.2,.8,.2,1) var(--rd, 0s); }
html.js .reveal.is-in { opacity: 1; transform: none; }
html.js .reveal--title { transform: translateY(10px); }
html.js .reveal--logo { transform: translateY(10px) scale(.92); }

@media (prefers-reduced-motion: reduce) {
  html.js.intro * { animation: none !important; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}