/* Preloaders of the DHLMS Theme (Admin > Themes > Preloader). Colours: --pl-color (default the accent) and --pl-bg (default the page). */
.tpl-preloader {
    --pl-color: var(--dh-accent, var(--base-color));
    --pl-bg: var(--dh-bg, white);
    align-items: center; background: var(--pl-bg); display: flex; flex-direction: column; gap: 20px; inset: 0; justify-content: center;
    position: fixed; transition: opacity .3s ease, visibility .3s ease; z-index: 9999;
}
.tpl-preloader.is-done { opacity: 0; visibility: hidden; }
.tpl-preloader__logo { max-height: 40px; max-width: 160px; }
.tpl-preloader--line { background: transparent; height: 2px; inset: 0 0 auto 0; pointer-events: none; }
.tpl-preloader--line .tpl-preloader__logo { display: none; }

.pl-line { background: color-mix(in srgb, var(--pl-color) 14%, transparent); height: 2px; overflow: hidden; width: 100%; }
.pl-line span { animation: pl-line 1s infinite cubic-bezier(.65, 0, .35, 1); background: var(--pl-color); display: block; height: 100%; width: 35%; }
@keyframes pl-line { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }

.pl-ring { animation: pl-spin .7s linear infinite; border: 2px solid color-mix(in srgb, var(--pl-color) 16%, transparent); border-radius: 50%; border-top-color: var(--pl-color); height: 34px; width: 34px; }
@keyframes pl-spin { to { transform: rotate(360deg); } }

.pl-dots { display: flex; gap: 7px; }
.pl-dots span { animation: pl-dot 1s infinite ease-in-out; background: var(--pl-color); border-radius: 50%; height: 8px; width: 8px; }
.pl-dots span:nth-child(2) { animation-delay: .12s; }
.pl-dots span:nth-child(3) { animation-delay: .24s; }
@keyframes pl-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-5px); } }

.pl-logo { animation: pl-breathe 1.4s infinite ease-in-out; background: var(--pl-color); border-radius: 12px; height: 34px; width: 34px; }
.tpl-preloader:has(.tpl-preloader__logo) .pl-logo { display: none; }
.tpl-preloader:has(.pl-logo) .tpl-preloader__logo { animation: pl-breathe 1.4s infinite ease-in-out; }
@keyframes pl-breathe { 0%, 100% { opacity: .45; transform: scale(.96); } 50% { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) { .pl-line span, .pl-ring, .pl-dots span, .pl-logo, .tpl-preloader__logo { animation-duration: 2.4s; } }