/*
 * CODSHIPX_AI_R36_R37_CINEMATIC_30S_SETUP_SUCCESS
 *
 * Presentation authority only.
 * Existing server completion + minimum 30 second timing remains authoritative.
 */


/* =========================================================
   SHARED CINEMATIC CANVAS
   ========================================================= */

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

    z-index:2147482000!important;

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

    max-width:none!important;
    max-height:none!important;

    margin:0!important;
    padding:
        clamp(30px,5vh,62px)
        clamp(24px,5vw,86px)!important;

    box-sizing:border-box!important;

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

    overflow:hidden!important;

    isolation:isolate!important;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(20,92,151,.16) 0,
            rgba(6,29,52,.09) 27%,
            rgba(0,0,0,0) 54%
        ),
        radial-gradient(
            ellipse at 50% 112%,
            rgba(21,111,186,.20) 0,
            rgba(3,30,58,.10) 35%,
            transparent 61%
        ),
        linear-gradient(
            180deg,
            #02060b 0%,
            #020811 40%,
            #010408 100%
        )!important;

    color:#fff!important;

    box-shadow:none!important;
}


/* cinematic horizon */

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

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

    width:130vw!important;
    height:72vw!important;

    min-width:1400px!important;
    min-height:700px!important;

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

    transform:
        translate(-50%,-8%)!important;

    border:
        1px solid
        rgba(79,164,255,.16)!important;

    border-radius:50%!important;

    background:
        radial-gradient(
            ellipse at 50% 100%,
            rgba(28,117,210,.11),
            transparent 56%
        )!important;

    box-shadow:
        0 -1px 80px rgba(33,128,224,.10),
        inset 0 1px 55px rgba(56,147,255,.05)!important;

    pointer-events:none!important;
}


/* ambient lower glow */

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

    position:absolute!important;
    z-index:-1!important;

    left:50%!important;
    bottom:-20vh!important;

    width:78vw!important;
    height:34vh!important;

    transform:
        translateX(-50%)!important;

    background:
        radial-gradient(
            ellipse,
            rgba(30,132,230,.11),
            transparent 67%
        )!important;

    filter:blur(14px)!important;

    pointer-events:none!important;
}


/* =========================================================
   30 SECOND PROVISIONING
   ========================================================= */

.codi-r50-provisioning{
    display:flex!important;
    flex-direction:column!important;

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

    gap:0!important;

    text-align:center!important;
}


/* Retire old spinner look -> cinematic reactor */

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

    width:84px!important;
    height:84px!important;

    margin:
        0 0
        24px!important;

    flex:0 0 auto!important;

    border:
        1px solid
        rgba(92,176,255,.28)!important;

    border-radius:28px!important;

    background:
        linear-gradient(
            145deg,
            rgba(14,52,91,.92),
            rgba(4,17,31,.86)
        )!important;

    box-shadow:
        0 0 0 12px rgba(43,131,216,.035),
        0 0 48px rgba(44,148,246,.18),
        inset 0 1px 0 rgba(255,255,255,.08)!important;

    animation:
        cxR37ReactorFloat
        3.6s ease-in-out
        infinite!important;
}


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

    position:absolute!important;

    width:34px!important;
    height:34px!important;

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

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

    border-radius:8px!important;

    background:
        linear-gradient(
            135deg,
            #74c8ff,
            #167ee8
        )!important;

    box-shadow:
        0 0 26px rgba(55,166,255,.75)!important;
}


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

    position:absolute!important;

    inset:-17px!important;

    border:
        1px solid
        rgba(68,155,245,.18)!important;

    border-radius:50%!important;

    animation:
        cxR37Orbit
        6s linear
        infinite!important;
}


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

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


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


/* Main title */

.codi-r50-provisioning > h1{
    margin:0!important;

    color:#fff!important;

    font-size:
        clamp(
            46px,
            5vw,
            76px
        )!important;

    font-weight:900!important;

    line-height:.98!important;

    letter-spacing:-.052em!important;

    text-shadow:
        0 6px 32px rgba(0,0,0,.55)!important;
}


/* Description */

.codi-r50-provisioning > p{
    max-width:770px!important;

    margin:
        17px auto
        0!important;

    color:
        rgba(221,230,240,.72)!important;

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

    line-height:1.55!important;
}


/* =========================================================
   PROGRESS + PROCESS LIST
   ========================================================= */

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

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

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

    margin:
        30px auto
        0!important;

    padding:
        54px 0
        0!important;

    gap:6px!important;

    text-align:left!important;

    box-sizing:border-box!important;
}


/* progress track */

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

    position:absolute!important;

    top:0!important;
    left:0!important;

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

    border-radius:999px!important;

    background:
        rgba(95,125,156,.18)!important;

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


/* animated 30 second fill */

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

    position:absolute!important;

    top:0!important;
    left:0!important;

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

    border-radius:999px!important;

    background:
        linear-gradient(
            90deg,
            #3097ff,
            #77d8ff
        )!important;

    box-shadow:
        0 0 12px rgba(54,161,255,.62),
        0 0 28px rgba(54,161,255,.24)!important;

    animation:
        cxR37ThirtySecondProgress
        30s linear
        forwards!important;
}


@keyframes cxR37ThirtySecondProgress{
    from{
        width:0;
    }

    to{
        width:100%;
    }
}


/* process rows */

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

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

    min-height:44px!important;

    padding:
        0 14px
        0 46px!important;

    border:
        1px solid
        transparent!important;

    border-radius:12px!important;

    color:
        rgba(175,192,211,.48)!important;

    background:
        transparent!important;

    font-size:
        clamp(
            12px,
            1.05vw,
            15px
        )!important;

    font-weight:650!important;

    line-height:1.35!important;

    box-sizing:border-box!important;

    transition:none!important;
}


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

    position:absolute!important;

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

    width:12px!important;
    height:12px!important;

    transform:
        translateY(-50%)!important;

    border:
        2px solid
        rgba(103,158,208,.22)!important;

    border-radius:50%!important;

    background:
        rgba(45,91,131,.17)!important;

    box-shadow:none!important;
}


/* six sequential 5 second visual stages */

.codi-r50-provisioning-stages > span:nth-child(1){
    animation:
        cxR37StageRun
        5s ease forwards
        0s!important;
}

.codi-r50-provisioning-stages > span:nth-child(2){
    animation:
        cxR37StageRun
        5s ease forwards
        5s!important;
}

.codi-r50-provisioning-stages > span:nth-child(3){
    animation:
        cxR37StageRun
        5s ease forwards
        10s!important;
}

.codi-r50-provisioning-stages > span:nth-child(4){
    animation:
        cxR37StageRun
        5s ease forwards
        15s!important;
}

.codi-r50-provisioning-stages > span:nth-child(5){
    animation:
        cxR37StageRun
        5s ease forwards
        20s!important;
}

.codi-r50-provisioning-stages > span:nth-child(6){
    animation:
        cxR37StageRun
        5s ease forwards
        25s!important;
}


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

.codi-r50-provisioning-stages > span:nth-child(2)::before{
    animation:
        cxR37DotRun
        5s ease forwards
        5s!important;
}

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

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

.codi-r50-provisioning-stages > span:nth-child(5)::before{
    animation:
        cxR37DotRun
        5s ease forwards
        20s!important;
}

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


@keyframes cxR37StageRun{
    0%{
        color:#f5f9ff;
        background:rgba(28,94,154,.13);
        border-color:rgba(66,151,231,.12);
        transform:translateX(0);
    }

    14%,82%{
        color:#fff;
        background:rgba(27,102,170,.16);
        border-color:rgba(71,163,248,.16);
        transform:translateX(5px);
    }

    100%{
        color:rgba(183,201,219,.70);
        background:transparent;
        border-color:transparent;
        transform:translateX(0);
    }
}


@keyframes cxR37DotRun{
    0%,82%{
        border-color:#53b2ff;
        background:#359df2;

        box-shadow:
            0 0 0 7px rgba(57,158,242,.10),
            0 0 19px rgba(62,169,255,.75);
    }

    100%{
        border-color:#5ebaff;
        background:#5ebaff;

        box-shadow:
            0 0 11px rgba(70,170,250,.30);
    }
}


/* 30 second hint */

.codi-r50-provisioning-stages > span:last-child::after{
    content:"Secure setup • completing in about 30 seconds"!important;

    position:absolute!important;

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

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

    transform:
        translateX(-50%)!important;

    color:
        rgba(153,173,195,.52)!important;

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

    letter-spacing:.02em!important;
}


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

.codi-r50-final-success{
    display:grid!important;

    place-items:center!important;

    text-align:center!important;
}


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

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

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

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

    max-width:820px!important;

    margin:0 auto!important;
    padding:0!important;

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

    background:transparent!important;

    box-shadow:none!important;

    color:#fff!important;
}


/* success reactor */

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

    width:94px!important;
    height:94px!important;

    margin:
        0 auto
        25px!important;

    border:
        1px solid
        rgba(82,169,255,.45)!important;

    border-radius:50%!important;

    background:
        radial-gradient(
            circle,
            rgba(51,158,255,.34),
            rgba(10,44,82,.65)
        )!important;

    box-shadow:
        0 0 0 12px rgba(54,151,244,.055),
        0 0 58px rgba(50,158,255,.30),
        inset 0 0 22px rgba(97,190,255,.18)!important;

    animation:
        cxR37SuccessPulse
        2.2s ease-in-out
        infinite!important;
}


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

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

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

    color:#fff!important;

    font-size:44px!important;
    font-weight:700!important;
}


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

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


/* success heading */

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

    color:#fff!important;

    font-size:
        clamp(
            48px,
            5vw,
            74px
        )!important;

    font-weight:900!important;

    line-height:1!important;

    letter-spacing:-.05em!important;

    text-shadow:
        0 6px 34px rgba(0,0,0,.55)!important;
}


.codi-success-core > p{
    max-width:680px!important;

    margin:
        16px auto
        0!important;

    color:
        rgba(220,230,240,.72)!important;

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

    line-height:1.55!important;
}


/* hide old badge/card treatment */

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

    padding:0!important;

    border:0!important;

    background:transparent!important;

    box-shadow:none!important;

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

    font-size:11px!important;

    letter-spacing:.12em!important;

    text-transform:uppercase!important;
}


/* completed progress */

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

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

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

    margin:
        25px auto
        0!important;

    padding:
        52px 0
        0!important;

    gap:5px!important;

    text-align:left!important;
}


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

    position:absolute!important;

    top:0!important;
    left:0!important;

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

    border-radius:999px!important;

    background:
        linear-gradient(
            90deg,
            #2c95ff,
            #75d9ff
        )!important;

    box-shadow:
        0 0 14px rgba(54,163,255,.65),
        0 0 30px rgba(54,163,255,.20)!important;
}


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

    position:absolute!important;

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

    color:#8cd8ff!important;

    font-size:12px!important;
    font-weight:800!important;
}


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

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

    min-height:36px!important;

    padding:
        0 10px
        0 44px!important;

    color:
        rgba(200,215,230,.74)!important;

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

    font-weight:650!important;

    line-height:1.3!important;

    background:transparent!important;

    border:0!important;
}


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

    position:absolute!important;

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

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

    width:20px!important;
    height:20px!important;

    transform:
        translateY(-50%)!important;

    border:
        1px solid
        rgba(89,181,255,.70)!important;

    border-radius:50%!important;

    color:#fff!important;

    background:
        rgba(39,143,233,.46)!important;

    box-shadow:
        0 0 14px rgba(54,161,255,.31)!important;

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


/* Open CRM */

.codi-open-crm{
    min-width:220px!important;
    min-height:52px!important;

    margin:
        27px auto
        0!important;

    padding:
        0 30px!important;

    border:
        1px solid
        rgba(111,199,255,.72)!important;

    border-radius:14px!important;

    color:#fff!important;

    background:
        linear-gradient(
            135deg,
            #207fdb 0%,
            #56b9ff 100%
        )!important;

    box-shadow:
        0 12px 32px rgba(21,118,206,.28),
        0 0 22px rgba(58,168,255,.20),
        inset 0 1px 0 rgba(255,255,255,.21)!important;

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

    cursor:pointer!important;

    transition:
        transform .18s ease,
        box-shadow .18s ease!important;
}


.codi-open-crm:hover{
    transform:
        translateY(-2px)!important;

    box-shadow:
        0 15px 36px rgba(21,118,206,.34),
        0 0 30px rgba(58,168,255,.26)!important;
}


/* =========================================================
   MOBILE / SMALL VIEWPORT
   ========================================================= */

@media(max-width:760px){

    .codi-r50-provisioning,
    .codi-r50-final-success{
        padding:
            26px 17px!important;
    }

    .codi-r50-provisioning{
        justify-content:center!important;
    }

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

        margin-bottom:18px!important;
    }

    .codi-r50-provisioning-spinner::before{
        width:26px!important;
        height:26px!important;
    }

    .codi-r50-provisioning > h1{
        font-size:
            clamp(
                38px,
                12vw,
                54px
            )!important;
    }

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

        font-size:13px!important;
    }

    .codi-r50-provisioning-stages{
        margin-top:23px!important;

        padding-top:39px!important;

        gap:3px!important;
    }

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

        padding-left:39px!important;

        font-size:11.5px!important;
    }

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

    .codi-r50-provisioning-stages > span:last-child::after{
        top:calc(100% + 12px)!important;

        font-size:9.5px!important;
    }

    .codi-success-pulse{
        width:72px!important;
        height:72px!important;

        margin-bottom:18px!important;
    }

    .codi-success-pulse::after{
        font-size:34px!important;
    }

    .codi-success-core > h1{
        font-size:
            clamp(
                38px,
                12vw,
                52px
            )!important;
    }

    .codi-success-checks{
        margin-top:20px!important;

        padding-top:42px!important;
    }

    .codi-success-checks > *{
        min-height:32px!important;

        padding-left:39px!important;

        font-size:11px!important;
    }

    .codi-open-crm{
        width:100%!important;

        max-width:300px!important;

        min-width:0!important;

        margin-top:22px!important;
    }
}


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

    .codi-r50-provisioning-spinner,
    .codi-r50-provisioning-spinner::after,
    .codi-success-pulse{
        animation:none!important;
    }

    /*
     * Do not remove the 30-second server wait.
     * Reduced-motion only minimizes decorative motion.
     */
}