/*
 * Shared FUUVO brand interaction.
 * The logo artwork stays unchanged until the pointer enters its brand slot.
 */
.fuuvo-logo-motion {
    position: relative;
    isolation: isolate;
    overflow: visible;
    transform-origin: 32% 62%;
    transition: transform 260ms cubic-bezier(.2, .8, .2, 1);
}

/* The home rail uses the supplied transparent red/white animation as a
 * complete hover state. Keeping it in a second image preserves the existing
 * light/dark static wordmark and restarts the GIF on each pointer entry. */
@media (hover: hover) and (pointer: fine) {
    html body.chat-landing[data-mode="chat"]
    nav[data-fuuvo-workspace-rail="1"] .home-rail-logo.is-english {
        isolation: isolate !important;
    }

    html body.chat-landing[data-mode="chat"]
    nav[data-fuuvo-workspace-rail="1"] .home-rail-logo.is-english::before,
    html body.chat-landing[data-mode="chat"]
    nav[data-fuuvo-workspace-rail="1"] .home-rail-logo.is-english::after {
        display: none !important;
        content: none !important;
    }

    html body.chat-landing[data-mode="chat"]
    nav[data-fuuvo-workspace-rail="1"] .home-rail-logo-wordmark-hover {
        display: none !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 50px !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        filter: contrast(1.08) saturate(1.04)
            drop-shadow(0 1px 1px rgba(32, 42, 56, .2)) !important;
        transform: translate(-50%, -50%) !important;
        animation: none !important;
    }

    html body.chat-landing[data-mode="chat"]
    nav[data-fuuvo-workspace-rail="1"] .home-rail-logo.is-english:is(:hover, :focus-visible)
    .home-rail-logo-wordmark-static {
        opacity: 0 !important;
        visibility: hidden !important;
        animation: none !important;
    }

    html body.chat-landing[data-mode="chat"]
    nav[data-fuuvo-workspace-rail="1"] .home-rail-logo.is-english:is(:hover, :focus-visible)
    .home-rail-logo-wordmark-hover {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body.chat-landing[data-mode="chat"]
    nav[data-fuuvo-workspace-rail="1"] .home-rail-logo.is-english:is(:hover, :focus-visible)
    .home-rail-logo-wordmark-hover {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    html body.chat-landing[data-mode="chat"]
    nav[data-fuuvo-workspace-rail="1"] .home-rail-logo.is-english:is(:hover, :focus-visible)
    .home-rail-logo-wordmark-static {
        opacity: 1 !important;
        visibility: visible !important;
        animation: none !important;
    }
}

/* The current home Logo is supplied as a transparent static mark plus a
 * lazy-loaded transparent GIF. Keep the slot dimensions fixed so swapping
 * layers never moves the surrounding rail or sidebar. */
@media (hover: hover) and (pointer: fine) {
    html body.chat-landing[data-mode="chat"]
    nav[data-fuuvo-workspace-rail="1"] .home-rail-logo.is-fuuvo-v2 {
        transform: none !important;
    }

    html body.chat-landing[data-mode="chat"]
    nav[data-fuuvo-workspace-rail="1"] .home-rail-logo.is-fuuvo-v2::before,
    html body.chat-landing[data-mode="chat"]
    nav[data-fuuvo-workspace-rail="1"] .home-rail-logo.is-fuuvo-v2::after {
        display: none !important;
        content: none !important;
    }

    html body.chat-landing[data-mode="chat"]
    nav[data-fuuvo-workspace-rail="1"] .home-rail-logo.is-fuuvo-v2
    .home-rail-logo-wordmark {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 50px !important;
        height: 27px !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center !important;
        transform: translate(-50%, -50%) !important;
        animation: none !important;
        transition: opacity 120ms ease, visibility 120ms ease !important;
        pointer-events: none !important;
    }

    html body.chat-landing[data-mode="chat"]
    nav[data-fuuvo-workspace-rail="1"] .home-rail-logo.is-fuuvo-v2
    .home-rail-logo-wordmark-static {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

    html body.chat-landing[data-mode="chat"]
    nav[data-fuuvo-workspace-rail="1"] .home-rail-logo.is-fuuvo-v2
    .home-rail-logo-wordmark-hover {
        display: block !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    html body.chat-landing[data-mode="chat"]
    nav[data-fuuvo-workspace-rail="1"] .home-rail-logo.is-fuuvo-v2.is-fuuvo-video-playing
    .home-rail-logo-wordmark-static {
        visibility: hidden !important;
        opacity: 0 !important;
    }

    html body.chat-landing[data-mode="chat"]
    nav[data-fuuvo-workspace-rail="1"] .home-rail-logo.is-fuuvo-v2.is-fuuvo-video-playing
    .home-rail-logo-wordmark-hover {
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body.chat-landing[data-mode="chat"]
    nav[data-fuuvo-workspace-rail="1"] .home-rail-logo.is-fuuvo-v2.is-fuuvo-video-playing
    .home-rail-logo-wordmark-static {
        visibility: visible !important;
        opacity: 1 !important;
    }

    html body.chat-landing[data-mode="chat"]
    nav[data-fuuvo-workspace-rail="1"] .home-rail-logo.is-fuuvo-v2.is-fuuvo-video-playing
    .home-rail-logo-wordmark-hover {
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

.fuuvo-logo-motion::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: -22% -10%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(
        112deg,
        transparent 30%,
        rgba(255, 255, 255, .08) 39%,
        rgba(255, 244, 221, .95) 48%,
        rgba(246, 72, 42, .82) 54%,
        rgba(255, 255, 255, .1) 63%,
        transparent 73%
    );
    filter: blur(4px);
    transform: translateX(-125%) skewX(-18deg);
}

.fuuvo-logo-motion::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: 14%;
    left: 4%;
    width: 11px;
    height: 11px;
    pointer-events: none;
    opacity: 0;
    border: 2px solid #f04b36;
    border-radius: 50%;
    box-shadow:
        14px 2px 0 -4px #f04b36,
        2px 14px 0 -4px #f04b36,
        8px 8px 0 -4px #ff9a4d;
    transform: scale(.35) rotate(-18deg);
}

.fuuvo-logo-motion > img,
.fuuvo-logo-motion > .brand-logo,
.fuuvo-logo-motion > .auth-brand-logo,
.fuuvo-logo-motion > .home-living-brand,
.fuuvo-logo-motion > .brand-head,
.fuuvo-logo-motion > .brand-icon,
.fuuvo-logo-motion > .brand-icon-fallback,
.fuuvo-logo-motion > .topbar-brand-mark,
.fuuvo-logo-motion > .site-icon-fallback,
.fuuvo-logo-motion > .composer-text-logo {
    position: relative;
    z-index: 1;
}

/* Image replacement boxes expose alt text and a border while a logo is still
 * waiting for its first frame. Keep the reserved slot, then let the shared
 * loader reveal only a successfully decoded image. */
html.fuuvo-logo-guard :is(
    .fuuvo-logo-motion img,
    img[data-fuuvo-mobile-brand],
    .mhub-brand > img,
    .fuuvo-mobile-prototype-home-brand > img,
    .fuuvo-mobile-composer-wordmark img,
    .fuuvo-mobile-prototype-drawer-brand img,
    .mobile-chat-logo img,
    .auth-mobile-logo img,
    .maudio-app .brand > img,
    .creation-app .brand > img,
    .mwriting-brand > img,
    .gl-brand > img,
    .keyboard-brand,
    .mini-brand,
    [class$="-top-brand"] > img
):not([data-fuuvo-logo-ready]) {
    visibility: hidden !important;
    opacity: 0 !important;
    border: 0 !important;
    font-size: 0 !important;
    color: transparent !important;
    clip-path: inset(50%) !important;
}

.fuuvo-logo-motion:is(:hover, :focus-visible) {
    transform: translateY(-1px) scale(1.035) rotate(-.55deg);
}

.fuuvo-logo-motion:is(:hover, :focus-visible)::before {
    animation: fuuvo-logo-sheen 820ms cubic-bezier(.2, .7, .2, 1) both;
}

.fuuvo-logo-motion:is(:hover, :focus-visible)::after {
    animation: fuuvo-logo-spark 760ms cubic-bezier(.2, .8, .2, 1) both;
}

.fuuvo-logo-motion:is(:hover, :focus-visible) img,
.fuuvo-logo-motion:is(:hover, :focus-visible) .home-brand-letter > span {
    animation: fuuvo-logo-color-surge 920ms cubic-bezier(.2, .8, .2, 1) both;
}

.fuuvo-logo-motion:is(img):is(:hover, :focus-visible) {
    transform: translateY(-1px) scale(1.035) rotate(-.55deg);
    animation: fuuvo-logo-color-surge 920ms cubic-bezier(.2, .8, .2, 1) both;
}

img.fuuvo-logo-motion {
    transform-origin: 32% 62%;
    transition: transform 260ms cubic-bezier(.2, .8, .2, 1);
}

.fuuvo-logo-motion:is(:hover, :focus-visible) .brand-wordmark,
.fuuvo-logo-motion:is(:hover, :focus-visible) .home-living-brand,
.fuuvo-logo-motion:is(:hover, :focus-visible) .auth-brand-en-word,
.fuuvo-logo-motion:is(:hover, :focus-visible).kc-brand > span {
    animation: fuuvo-logo-text-surge 920ms cubic-bezier(.2, .8, .2, 1) both;
}

/* The landing composer uses a text wordmark so the red/white split remains
 * crisp at small sizes and can animate without replacing the logo asset. */
.composer-title-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.composer-text-logo {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: baseline;
    height: 1em;
    color: transparent;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .96em;
    font-weight: 900;
    letter-spacing: -.085em;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(104, 104, 104, .18);
    transform-origin: 18% 65%;
}

.composer-logo-letter {
    display: inline-block;
    color: transparent;
    background: linear-gradient(180deg, #f04b36 0 46%, #f8f8f8 48% 100%);
    background-size: 100% 100%;
    background-position: 50% 0%;
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 1px 0 rgba(84, 84, 84, .2));
    transform-origin: 50% 78%;
}

.composer-title-logo-link::before {
    inset: -16% -12%;
    z-index: 2;
    opacity: 0;
    background: linear-gradient(
        105deg,
        transparent 36%,
        rgba(255, 255, 255, .12) 42%,
        rgba(255, 255, 255, .95) 49%,
        rgba(255, 108, 73, .7) 55%,
        transparent 64%
    );
    filter: blur(1px);
    transform: translateX(-130%) skewX(-16deg);
}

.composer-title-logo-link:is(:hover, :focus-visible)::before {
    animation: fuuvo-text-logo-sheen 1250ms cubic-bezier(.2, .7, .2, 1) infinite;
}

.composer-title-logo-link:is(:hover, :focus-visible) .composer-logo-letter {
    animation: fuuvo-text-logo-split 1250ms cubic-bezier(.2, .8, .2, 1) infinite;
    animation-delay: calc(var(--logo-letter-index) * 45ms);
}

.composer-fuuvo-logo:focus-visible {
    outline: 2px solid rgba(240, 75, 54, .55);
    outline-offset: 3px;
}

.composer-title-logo-link::after {
    top: 18%;
    left: -18px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: radial-gradient(
        circle at 100% 50%,
        transparent 0 5px,
        #f04b36 5.5px 7px,
        transparent 7.5px 10px,
        #f04b36 10.5px 12px,
        transparent 12.5px 15px,
        #ff9a4d 15.5px 17px,
        transparent 17.5px
    );
    clip-path: inset(0 50% 0 0);
    transform: translateX(7px) scale(.72);
}

.composer-title-logo-link:is(:hover, :focus-visible)::after {
    animation: fuuvo-composer-logo-rays 1450ms cubic-bezier(.2, .8, .2, 1) infinite;
}

@keyframes fuuvo-text-logo-sheen {
    0% {
        opacity: 0;
        transform: translateX(-130%) skewX(-16deg);
    }
    18% {
        opacity: 1;
    }
    72% {
        opacity: .72;
    }
    100% {
        opacity: 0;
        transform: translateX(130%) skewX(-16deg);
    }
}

@keyframes fuuvo-text-logo-split {
    0%,
    100% {
        background-position: 50% 0%;
        filter: drop-shadow(0 1px 0 rgba(84, 84, 84, .2));
        transform: translateY(0) scale(1);
    }
    35% {
        background-position: 50% 100%;
        filter: drop-shadow(0 0 5px rgba(240, 75, 54, .45));
        transform: translateY(-1px) scale(1.04);
    }
    62% {
        background-position: 50% 42%;
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, .8));
        transform: translateY(0) scale(1.01);
    }
}

@keyframes fuuvo-composer-logo-rays {
    0%,
    100% {
        opacity: 0;
        transform: translateX(7px) scale(.72);
    }
    24% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    64% {
        opacity: .82;
        transform: translateX(-2px) scale(1.08);
    }
}

@keyframes fuuvo-logo-sheen {
    0% {
        opacity: 0;
        transform: translateX(-125%) skewX(-18deg);
    }
    18% {
        opacity: .95;
    }
    72% {
        opacity: .72;
    }
    100% {
        opacity: 0;
        transform: translateX(125%) skewX(-18deg);
    }
}

@keyframes fuuvo-logo-spark {
    0% {
        opacity: 0;
        transform: scale(.35) rotate(-18deg);
    }
    22% {
        opacity: 1;
        transform: scale(1) rotate(8deg);
    }
    58% {
        opacity: .9;
        transform: scale(.8) rotate(34deg);
    }
    100% {
        opacity: 0;
        transform: translate(-4px, -2px) scale(1.35) rotate(52deg);
    }
}

@keyframes fuuvo-logo-color-surge {
    0%,
    100% {
        filter: none;
    }
    32% {
        filter: hue-rotate(158deg) saturate(1.85) contrast(1.06) brightness(1.08);
    }
    57% {
        filter: hue-rotate(115deg) saturate(1.42) contrast(1.03) brightness(1.18);
    }
    78% {
        filter: hue-rotate(35deg) saturate(1.16) brightness(1.04);
    }
}

@keyframes fuuvo-logo-text-surge {
    0%,
    100% {
        color: inherit;
        text-shadow: none;
    }
    32% {
        color: #f04b36;
        text-shadow: 0 0 12px rgba(240, 75, 54, .24);
    }
    58% {
        color: #f18a36;
        text-shadow: 0 0 10px rgba(241, 138, 54, .18);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fuuvo-logo-motion,
    .fuuvo-logo-motion:is(:hover, :focus-visible) {
        transform: none;
        transition: none;
    }

    .fuuvo-logo-motion::before,
    .fuuvo-logo-motion::after,
    .fuuvo-logo-motion:is(:hover, :focus-visible) img,
    .fuuvo-logo-motion:is(:hover, :focus-visible) .home-brand-letter > span,
    .fuuvo-logo-motion:is(img):is(:hover, :focus-visible),
    .fuuvo-logo-motion:is(:hover, :focus-visible) .brand-wordmark,
    .fuuvo-logo-motion:is(:hover, :focus-visible) .home-living-brand,
    .fuuvo-logo-motion:is(:hover, :focus-visible) .auth-brand-en-word,
    .fuuvo-logo-motion:is(:hover, :focus-visible).kc-brand > span {
        animation: none;
    }

    .composer-title-logo-link:is(:hover, :focus-visible)::before,
    .composer-title-logo-link:is(:hover, :focus-visible)::after,
    .composer-title-logo-link:is(:hover, :focus-visible) .composer-logo-letter {
        animation: none;
    }
}

/*
 * Chinese home brand mark.
 *
 * Reuse the existing transparent 多一叮 artwork as a mask so the wordmark can
 * share the supplied red/white FUUVO treatment without shipping another
 * raster variant. The source image remains available as a fallback.
 */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
    .fuuvo-logo-motion.is-chinese::before,
    .fuuvo-logo-motion.is-chinese::after {
        inset: 0;
        width: auto;
        height: auto;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        pointer-events: none;
        -webkit-mask: url("/static/branding/duoyiding-home-title-v2.svg?v=20260929-brand-zh1") center / contain no-repeat;
        mask: url("/static/branding/duoyiding-home-title-v2.svg?v=20260929-brand-zh1") center / contain no-repeat;
    }

    .fuuvo-logo-motion.is-chinese::before {
        z-index: 4;
        opacity: 1;
        background: linear-gradient(180deg, #ef4038 0 46%, #eef1f5 48% 100%);
        filter:
            drop-shadow(0 1px 0 rgba(255, 255, 255, .86))
            drop-shadow(0 2px 0 rgba(48, 57, 70, .18))
            drop-shadow(0 4px 4px rgba(77, 30, 29, .24));
        transform: translateY(0);
    }

    .fuuvo-logo-motion.is-chinese::after {
        z-index: 5;
        opacity: 0;
        background: linear-gradient(
            112deg,
            transparent 33%,
            rgba(255, 255, 255, .12) 42%,
            rgba(255, 255, 255, .94) 49%,
            rgba(255, 118, 96, .68) 56%,
            transparent 68%
        );
        filter: blur(1px);
        transform: translateX(-125%) skewX(-16deg);
    }

    .fuuvo-logo-motion.is-chinese > :is(img, .brand-logo, .brand-head, .brand-icon, .brand-icon-fallback) {
        opacity: 0;
    }

    @media (hover: hover) and (pointer: fine) {
        .fuuvo-logo-motion.is-chinese:is(:hover, :focus-visible)::before {
            animation: fuuvo-zh-brand-bounce 820ms cubic-bezier(.2, .8, .2, 1) both;
        }

        .fuuvo-logo-motion.is-chinese:is(:hover, :focus-visible)::after {
            animation: fuuvo-zh-brand-sheen 920ms cubic-bezier(.2, .7, .2, 1) both;
        }
    }

    body[data-ui-theme="dark"] .fuuvo-logo-motion.is-chinese::before {
        background: linear-gradient(180deg, #ff6258 0 46%, #eef3fb 48% 100%);
        filter:
            drop-shadow(0 1px 0 rgba(255, 255, 255, .18))
            drop-shadow(0 5px 5px rgba(0, 0, 0, .48))
            drop-shadow(0 0 8px rgba(255, 77, 67, .18));
    }

    body[data-ui-theme="dark"] .fuuvo-logo-motion.is-chinese::after {
        background: linear-gradient(
            112deg,
            transparent 33%,
            rgba(255, 255, 255, .08) 42%,
            rgba(255, 255, 255, .88) 49%,
            rgba(255, 126, 112, .62) 56%,
            transparent 68%
        );
    }

    @keyframes fuuvo-zh-brand-bounce {
        0%,
        100% {
            transform: translateY(0) rotate(0) scale(1);
        }
        28% {
            transform: translateY(-2px) rotate(-1deg) scale(1.035, .975);
        }
        55% {
            transform: translateY(1px) rotate(.8deg) scale(.985, 1.025);
        }
        78% {
            transform: translateY(-.5px) rotate(-.3deg) scale(1.012, .995);
        }
    }

    @keyframes fuuvo-zh-brand-sheen {
        0% {
            opacity: 0;
            transform: translateX(-125%) skewX(-16deg);
        }
        18% {
            opacity: 1;
        }
        72% {
            opacity: .68;
        }
        100% {
            opacity: 0;
            transform: translateX(125%) skewX(-16deg);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .fuuvo-logo-motion.is-chinese:is(:hover, :focus-visible)::before,
        .fuuvo-logo-motion.is-chinese:is(:hover, :focus-visible)::after {
            animation: none;
        }
    }
}