/* Shared by the Console boot state and the standalone animation preview. */
.time-slices-loader { position:fixed; z-index:100; inset:0; display:grid; place-content:center; justify-items:center; min-height:100dvh; overflow:hidden; background:#162b31; color:#f4f8f7; isolation:isolate; transition:opacity 260ms ease, visibility 260ms step-end; }
.time-slices-loader::before { position:absolute; z-index:-1; inset:0; background:linear-gradient(135deg, rgb(184 226 58 / 10%), transparent 42%); content:""; }
.time-slices-loader__scene { position:relative; width:250px; height:152px; margin-bottom:22px; perspective:600px; }
.time-slices-loader__axis { position:absolute; top:50%; left:12px; width:226px; height:1px; background:rgb(244 248 247 / 22%); transform:rotate(-8deg); }
.time-slices-loader__slices { position:absolute; inset:0; transform-style:preserve-3d; animation:time-slices-turn 2.8s cubic-bezier(.42,0,.18,1) infinite; }
.time-slices-loader__slices i { --index:0; position:absolute; top:28px; left:calc(14px + var(--index) * 19px); display:block; width:82px; height:90px; background-image:url('/assets/butterfly-sprite-v1.png'); background-repeat:no-repeat; background-size:400% 200%; opacity:calc(.08 + var(--index) * .065); transform:translate3d(0, calc((7 - var(--index)) * 7px), calc((7 - var(--index)) * -18px)) rotateZ(calc((var(--index) - 7) * 2deg)) rotateY(-10deg); transform-style:preserve-3d; }
.time-slices-loader__slices i:nth-child(1) { --index:0; }.time-slices-loader__slices i:nth-child(2) { --index:1; }.time-slices-loader__slices i:nth-child(3) { --index:2; }.time-slices-loader__slices i:nth-child(4) { --index:3; }.time-slices-loader__slices i:nth-child(5) { --index:4; }.time-slices-loader__slices i:nth-child(6) { --index:5; }.time-slices-loader__slices i:nth-child(7) { --index:6; }.time-slices-loader__slices i:nth-child(8) { --index:7; }.time-slices-loader__slices i:nth-child(9) { --index:8; }.time-slices-loader__slices i:nth-child(10) { --index:9; }.time-slices-loader__slices i:nth-child(11) { --index:10; }.time-slices-loader__slices i:nth-child(12) { --index:11; }.time-slices-loader__slices i:nth-child(13) { --index:12; }.time-slices-loader__slices i:nth-child(14) { --index:13; }
.time-slices-loader__slices i:nth-child(1),.time-slices-loader__slices i:nth-child(9) { background-position:0 0; }.time-slices-loader__slices i:nth-child(2),.time-slices-loader__slices i:nth-child(10) { background-position:33.333% 0; }.time-slices-loader__slices i:nth-child(3),.time-slices-loader__slices i:nth-child(11) { background-position:66.667% 0; }.time-slices-loader__slices i:nth-child(4),.time-slices-loader__slices i:nth-child(12) { background-position:100% 0; }.time-slices-loader__slices i:nth-child(5),.time-slices-loader__slices i:nth-child(13) { background-position:0 100%; }.time-slices-loader__slices i:nth-child(6),.time-slices-loader__slices i:nth-child(14) { background-position:33.333% 100%; }.time-slices-loader__slices i:nth-child(7) { background-position:66.667% 100%; }.time-slices-loader__slices i:nth-child(8) { background-position:100% 100%; }
.time-slices-loader--compact .time-slices-loader__slices i:nth-child(n+9) { display:none; }
.time-slices-loader__slices i.is-current { z-index:2; opacity:1; animation:butterfly-current-frame 720ms steps(1,end) infinite; }
.time-slices-loader__label,.time-slices-loader__detail { margin:0; text-align:center; }
.time-slices-loader__label { font-size:15px; font-weight:700; }
.time-slices-loader__detail { margin-top:5px; color:#b6cfca; font:500 10px/1.4 "DM Mono",ui-monospace,monospace; letter-spacing:.07em; text-transform:uppercase; }
.time-slices-loader.is-complete { visibility:hidden; opacity:0; pointer-events:none; }
.time-slices-loader.is-motion-paused .time-slices-loader__slices,.time-slices-loader.is-motion-paused .time-slices-loader__slices i { animation-play-state:paused; }
@keyframes time-slices-turn { 0%,100% { transform:translate3d(-7px, 5px, 0) rotateY(-18deg) rotateX(6deg); } 50% { transform:translate3d(8px, -6px, 0) rotateY(22deg) rotateX(-4deg); } }
@keyframes butterfly-current-frame { 0%,12.49% { background-position:0 0; } 12.5%,24.99% { background-position:33.333% 0; } 25%,37.49% { background-position:66.667% 0; } 37.5%,49.99% { background-position:100% 0; } 50%,62.49% { background-position:0 100%; } 62.5%,74.99% { background-position:33.333% 100%; } 75%,87.49% { background-position:66.667% 100%; } 87.5%,100% { background-position:100% 100%; } }
@media(max-width:480px) { .time-slices-loader__scene { transform:scale(.82); margin-bottom:5px; } }
@media(prefers-reduced-motion:reduce) { .time-slices-loader__slices { animation:none; transform:rotateY(-16deg) rotateX(5deg); } .time-slices-loader__slices i.is-current { animation:none; } .time-slices-loader { transition-duration:120ms; } }