/*
* Lamp
*/
.next-lamp {
    --div-width: 100%; /**/
    --div-height: 250px; /**/
    --div-background: rgb(2 6 23); /**/

    --lamp-width-size: 300px; /**/
    --lamp-height-size: 200px; /**/
    --lamp-color: rgb(6 182 212); /**/
    --lamp-blur-intensity: 0.5; /*rango min 0 - max 1*/
    --lamp-light-intensity: 1; /*rango min 0.7 - max 3*/
    --lamp-angle: 0deg;
    
    --line-height: 1.25px; /**/
    --line-color: #38bdf8; /**/

    position: relative;
    z-index: -1; /**/
    display: flex;
    height: var(--div-height);
    width: var(--div-width);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--div-background) !important;

    --tw-translate-x: 0;
    --tw-translate-y: calc(var(--lamp-height-size) * -0.48);
    --tw-translate-y-2: -50%;
    --tw-translate-y-3: calc(var(--lamp-height-size) * 0.3);
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-x-3: 1.5;
    --tw-scale-y: 1;

    --tw-backdrop-blur: blur(calc(12px / var(--lamp-light-intensity)));
    --tw-blur: blur(calc(40px / var(--lamp-light-intensity)));
    --tw-blur-2: blur(calc(64px / var(--lamp-light-intensity)));

    --conic-position: from calc(360deg - var(--lamp-angle)) at center top;
    --conic-position-2: from calc(0deg + var(--lamp-angle)) at center top;

    --tw-gradient-to-position: ;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
    --tw-gradient-from: var(--lamp-color) var(--tw-gradient-from-position);
    --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);

    --tw-gradient-to-2: var(--lamp-color) var(--tw-gradient-to-position);
    --tw-gradient-from-2: transparent var(--tw-gradient-from-position);
    --tw-gradient-stops-2: var(--tw-gradient-from-2), transparent var(--tw-gradient-via-position), var(--tw-gradient-to-2);
}
.next-lamp *{
    margin-top: 50px;
}

.next-lamp__mask-left {
    position: absolute;
    inset: auto;
    overflow: visible;
    right: 50%;
    height: calc(var(--lamp-height-size) * 0.5);
    width: calc(var(--lamp-width-size) * 0.5);

    background: conic-gradient(var(--conic-position-2), var(--tw-gradient-stops));
}
.next-lamp__mask-left__child-left{
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;

    width: 100%;
    height: calc(var(--lamp-height-size) * 1/3);

    background-color: var(--div-background);
    -webkit-mask-image: linear-gradient(0deg, #fff, transparent);
    mask-image: linear-gradient(0deg, #fff, transparent);
}
.next-lamp__mask-left__child-right{
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;

    width: calc(var(--lamp-width-size) * 1/3);
    height: 100%;

    background-color: var(--div-background);
    -webkit-mask-image: linear-gradient(90deg, #fff, transparent);
    mask-image: linear-gradient(90deg, #fff, transparent);
}
.next-lamp__mask-right {
    position: absolute;
    inset: auto;
    left: 50%;
    height: calc(var(--lamp-height-size) * 0.5);
    width: calc(var(--lamp-width-size) * 0.5);

    background: conic-gradient(var(--conic-position), var(--tw-gradient-stops-2));
}
.next-lamp__mask-right__child-left{
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;

    width: calc(var(--lamp-width-size) * 1/3);
    height: 100%;

    background-color: var(--div-background);
    -webkit-mask-image: linear-gradient(270deg, #fff, transparent);
    mask-image: linear-gradient(270deg, #fff, transparent);
}
.next-lamp__mask-right__child-right{
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;

    width: 100%;
    height: calc(var(--lamp-height-size) * 1/3);

    background-color: var(--div-background);
    -webkit-mask-image: linear-gradient(0deg, #fff, transparent);
    mask-image: linear-gradient(0deg, #fff, transparent);
}

.next-lamp__blur-bg {
    position: absolute;
    top: 50%;
    height: calc(var(--lamp-height-size) * 0.4);
    width: 100%;
    transform: translateY(var(--tw-translate-x), var(--tw-translate-y-3)) rotate(var(--tw-rotate)) 
    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleY(var(--tw-scale-y));
    background-color: var(--div-background);
    filter: var(--tw-blur);
}
.next-lamp__backdrop-blur {
    position: absolute;
    top: 50%;
    height: calc(var(--lamp-height-size) * 0.4);
    width: 100%;
    background-color: transparent;
    opacity: 0.1;
    -webkit-backdrop-filter: var(--tw-backdrop-blur);
    backdrop-filter: var(--tw-backdrop-blur);
}

.next-lamp__bg-top-line {
    position: absolute;
    inset: auto;
    height: calc(var(--lamp-height-size) * 0.35);
    width: var(--lamp-width-size);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y-2)) rotate(var(--tw-rotate))
    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    border-radius: 9999px;
    background-color: var(--lamp-color);
    opacity: var(--lamp-blur-intensity);
    filter: var(--tw-blur-2);
    z-index: 5;
}
.next-lamp__bg-mid-line {
    position: absolute;
    inset: auto;
    height: calc(var(--lamp-height-size) * 0.3);
    width: calc(var(--lamp-width-size) * 0.25);
    transform: translateY(calc(var(--lamp-height-size) * -0.2));
    border-radius: 50%;
    background-color: var(--lamp-color);
    filter: var(--tw-blur);
    z-index: 3;
}
.next-lamp__bg-bottom-line{
    position: absolute;
    z-index: 4;
    background-color: var(--div-background);

    width: 100%;
    height: calc(var(--lamp-height-size) * 0.5);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.next-lamp__line {
    position: absolute;
    inset: auto;
    height: var(--line-height);
    width: calc(var(--lamp-width-size) * 0.5);
    transform: translateY(calc(var(--lamp-height-size) * -0.23));
    background-color: var(--line-color);
    z-index: 5;
}