/*
 * CODSHIPX_AI_R36_R39_R1_CINEMATIC_CODI_PROGRESS_PROCESS_FINAL
 *
 * Black cinematic authority.
 * No blue provisioning palette.
 * 1 -> 100 percent over 30 seconds.
 * 6 x 5 second visible processing stages.
 */


/* =========================================================
   BRAND / ANIMATION VALUES
   ========================================================= */

@property --cx39-percent {
    syntax:"<integer>";
    initial-value:1;
    inherits:false;
}

:root{
    --cx39-black:#010202;
    --cx39-black-2:#030504;
    --cx39-black-3:#050806;

    --cx39-white:#ffffff;
    --cx39-white-soft:rgba(255,255,255,.72);
    --cx39-white-muted:rgba(255,255,255,.42);

    --cx39-lime:#b9ff32;
    --cx39-lime-2:#97f526;
    --cx39-green:#60f58e;

    --cx39-track:rgba(255,255,255,.10);
}


/* =========================================================
   FULL SCREEN SETUP
   ========================================================= */

.codi-r50-provisioning{
    position:fixed!important;
    inset:0!important;

    z-index:2147482500!important;

    display:flex!important;
    flex-direction:column!important;

    align-items:center!important;
    justify-content:center!important;

    width:100vw!important;
    height:100vh!important;

    margin:0!important;

    padding:
        32px 28px!important;

    box-sizing:border-box!important;

    overflow:hidden!important;

    border:0!important;
    border-radius:0!important;

    text-align:center!important;

    background:
        radial-gradient(
            circle at 50% 17%,
            rgba(185,255,50,.07),
            transparent 24%
        ),
        radial-gradient(
            ellipse at 50% 106%,
            rgba(96,245,142,.065),
            transparent 40%
        ),
        linear-gradient(
            180deg,
            #010202 0%,
            #020303 44%,
            #040604 100%
        )!important;

    color:#fff!important;

    isolation:isolate!important;

    box-shadow:none!important;
}


/* subtle cinematic space */

.codi-r50-provisioning::before{
    content:""!important;

    position:absolute!important;
    inset:0!important;

    z-index:-2!important;

    pointer-events:none!important;

    background:
        radial-gradient(
            circle at 16% 27%,
            rgba(185,255,50,.045) 0 2px,
            transparent 3px
        ),
        radial-gradient(
            circle at 76% 33%,
            rgba(185,255,50,.05) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 63% 74%,
            rgba(96,245,142,.045) 0 2px,
            transparent 3px
        )!important;

    opacity:.8!important;
}


.codi-r50-provisioning::after{
    content:""!important;

    position:absolute!important;

    z-index:-1!important;

    left:50%!important;
    bottom:-64vw!important;

    width:120vw!important;
    height:120vw!important;

    transform:
        translateX(-50%)!important;

    border:
        1px solid
        rgba(185,255,50,.085)!important;

    border-radius:50%!important;

    box-shadow:
        0 -30px 100px
        rgba(185,255,50,.025)!important;

    pointer-events:none!important;
}


/* hide final-review content while provisioning is up */

.codi-r50-final-review:has(.codi-r50-provisioning)
> header,

.codi-r50-final-review:has(.codi-r50-provisioning)
> .codi-r50-review-body,

.codi-r50-final-review:has(.codi-r50-provisioning)
> footer{
    visibility:hidden!important;
    pointer-events:none!important;
}


/* =========================================================
   CODI PROCESS CORE
   ========================================================= */

.codi-r50-provisioning-spinner{
    position:relative!important;

    width:82px!important;
    height:82px!important;

    flex:0 0 auto!important;

    margin:
        0 0
        20px!important;

    border:
        1px solid
        rgba(185,255,50,.18)!important;

    border-radius:25px!important;

    background:
        linear-gradient(
            145deg,
            rgba(185,255,50,.085),
            rgba(96,245,142,.035)
        )!important;

    box-shadow:
        0 0 0 11px rgba(185,255,50,.018),
        0 0 44px rgba(185,255,50,.075),
        inset 0 1px 0 rgba(255,255,255,.035)!important;

    animation:
        cx39CoreFloat
        3.2s ease-in-out
        infinite!important;
}


.codi-r50-provisioning-spinner::before{
    content:""!important;

    position:absolute!important;

    inset:-15px!important;

    border:
        1px solid
        rgba(185,255,50,.10)!important;

    border-radius:32px!important;

    animation:
        cx39Orbit
        6s linear
        infinite!important;
}


.codi-r50-provisioning-spinner::after{
    content:""!important;

    position:absolute!important;

    left:50%!important;
    top:50%!important;

    width:32px!important;
    height:32px!important;

    transform:
        translate(-50%,-50%)
        rotate(45deg)!important;

    border-radius:8px!important;

    background:
        linear-gradient(
            135deg,
            var(--cx39-lime),
            var(--cx39-green)
        )!important;

    box-shadow:
        0 0 26px
        rgba(185,255,50,.22)!important;
}


@keyframes cx39CoreFloat{
    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-6px);
    }
}


@keyframes cx39Orbit{
    to{
        transform:rotate(360deg);
    }
}


/* =========================================================
   WHITE TEXT
   ========================================================= */

.codi-r50-provisioning > h1{
    position:relative!important;
    z-index:2!important;

    max-width:1100px!important;

    margin:0!important;

    color:#fff!important;

    font-size:
        clamp(
            48px,
            5.6vw,
            82px
        )!important;

    font-weight:950!important;

    line-height:.97!important;

    letter-spacing:-.055em!important;

    text-shadow:
        0 10px 42px
        rgba(0,0,0,.78)!important;
}


.codi-r50-provisioning > p{
    position:relative!important;
    z-index:2!important;

    max-width:850px!important;

    margin:
        14px auto
        0!important;

    color:
        rgba(255,255,255,.66)!important;

    font-size:
        clamp(
            14px,
            1.25vw,
            18px
        )!important;

    font-weight:600!important;

    line-height:1.5!important;
}


/* =========================================================
   PROGRESS SYSTEM
   ========================================================= */

.codi-r50-provisioning-stages{
    --cx39-percent:1;

    position:relative!important;
    z-index:2!important;

    display:grid!important;

    width:min(
        880px,
        calc(100vw - 48px)
    )!important;

    margin:
        30px auto
        0!important;

    padding:
        52px 0
        0!important;

    gap:8px!important;

    box-sizing:border-box!important;

    text-align:left!important;

    counter-reset:
        cx39Percent
        var(--cx39-percent)!important;

    animation:
        cx39PercentCounter
        30s steps(99,end)
        forwards!important;
}


/* progress background */

.codi-r50-provisioning-stages::before{
    content:""!important;

    position:absolute!important;

    left:0!important;
    top:8px!important;

    width:100%!important;
    height:7px!important;

    border-radius:999px!important;

    background:
        rgba(255,255,255,.10)!important;

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.025)!important;
}


/* Codi-colored fill */

.codi-r50-provisioning-stages::after{
    content:""!important;

    position:absolute!important;

    left:0!important;
    top:8px!important;

    width:0%!important;
    height:7px!important;

    border-radius:999px!important;

    background:
        linear-gradient(
            90deg,
            #b9ff32 0%,
            #a4fb2c 45%,
            #60f58e 100%
        )!important;

    box-shadow:
        0 0 13px
        rgba(185,255,50,.22),
        0 0 30px
        rgba(96,245,142,.09)!important;

    animation:
        cx39ProgressFill
        30s linear
        forwards!important;
}


/* live 1% -> 100% number */

.codi-r50-provisioning-stages
> span:first-child::after{
    content:
        counter(cx39Percent)
        "%"!important;

    position:absolute!important;

    right:0!important;
    top:-50px!important;

    display:block!important;

    width:auto!important;
    height:auto!important;

    color:#fff!important;

    background:transparent!important;

    border:0!important;

    box-shadow:none!important;

    transform:none!important;

    font-size:14px!important;
    font-weight:900!important;

    letter-spacing:.02em!important;

    opacity:1!important;
}


/* =========================================================
   SIX CLEAR PROCESS ROWS
   ========================================================= */

.codi-r50-provisioning-stages
> span{
    position:relative!important;

    display:flex!important;
    align-items:center!important;

    min-height:46px!important;

    padding:
        0 16px
        0 51px!important;

    border:
        1px solid
        rgba(255,255,255,.055)!important;

    border-radius:13px!important;

    background:
        rgba(255,255,255,.018)!important;

    color:
        rgba(255,255,255,.34)!important;

    font-size:
        clamp(
            12px,
            1.02vw,
            14px
        )!important;

    font-weight:690!important;

    line-height:1.35!important;

    box-sizing:border-box!important;

    opacity:.62!important;

    transform:translateX(0)!important;
}


.codi-r50-provisioning-stages
> span::before{
    content:""!important;

    position:absolute!important;

    left:16px!important;
    top:50%!important;

    display:grid!important;
    place-items:center!important;

    width:17px!important;
    height:17px!important;

    transform:
        translateY(-50%)!important;

    border:
        1px solid
        rgba(255,255,255,.13)!important;

    border-radius:50%!important;

    background:
        rgba(255,255,255,.05)!important;

    box-shadow:none!important;

    color:#071004!important;

    font-size:10px!important;
    font-weight:950!important;
}


/*
 * Each process is visibly active for 5 seconds.
 * At completion it remains visibly completed.
 */

.codi-r50-provisioning-stages
> span:nth-child(1){
    animation:
        cx39ProcessRow
        5s linear
        0s both!important;
}

.codi-r50-provisioning-stages
> span:nth-child(2){
    animation:
        cx39ProcessRow
        5s linear
        5s both!important;
}

.codi-r50-provisioning-stages
> span:nth-child(3){
    animation:
        cx39ProcessRow
        5s linear
        10s both!important;
}

.codi-r50-provisioning-stages
> span:nth-child(4){
    animation:
        cx39ProcessRow
        5s linear
        15s both!important;
}

.codi-r50-provisioning-stages
> span:nth-child(5){
    animation:
        cx39ProcessRow
        5s linear
        20s both!important;
}

.codi-r50-provisioning-stages
> span:nth-child(6){
    animation:
        cx39ProcessRow
        5s linear
        25s both!important;
}


.codi-r50-provisioning-stages
> span:nth-child(1)::before{
    animation:
        cx39ProcessDot
        5s linear
        0s both!important;
}

.codi-r50-provisioning-stages
> span:nth-child(2)::before{
    animation:
        cx39ProcessDot
        5s linear
        5s both!important;
}

.codi-r50-provisioning-stages
> span:nth-child(3)::before{
    animation:
        cx39ProcessDot
        5s linear
        10s both!important;
}

.codi-r50-provisioning-stages
> span:nth-child(4)::before{
    animation:
        cx39ProcessDot
        5s linear
        15s both!important;
}

.codi-r50-provisioning-stages
> span:nth-child(5)::before{
    animation:
        cx39ProcessDot
        5s linear
        20s both!important;
}

.codi-r50-provisioning-stages
> span:nth-child(6)::before{
    animation:
        cx39ProcessDot
        5s linear
        25s both!important;
}


/* override old R37 30-second hint */

.codi-r50-provisioning-stages
> span:last-child::after{
    content:"Codi is securely preparing your CRM…"!important;

    position:absolute!important;

    left:50%!important;
    top:calc(100% + 12px)!important;

    width:max-content!important;
    max-width:90vw!important;

    transform:
        translateX(-50%)!important;

    color:
        rgba(255,255,255,.35)!important;

    background:transparent!important;

    border:0!important;

    box-shadow:none!important;

    font-size:10px!important;
    font-weight:600!important;

    letter-spacing:.03em!important;
}


/* percentage */

@keyframes cx39PercentCounter{
    from{
        --cx39-percent:1;
    }

    to{
        --cx39-percent:100;
    }
}


/* fill */

@keyframes cx39ProgressFill{
    from{
        width:1%;
    }

    to{
        width:100%;
    }
}


/* current process -> completed process */

@keyframes cx39ProcessRow{
    0%{
        opacity:1;

        color:#fff;

        background:
            rgba(185,255,50,.08);

        border-color:
            rgba(185,255,50,.20);

        box-shadow:
            0 0 0 1px
            rgba(185,255,50,.04),
            0 9px 28px
            rgba(185,255,50,.045);
    }

    12%,
    78%{
        opacity:1;

        color:#fff;

        background:
            rgba(185,255,50,.09);

        border-color:
            rgba(185,255,50,.24);

        box-shadow:
            0 0 22px
            rgba(185,255,50,.055);

        transform:
            translateX(4px);
    }

    100%{
        opacity:1;

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

        background:
            rgba(96,245,142,.035);

        border-color:
            rgba(96,245,142,.10);

        box-shadow:none;

        transform:
            translateX(0);
    }
}


@keyframes cx39ProcessDot{
    0%,
    78%{
        background:
            linear-gradient(
                135deg,
                #b9ff32,
                #60f58e
            );

        border-color:
            rgba(185,255,50,.45);

        box-shadow:
            0 0 0 6px
            rgba(185,255,50,.055),
            0 0 16px
            rgba(185,255,50,.18);
    }

    100%{
        background:
            linear-gradient(
                135deg,
                #9ff52d,
                #60f58e
            );

        border-color:
            rgba(96,245,142,.34);

        box-shadow:
            0 0 10px
            rgba(96,245,142,.08);
    }
}


/* =========================================================
   SUCCESS
   ========================================================= */

.codi-r50-final-success{
    position:fixed!important;
    inset:0!important;

    z-index:2147482600!important;

    display:grid!important;
    place-items:center!important;

    width:100vw!important;
    height:100vh!important;

    padding:
        30px 25px!important;

    box-sizing:border-box!important;

    overflow:auto!important;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(185,255,50,.065),
            transparent 25%
        ),
        radial-gradient(
            ellipse at 50% 107%,
            rgba(96,245,142,.055),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #010202 0%,
            #020303 48%,
            #040604 100%
        )!important;

    color:#fff!important;
}


.codi-success-core{
    display:flex!important;
    flex-direction:column!important;

    align-items:center!important;
    justify-content:center!important;

    width:min(
        860px,
        calc(100vw - 44px)
    )!important;

    margin:auto!important;

    padding:0!important;

    border:0!important;
    border-radius:0!important;

    background:transparent!important;

    box-shadow:none!important;

    text-align:center!important;
}


.codi-success-pulse{
    position:relative!important;

    width:82px!important;
    height:82px!important;

    margin:
        0 0
        19px!important;

    border:
        1px solid
        rgba(185,255,50,.20)!important;

    border-radius:50%!important;

    background:
        rgba(185,255,50,.055)!important;

    box-shadow:
        0 0 0 10px
        rgba(185,255,50,.018),
        0 0 38px
        rgba(185,255,50,.07)!important;
}


.codi-success-pulse::before{
    content:"✓"!important;

    position:absolute!important;
    inset:0!important;

    display:grid!important;
    place-items:center!important;

    color:#fff!important;

    font-size:39px!important;
    font-weight:900!important;
}


.codi-success-pulse::after{
    content:""!important;

    position:absolute!important;

    inset:-13px!important;

    border:
        1px solid
        rgba(185,255,50,.10)!important;

    border-radius:50%!important;
}


.codi-success-core > h1{
    margin:0!important;

    color:#fff!important;

    font-size:
        clamp(
            45px,
            5vw,
            72px
        )!important;

    font-weight:950!important;

    line-height:1!important;

    letter-spacing:-.05em!important;
}


.codi-success-core > p{
    margin:
        13px 0
        0!important;

    color:
        rgba(255,255,255,.64)!important;

    font-size:
        clamp(
            14px,
            1.2vw,
            18px
        )!important;

    font-weight:600!important;
}


.codi-success-status{
    margin:
        17px 0
        0!important;

    color:
        var(--cx39-lime)!important;

    font-size:11px!important;
    font-weight:900!important;

    letter-spacing:.14em!important;

    text-transform:uppercase!important;
}


/* completed progress */

.codi-success-checks{
    position:relative!important;

    display:grid!important;

    width:min(
        760px,
        calc(100vw - 48px)
    )!important;

    margin:
        22px auto
        0!important;

    padding:
        43px 0
        0!important;

    gap:7px!important;
}


.codi-success-checks::before{
    content:""!important;

    position:absolute!important;

    top:8px!important;
    left:0!important;

    width:100%!important;
    height:7px!important;

    border-radius:999px!important;

    background:
        linear-gradient(
            90deg,
            #b9ff32,
            #60f58e
        )!important;

    box-shadow:
        0 0 16px
        rgba(185,255,50,.12)!important;
}


/* retire old blue success fill pseudo */

.codi-success-checks::after{
    content:"100%"!important;

    position:absolute!important;

    top:-15px!important;
    right:0!important;

    width:auto!important;
    height:auto!important;

    color:#fff!important;

    background:transparent!important;

    border:0!important;

    box-shadow:none!important;

    font-size:13px!important;
    font-weight:900!important;
}


.codi-success-checks > *{
    position:relative!important;

    display:flex!important;
    align-items:center!important;

    min-height:39px!important;

    padding:
        0 13px
        0 44px!important;

    border:
        1px solid
        rgba(96,245,142,.08)!important;

    border-radius:11px!important;

    background:
        rgba(96,245,142,.025)!important;

    color:
        rgba(255,255,255,.72)!important;

    font-size:12px!important;
    font-weight:680!important;

    line-height:1.3!important;

    text-align:left!important;

    box-shadow:none!important;
}


.codi-success-checks > *::before{
    content:"✓"!important;

    position:absolute!important;

    left:13px!important;
    top:50%!important;

    display:grid!important;
    place-items:center!important;

    width:17px!important;
    height:17px!important;

    transform:
        translateY(-50%)!important;

    border:
        0!important;

    border-radius:50%!important;

    background:
        linear-gradient(
            135deg,
            #b9ff32,
            #60f58e
        )!important;

    color:#071005!important;

    box-shadow:
        0 0 10px
        rgba(185,255,50,.08)!important;

    font-size:9px!important;
    font-weight:950!important;
}


/* CTA */

.codi-open-crm{
    min-width:210px!important;
    min-height:50px!important;

    margin:
        20px auto
        0!important;

    padding:
        0 27px!important;

    border:
        0!important;

    border-radius:13px!important;

    background:
        linear-gradient(
            135deg,
            #b9ff32,
            #60f58e
        )!important;

    color:#071005!important;

    box-shadow:
        0 10px 28px
        rgba(185,255,50,.10)!important;

    font-size:13px!important;
    font-weight:950!important;
}


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

@media(max-width:760px){

    .codi-r50-provisioning{
        padding:
            20px 14px!important;
    }

    .codi-r50-provisioning-spinner{
        width:60px!important;
        height:60px!important;

        margin-bottom:14px!important;
    }

    .codi-r50-provisioning-spinner::after{
        width:23px!important;
        height:23px!important;
    }

    .codi-r50-provisioning > h1{
        font-size:
            clamp(
                37px,
                11vw,
                50px
            )!important;
    }

    .codi-r50-provisioning > p{
        margin-top:10px!important;

        font-size:12px!important;
    }

    .codi-r50-provisioning-stages{
        width:
            calc(100vw - 28px)!important;

        margin-top:22px!important;

        padding-top:42px!important;

        gap:5px!important;
    }

    .codi-r50-provisioning-stages
    > span{
        min-height:41px!important;

        padding:
            0 9px
            0 42px!important;

        font-size:10.5px!important;
    }

    .codi-r50-provisioning-stages
    > span::before{
        left:13px!important;

        width:15px!important;
        height:15px!important;
    }

    .codi-success-checks{
        width:
            calc(100vw - 30px)!important;
    }
}