/* A single flapping butterfly, unfolded into a short record of time. */
.time-slices-loader { position:fixed; z-index:100; inset:0; display:grid; place-content:center; justify-items:center; min-height:100dvh; overflow:hidden; background:#f4f7f6; color:#162b31; font-family:Manrope,ui-sans-serif,system-ui,sans-serif; transition:opacity 180ms ease, visibility 180ms step-end; }
.time-slices-loader__scene { position:relative; width:280px; height:146px; margin-bottom:16px; }
.time-slices-loader__axis { display:none; }
.time-slices-loader__slices { position:absolute; inset:0; }
.time-slices-loader__slices i { --index:0; position:absolute; top:calc(48px - var(--index) * 8px); left:calc(8px + var(--index) * 52px); display:block; width:56px; height:62px; background:#0d6b54; opacity:calc(.1 + var(--index) * .13); -webkit-mask:url('/assets/butterfly-sprite-v1.png') 0 0 / 400% 200% no-repeat; mask:url('/assets/butterfly-sprite-v1.png') 0 0 / 400% 200% no-repeat; }
.time-slices-loader__slices i[hidden] { display:none; }
.time-slices-loader__slices i:nth-child(1) { --index:0; -webkit-mask-position:0 0; mask-position:0 0; }.time-slices-loader__slices i:nth-child(2) { --index:1; -webkit-mask-position:33.333% 0; mask-position:33.333% 0; }.time-slices-loader__slices i:nth-child(3) { --index:2; -webkit-mask-position:66.667% 0; mask-position:66.667% 0; }.time-slices-loader__slices i:nth-child(4) { --index:3; -webkit-mask-position:100% 0; mask-position:100% 0; }.time-slices-loader__slices i:nth-child(5) { --index:4; -webkit-mask-position:0 100%; mask-position:0 100%; }.time-slices-loader__slices i:nth-child(6) { --index:5; -webkit-mask-position:33.333% 100%; mask-position:33.333% 100%; }.time-slices-loader__slices i:nth-child(7) { --index:6; -webkit-mask-position:66.667% 100%; mask-position:66.667% 100%; }.time-slices-loader__slices i:nth-child(8) { --index:7; -webkit-mask-position:100% 100%; mask-position:100% 100%; }
.time-slices-loader--compact .time-slices-loader__slices i:nth-child(n+5) { display:none; }
.time-slices-loader__slices i.is-current { z-index:1; opacity:1; background:#16803f; animation:butterfly-current-frame 780ms steps(1,end) infinite; }
.time-slices-loader__label,.time-slices-loader__detail { margin:0; text-align:center; }
.time-slices-loader__label { font-size:13px; font-weight:700; }
.time-slices-loader__detail { margin-top:5px; color:#162b31; opacity:.64; font:500 12px/1.4 Manrope,system-ui,sans-serif; letter-spacing:.02em; }
.time-slices-loader.is-complete { visibility:hidden; opacity:0; pointer-events:none; }
.time-slices-loader.is-motion-paused .time-slices-loader__slices i { animation-play-state:paused; }
@keyframes butterfly-current-frame { 0%,12.49% { -webkit-mask-position:0 0; mask-position:0 0; } 12.5%,24.99% { -webkit-mask-position:33.333% 0; mask-position:33.333% 0; } 25%,37.49% { -webkit-mask-position:66.667% 0; mask-position:66.667% 0; } 37.5%,49.99% { -webkit-mask-position:100% 0; mask-position:100% 0; } 50%,62.49% { -webkit-mask-position:0 100%; mask-position:0 100%; } 62.5%,74.99% { -webkit-mask-position:33.333% 100%; mask-position:33.333% 100%; } 75%,87.49% { -webkit-mask-position:66.667% 100%; mask-position:66.667% 100%; } 87.5%,100% { -webkit-mask-position:100% 100%; mask-position:100% 100%; } }
@media(max-width:480px) { .time-slices-loader__scene { transform:scale(.86); margin-bottom:6px; } }
@media(prefers-reduced-motion:reduce) { .time-slices-loader__slices i.is-current { animation:none; } .time-slices-loader { transition-duration:120ms; } }