/* Ring-free copper nameplate; only the header knight rocks in perspective. */
.cs-brand { display: inline-block; vertical-align: middle; line-height: 0; }
.cs-brand img { display: block; width: auto; height: 64px; object-fit: contain; }
.cs-brand-layered { position: relative; width: 151.2px; height: 70px; perspective: 240px; transform-origin: center; transition: transform .3s ease; }
.cs-brand-layered img { max-width: none; }
.cs-brand-layered .cs-brand-plate,
.cs-storefront .brand-logo .cs-brand-layered .cs-brand-plate {
    position: absolute; left: 0; top: 36%; width: 100%; height: 44%; object-fit: fill;
}
.cs-brand-knight { position: absolute; left: 35.5%; top: 0; width: 29%; height: 96%; transform-style: preserve-3d; transform-origin: 50% 65%; }
.cs-brand-knight img,
.cs-storefront .brand-logo .cs-brand-knight img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
}
.cs-brand-face { transform: translateZ(3.5px); backface-visibility: hidden; }
.cs-brand-back { transform: rotateY(180deg) translateZ(3.5px); backface-visibility: hidden; }
.cs-brand-depth { transform: translateZ(calc(var(--depth) * 1px)); filter: brightness(.65); }
.cs-brand-animated:hover .cs-brand-knight,
 a:focus-visible > .cs-brand-animated .cs-brand-knight { animation: cs-brand-knight-rock 1.8s cubic-bezier(.4,0,.2,1); }
.cs-storefront .dark-footer .cs-brand-layered { width: 216px; height: 100px; }
.fi-logo .cs-brand-layered { width: 138.24px; height: 64px; }
@keyframes cs-brand-knight-rock {
    0%, 100% { transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) rotateZ(0); }
    25% { transform: translate3d(-2%, -6%, 8px) rotateX(8deg) rotateY(-28deg) rotateZ(-2deg); }
    62% { transform: translate3d(2%, -6%, 8px) rotateX(-5deg) rotateY(28deg) rotateZ(2deg); }
    84% { transform: translate3d(0, -2%, 3px) rotateX(2deg) rotateY(-8deg); }
}
.cs-storefront.cs-scrolled header.header-style-5 .brand-logo .cs-brand-layered { transform: scale(.8); margin-block: -4px; }
.cs-storefront .dark-footer .cs-brand-static img { width: 216px; height: 100px; }
@media (max-width: 575px) { .cs-storefront .brand-logo .cs-brand-layered { width: 129.6px; height: 60px; } }
@media (prefers-reduced-motion: reduce) {
    .cs-brand-animated:hover .cs-brand-knight,
    a:focus-visible > .cs-brand-animated .cs-brand-knight { animation: none; }
    .cs-brand-layered { transition: none; }
}

/* Light crosses the copper plate behind the stationary footer knight. */
.cs-brand-glint { position: absolute; left: 0; top: 36%; width: 100%; height: 44%;
    mask: url('../images/brand/plate.webp') center / 100% 100% no-repeat; overflow: hidden; pointer-events: none; }
.cs-brand-glint::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, #fff4ce99 49%, transparent 63%);
    transform: translateX(-120%); animation: cs-plate-shine 6s ease-in-out 1s infinite; }
@keyframes cs-plate-shine { 0%, 65% { transform: translateX(-120%); } 95%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .cs-brand-glint::after { animation: none; display: none; } }