/* ==========================================================
   Druksales - loading screen
   A 40% transparent dark layer (the page shows through 40%)
   with the logo in the centre and two glowing rings turning
   in opposite directions. Only shown when JavaScript runs.
   ========================================================== */
:root {
    --ds-loader-bg: rgba(30, 8, 6, .60);      /* 40% transparent: change .60 to taste */
    --ds-loader-outer: #FFC93C;
    --ds-loader-inner: #FF6A1F;
}
.ds-preloader { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center;
    background: var(--ds-loader-bg); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
html.ds-js .ds-preloader { display: flex; }
.ds-preloader.is-active { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; }

.ds-loader { position: relative; width: 180px; height: 180px; }
.ds-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ds-track { fill: none; stroke: rgba(255, 255, 255, .10); stroke-width: 3; }
.ds-arc { fill: none; stroke-width: 4; stroke-linecap: round; }

/* outer ring turns clockwise, inner ring anticlockwise */
.ds-ring-outer { animation: ds-spin 1.6s linear infinite; }
.ds-ring-inner { animation: ds-spin-back 1.15s linear infinite; }
.ds-loader-logo { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; transform: translate(-50%, -50%);
    filter: drop-shadow(0 4px 14px rgba(255, 140, 30, .45)); animation: ds-breathe 1.6s ease-in-out infinite; }

@keyframes ds-spin { to { transform: rotate(360deg); } }
@keyframes ds-spin-back { to { transform: rotate(-360deg); } }
@keyframes ds-breathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.06); } }

@media (prefers-reduced-motion: reduce) {
    .ds-ring-outer { animation-duration: 4s; }
    .ds-ring-inner { animation-duration: 3s; }
    .ds-loader-logo { animation: none; }
}