/*
 * Newton's Cradle loader
 * Plain-CSS port of the styled-components <Loader /> component.
 *
 * Usage:
 *   <div class="newtons-cradle">
 *     <div class="newtons-cradle__dot"></div>
 *     <div class="newtons-cradle__dot"></div>
 *     <div class="newtons-cradle__dot"></div>
 *     <div class="newtons-cradle__dot"></div>
 *   </div>
 *
 * Optional size variants: .newtons-cradle--sm | --md | --lg | --xl
 * Per-instance overrides via CSS vars on the root element:
 *   --uib-size   (default: 50px)
 *   --uib-speed  (default: 0.65s)
 *   --uib-color  (default: var(--primary-color))
 */

.newtons-cradle {
    --uib-size: 50px;
    --uib-speed: 0.65s;
    --uib-color: var(--primary-color, #3b82f6);

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--uib-size);
    height: var(--uib-size);
}

.newtons-cradle--sm { --uib-size: 28px; }
.newtons-cradle--md { --uib-size: 50px; }
.newtons-cradle--lg { --uib-size: 72px; }
.newtons-cradle--xl { --uib-size: 96px; }

.newtons-cradle__dot {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    width: 25%;
    transform-origin: center top;
}

.newtons-cradle__dot::after {
    content: '';
    display: block;
    width: 100%;
    height: 25%;
    border-radius: 50%;
    background-color: var(--uib-color);
    /* Fallback if color-mix is unavailable */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 10px color-mix(in srgb, var(--uib-color) 50%, transparent);
}

/* Longhand + name: avoids var() inside animation shorthand issues in older WebKit */
.newtons-cradle__dot:first-child {
    animation-name: newtons-cradle-swing-left;
    animation-duration: var(--uib-speed, 0.65s);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
    animation-iteration-count: infinite;
    animation-fill-mode: none;
}

.newtons-cradle__dot:last-child {
    animation-name: newtons-cradle-swing-right;
    animation-duration: var(--uib-speed, 0.65s);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
    animation-iteration-count: infinite;
    animation-fill-mode: none;
}

/*
 * Explicit 0%/100% + no animation-* inside blocks: max browser support.
 * Easing is handled on the animation shorthand above (approximates the original segmented timing).
 */
@keyframes newtons-cradle-swing-left {
    0% {
        transform: rotate(0deg) translateZ(0);
    }
    25% {
        transform: rotate(70deg) translateZ(0);
    }
    50% {
        transform: rotate(0deg) translateZ(0);
    }
    100% {
        transform: rotate(0deg) translateZ(0);
    }
}

@keyframes newtons-cradle-swing-right {
    0% {
        transform: rotate(0deg) translateZ(0);
    }
    50% {
        transform: rotate(0deg) translateZ(0);
    }
    75% {
        transform: rotate(-70deg) translateZ(0);
    }
    100% {
        transform: rotate(0deg) translateZ(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .newtons-cradle__dot:first-child,
    .newtons-cradle__dot:last-child {
        animation-duration: 1.75s;
    }
}