/**
 * DigElite Tools — Frontend-Styles.
 *
 * v0.2.3 — 2026-07-09
 * Ergänzt Styles, die zum Tool-Verhalten gehören und NICHT im
 * WEB-Content-Plugin liegen sollen (weil das TOOL-Plugin
 * projektübergreifend einsetzbar sein muss).
 *
 * Aktuell: Loading-Animation für die Status-Seite. WEB rendert
 * das Markup `<div class="tool-status__loader"><span/><span/><span/>`,
 * die Puls-Animation kommt von hier.
 *
 * @package DigEliteTools
 */

.tool-status__loader {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 1.75rem 0 1rem;
    height: 20px;
}

.tool-status__loader > span {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a855f7 0%, #22d3ee 100%);
    opacity: 0.35;
    transform: scale(0.85);
    animation: dgt-pulse 1.4s ease-in-out infinite;
    will-change: transform, opacity;
}

.tool-status__loader > span:nth-child(2) { animation-delay: 0.18s; }
.tool-status__loader > span:nth-child(3) { animation-delay: 0.36s; }

@keyframes dgt-pulse {
    0%, 60%, 100% {
        opacity: 0.35;
        transform: scale(0.85);
    }
    30% {
        opacity: 1;
        transform: scale(1.2);
        box-shadow: 0 0 18px rgba(168, 85, 247, 0.55);
    }
}

/* Progress-Fortschritts-Balken unter den Dots — dezent, subtil,
   suggeriert Aktivität ohne konkreten Prozent-Wert. */
.tool-status__panel--loading {
    position: relative;
}

.tool-status__panel--loading::after {
    content: "";
    position: absolute;
    left: 15%;
    right: 15%;
    bottom: 1.25rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(168, 85, 247, 0.55) 25%,
        rgba(34, 211, 238, 0.55) 75%,
        transparent 100%
    );
    background-size: 220% 100%;
    background-position: 100% 0;
    opacity: 0.7;
    animation: dgt-progress-slide 2.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes dgt-progress-slide {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Motion-Preferences respektieren — Animationen für Nutzer
   mit prefers-reduced-motion deaktivieren. */
@media (prefers-reduced-motion: reduce) {
    .tool-status__loader > span,
    .tool-status__panel--loading::after {
        animation: none;
    }
    .tool-status__loader > span {
        opacity: 0.7;
        transform: none;
    }
}