/*
 * Shared motion for the home page and the Members Hub. Everything finishes in
 * its resting state with scripts off or "reduce motion" on: `js` is set in
 * <head>, so nothing is hidden unless scripts are actually running.
 */

/* Things rise into place as they scroll into view. */
.js .reveal {
    opacity: 0; transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--i, 0) * 80ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* Bars and rings that fill the first time they are seen. The finished width or
   offset is set inline; only the starting point is held back here. */
.js [data-fill="bar"] { transform-origin: left center; transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) .15s; }
.js [data-fill="bar"].is-filled { transform: scaleX(1); }
.js [data-fill="col"] { transform-origin: center bottom; transform: scaleY(0); transition: transform .9s cubic-bezier(.2, .7, .2, 1) calc(var(--c, 0) * 45ms + .1s); }
.js [data-fill="col"].is-filled { transform: none; }
.js [data-fill="ring"] { stroke-dashoffset: var(--ring-full, 176); transition: stroke-dashoffset 1.3s cubic-bezier(.2, .7, .2, 1) .15s; }
.js [data-fill="ring"].is-filled { stroke-dashoffset: var(--ring-to, 0); }

@media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .js [data-fill="bar"] { transform: none; transition: none; }
    .js [data-fill="col"] { transform: none; transition: none; }
    .js [data-fill="ring"] { stroke-dashoffset: var(--ring-to, 0); transition: none; }
}