/* Cały ekran, wyśrodkowanie animacji */
#pu-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Wrapper animacji */
.pu-anim-wrapper {
    position: relative;
}

/* Dodatkowy overlay (nad animacją) */
.pu-overlay2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* 1. Spinner */
.pu-css-loader.spinner {
    border: 6px solid rgba(0, 0, 0, 0.1);
    border-top: 6px solid var(--pu-loader-color, #3498db);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: pu-spin 1s linear infinite;
}

/* 2. Pulse */
.pu-css-loader.pulse {
    width: 50px;
    height: 50px;
    background: var(--pu-loader-color, #3498db);
    border-radius: 50%;
    animation: pu-pulse 1.5s ease-in-out infinite;
}

/* 3. Bounce */
.pu-css-loader.bounce {
    width: 50px;
    height: 50px;
    background: var(--pu-loader-color, #3498db);
    border-radius: 50%;
    animation: pu-bounce 2s infinite ease;
}

/* 4. Double‑Bounce */
.pu-css-loader.double-bounce {
    position: relative;
    width: 50px;
    height: 50px;
}
.pu-css-loader.double-bounce::before,
.pu-css-loader.double-bounce::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--pu-loader-color, #3498db);
    opacity: 0.6;
    animation: pu-double-bounce 2s infinite ease-in-out;
}
.pu-css-loader.double-bounce::after {
    animation-delay: -1s;
}

/* 5. Dots */
.pu-css-loader.dots {
    position: relative;
    width: 60px;
    height: 10px;
}
.pu-css-loader.dots::before,
.pu-css-loader.dots::after {
    content: "";
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    background: var(--pu-loader-color, #3498db);
    border-radius: 50%;
    animation: pu-dots 1.5s infinite ease-in-out;
}
.pu-css-loader.dots::before {
    left: 0;
    animation-delay: -0.3s;
}
.pu-css-loader.dots {
    animation-delay: -0.15s;
}
.pu-css-loader.dots::after {
    left: 25px;
    animation-delay: 0;
}

/* 6. Bars */
.pu-css-loader.bars {
    position: relative;
    width: 50px;
    height: 40px;
}
.pu-css-loader.bars::before,
.pu-css-loader.bars::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 10px;
    height: 100%;
    background: var(--pu-loader-color, #3498db);
    animation: pu-bars 1s infinite ease-in-out;
}
.pu-css-loader.bars::before {
    left: 0;
    animation-delay: -0.5s;
}
.pu-css-loader.bars {
    animation-delay: -0.25s;
}
.pu-css-loader.bars::after {
    left: 20px;
    animation-delay: 0;
}

/* 7. Circle of Dots */
.pu-css-loader.circle {
    position: relative;
    width: 60px;
    height: 60px;
}
.pu-css-loader.circle::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0;
    border: 6px dotted var(--pu-loader-color, #3498db);
    border-radius: 50%;
    animation: pu-spin 1.2s linear infinite;
}

/* 8. Ring */
.pu-css-loader.ring {
    width: 50px;
    height: 50px;
    border: 6px solid var(--pu-loader-color, #3498db);
    border-radius: 50%;
    box-shadow: inset 0 0 0 6px rgba(0, 0, 0, 0.1);
    animation: pu-ring 1.5s ease-in-out infinite;
}

/* 9. Triangle */
.pu-css-loader.triangle {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 50px solid var(--pu-loader-color, #3498db);
    animation: pu-triangle 1.5s linear infinite;
}

/* 10. Square‑Spin */
.pu-css-loader.square-spin {
    width: 40px;
    height: 40px;
    background: var(--pu-loader-color, #3498db);
    animation: pu-square-spin 3s infinite ease-in-out;
    transform-origin: center center;
}

/* 11. Wave */
.pu-css-loader.wave {
    position: relative;
    width: 60px;
    height: 10px;
    background: var(--pu-loader-color, #3498db);
    animation: pu-wave 1.2s infinite ease-in-out;
    box-shadow:
        15px 0 var(--pu-loader-color, #3498db),
        30px 0 var(--pu-loader-color, #3498db),
        45px 0 var(--pu-loader-color, #3498db);
}

/* 12. Ellipsis */
.pu-css-loader.ellipsis {
    position: relative;
    width: 10px;
    height: 10px;
    background: var(--pu-loader-color, #3498db);
    border-radius: 50%;
    box-shadow:
        15px 0 var(--pu-loader-color, #3498db),
        30px 0 var(--pu-loader-color, #3498db);
    animation: pu-ellipsis 1s infinite steps(4, end);
}

/* 13. Scale‑Out */
.pu-css-loader.scale-out {
    width: 40px;
    height: 40px;
    background: var(--pu-loader-color, #3498db);
    border-radius: 50%;
    animation: pu-scale-out 1s ease-in-out infinite;
}

/* 14. Heart‑Beat */
.pu-css-loader.heart-beat {
    position: relative;
    width: 50px;
    height: 50px;
    background: var(--pu-loader-color, #3498db);
    transform: rotate(45deg);
    animation: pu-heart-beat 1s infinite ease-in-out;
}
.pu-css-loader.heart-beat::before,
.pu-css-loader.heart-beat::after {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    background: var(--pu-loader-color, #3498db);
    border-radius: 50%;
}
.pu-css-loader.heart-beat::before {
    top: -25px;
    left: 0;
}
.pu-css-loader.heart-beat::after {
    top: 0;
    left: -25px;
}

/* 15. Flash */
.pu-css-loader.flash {
    width: 40px;
    height: 40px;
    background: var(--pu-loader-color, #3498db);
    animation: pu-flash 1s infinite ease-in-out;
}

/* Keyframes */
@keyframes pu-spin {
    100% {
        transform: rotate(360deg);
    }
}
@keyframes pu-pulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
}
@keyframes pu-bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}
@keyframes pu-double-bounce {
    0%,
    100% {
        transform: scale(0);
    }
    50% {
        transform: scale(1);
    }
}
@keyframes pu-dots {
    0%,
    80%,
    100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}
@keyframes pu-bars {
    0%,
    40%,
    100% {
        transform: scaleY(0.4);
    }
    20% {
        transform: scaleY(1);
    }
}
@keyframes pu-ring {
    0% {
        transform: scale(0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: inset 0 0 0 1px rgba(52, 152, 219, 0);
    }
    100% {
        transform: scale(0.7);
    }
}
@keyframes pu-triangle {
    0% {
        transform: rotate(0);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes pu-square-spin;