/*
 * Adapted from selected LDRS loaders (MIT): Waveform, Hourglass, Miyagi,
 * Treadmill, Line Wobble and Zoomies. Source details: third_party/LDRS-SOURCE.txt
 */

.dc-ldrs {
    --dc-ldrs-size: 48px;
    --dc-ldrs-stroke: max(3px, calc(var(--dc-ldrs-size) * 0.085));
    --dc-ldrs-color: #2563eb;
    --dc-ldrs-accent: #7c3aed;
    --dc-ldrs-speed: 1.1s;
    --dc-ldrs-track-opacity: 0.14;
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--dc-ldrs-size);
    height: var(--dc-ldrs-size);
    color: var(--dc-ldrs-color);
}

.dc-ldrs i {
    display: block;
    box-sizing: border-box;
    font-style: normal;
}

.dc-ldrs--waveform {
    justify-content: space-between;
    height: calc(var(--dc-ldrs-size) * 0.9);
}

.dc-ldrs--waveform .dc-ldrs__bar {
    width: var(--dc-ldrs-stroke);
    height: 100%;
    border-radius: calc(var(--dc-ldrs-stroke) / 2);
    background-color: var(--dc-ldrs-color);
    transform: scaleY(0.3);
    animation: dc-ldrs-waveform-grow var(--dc-ldrs-speed) ease-in-out infinite;
    transition: background-color 150ms ease;
}

.dc-ldrs--waveform .dc-ldrs__bar:nth-child(even) {
    background-color: var(--dc-ldrs-accent);
}

.dc-ldrs--waveform .dc-ldrs__bar:nth-child(1) { animation-delay: calc(var(--dc-ldrs-speed) * -0.45); }
.dc-ldrs--waveform .dc-ldrs__bar:nth-child(2) { animation-delay: calc(var(--dc-ldrs-speed) * -0.3); }
.dc-ldrs--waveform .dc-ldrs__bar:nth-child(3) { animation-delay: calc(var(--dc-ldrs-speed) * -0.15); }

@keyframes dc-ldrs-waveform-grow {
    0%, 100% { transform: scaleY(0.3); }
    50% { transform: scaleY(1); }
}

.dc-ldrs--hourglass {
    flex-direction: column;
    transform: rotate(45deg);
    animation: dc-ldrs-hourglass-rotate calc(var(--dc-ldrs-speed) * 2) ease-in-out infinite;
}

.dc-ldrs--hourglass .dc-ldrs__half {
    --dc-ldrs-half-size: calc(var(--dc-ldrs-size) * 0.435);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--dc-ldrs-half-size);
    height: var(--dc-ldrs-half-size);
    overflow: hidden;
    isolation: isolate;
    border-radius: 50% 50% calc(var(--dc-ldrs-size) / 15);
}

.dc-ldrs--hourglass .dc-ldrs__half:first-child {
    top: 8.25%;
    left: 8.25%;
}

.dc-ldrs--hourglass .dc-ldrs__half:last-child {
    right: 8.25%;
    bottom: 8.25%;
    transform: rotate(180deg);
}

.dc-ldrs--hourglass .dc-ldrs__half::before,
.dc-ldrs--hourglass .dc-ldrs__half::after {
    content: '';
    width: 110%;
    height: 110%;
    background-color: var(--dc-ldrs-color);
    transition: background-color 150ms ease;
}

.dc-ldrs--hourglass .dc-ldrs__half::before {
    position: absolute;
    top: 0;
    left: 0;
    opacity: var(--dc-ldrs-track-opacity);
}

.dc-ldrs--hourglass .dc-ldrs__half::after {
    position: relative;
    z-index: 1;
    border-radius: 0 0 calc(var(--dc-ldrs-size) / 20) 0;
    transform: rotate(45deg) translate(-3%, 50%) scaleX(1.2);
    transform-origin: bottom right;
    animation: dc-ldrs-hourglass-flow calc(var(--dc-ldrs-speed) * 2) linear infinite both;
}

.dc-ldrs--hourglass .dc-ldrs__half:last-child::after {
    background-color: var(--dc-ldrs-accent);
    animation-delay: calc(var(--dc-ldrs-speed) * -1);
}

@keyframes dc-ldrs-hourglass-flow {
    0% { transform: rotate(45deg) translate(-3%, 50%) scaleX(1.2); }
    30% { transform: rotate(45deg) translate(115%, 50%) scaleX(1.2); }
    30.001%, 50% { transform: rotate(0deg) translate(-85%, -85%) scaleX(1); }
    80%, 100% { transform: rotate(0deg) translate(0, 0) scaleX(1); }
}

@keyframes dc-ldrs-hourglass-rotate {
    0%, 30% { transform: rotate(45deg); }
    50%, 80% { transform: rotate(225deg); }
    100% { transform: rotate(405deg); }
}

.dc-ldrs--miyagi .dc-ldrs__line {
    position: absolute;
    top: calc(50% - var(--dc-ldrs-stroke) / 2);
    left: 0;
    width: 100%;
    height: var(--dc-ldrs-stroke);
    border-radius: calc(var(--dc-ldrs-stroke) / 2);
    background-color: var(--dc-ldrs-color);
    animation: dc-ldrs-miyagi-rotate var(--dc-ldrs-speed) ease-in-out infinite alternate;
    transition: background-color 150ms ease;
}

.dc-ldrs--miyagi .dc-ldrs__line:nth-child(even) { background-color: var(--dc-ldrs-accent); }
.dc-ldrs--miyagi .dc-ldrs__line:nth-child(1) { animation-delay: calc(var(--dc-ldrs-speed) * -0.375); }
.dc-ldrs--miyagi .dc-ldrs__line:nth-child(2) { animation-delay: calc(var(--dc-ldrs-speed) * -0.375); opacity: 0.8; }
.dc-ldrs--miyagi .dc-ldrs__line:nth-child(3) { animation-delay: calc(var(--dc-ldrs-speed) * -0.3); opacity: 0.6; }
.dc-ldrs--miyagi .dc-ldrs__line:nth-child(4) { animation-delay: calc(var(--dc-ldrs-speed) * -0.225); opacity: 0.4; }
.dc-ldrs--miyagi .dc-ldrs__line:nth-child(5) { animation-delay: calc(var(--dc-ldrs-speed) * -0.15); opacity: 0.2; }
.dc-ldrs--miyagi .dc-ldrs__line:nth-child(6) { animation-delay: calc(var(--dc-ldrs-speed) * -0.075); opacity: 0.1; }

@keyframes dc-ldrs-miyagi-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(180deg); }
}

.dc-ldrs--treadmill {
    align-items: flex-end;
    height: calc(var(--dc-ldrs-size) * 0.59);
    padding-bottom: calc(var(--dc-ldrs-size) * 0.1);
}

.dc-ldrs--treadmill .dc-ldrs__cube {
    --dc-ldrs-cube-size: calc(var(--dc-ldrs-size) * 0.2);
    --dc-ldrs-cube-height: calc(var(--dc-ldrs-size) * 0.8);
    display: flex;
    align-items: center;
    width: var(--dc-ldrs-cube-size);
    height: var(--dc-ldrs-cube-height);
    transform: rotate(-90deg);
    transform-origin: center bottom;
    animation: dc-ldrs-treadmill-move var(--dc-ldrs-speed) linear infinite;
}

.dc-ldrs--treadmill .dc-ldrs__cube::after {
    content: '';
    display: block;
    width: var(--dc-ldrs-cube-size);
    height: var(--dc-ldrs-cube-size);
    border-radius: 25%;
    background: linear-gradient(135deg, var(--dc-ldrs-color), var(--dc-ldrs-accent));
    transform-origin: center left;
    animation: dc-ldrs-treadmill-morph var(--dc-ldrs-speed) linear infinite;
}

@keyframes dc-ldrs-treadmill-move {
    0% { transform: rotate(-90deg); }
    50% { transform: rotate(90deg); }
    50.001% { transform: translateX(var(--dc-ldrs-cube-height)) rotate(-90deg); }
    100% { transform: rotate(-90deg); }
}

@keyframes dc-ldrs-treadmill-morph {
    15% { transform: scaleX(1.2) scaleY(0.8); }
    30%, 50% { transform: scaleX(1); }
    55% { transform: scaleX(0.8) scaleY(1.2); }
    65%, 80% { transform: scaleX(1); }
    90%, 95% { transform: scaleX(0.65) scaleY(1.3); }
}

.dc-ldrs--line-wobble,
.dc-ldrs--zoomies {
    height: var(--dc-ldrs-stroke);
    overflow: hidden;
    border-radius: calc(var(--dc-ldrs-stroke) / 2);
    transform: translate3d(0, 0, 0);
}

.dc-ldrs--line-wobble::before,
.dc-ldrs--zoomies::before,
.dc-ldrs--line-wobble::after,
.dc-ldrs--zoomies::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.dc-ldrs--line-wobble::before,
.dc-ldrs--zoomies::before {
    background-color: var(--dc-ldrs-accent);
    opacity: var(--dc-ldrs-track-opacity);
}

.dc-ldrs--line-wobble::after,
.dc-ldrs--zoomies::after {
    background: linear-gradient(90deg, var(--dc-ldrs-color), var(--dc-ldrs-accent));
    transform: translateX(-95%);
}

.dc-ldrs--line-wobble::after {
    animation: dc-ldrs-line-wobble var(--dc-ldrs-speed) ease-in-out infinite;
}

.dc-ldrs--zoomies::after {
    animation: dc-ldrs-zoomies var(--dc-ldrs-speed) ease-in-out infinite;
}

@keyframes dc-ldrs-line-wobble {
    0%, 100% { transform: translateX(-95%); }
    50% { transform: translateX(95%); }
}

@keyframes dc-ldrs-zoomies {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .dc-ldrs--waveform .dc-ldrs__bar,
    .dc-ldrs--hourglass,
    .dc-ldrs--hourglass .dc-ldrs__half::after,
    .dc-ldrs--miyagi .dc-ldrs__line,
    .dc-ldrs--treadmill .dc-ldrs__cube,
    .dc-ldrs--treadmill .dc-ldrs__cube::after,
    .dc-ldrs--line-wobble::after,
    .dc-ldrs--zoomies::after {
        animation: none;
    }

    .dc-ldrs--waveform .dc-ldrs__bar:nth-child(2),
    .dc-ldrs--waveform .dc-ldrs__bar:nth-child(3) { transform: scaleY(0.7); }
    .dc-ldrs--miyagi .dc-ldrs__line:nth-child(2) { transform: rotate(30deg); }
    .dc-ldrs--miyagi .dc-ldrs__line:nth-child(3) { transform: rotate(60deg); }
    .dc-ldrs--miyagi .dc-ldrs__line:nth-child(4) { transform: rotate(90deg); }
    .dc-ldrs--miyagi .dc-ldrs__line:nth-child(5) { transform: rotate(120deg); }
    .dc-ldrs--miyagi .dc-ldrs__line:nth-child(6) { transform: rotate(150deg); }
    .dc-ldrs--line-wobble::after,
    .dc-ldrs--zoomies::after { transform: translateX(0); }
}