/* loading-screen.css
   Full-screen branded loading overlay ("Signing you in..."). Built by assets/js/shared/login-loading.js,
   which adds the element and toggles .is-on. Used by auth/login.php. Reusable: any page can load both files.
   Four looks, chosen with data-style on the script tag:  progress | bars | wave | grid   (none of them is a round spinner)
   z-index 3000 sits above the header (1000), toasts (2000) and the top loading bar (2100). */

.pd-loader {
    position: fixed; inset: 0; z-index: 3000;
    display: grid; place-items: center;
    font-family: 'Poppins', system-ui, sans-serif;
    background: radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .95) 0, rgba(255, 244, 244, .92) 38%, rgba(255, 214, 216, .96) 100%);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
}
.pd-loader.is-on { opacity: 1; visibility: visible; transition: opacity .3s ease; }
body.pd-loader-lock { overflow: hidden; }

/* soft red blobs drifting in the background */
.pd-loader::before, .pd-loader::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .45; pointer-events: none; }
.pd-loader::before { width: 340px; height: 340px; left: -90px; bottom: -110px; background: #d0141c; animation: pdDrift 7s ease-in-out infinite alternate; }
.pd-loader::after  { width: 280px; height: 280px; right: -80px; top: -90px;  background: #ff7a7f; animation: pdDrift 8s ease-in-out infinite alternate-reverse; }

/* the white card in the middle */
.pd-loader__card {
    position: relative; z-index: 1; box-sizing: border-box;
    width: min(88vw, 380px); padding: 30px 30px 26px;
    display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center;
    background: #fff; border-radius: 22px;
    box-shadow: 0 24px 60px rgba(208, 20, 28, .18), 0 2px 6px rgba(0, 0, 0, .05);
    transform: translateY(14px) scale(.97); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.pd-loader.is-on .pd-loader__card { transform: none; }
.pd-loader__title { margin: 0; font-size: 1.2rem; font-weight: 600; color: #1f2937; letter-spacing: .01em; }
.pd-loader__msg { margin: -8px 0 0; min-height: 1.3em; font-size: .88rem; color: #6b7280; transition: opacity .25s ease; }
.pd-loader__msg.is-swapping { opacity: 0; }

/* ---------- style: progress (a filling bar and a checklist) ---------- */
.pd-progress { width: 100%; display: flex; flex-direction: column; gap: 18px; }
.pd-progress__track { height: 9px; border-radius: 999px; overflow: hidden; background: rgba(208, 20, 28, .12); }
.pd-progress__fill {
    height: 100%; width: 6%; border-radius: 999px;
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .3) 0 10px, rgba(255, 255, 255, 0) 10px 20px),
        linear-gradient(90deg, #ff8a8e, #d0141c);
    background-size: 28px 28px, 100% 100%;
    animation: pdFill 14s cubic-bezier(.12, .7, .25, 1) forwards, pdStripes .8s linear infinite;
}
.pd-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; text-align: left; }
.pd-steps li { display: flex; align-items: center; gap: 12px; font-size: .92rem; color: #9ca3af; transition: color .3s ease; }
.pd-steps__mark {
    flex: none; position: relative; width: 20px; height: 20px; box-sizing: border-box; border-radius: 6px;
    border: 2px solid #f1d0d1; background: #fff; transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.pd-steps li.is-active { color: #1f2937; font-weight: 500; }
.pd-steps li.is-active .pd-steps__mark { border-color: #d0141c; animation: pdBlink 1s ease-in-out infinite; }
.pd-steps li.is-done { color: #4b5563; }
.pd-steps li.is-done .pd-steps__mark { background: #d0141c; border-color: #d0141c; animation: pdPop .3s ease; }
.pd-steps li.is-done .pd-steps__mark::after {
    content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ---------- style: bars (an equalizer) ---------- */
.pd-bars { display: flex; align-items: flex-end; gap: 7px; height: 52px; }
.pd-bars span {
    width: 9px; height: 100%; border-radius: 5px; transform-origin: bottom;
    background: linear-gradient(#ff8a8e, #d0141c);
    animation: pdBars 1s ease-in-out infinite; animation-delay: calc(var(--i) * .12s);
}

/* ---------- style: wave (diamonds that hop one after another) ---------- */
.pd-wave { display: flex; align-items: center; gap: 14px; height: 52px; }
.pd-wave span {
    width: 13px; height: 13px; border-radius: 3px; background: linear-gradient(135deg, #ff8a8e, #d0141c);
    animation: pdHop 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * .1s);
}

/* ---------- style: grid (a 3x3 wave of tiles) ---------- */
.pd-grid { display: grid; grid-template-columns: repeat(3, 15px); gap: 7px; }
.pd-grid span {
    width: 15px; height: 15px; border-radius: 4px; background: #d0141c;
    animation: pdTile 1.4s ease-in-out infinite; animation-delay: calc(var(--i) * .11s);
}

@keyframes pdFill    { from { width: 6%; } to { width: 94%; } }
@keyframes pdStripes { to { background-position: 28px 0, 0 0; } }
@keyframes pdBlink   { 0%, 100% { box-shadow: 0 0 0 0 rgba(208, 20, 28, .35); } 50% { box-shadow: 0 0 0 5px rgba(208, 20, 28, 0); } }
@keyframes pdPop     { 0% { transform: scale(.7); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes pdBars    { 0%, 100% { transform: scaleY(.22); opacity: .6; } 50% { transform: scaleY(1); opacity: 1; } }
@keyframes pdHop     { 0%, 60%, 100% { transform: translateY(0) rotate(45deg); opacity: .5; } 30% { transform: translateY(-16px) rotate(135deg); opacity: 1; } }
@keyframes pdTile    { 0%, 100% { transform: scale(.35); opacity: .3; } 50% { transform: scale(1); opacity: 1; } }
@keyframes pdDrift   { from { transform: translate(0, 0); } to { transform: translate(36px, -28px); } }

/* People who asked their device for less motion get a calm, still version */
@media (prefers-reduced-motion: reduce) {
    .pd-loader, .pd-loader.is-on, .pd-loader__card, .pd-loader.is-on .pd-loader__card { transition: none; transform: none; }
    .pd-loader::before, .pd-loader::after, .pd-progress__fill, .pd-steps li.is-active .pd-steps__mark,
    .pd-steps li.is-done .pd-steps__mark, .pd-bars span, .pd-wave span, .pd-grid span { animation: none; }
    .pd-progress__fill { width: 60%; }
    .pd-bars span { transform: scaleY(.7); } .pd-wave span { transform: rotate(45deg); }
    .pd-loader__msg, .pd-steps li { transition: none; }
}