/* Movement belongs to the page, never a pretend animation on the artwork. */
@media(prefers-reduced-motion:no-preference){
 @view-transition{navigation:auto}
 ::view-transition-old(root){animation:page-leave .24s cubic-bezier(.3,0,.3,1) both}
 ::view-transition-new(root){animation:page-arrive .5s cubic-bezier(.16,1,.3,1) both}
 ::view-transition-group(site-brand){animation-duration:.5s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
 .topbar .brand{view-transition-name:site-brand}
 @keyframes page-leave{to{opacity:0;transform:translateY(-16px)}}
 @keyframes page-arrive{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
 [data-reveal-state=pending]{opacity:0;transform:translateY(32px)}
 [data-reveal-kind=panel][data-reveal-state=pending]{transform:perspective(1800px) translateY(42px) rotateX(2deg);transform-origin:50% 0}
 .topbar:after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;transform:scaleX(var(--reading-progress,0));transform-origin:left;background:linear-gradient(90deg,#bbd2df,#6c93b5);pointer-events:none;opacity:.8}
 .site-card{transition:transform .35s cubic-bezier(.16,1,.3,1)}.site-card:hover{transform:translateY(-5px)}
 .site-cover{transition:box-shadow .4s cubic-bezier(.16,1,.3,1)}.site-card:hover .site-cover{box-shadow:0 15px 30px -16px #254f7766}
 .site-play:after{transition:transform .35s,background .35s}.site-card:hover .site-play:after{transform:rotate(-8deg) scale(1.1);background:#21466caf}
 .site-start-grid>a{transition:transform .35s,border-color .35s}.site-start-grid>a:hover{transform:translateY(-4px);border-color:#91aabd}
 .site-start-grid>a em{transition:transform .35s;display:block}.site-start-grid>a:hover em{transform:translateX(5px)}
 .button,.nav-download{transition:transform .25s,background .25s,box-shadow .25s}.button:hover,.nav-download:hover{transform:translateY(-2px);box-shadow:0 8px 22px -14px #24496977}.button:active,.nav-download:active{transform:translateY(0) scale(.98)}
 .topbar nav>a{position:relative}.topbar nav>a:after{content:'';height:1px;position:absolute;bottom:-5px;left:0;right:0;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .28s}.topbar nav>a:hover:after,.topbar nav>a[aria-current=page]:after{transform:scaleX(1)}
 .faq-list details[open]>p{animation:answer-enter .3s cubic-bezier(.16,1,.3,1) both}@keyframes answer-enter{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
}
@media(prefers-reduced-motion:reduce){[data-reveal-state]{opacity:1!important;transform:none!important}::view-transition-group(*){animation:none!important}}
