/* Logo glitch (nav): pulso suave cada ~3s; hover = cortocircuito intenso. */

@keyframes nabilia-glitch-auto-cut {
    0% {
        transform: translate(0) skewX(0deg);
        filter: drop-shadow(0 0 0 transparent);
        opacity: 1;
    }
    2% {
        transform: translate(-4px, 1px) skewX(20deg);
        filter: drop-shadow(4px 0 0 #ff0040) drop-shadow(-4px 0 0 #00e5ff);
    }
    4% {
        transform: translate(4px, -1px) skewX(-20deg);
        filter: drop-shadow(-4px 0 0 #ff0040) drop-shadow(4px 0 0 #00e5ff);
    }
    5% {
        transform: translate(0) skewX(0deg);
        filter: drop-shadow(0 0 0 transparent);
    }
    100% {
        transform: translate(0);
    }
}

@keyframes nabilia-glitch-hover {
    0%,
    100% {
        transform: translate(0) skewX(0deg);
        filter: drop-shadow(0 0 0 transparent);
    }
    10% {
        transform: translate(-8px, 2px) skewX(24deg);
        filter: drop-shadow(6px 0 0 #ff0040) drop-shadow(-6px 0 0 #00e5ff);
    }
    20% {
        transform: translate(7px, -2px) skewX(-22deg);
        filter: drop-shadow(-5px 0 0 #ff0040) drop-shadow(5px 0 0 #00e5ff);
    }
    30% {
        transform: translate(-5px, -1px) skewX(18deg);
        filter: drop-shadow(4px 0 0 #ff0040) drop-shadow(-4px 0 0 #00e5ff);
    }
    40% {
        transform: translate(6px, 1px) skewX(-26deg);
        filter: drop-shadow(-6px 0 0 #ff0040) drop-shadow(6px 0 0 #00e5ff);
    }
    50% {
        transform: translate(-7px, 0) skewX(20deg);
        filter: drop-shadow(5px 0 0 #ff0040) drop-shadow(-5px 0 0 #00e5ff);
    }
    60% {
        transform: translate(4px, 2px) skewX(-16deg);
        filter: drop-shadow(-4px 0 0 #ff0040) drop-shadow(4px 0 0 #00e5ff);
    }
    70% {
        transform: translate(-3px, -2px) skewX(14deg);
        filter: drop-shadow(3px 0 0 #ff0040) drop-shadow(-3px 0 0 #00e5ff);
    }
    80% {
        transform: translate(5px, 0) skewX(-20deg);
        filter: drop-shadow(-5px 0 0 #ff0040) drop-shadow(5px 0 0 #00e5ff);
    }
    90% {
        transform: translate(-2px, 1px) skewX(12deg);
        filter: drop-shadow(3px 0 0 #ff0040) drop-shadow(-3px 0 0 #00e5ff);
    }
}

.brand-logo-pair--glitch {
    display: inline-flex;
}

.brand-logo-pair--glitch .brand-logo {
    transition: none;
    transform: translateZ(0);
    will-change: transform, filter;
}

html:not(.dark) .brand-logo-pair--glitch .brand-logo--light,
html.dark .brand-logo-pair--glitch .brand-logo--dark {
    animation: nabilia-glitch-auto-cut 3s infinite;
}

html:not(.dark) .brand-logo-pair--glitch:hover .brand-logo--light,
html.dark .brand-logo-pair--glitch:hover .brand-logo--dark,
html:not(.dark) .brand-logo-pair--glitch:focus-visible .brand-logo--light,
html.dark .brand-logo-pair--glitch:focus-visible .brand-logo--dark,
.glass-nav a:hover .brand-logo-pair--glitch .brand-logo--light,
.glass-nav a:hover .brand-logo-pair--glitch .brand-logo--dark {
    animation: nabilia-glitch-hover 0.22s infinite linear;
    animation-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
    .brand-logo-pair--glitch .brand-logo {
        animation: none !important;
        will-change: auto;
    }
}