/*
 * Phishingacik – indikátor analýzy: točiaci sa kruh na pulzujúcom (fade) pozadí.
 *
 * Markup:
 * <div class="phishing-spinner" role="status">
 *   <span class="phishing-spinner__ring" aria-hidden="true"></span>
 *   <p>…</p>
 * </div>
 */

.phishing-spinner {
    align-items: center;
    display: flex;
    gap: 1.25rem;
    justify-content: center;
}

.phishing-spinner[hidden] {
    display: none;
}

/* pozadie pod kruhom plynulo zosvetlieva a stmavuje */
.phishing-spinner__ring {
    animation: phishing-spinner-fade 1.6s ease-in-out infinite;
    background-color: var(--color-background-accent, #ffe6d5);
    border-radius: 50%;
    flex: 0 0 auto;
    height: 3.5rem;
    position: relative;
    width: 3.5rem;
}

.phishing-spinner__ring::before {
    animation: phishing-spinner-rotate 0.9s linear infinite;
    border: 0.3125rem solid transparent;
    border-radius: 50%;
    border-top-color: var(--color-border-accent, #ff7900);
    content: "";
    inset: 0;
    position: absolute;
}

@keyframes phishing-spinner-rotate {
    to { transform: rotate(360deg); }
}

@keyframes phishing-spinner-fade {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .phishing-spinner__ring,
    .phishing-spinner__ring::before {
        animation-duration: 3s;
    }
}