/*
 * CODSHIPX_AI_R83_R3_PRE_CODI_PROCESS_STREAM
 */

#cx-r83-first-login {
    position: fixed;
    inset: 0;
    z-index: 2147483647;

    display: grid;
    place-items: center;

    width: 100%;
    height: 100dvh;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 46%,
            rgba(255,255,255,.035) 0%,
            rgba(255,255,255,.012) 20%,
            transparent 51%
        ),
        #000;

    color: #fff;

    opacity: 1;

    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    transition:
        opacity .42s
        cubic-bezier(.22,.61,.36,1);
}


/*
 * Critical:
 * while R83 is active, the existing Codi entrance video
 * must not become visible before R83 releases it.
 */

html.cx-r83-first-login-open
.r7-r24-codi-entry,

html.cx-r83-first-login-open
.r7-r24-codi-video {

    visibility: hidden !important;
    opacity: 0 !important;
}


html.cx-r83-first-login-open,
html.cx-r83-first-login-open body {

    overflow: hidden !important;
}


#cx-r83-first-login.cx-r83-leave {

    opacity: 0;
    pointer-events: none;
}


.cx-r83-inner {

    position: relative;

    width:
        min(
            650px,
            calc(100vw - 44px)
        );

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    transform:
        translateY(-1.5vh);
}


.cx-r83-brand {

    margin: 0 0 17px;

    color:
        rgba(
            255,
            255,
            255,
            .38
        );

    font-size: 9px;
    font-weight: 650;

    letter-spacing: .36em;

    text-transform: uppercase;

    opacity: 0;

    animation:
        cxR83BrandIn
        .7s
        .05s
        cubic-bezier(.16,1,.3,1)
        forwards;
}


.cx-r83-title {

    margin: 0;

    color: #fff;

    font-size:
        clamp(
            36px,
            5.3vw,
            62px
        );

    font-weight: 550;

    line-height: 1;

    letter-spacing: .17em;
    text-indent: .17em;

    text-transform: uppercase;

    opacity: 0;

    transform:
        translateY(8px)
        scale(.985);

    animation:
        cxR83TitleIn
        .82s
        .12s
        cubic-bezier(.16,1,.3,1)
        forwards;
}


.cx-r83-rule {

    width: 45px;
    height: 1px;

    margin:
        25px 0
        17px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.67),
            transparent
        );

    opacity: 0;

    transform: scaleX(.25);

    animation:
        cxR83RuleIn
        .8s
        .4s
        cubic-bezier(.16,1,.3,1)
        forwards;
}


/*
 * Vertical process viewport.
 *
 * New events enter from the bottom.
 * Older events drift upward.
 * Top edge softly fades out.
 */

.cx-r83-process {

    position: relative;

    width:
        min(
            360px,
            calc(100vw - 52px)
        );

    height: 118px;

    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    text-align: left;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,.32) 14%,
            #000 34%,
            #000 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,.32) 14%,
            #000 34%,
            #000 100%
        );
}


.cx-r83-step {

    position: relative;

    flex: 0 0 28px;

    min-height: 28px;

    display: flex;
    align-items: center;

    gap: 12px;

    color:
        rgba(
            255,
            255,
            255,
            .42
        );

    font-size: 11px;
    font-weight: 470;

    line-height: 1;

    letter-spacing: .11em;

    text-transform: uppercase;

    opacity: 0;

    transform:
        translateY(15px);

    filter: blur(4px);

    transition:
        opacity .3s ease,
        transform .36s cubic-bezier(.16,1,.3,1),
        filter .3s ease,
        color .25s ease;
}


.cx-r83-step.cx-r83-step-show {

    opacity: 1;

    transform:
        translateY(0);

    filter: blur(0);
}


.cx-r83-step.cx-r83-step-done {

    color:
        rgba(
            255,
            255,
            255,
            .34
        );
}


.cx-r83-step.cx-r83-step-current {

    color:
        rgba(
            255,
            255,
            255,
            .90
        );
}


.cx-r83-step.cx-r83-step-ready {

    color: #fff;

    font-weight: 600;

    letter-spacing: .14em;
}


.cx-r83-step.cx-r83-step-out {

    opacity: 0;

    transform:
        translateY(-14px);

    filter: blur(4px);
}


/*
 * Small left-side status light.
 */

.cx-r83-dot {

    position: relative;

    width: 6px;
    height: 6px;

    flex:
        0 0
        6px;

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            .25
        );

    box-shadow:
        0 0 0 1px
        rgba(
            255,
            255,
            255,
            .10
        );

    transition:
        opacity .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


.cx-r83-step-current
.cx-r83-dot {

    background:
        rgba(
            255,
            255,
            255,
            .95
        );

    box-shadow:
        0 0 0 1px
        rgba(
            255,
            255,
            255,
            .28
        ),
        0 0 10px
        rgba(
            255,
            255,
            255,
            .35
        );

    animation:
        cxR83DotPulse
        .92s
        ease-in-out
        infinite;
}


.cx-r83-step-done
.cx-r83-dot {

    background:
        rgba(
            255,
            255,
            255,
            .31
        );

    animation: none;
}


.cx-r83-step-ready
.cx-r83-dot {

    background: #fff;

    box-shadow:
        0 0 0 1px
        rgba(
            255,
            255,
            255,
            .35
        ),
        0 0 14px
        rgba(
            255,
            255,
            255,
            .46
        );

    animation:
        cxR83DotReady
        .75s
        ease-in-out
        infinite;
}


.cx-r83-glow {

    position: absolute;

    left: 50%;
    top: calc(50% + 96px);

    width: 260px;
    height: 80px;

    transform:
        translate(-50%,-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(255,255,255,.024),
            transparent 68%
        );

    filter: blur(23px);

    pointer-events: none;

    animation:
        cxR83Glow
        2.3s
        ease-in-out
        infinite;
}


@keyframes cxR83BrandIn {

    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes cxR83TitleIn {

    from {
        opacity: 0;

        transform:
            translateY(8px)
            scale(.985);
    }

    to {
        opacity: 1;

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


@keyframes cxR83RuleIn {

    from {
        opacity: 0;
        transform: scaleX(.25);
    }

    to {
        opacity: .62;
        transform: scaleX(1);
    }
}


@keyframes cxR83DotPulse {

    0%,
    100% {
        opacity: .32;

        transform:
            scale(.72);
    }

    50% {
        opacity: 1;

        transform:
            scale(1.12);
    }
}


@keyframes cxR83DotReady {

    0%,
    100% {
        opacity: .65;
    }

    50% {
        opacity: 1;
    }
}


@keyframes cxR83Glow {

    0%,
    100% {
        opacity: .32;

        transform:
            translate(-50%,-50%)
            scale(.94);
    }

    50% {
        opacity: .72;

        transform:
            translate(-50%,-50%)
            scale(1.07);
    }
}


@media (max-width: 640px) {

    .cx-r83-inner {

        width:
            calc(
                100vw - 34px
            );
    }


    .cx-r83-title {

        letter-spacing: .13em;
        text-indent: .13em;
    }


    .cx-r83-process {

        width:
            min(
                320px,
                calc(
                    100vw - 52px
                )
            );
    }


    .cx-r83-step {

        font-size: 10px;

        letter-spacing: .09em;
    }
}


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

    .cx-r83-brand,
    .cx-r83-title,
    .cx-r83-rule,
    .cx-r83-glow,
    .cx-r83-dot {

        animation: none;
    }
}


/*
 * CODSHIPX_AI_R83_R5_PROCESS_ALIGNMENT_POLISH
 *
 * Keep SETUP CRM title optically centered.
 * Shift only the vertical process stream slightly right.
 */

.cx-r83-process {
    transform: translateX(42px);
}

@media (max-width: 640px) {
    .cx-r83-process {
        transform: translateX(18px);
    }
}


/*
 * CODSHIPX_AI_R83_R6_LOWER_CENTER_PROCESS
 *
 * Move process stream into the lower-center visual zone.
 * Keep title position untouched.
 */

.cx-r83-process {
    transform: translate(18px, 90px);
}

@media (max-width: 640px) {
    .cx-r83-process {
        transform: translate(8px, 60px);
    }
}


/*
 * CODSHIPX_AI_R83_R9_TRUE_BOTTOM_CENTER_PROCESS
 *
 * Final positioning:
 * - SETUP CRM title remains untouched.
 * - Process stream is anchored to the viewport, not content flow.
 * - Whole process block sits at bottom-center.
 * - Each dot + text row is visually centered inside the block.
 */

.cx-r83-process {
    position: fixed;
    left: 50%;
    right: auto;
    top: auto;
    bottom: 64px;

    width: min(420px, calc(100vw - 40px));
    height: 118px;

    margin: 0;

    transform: translateX(-50%);

    text-align: center;

    z-index: 5;
}

.cx-r83-step {
    justify-content: center;
}


/*
 * Smaller screens:
 * keep the process clear of the bottom edge while preserving
 * true horizontal centering.
 */
@media (max-width: 640px) {

    .cx-r83-process {
        left: 50%;
        right: auto;
        top: auto;
        bottom: 46px;

        width: min(360px, calc(100vw - 28px));

        transform: translateX(-50%);
    }

    .cx-r83-step {
        justify-content: center;
    }
}


/*
 * CODSHIPX_AI_R83_R12_R3_DETACHED_PROCESS_POSITION
 *
 * .cx-r83-process is moved by JS to be a direct child of
 * #cx-r83-first-login before the cinematic root is mounted.
 *
 * It is therefore independent of the centered title wrapper.
 */

#cx-r83-first-login > .cx-r83-process {
    position: fixed;

    left: 50%;
    right: auto;

    top: auto;
    bottom: 64px;

    width:
        min(
            420px,
            calc(100vw - 40px)
        );

    height: 118px;

    margin: 0;

    transform:
        translateX(-50%);

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    text-align: center;

    z-index: 20;

    pointer-events: none;
}


#cx-r83-first-login
> .cx-r83-process
> .cx-r83-step {
    justify-content: center;
}


@media (max-width: 640px) {

    #cx-r83-first-login > .cx-r83-process {
        left: 50%;
        right: auto;

        top: auto;
        bottom: 46px;

        width:
            min(
                360px,
                calc(100vw - 28px)
            );

        transform:
            translateX(-50%);
    }

}