/* Motion for the static public pages (policies, guides, About). Loaded with
   /motion.js. Everything here is progressive: without JavaScript, and for
   visitors who prefer reduced motion, the pages are fully visible and still. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}

.site-header{transition:box-shadow .3s ease,border-color .3s ease,background-color .3s ease}
.site-header.is-scrolled{box-shadow:0 10px 30px -20px rgba(0,0,0,.45)}

.reading-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:30;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--p,0));pointer-events:none}
.toc a.is-active{color:var(--fg);border-left-color:var(--accent)}

@media (prefers-reduced-motion:no-preference){
 @keyframes rise{from{opacity:.35;transform:translateY(16px)}to{opacity:1;transform:none}}
 .legal-hero>*{animation:rise .8s cubic-bezier(.22,.61,.36,1) both}
 .legal-hero>:nth-child(2){animation-delay:.06s}
 .legal-hero>:nth-child(3){animation-delay:.12s}
 .legal-hero>:nth-child(4){animation-delay:.18s}
 .legal-hero>:nth-child(n+5){animation-delay:.24s}

 .reveal-pending{opacity:0;transform:translateY(24px)}
 .reveal-run{transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}

 .reading-progress{transition:transform .12s linear}
 .toc a,.toc-mobile a,.related li a,.footer-links a,.footer-credit a,.legal-body a{transition:color .2s ease,border-color .2s ease,text-decoration-color .2s ease}
 .toc a{transition:color .2s ease,border-color .2s ease,padding-left .2s ease}
 .toc a:hover,.toc a.is-active{padding-left:20px}
 .btn{transition:opacity .2s ease,transform .2s ease,background-color .2s ease}
 .btn:hover{transform:translateY(-1px)}
 .card{transition:transform .3s cubic-bezier(.22,.61,.36,1),border-color .3s ease,box-shadow .3s ease}
 .card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -28px rgba(0,0,0,.5)}
 .toc-mobile ol{animation:rise .3s ease both}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 @view-transition{navigation:none}
}