/* Storefront V2 brand motion — shared by header and footer. */

.sf-header-v2__brand-copy strong,
.sf-footer-v2__brand-lockup strong {
    position: relative;
    display: inline-block;
    width: max-content;
    max-width: 100%;
    color: var(--brand-700) !important;
    background: linear-gradient(
        110deg,
        var(--brand-700) 0%,
        var(--brand-700) 34%,
        color-mix(in srgb, var(--brand-500) 70%, #ffffff) 48%,
        var(--brand-600) 60%,
        var(--brand-700) 100%
    );
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: sfBrandNameGlow 7.5s cubic-bezier(.4,0,.2,1) infinite;
}

.sf-footer-v2__brand-lockup strong {
    color: color-mix(in srgb, var(--brand-500) 88%, #ffffff) !important;
    background: linear-gradient(
        110deg,
        color-mix(in srgb, var(--brand-500) 88%, #ffffff) 0%,
        color-mix(in srgb, var(--brand-500) 88%, #ffffff) 34%,
        #ffffff 48%,
        color-mix(in srgb, var(--brand-100) 84%, #ffffff) 60%,
        color-mix(in srgb, var(--brand-500) 88%, #ffffff) 100%
    );
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sf-header-v2__brand-copy small {
    display: block;
    margin-top: .18rem;
    color: color-mix(in srgb, var(--brand-700) 58%, var(--muted-text)) !important;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 15rem;
    opacity: .9;
    transform-origin: right center;
    animation: sfBrandTaglineBreath 6s ease-in-out infinite;
}

.sf-header-v2__logo,
.sf-footer-v2__brand-lockup > span {
    position: relative;
    isolation: isolate;
}

.sf-header-v2__logo::after,
.sf-footer-v2__brand-lockup > span::after {
    content: "";
    position: absolute;
    inset: -35%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand-500) 16%, transparent), transparent 68%);
    opacity: 0;
    transform: scale(.72);
    transition: opacity .35s ease, transform .45s ease;
}

.sf-header-v2__logo img {
    animation: sfHeaderLogoFloat 6.8s ease-in-out infinite;
    transform-origin: 50% 58%;
}

.sf-header-v2__brand:hover .sf-header-v2__logo::after,
.sf-footer-v2__brand-lockup:hover > span::after {
    opacity: 1;
    transform: scale(1);
}

.sf-header-v2__brand:hover .sf-header-v2__brand-copy strong,
.sf-footer-v2__brand-lockup:hover strong {
    animation-duration: 2.1s;
}

.sf-footer-v2__brand-lockup > span {
    transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}

.sf-footer-v2__brand-lockup img {
    animation: sfFooterLogoDrift 7.2s ease-in-out infinite;
    transform-origin: center;
}

.sf-footer-v2__brand-lockup:hover > span {
    transform: translateY(-3px) rotate(-1.2deg);
    box-shadow: 0 18px 34px -22px rgba(0,0,0,.7);
}

.sf-footer-v2__brand-lockup:hover img {
    animation-duration: 2.4s;
}

@keyframes sfBrandNameGlow {
    0%, 28% { background-position: 100% 50%; }
    52% { background-position: 0% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes sfBrandTaglineBreath {
    0%, 100% { opacity: .72; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-1px); }
}

@keyframes sfHeaderLogoFloat {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
    50% { transform: translateY(-1.5px) rotate(.65deg) scale(1.015); }
}

@keyframes sfFooterLogoDrift {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-2px) rotate(.8deg); }
}

body[data-sf-motion="off"] .sf-header-v2__brand-copy strong,
body[data-sf-motion="off"] .sf-header-v2__brand-copy small,
body[data-sf-motion="off"] .sf-header-v2__logo img,
body[data-sf-motion="off"] .sf-footer-v2__brand-lockup strong,
body[data-sf-motion="off"] .sf-footer-v2__brand-lockup img {
    animation: none !important;
}

body[data-sf-motion="off"] .sf-header-v2__brand-copy strong {
    background: none;
    color: var(--brand-700) !important;
    -webkit-text-fill-color: var(--brand-700);
}

body[data-sf-motion="off"] .sf-footer-v2__brand-lockup strong {
    background: none;
    color: color-mix(in srgb, var(--brand-500) 88%, #ffffff) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--brand-500) 88%, #ffffff);
}

@media (prefers-reduced-motion: reduce) {
    .sf-header-v2__brand-copy strong,
    .sf-header-v2__brand-copy small,
    .sf-header-v2__logo img,
    .sf-footer-v2__brand-lockup strong,
    .sf-footer-v2__brand-lockup img {
        animation: none !important;
    }

    .sf-header-v2__brand-copy strong {
        background: none;
        color: var(--brand-700) !important;
        -webkit-text-fill-color: var(--brand-700);
    }

    .sf-footer-v2__brand-lockup strong {
        background: none;
        color: color-mix(in srgb, var(--brand-500) 88%, #ffffff) !important;
        -webkit-text-fill-color: color-mix(in srgb, var(--brand-500) 88%, #ffffff);
    }
}