/* =========================================
   LUMA ONBOARDING
   ========================================= */

#lumaTour {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif;
}


.luma-tour-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(17, 17, 29, 0.62);

    backdrop-filter: blur(3px);

    pointer-events: auto;

    transition:
        background 0.22s ease,
        backdrop-filter 0.22s ease;
}


#lumaTour.targeted
.luma-tour-backdrop {
    background: transparent;
    backdrop-filter: none;
}


.luma-tour-highlight {
    position: fixed;

    display: none;

    border:
        2px solid
        rgba(137, 120, 255, 0.95);

    border-radius: 16px;

    background: transparent;

    box-shadow:
        0 0 0 9999px rgba(17, 17, 29, 0.62),
        0 0 0 6px rgba(117, 101, 255, 0.14),
        0 12px 35px rgba(0, 0, 0, 0.18);

    pointer-events: none;

    transition:
        top 0.28s ease,
        left 0.28s ease,
        width 0.28s ease,
        height 0.28s ease;
}


#lumaTour.targeted
.luma-tour-highlight {
    display: block;
}


/* =========================================
   CARD
   ========================================= */

.luma-tour-card {
    position: fixed;

    width:
        min(
            390px,
            calc(100vw - 32px)
        );

    padding: 22px;

    border:
        1px solid
        rgba(255, 255, 255, 0.16);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(246, 244, 255, 0.98)
        );

    color: #17171f;

    box-shadow:
        0 24px 80px
        rgba(20, 17, 45, 0.30);

    pointer-events: auto;

    opacity: 0;

    transform:
        translateY(12px)
        scale(0.98);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        top 0.28s ease,
        left 0.28s ease;
}


.luma-tour-card.visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


.luma-tour-card.welcome {
    width:
        min(
            430px,
            calc(100vw - 32px)
        );

    padding:
        30px
        30px
        26px;

    text-align: center;
}


.luma-tour-top {
    display: flex;

    align-items: flex-start;

    gap: 18px;
}


.luma-tour-card.welcome
.luma-tour-top {
    display: block;
}


.luma-tour-copy {
    flex: 1;

    min-width: 0;
}


.luma-tour-kicker {
    margin-bottom: 7px;

    color: #7565ff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}


.luma-tour-title {
    margin:
        0
        0
        8px;

    font-size: 21px;

    line-height: 1.15;

    letter-spacing: -0.55px;
}


.luma-tour-card.welcome
.luma-tour-title {
    margin-top: 16px;

    font-size: 27px;
}


.luma-tour-text {
    margin: 0;

    color: #727286;

    font-size: 13px;

    line-height: 1.6;
}


.luma-tour-card.welcome
.luma-tour-text {
    max-width: 330px;

    margin:
        0
        auto;

    font-size: 14px;
}


/* =========================================
   ROBOT
   ========================================= */

.luma-bot {
    position: relative;

    width: 92px;

    height: 102px;

    flex:
        0
        0
        92px;

    margin:
        0
        auto;

    filter:
        drop-shadow(
            0
            12px
            22px
            rgba(117, 101, 255, 0.20)
        );
}


.luma-tour-card:not(.welcome)
.luma-bot {
    width: 72px;

    height: 82px;

    flex-basis: 72px;

    transform:
        scale(0.80);

    transform-origin:
        top left;
}


.luma-bot__antenna {
    position: absolute;

    width: 4px;

    height: 15px;

    left: 44px;

    top: 1px;

    border-radius: 99px;

    background: #7565ff;
}


.luma-bot__antenna::before {
    content: "";

    position: absolute;

    width: 10px;

    height: 10px;

    left: -3px;

    top: -6px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #9d90ff,
            #6655f3
        );

    box-shadow:
        0 0 14px
        rgba(117, 101, 255, 0.65);

    animation:
        lumaPulse
        1.8s
        ease-in-out
        infinite;
}


.luma-bot__head {
    position: absolute;

    width: 76px;

    height: 56px;

    left: 8px;

    top: 14px;

    border:
        2px solid
        rgba(117, 101, 255, 0.20);

    border-radius:
        24px
        24px
        21px
        21px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #eeeaff
        );

    box-shadow:
        inset
        0
        -8px
        16px
        rgba(117, 101, 255, 0.06);

    animation:
        lumaFloat
        3s
        ease-in-out
        infinite;
}


.luma-bot__face {
    position: absolute;

    width: 58px;

    height: 34px;

    left: 7px;

    top: 10px;

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            #242235,
            #343149
        );

    overflow: hidden;
}


.luma-bot__eye {
    position: absolute;

    width: 9px;

    height: 9px;

    top: 10px;

    border-radius: 50%;

    background: #a99eff;

    box-shadow:
        0 0 10px
        rgba(169, 158, 255, 0.95);

    transform-origin: center;

    animation:
        lumaBlink
        4.2s
        infinite;
}


.luma-bot__eye.left {
    left: 14px;
}


.luma-bot__eye.right {
    right: 14px;
}


.luma-bot__mouth {
    position: absolute;

    width: 13px;

    height: 6px;

    left: 23px;

    bottom: 6px;

    border-bottom:
        2px solid
        #a99eff;

    border-radius:
        0
        0
        12px
        12px;
}


.luma-bot__body {
    position: absolute;

    width: 52px;

    height: 40px;

    left: 20px;

    bottom: 0;

    border:
        2px solid
        rgba(117, 101, 255, 0.16);

    border-radius:
        16px
        16px
        20px
        20px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #e9e5ff
        );
}


.luma-bot__core {
    position: absolute;

    width: 21px;

    height: 21px;

    left: 14px;

    top: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #7565ff,
            #9a8eff
        );

    color: white;

    font-size: 11px;

    font-weight: 900;

    box-shadow:
        0 5px 15px
        rgba(117, 101, 255, 0.28);
}


.luma-bot__arm {
    position: absolute;

    width: 11px;

    height: 34px;

    bottom: 4px;

    border:
        2px solid
        rgba(117, 101, 255, 0.16);

    border-radius: 10px;

    background: #f7f5ff;

    transform-origin:
        top center;
}


.luma-bot__arm.left {
    left: 9px;

    transform:
        rotate(10deg);
}


.luma-bot__arm.right {
    right: 9px;

    transform:
        rotate(-10deg);
}


.luma-bot.wave
.luma-bot__arm.right {
    animation:
        lumaWave
        0.8s
        ease-in-out
        infinite
        alternate;
}


/* =========================================
   TOUR FOOTER
   ========================================= */

.luma-tour-footer {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 14px;

    margin-top: 22px;
}


.luma-tour-progress {
    display: flex;

    align-items: center;

    gap: 5px;
}


.luma-tour-dot {
    width: 6px;

    height: 6px;

    border-radius: 99px;

    background: #d7d5e5;

    transition:
        width 0.18s ease,
        background 0.18s ease;
}


.luma-tour-dot.active {
    width: 18px;

    background: #7565ff;
}


.luma-tour-actions {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-left: auto;
}


.luma-tour-btn {
    min-height: 36px;

    padding:
        0
        13px;

    border:
        1px solid
        #e2e0ec;

    border-radius: 10px;

    background: #f4f3f8;

    color: #555469;

    font-size: 11px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}


.luma-tour-btn:hover {
    background: #eceaf3;
}


.luma-tour-btn.primary {
    border-color: transparent;

    background: #7565ff;

    color: white;

    box-shadow:
        0 7px 18px
        rgba(117, 101, 255, 0.22);
}


.luma-tour-btn.primary:hover {
    background: #6655f3;

    transform:
        translateY(-1px);
}


.luma-tour-btn.skip {
    border-color: transparent;

    background: transparent;

    color: #9290a2;
}


.luma-tour-btn.skip:hover {
    color: #555469;

    background: #f4f3f8;
}


/* =========================================
   ONBOARDING REPLAY BUTTON
   ========================================= */

.model {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 8px;
}


.tour-replay-btn {
    appearance: none;

    -webkit-appearance: none;

    width: 28px;

    height: 28px;

    flex:
        0
        0
        28px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border:
        1px solid
        transparent;

    border-radius: 8px;

    background: transparent;

    color: var(--muted);

    font-family: inherit;

    font-size: 13px;

    font-weight: 750;

    line-height: 1;

    cursor: pointer;

    opacity: 0.68;

    box-shadow: none;

    outline: none;

    transition:
        opacity 0.15s ease,
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}


.tour-replay-btn:hover {
    opacity: 1;

    color: var(--text);

    background:
        var(--surface-hover);

    border-color:
        var(--border);
}


.tour-replay-btn:active {
    transform:
        scale(0.91);
}


.tour-replay-btn:focus-visible {
    opacity: 1;

    border-color:
        var(--accent);

    box-shadow:
        0
        0
        0
        3px
        var(--accent-soft);
}


/* =========================================
   DARK MODE
   ========================================= */

body.dark
.luma-tour-card {
    border-color:
        rgba(
            255,
            255,
            255,
            0.08
        );

    background:
        linear-gradient(
            145deg,
            rgba(35, 35, 43, 0.99),
            rgba(29, 28, 39, 0.99)
        );

    color: #f2f2f5;
}


body.dark
.luma-tour-text {
    color: #a1a0b1;
}


body.dark
.luma-tour-btn {
    border-color: #3b3948;

    background: #2b2a34;

    color: #cac8d6;
}


body.dark
.luma-tour-btn:hover {
    background: #34323f;
}


body.dark
.luma-tour-btn.skip {
    border-color: transparent;

    background: transparent;

    color: #8f8d9e;
}


body.dark
.luma-tour-btn.primary {
    border-color: transparent;

    background: #7565ff;

    color: white;
}


/* =========================================
   ANIMATIONS
   ========================================= */

@keyframes lumaFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-1deg);
    }

    50% {
        transform:
            translateY(-4px)
            rotate(1deg);
    }
}


@keyframes lumaBlink {

    0%,
    44%,
    48%,
    100% {
        transform:
            scaleY(1);
    }

    46% {
        transform:
            scaleY(0.12);
    }
}


@keyframes lumaPulse {

    0%,
    100% {
        transform:
            scale(0.86);

        opacity: 0.75;
    }

    50% {
        transform:
            scale(1.12);

        opacity: 1;
    }
}


@keyframes lumaWave {

    from {
        transform:
            rotate(-20deg);
    }

    to {
        transform:
            rotate(-65deg);
    }
}


/* =========================================
   MOBILE
   ========================================= */

@media (
    max-width: 650px
) {

    .luma-tour-card {
        width:
            calc(
                100vw - 24px
            );

        padding: 18px;

        border-radius: 20px;
    }


    .luma-tour-card.welcome {
        padding:
            25px
            20px
            21px;
    }


    .luma-tour-top {
        gap: 12px;
    }


    .luma-tour-card:not(.welcome)
    .luma-bot {
        display: none;
    }


    .luma-tour-footer {
        align-items: flex-end;

        flex-direction: column;
    }


    .luma-tour-progress {
        align-self: flex-start;
    }


    .luma-tour-actions {
        width: 100%;

        justify-content: flex-end;
    }
}


/* =========================================
   REDUCED MOTION
   ========================================= */

@media (
    prefers-reduced-motion: reduce
) {

    .luma-bot__head,
    .luma-bot__eye,
    .luma-bot__antenna::before,
    .luma-bot.wave
    .luma-bot__arm.right {

        animation:
            none
            !important;
    }


    .luma-tour-card,
    .luma-tour-highlight,
    .tour-replay-btn {

        transition:
            none
            !important;
    }
}