.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; --lamp-light-intensity: 1; --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;
}