/* Venus360 animated brand companion. */

.home-brand-companion {
    position: relative;
    z-index: 2;
    width: min(338px, calc(100% - 48px));
    min-height: 122px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto -30px;
    padding: 7px 17px 9px 8px;
    color: var(--v-navy-900);
    background:
        radial-gradient(circle at 78% 18%, rgba(82, 225, 255, 0.2), transparent 42%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(235, 243, 255, 0.97));
    border: 1px solid rgba(11, 100, 246, 0.2);
    border-radius: 30px;
    box-shadow:
        0 18px 46px rgba(17, 48, 84, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.home-brand-companion-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
    text-align: start;
}

.home-brand-companion-copy strong {
    display: flex;
    align-items: baseline;
    direction: ltr;
    color: var(--v-navy-900);
    font-family: var(--v-font-latin);
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1.2;
}

.home-brand-companion-copy em {
    margin-inline-start: 3px;
    color: var(--v-primary);
    font-style: normal;
}

.home-brand-companion-copy small {
    color: #61758b;
    font-size: 0.64rem;
    font-weight: 560;
    line-height: 1.7;
}

.hero-ai-mascot {
    position: relative;
    width: 190px;
    height: 190px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(56, 200, 255, 0.28);
    border-radius: 48px;
    background:
        radial-gradient(circle at 50% 30%, rgba(56, 200, 255, 0.28), transparent 56%),
        radial-gradient(circle at 74% 78%, rgba(141, 124, 255, 0.16), transparent 44%),
        rgba(255, 255, 255, 0.075);
    box-shadow:
        0 0 64px rgba(56, 200, 255, 0.22),
        0 24px 80px rgba(0, 0, 0, 0.12),
        inset 0 0 34px rgba(255, 255, 255, 0.05);
    isolation: isolate;
    overflow: visible;
    animation: mascotHappyFloat 3.4s ease-in-out infinite;
}

.home-ai-mascot {
    width: 112px;
    height: 112px;
    border: 0;
    border-radius: 30px;
    background:
        radial-gradient(circle at 50% 35%, rgba(56, 200, 255, 0.25), transparent 58%),
        rgba(255, 255, 255, 0.34);
    box-shadow: none;
}

.hero-ai-mascot::before,
.hero-ai-mascot::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
}

.hero-ai-mascot::before {
    inset: -9px;
    border: 1px solid rgba(56, 200, 255, 0.34);
    animation: mascotAiOrbit 7.2s linear infinite;
}

.hero-ai-mascot::after {
    inset: 11px -15px;
    border: 1px solid rgba(141, 124, 255, 0.34);
    animation: mascotAiOrbit 9.4s linear infinite reverse;
}

.hero-ai-mascot .venus-mascot-wrap {
    width: 84%;
    height: 84%;
    display: block;
    transform-origin: center;
    filter: drop-shadow(0 12px 20px rgba(0, 27, 93, 0.2));
    animation: mascotTinyJoy 3.9s ease-in-out infinite;
}

.hero-ai-mascot .venus-mascot-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.hero-ai-mascot .v360-navy {
    fill: url("#heroV360Navy");
}

.hero-ai-mascot .v360-blue {
    fill: url("#heroV360Blue");
}

.hero-ai-mascot .v360-stroke-navy {
    fill: none;
    stroke: url("#heroV360Navy");
    stroke-width: 17.5;
    stroke-linecap: round;
}

.hero-ai-mascot .v360-face {
    fill: #fff;
    transform-box: fill-box;
    transform-origin: center;
    animation: mascotFaceHappyStretch 2.65s ease-in-out infinite;
}

.hero-ai-mascot .v360-eye {
    fill: url("#heroV360Navy");
}

.hero-ai-mascot .venus-logo-mascot {
    transform-box: fill-box;
    transform-origin: center;
    animation: mascotBreathing 2.9s ease-in-out infinite;
}

.hero-ai-mascot .venus-logo-ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: mascotSoftOrbit 8.8s linear infinite;
}

.hero-ai-mascot .venus-logo-points {
    transform-box: fill-box;
    transform-origin: center;
    animation: mascotPointJoy 3.8s ease-in-out infinite;
}

.hero-ai-mascot .venus-logo-eye-left,
.hero-ai-mascot .venus-logo-eye-right {
    transform-box: fill-box;
    transform-origin: center;
    animation: mascotHappyEyes 2.35s ease-in-out infinite;
}

.hero-ai-mascot .venus-logo-eye-left {
    animation-delay: 0.04s;
}

.hero-ai-mascot .venus-logo-eye-right {
    animation-delay: 0.11s;
}

.ai-spark {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--v-accent);
    box-shadow: 0 0 18px rgba(56, 200, 255, 0.95);
    animation: mascotSpark 2.05s ease-in-out infinite;
}

.ai-spark.one {
    inset-block-start: 13px;
    inset-inline-end: 17px;
}

.ai-spark.two {
    inset-block-end: 18px;
    inset-inline-start: 13px;
    background: var(--v-accent-2);
    animation-delay: 0.55s;
}

.ai-spark.three {
    inset-block-start: 62px;
    inset-inline-start: -3px;
    animation-delay: 1.05s;
}

.ai-spark.four {
    inset-inline-end: -2px;
    inset-block-end: 52px;
    width: 6px;
    height: 6px;
    background: var(--v-success);
    animation-delay: 1.46s;
}

@keyframes mascotHappyFloat {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    36% {
        transform: translateY(-6px) rotate(-1.1deg);
    }

    62% {
        transform: translateY(-3px) rotate(0.85deg);
    }
}

@keyframes mascotTinyJoy {
    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    24% {
        transform: scale(1.025) rotate(-0.8deg);
    }

    50% {
        transform: scale(1.045) rotate(1deg);
    }

    74% {
        transform: scale(1.014) rotate(-0.45deg);
    }
}

@keyframes mascotBreathing {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.025);
    }
}

@keyframes mascotFaceHappyStretch {
    0%,
    68%,
    100% {
        transform: scaleX(1) scaleY(1) translateY(0);
        filter: none;
    }

    74% {
        transform: scaleX(1.045) scaleY(0.965) translateY(1px);
        filter: drop-shadow(0 0 8px rgba(56, 200, 255, 0.22));
    }

    82% {
        transform: scaleX(1.025) scaleY(0.982) translateY(0.5px);
    }
}

@keyframes mascotHappyEyes {
    0%,
    62%,
    100% {
        transform: scaleX(1) scaleY(1) translateY(0);
    }

    68% {
        transform: scaleX(1.32) scaleY(0.48) translateY(3px);
    }

    73% {
        transform: scaleX(1.42) scaleY(0.34) translateY(4px);
    }

    79% {
        transform: scaleX(1.08) scaleY(1.08) translateY(-1px);
    }
}

@keyframes mascotSoftOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes mascotPointJoy {
    0%,
    100% {
        transform: rotate(0deg) scale(1);
        opacity: 0.96;
    }

    48% {
        transform: rotate(-3.5deg) scale(1.04);
        opacity: 1;
    }
}

@keyframes mascotAiOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes mascotSpark {
    0%,
    100% {
        transform: scale(0.72);
        opacity: 0.35;
    }

    44% {
        transform: scale(1.65);
        opacity: 1;
    }
}

@media (max-width: 700px) {
    .home-brand-companion {
        width: min(290px, calc(100% - 28px));
        min-height: 106px;
        margin-bottom: -24px;
        padding-inline: 11px;
        border-radius: 25px;
    }

    .home-ai-mascot {
        width: 92px;
        height: 92px;
    }

    .home-brand-companion-copy strong {
        font-size: 1.08rem;
    }

    .home-brand-companion-copy small {
        max-width: 120px;
        font-size: 0.58rem;
    }
}