/* Categoria Lampeggiante — effetti sul bordo per voci del widget Categorie */

/* Base: contenitore per posizionamento degli effetti */
.ipo-cat-lampeggiante {
    position: relative;
    border-radius: 4px;
}

/* L'<a> interno deve stare sopra eventuali pseudo-element di sfondo */
.ipo-cat-lampeggiante > a {
    position: relative;
    z-index: 1;
}

/* ─────────────────────────────────────────────
   EFFETTO 1 — Bordo lampeggiante (pulsazione)
   ───────────────────────────────────────────── */
.ipo-effect-border-blink {
    box-shadow: 0 0 0 var(--ipo-thick, 2px) transparent;
    animation: ipo-border-blink 1.4s ease-in-out infinite;
}

@keyframes ipo-border-blink {
    0%, 100% {
        box-shadow: 0 0 0 var(--ipo-thick, 2px) transparent;
    }
    50% {
        box-shadow: 0 0 0 var(--ipo-thick, 2px) var(--ipo-blink, #ffeb3b),
                    0 0 8px 0 var(--ipo-blink, #ffeb3b);
    }
}

/* ─────────────────────────────────────────────
   EFFETTO 2 — Snake (luce che scorre sul bordo)
   ───────────────────────────────────────────── */
@property --ipo-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.ipo-effect-snake {
    isolation: isolate;
}

.ipo-effect-snake::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--ipo-thick, 2px));
    border-radius: 6px;
    padding: var(--ipo-thick, 2px);
    background: conic-gradient(
        from var(--ipo-angle, 0deg),
        transparent 0deg,
        transparent 270deg,
        var(--ipo-blink, #ffeb3b) 330deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box,
                  linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box,
                  linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
    animation: ipo-snake-rotate 2.4s linear infinite;
}

@keyframes ipo-snake-rotate {
    to { --ipo-angle: 360deg; }
}

/* Fallback per browser senza @property: bordo statico colorato */
@supports not (background: paint(something)) {
    @supports not ((--a: 0deg)) {
        .ipo-effect-snake::before {
            background: none;
            box-shadow: 0 0 0 var(--ipo-thick, 2px) var(--ipo-blink, #ffeb3b);
            animation: none;
        }
    }
}

/* ─────────────────────────────────────────────
   Accessibilita: disattiva animazioni
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ipo-effect-border-blink {
        animation: none;
        box-shadow: 0 0 0 var(--ipo-thick, 2px) var(--ipo-blink, #ffeb3b);
    }
    .ipo-effect-snake::before {
        animation: none;
    }
}