/* Basma sits on the logo and, every so often, stands up to look around. */
.brand-wrap {
    position: relative;
}

.brand-wrap .navbar-brand {
    margin: 0;
    padding: 0;
}

.basma {
    background: none;
    border: 0;
    cursor: pointer;
    height: 62px;
    left: 45.4%;
    padding: 0;
    position: absolute;
    top: -16px;
    transform: translateX(-46%) scale(0.3);
    transform-origin: 50% 100%;
    width: 62px;
    z-index: 1100;
}

.basma-art {
    display: block;
    height: 100%;
    overflow: visible;
    width: 100%;
}

.basma-happy-eyes,
.basma-laugh,
.basma-lens,
.basma-brows,
.basma-tear,
.basma-frown,
.basma-crack,
.basma-shard,
.basma-arm,
.basma-arm-right {
    opacity: 0;
}

.basma-lens {
    transform-box: view-box;
    transform-origin: 62px 262px;
}

@media (prefers-reduced-motion: no-preference) {
    .basma.is-playing {
        animation: basma-body 9s ease-in-out both;
    }

    .basma.is-playing .basma-lens {
        animation: basma-lens 9s ease-in-out both;
    }

    .basma.is-playing .basma-pupils {
        animation: basma-pupils 9s ease-in-out both;
    }

    .basma.is-playing .basma-eyes {
        animation: basma-open-eyes 9s linear both;
    }

    .basma.is-playing .basma-happy-eyes,
    .basma.is-playing .basma-laugh {
        animation: basma-laughing 9s linear both;
    }

    .basma.is-playing .basma-smile {
        animation: basma-open-eyes 9s linear both;
    }

    @keyframes basma-body {
        0%, 100% { transform: translateX(-46%) scale(0.3); }
        8%, 80% { transform: translateX(-46%) translateY(30px) scale(1); }
        83% { transform: translateX(-46%) translateY(22px) scale(1); }
        86% { transform: translateX(-46%) translateY(30px) scale(1); }
        89% { transform: translateX(-46%) translateY(22px) scale(1); }
        92% { transform: translateX(-46%) translateY(30px) scale(1); }
    }

    @keyframes basma-lens {
        0%, 8% { opacity: 0; transform: translate(0, 0); }
        12% { opacity: 1; transform: translate(0, 0); }
        18%, 28% { opacity: 1; transform: translate(40px, -110px); }
        34%, 44% { opacity: 1; transform: translate(20px, 60px); }
        50%, 60% { opacity: 1; transform: translate(-40px, -20px); }
        66%, 76% { opacity: 1; transform: translate(250px, -20px); }
        80% { opacity: 1; transform: translate(0, 0); }
        83%, 100% { opacity: 0; transform: translate(0, 0); }
    }

    @keyframes basma-pupils {
        0%, 12%, 80%, 100% { transform: translate(0, 0); }
        18%, 28% { transform: translate(0, -11px); }
        34%, 44% { transform: translate(0, 11px); }
        50%, 60% { transform: translate(-11px, 0); }
        66%, 76% { transform: translate(11px, 0); }
    }

    @keyframes basma-open-eyes {
        0%, 79.9% { opacity: 1; }
        80%, 95% { opacity: 0; }
        95.1%, 100% { opacity: 1; }
    }

    @keyframes basma-laughing {
        0%, 79.9% { opacity: 0; }
        80%, 95% { opacity: 1; }
        95.1%, 100% { opacity: 0; }
    }
}

/* Basma's other moments, away from the logo. */
.basma-scene {
    display: inline-block;
    height: 96px;
    position: relative;
    width: 96px;
}

/* Hovering her, anywhere, shows the same line. */
.basma-tip {
    background: #17163F;
    border-radius: 10px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    display: none;
    line-height: 1.3;
    padding: 6px 12px;
    pointer-events: none;
    position: absolute;
    white-space: nowrap;
    z-index: 1200;
}

.basma-scene .basma-tip {
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
}

.brand-wrap .basma-tip {
    left: 45.4%;
    top: 54px;
    transform: translateX(-50%);
}

.basma:hover + .basma-tip,
.basma:focus-visible + .basma-tip,
.basma-scene:hover .basma-tip {
    display: block;
}

/* On "add your service" she pops up beside the title and waves. */
.has-greeter {
    isolation: isolate;
    position: relative;
}

.basma-greeter {
    inset-block-start: 4px;
    inset-inline-end: 0;
    position: absolute;
}

.basma-greeter .basma-scene {
    height: 48px;
    width: 48px;
}

.basma-greeter .basma-tip {
    bottom: auto;
    left: 0;
    top: calc(100% + 6px);
    transform: none;
}

.basma-wave .basma-arm {
    opacity: 1;
    transform-box: view-box;
    transform-origin: 58px 236px;
}

/* Beside the send button she opens her arms, happy to have them. */
.submit-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.basma-hug-spot {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.basma-hug-spot .basma-scene {
    height: 64px;
    width: 64px;
}

.basma-cheer {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 4px 10px;
}

.basma-hug .basma-arm,
.basma-hug .basma-arm-right,
.basma-hug .basma-happy-eyes,
.basma-hug .basma-laugh {
    opacity: 1;
}

.basma-hug .basma-eyes,
.basma-hug .basma-smile {
    opacity: 0;
}

.basma-hug .basma-arm {
    transform-box: view-box;
    transform-origin: 58px 236px;
}

.basma-hug .basma-arm-right {
    transform-box: view-box;
    transform-origin: 262px 236px;
}

@media (prefers-reduced-motion: no-preference) {
    .basma-hug-spot {
        opacity: 0;
        transform: translateY(16px) scale(0.7);
        transition: opacity 0.35s, transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1.3);
    }

    .basma-hug-spot.is-seen {
        opacity: 1;
        transform: none;
    }

    .is-seen .basma-hug {
        animation: basma-hug-hop 1.6s ease-in-out 0.3s 2;
    }

    .is-seen .basma-hug .basma-arm {
        animation: basma-hug-left 1.6s ease-in-out 0.3s 2;
    }

    .is-seen .basma-hug .basma-arm-right {
        animation: basma-hug-right 1.6s ease-in-out 0.3s 2;
    }

    @keyframes basma-hug-hop {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-6px) scale(1.05); }
    }

    @keyframes basma-hug-left {
        0%, 100% { transform: rotate(0); }
        50% { transform: rotate(52deg); }
    }

    @keyframes basma-hug-right {
        0%, 100% { transform: rotate(0); }
        50% { transform: rotate(-52deg); }
    }
}

.has-greeter .form-lead {
    padding-inline-end: 56px;
}

@media (prefers-reduced-motion: no-preference) {
    .basma-greeter {
        animation: basma-greeter-pop 0.7s ease-out 0.3s both;
    }

    .basma-wave .basma-arm {
        animation: basma-wave-arm 2.4s ease-in-out 1.2s both;
    }

    .basma-wave:hover .basma-arm {
        animation: basma-wave-again 1.6s ease-in-out both;
    }

    .basma-wave .basma-happy-eyes,
    .basma-wave .basma-laugh {
        animation: basma-wave-show 3.6s linear 0.8s both;
    }

    .basma-wave .basma-eyes,
    .basma-wave .basma-smile {
        animation: basma-wave-hide 3.6s linear 0.8s both;
    }

    @keyframes basma-greeter-pop {
        from { opacity: 0; transform: translateY(20px) scale(0.7); }
        to { opacity: 1; transform: none; }
    }

    @keyframes basma-wave-arm {
        0%, 100% { transform: rotate(0); }
        16%, 50%, 84% { transform: rotate(-24deg); }
        33%, 67% { transform: rotate(16deg); }
    }

    @keyframes basma-wave-again {
        0%, 100% { transform: rotate(0); }
        16%, 50%, 84% { transform: rotate(-24deg); }
        33%, 67% { transform: rotate(16deg); }
    }

    @keyframes basma-wave-show {
        0%, 100% { opacity: 0; }
        4%, 96% { opacity: 1; }
    }

    @keyframes basma-wave-hide {
        0%, 100% { opacity: 1; }
        4%, 96% { opacity: 0; }
    }
}

.load-more .btn-outline-plate {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.basma-peek {
    height: 34px;
    width: 34px;
}

.basma-end {
    color: var(--ink-soft);
    margin-block-start: 24px;
    text-align: center;
}

.basma-end p {
    margin-block: 8px 4px;
}

@media (prefers-reduced-motion: reduce) {
    .basma-sad .basma-smile {
        opacity: 0;
    }

    .basma-sad .basma-frown,
    .basma-sad .basma-brows {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: no-preference) {
    /* Beside "show more": she hops and looks around, inviting the press. */
    .basma-peek {
        animation: basma-peek-hop 6s ease-in-out infinite;
        transform-origin: 50% 100%;
    }

    .basma-peek .basma-pupils {
        animation: basma-peek-look 6s ease-in-out infinite;
    }

    @keyframes basma-peek-hop {
        0%, 70%, 100% { transform: translateY(0); }
        76% { transform: translateY(-4px); }
        82% { transform: translateY(0); }
        88% { transform: translateY(-2px); }
        94% { transform: translateY(0); }
    }

    @keyframes basma-peek-look {
        0%, 12%, 62%, 100% { transform: translate(0, 0); }
        20%, 34% { transform: translate(-11px, 0); }
        42%, 56% { transform: translate(11px, 8px); }
    }

    /* Nothing found: she searches, the lens cracks and falls apart, and she stays sad. */
    .basma-sad .basma-lens {
        animation: basma-sad-lens 5s ease-in-out forwards;
    }

    .basma-sad .basma-crack {
        animation: basma-sad-crack 5s linear forwards;
    }

    .basma-sad .basma-shard-a {
        animation: basma-sad-shard-a 5s ease-in forwards;
    }

    .basma-sad .basma-shard-b {
        animation: basma-sad-shard-b 5s ease-in forwards;
    }

    .basma-sad .basma-pupils {
        animation: basma-sad-pupils 5s ease-in-out forwards;
    }

    .basma-sad .basma-smile {
        animation: basma-sad-hide 5s linear forwards;
    }

    .basma-sad .basma-frown,
    .basma-sad .basma-brows {
        animation: basma-sad-show 5s linear forwards;
    }

    .basma-sad .basma-tear {
        animation: basma-sad-tear 2.4s ease-in 3.6s infinite;
    }

    @keyframes basma-sad-lens {
        0% { opacity: 0; transform: translate(0, 0); }
        6% { opacity: 1; transform: translate(0, 0); }
        18%, 26% { opacity: 1; transform: translate(-20px, -50px); }
        38%, 44% { opacity: 1; transform: translate(240px, -30px); }
        47% { opacity: 1; transform: translate(246px, -30px); }
        50% { opacity: 1; transform: translate(236px, -30px); }
        53%, 62% { opacity: 1; transform: translate(242px, -30px); }
        72%, 100% { opacity: 0; transform: translate(242px, 150px); }
    }

    @keyframes basma-sad-crack {
        0%, 45.9% { opacity: 0; }
        46%, 72% { opacity: 1; }
        73%, 100% { opacity: 0; }
    }

    @keyframes basma-sad-shard-a {
        0%, 52% { opacity: 0; transform: translate(242px, -30px); }
        53% { opacity: 1; transform: translate(242px, -30px); }
        80% { opacity: 1; transform: translate(200px, 170px) rotate(-30deg); }
        84%, 100% { opacity: 0; transform: translate(200px, 170px); }
    }

    @keyframes basma-sad-shard-b {
        0%, 54% { opacity: 0; transform: translate(242px, -30px); }
        55% { opacity: 1; transform: translate(242px, -30px); }
        82% { opacity: 1; transform: translate(290px, 160px) rotate(30deg); }
        86%, 100% { opacity: 0; transform: translate(290px, 160px); }
    }

    @keyframes basma-sad-pupils {
        0%, 6% { transform: translate(0, 0); }
        18%, 26% { transform: translate(-11px, -8px); }
        38%, 62% { transform: translate(11px, -6px); }
        72%, 100% { transform: translate(0, 11px); }
    }

    @keyframes basma-sad-hide {
        0%, 62% { opacity: 1; }
        66%, 100% { opacity: 0; }
    }

    @keyframes basma-sad-show {
        0%, 62% { opacity: 0; }
        66%, 100% { opacity: 1; }
    }

    @keyframes basma-sad-tear {
        0% { opacity: 0; transform: translateY(0); }
        15% { opacity: 1; }
        85% { opacity: 1; transform: translateY(70px); }
        100% { opacity: 0; transform: translateY(84px); }
    }
}

/* On a phone the header is short and the add button sits right below her, so she stands in place. */
@media (max-width: 768px) {
    .basma.is-playing {
        pointer-events: none;
    }

    .basma-tip {
        max-width: 80vw;
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
    .basma.is-playing {
        animation-name: basma-body-phone;
    }

    @keyframes basma-body-phone {
        0%, 100% { transform: translateX(-46%) scale(0.3); }
        8%, 92% { transform: translateX(-46%) scale(0.5); }
    }
}