/* Animate the existing PNG without changing the brand artwork. */
.logo__Sec__main > a,
footer .footer__logo > a {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.logo__Sec__main > a::after,
footer .footer__logo > a::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: -25%;
    left: -70%;
    width: 45%;
    height: 150%;
    background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .7), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
}

.logo__Sec__main > a::after {
    animation: brand-shine 1s ease-in-out .8s backwards;
}

.site-logo,
.footer-site-logo {
    transform-origin: center;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

.site-logo {
    animation: brand-arrive .85s cubic-bezier(.16, 1, .3, 1) backwards;
}

.mobile-nav.active .mobile-nav-brand,
#order_pop.show .quote-brand-logo {
    animation: brand-arrive .65s cubic-bezier(.16, 1, .3, 1) .15s backwards;
}

@media (hover: hover) {
    .logo__Sec__main > a:hover .site-logo,
    footer .footer__logo > a:hover .footer-site-logo {
        transform: translateY(-2px) scale(1.035);
    }
    .logo__Sec__main > a:hover::after,
    footer .footer__logo > a:hover::after {
        animation: brand-shine-hover .8s ease-in-out;
    }
}

.logo__Sec__main > a:focus-visible,
footer .footer__logo > a:focus-visible {
    outline: 3px solid #0057b8;
    outline-offset: 4px;
}

@keyframes brand-arrive {
    from { opacity: 0; transform: translateY(12px) scale(.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes brand-shine {
    from { left: -70%; }
    to { left: 140%; }
}
@keyframes brand-shine-hover {
    from { left: -70%; }
    to { left: 140%; }
}

@media (prefers-reduced-motion: reduce) {
    .site-logo,
    .footer-site-logo,
    .mobile-nav.active .mobile-nav-brand,
    #order_pop.show .quote-brand-logo {
        animation: none;
        transition: none;
    }
    .logo__Sec__main > a::after,
    footer .footer__logo > a::after { display: none; }
    .logo__Sec__main > a:hover .site-logo,
    footer .footer__logo > a:hover .footer-site-logo { transform: none; }
}