/* Motion for every page of the site (see motion.js). Hidden states apply only when JavaScript runs (html.js),
   so a page without scripts is shown whole. Everything stops under prefers-reduced-motion. */

/* The first screen: headline, text and buttons rise in one after another, the layer buttons fade in last. */
@keyframes m-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes m-fade{from{opacity:0}to{opacity:1}}
.hero h1,.hero .lead,.hero .cta{animation:m-up .85s cubic-bezier(.2,.7,.2,1) both}
.hero .lead{animation-delay:.12s}
.hero .cta{animation-delay:.24s}
.hero .dock{animation:m-fade .8s ease .5s both}
.ph>div>*{animation:m-up .75s cubic-bezier(.2,.7,.2,1) both}
.ph>div>:nth-child(2){animation-delay:.07s}.ph>div>:nth-child(3){animation-delay:.14s}
.ph>div>:nth-child(4){animation-delay:.21s}.ph>div>:nth-child(5){animation-delay:.28s}

/* Blocks come in as they scroll into view, each group one after another (--i is the place in the group). */
.js .rv{opacity:0;transform:translateY(24px);
  transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*80ms)}
.js .rv.in{opacity:1;transform:none}

/* Lines of a diagram draw themselves when its figure appears; the dashed ones keep their dashes and just fade with the figure. */
.js svg[data-draw] .ln:not(.dash){stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.js .in svg[data-draw] .ln:not(.dash){stroke-dashoffset:0;transition:stroke-dashoffset 1.5s cubic-bezier(.3,.6,.2,1) .35s}

/* The header gets a shadow once the page has moved; a thin line at the very top shows how far down you are. */
header{transition:box-shadow .3s ease}
header.scrolled{box-shadow:0 10px 26px -14px rgba(0,0,0,.45)}
#prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:30;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* Hover and press. */
.btn{transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .25s ease}
.btn:active{transform:translateY(0) scale(.985)}
.wf{transition:background .2s ease,border-color .2s ease,transform .2s ease}
.cf{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,border-color .3s ease}
.row,.cr{transition:background .25s ease}
.flow>div{transition:border-color .3s ease,background .3s ease}
.others a{transition:color .2s ease,border-color .2s ease,transform .2s ease,background .2s ease}
.nav a,nav a{transition:color .2s ease}
.theme svg{transition:transform .6s cubic-bezier(.3,.6,.2,1)}
.lang{transition:color .2s ease,border-color .2s ease}
.theme{transition:border-color .2s ease,color .2s ease}
.cat .more a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;text-decoration:none;transition:background-size .35s ease;padding-bottom:2px}

/* Hover effects only where there is a pointer (on a phone they would stay stuck after a tap). */
@media (hover:hover){
  .btn:hover{transform:translateY(-1px)}
  .btn.p:hover{box-shadow:0 8px 20px -8px rgba(226,112,31,.6)}
  .wf:hover{transform:translateY(-1px)}
  .cf:hover{transform:translateY(-4px);box-shadow:0 18px 34px -18px rgba(0,0,0,.55);border-color:var(--f3)}
  .flow>div:hover{background:var(--wash)}
  .others a:hover{transform:translateY(-2px)}
  .theme:hover svg{transform:rotate(180deg)}
  .cat .more a:hover{background-size:100% 1px}
}

/* Narrow screens: the language button and the theme button stay, the second "Download" / "Home" button goes (the logo links home). */
@media (max-width:480px){
  header .bar{gap:10px}
  header .bar>.btn.s,header .bar>.back{display:none}
  header .bar>.lang{margin-left:auto}
  .theme,.lang{flex:none}
}

/* Anchors stop below the sticky header instead of under it. */
section[id]{scroll-margin-top:72px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
  .js svg[data-draw] .ln:not(.dash){stroke-dasharray:none;stroke-dashoffset:0}
}