/* ==========================================================
   ONYX PRICING V2 — CONFIGURATION REACTOR
   ========================================================== */

.config-shell{

    isolation:isolate;

    box-shadow:
        0 60px 180px rgba(0,0,0,.38),
        0 0 110px rgba(135,63,218,.055),
        inset 0 1px 0 rgba(255,255,255,.065)!important;

}


/* moving spectral perimeter */

.config-shell:after{

    content:"";

    position:absolute;

    z-index:30;

    inset:-1px;

    padding:1px;

    pointer-events:none;

    border-radius:inherit;

    opacity:.34;

    background:
        conic-gradient(
            from var(--pricing-v2-angle,0deg),

            transparent 0deg,

            rgba(236,65,194,.52) 42deg,

            transparent 87deg,

            rgba(116,90,255,.47) 161deg,

            transparent 217deg,

            rgba(70,178,255,.34) 286deg,

            transparent 360deg
        );

    -webkit-mask:
        linear-gradient(#fff 0 0)
            content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    animation:
        pricingV2Border
        13s linear infinite;

}


@property --pricing-v2-angle{
    syntax:"<angle>";
    initial-value:0deg;
    inherits:false;
}


@keyframes pricingV2Border{

    to{
        --pricing-v2-angle:360deg;
    }

}


/* ==========================================================
   STAGE ATMOSPHERE
   ========================================================== */

.stage{

    background:

        radial-gradient(
            ellipse at 52% 50%,
            rgba(170,65,226,.055),
            transparent 37%
        ),

        radial-gradient(
            ellipse at 78% 65%,
            rgba(72,112,255,.035),
            transparent 32%
        );

}


.stage:after{

    content:"";

    position:absolute;

    z-index:1;

    left:50%;
    bottom:9%;

    width:72%;
    height:19%;

    transform:
        translateX(-50%);

    pointer-events:none;

    border-radius:50%;

    opacity:.38;

    background:
        radial-gradient(
            ellipse,
            rgba(220,88,238,.14),
            rgba(112,78,240,.055) 34%,
            transparent 70%
        );

    filter:
        blur(18px);

}


/* ==========================================================
   REACTOR HUD
   ========================================================== */

.pricing-v2-hud{

    position:absolute;

    z-index:10;

    left:26px;
    right:26px;
    bottom:25px;

    display:flex;

    align-items:flex-end;
    justify-content:space-between;

    gap:20px;

    pointer-events:none;

}


.pricing-v2-status{

    display:flex;

    align-items:center;

    gap:8px;

    color:
        rgba(196,185,205,.40);

    font-size:6px;
    font-weight:800;

    letter-spacing:.15em;

    text-transform:uppercase;

}


.pricing-v2-status i{

    width:23px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            #e64abd,
            #8171ff,
            transparent
        );

}


.pricing-v2-data{

    display:flex;

    align-items:center;

    gap:7px;

}


.pricing-v2-chip{

    min-width:74px;

    padding:8px 10px;

    border:
        1px solid
        rgba(255,255,255,.06);

    border-radius:10px;

    background:
        rgba(9,7,14,.48);

    backdrop-filter:
        blur(9px);

}


.pricing-v2-chip span{

    display:block;

    color:
        rgba(158,145,166,.52);

    font-size:5px;
    font-weight:800;

    letter-spacing:.12em;

    text-transform:uppercase;

}


.pricing-v2-chip strong{

    display:block;

    margin-top:3px;

    color:
        rgba(241,231,245,.72);

    font-size:7px;

}


/* ==========================================================
   DEVICE MATERIALIZATION FLASH
   ========================================================== */

.pricing-v2-flash{

    position:absolute;

    z-index:8;

    inset:0;

    pointer-events:none;

    opacity:0;

    background:

        radial-gradient(
            circle at 52% 52%,
            rgba(255,255,255,.08),
            rgba(224,73,220,.045) 14%,
            rgba(113,87,255,.025) 32%,
            transparent 62%
        );

    mix-blend-mode:screen;

}


.pricing-v2-flash.run{

    animation:
        pricingV2Flash
        .52s ease-out;

}


@keyframes pricingV2Flash{

    0%{
        opacity:0;
    }

    22%{
        opacity:.8;
    }

    100%{
        opacity:0;
    }

}


/* ==========================================================
   PRICE BOARD
   ========================================================== */

.price-board{

    transition:
        transform .36s cubic-bezier(.16,1,.3,1),
        box-shadow .36s ease,
        border-color .36s ease;

}


.price-board.pricing-v2-price-pulse{

    transform:
        translateY(-3px)
        scale(1.012);

    border-color:
        rgba(229,89,211,.18);

    box-shadow:
        0 22px 65px rgba(142,57,215,.105),
        inset 0 1px 0 rgba(255,255,255,.075);

}


.live-price strong{

    will-change:
        transform,
        filter;

}


.price-board.pricing-v2-price-pulse
.live-price strong{

    animation:
        pricingV2Number
        .48s cubic-bezier(.16,1,.3,1);

}


@keyframes pricingV2Number{

    0%{
        transform:
            translateY(9px)
            scale(.97);

        filter:
            blur(3px);

        opacity:.55;
    }

    100%{
        transform:none;
        filter:none;
        opacity:1;
    }

}


/* ==========================================================
   DEVICE SELECTOR
   ========================================================== */

.choice{

    overflow:hidden;

}


.choice:after{

    content:"";

    position:absolute;

    left:50%;
    top:100%;

    width:70px;
    height:35px;

    transform:
        translate(-50%,0);

    pointer-events:none;

    opacity:0;

    border-radius:50%;

    background:
        radial-gradient(
            ellipse,
            rgba(232,65,200,.35),
            transparent 70%
        );

    transition:
        .3s ease;

}


.choice.active:after{

    top:62%;

    opacity:.35;

}


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

.card{

    min-height:330px!important;

}


.card:before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:0;

    background:
        radial-gradient(
            280px circle
            at var(--card-x,50%)
               var(--card-y,50%),

            rgba(214,104,255,.095),

            rgba(96,117,255,.028) 37%,

            transparent 70%
        );

    transition:
        opacity .3s ease;

}


.card:hover:before{

    opacity:1;

}


.card-icon{

    position:relative;

    overflow:hidden;

}


.card-icon:after{

    content:"";

    position:absolute;

    inset:8px;

    border:
        1px solid
        rgba(218,139,255,.18);

    border-radius:50%;

    animation:
        pricingV2IconOrbit
        5s linear infinite;

}


@keyframes pricingV2IconOrbit{

    50%{
        transform:
            rotate(180deg)
            scale(.72);
    }

    to{
        transform:
            rotate(360deg);
    }

}


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

@media(max-width:650px){

    .pricing-v2-hud{

        left:14px;
        right:14px;
        bottom:14px;

    }


    .pricing-v2-data{

        gap:4px;

    }


    .pricing-v2-chip{

        min-width:57px;

        padding:7px;

    }


    .pricing-v2-status{

        display:none;

    }


    .config-shell:after{

        opacity:.22;

        animation-duration:20s;

    }

}


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

    .config-shell:after,
    .card-icon:after{

        animation:none!important;

    }

}