@duskmoon-dev/css-art 0.1.0

package/dist/index.min.css

@@ -0,0 +1 @@
+@layer css-art{.art-moon{--art-moon-size:8rem;--art-moon-color:oklch(92% .06 90);--art-moon-shadow:oklch(85% .04 90);--art-moon-glow:oklch(95% .03 90/.4);width:var(--art-moon-size);height:var(--art-moon-size);background:radial-gradient(circle at 35% 35%,var(--art-moon-color)0%,var(--art-moon-shadow)100%);box-shadow:0 0 calc(var(--art-moon-size)*.25)var(--art-moon-glow),0 0 calc(var(--art-moon-size)*.5)var(--art-moon-glow);border-radius:50%;position:relative}.art-moon-crescent{overflow:hidden}.art-moon-crescent:after{content:"";background:oklch(15% .02 260);border-radius:50%;width:85%;height:85%;position:absolute;top:-10%;right:-20%;box-shadow:inset 0 0 1rem oklch(20% .02 260)}.art-moon:before{content:"";width:20%;height:20%;box-shadow:calc(var(--art-moon-size)*-.15)calc(var(--art-moon-size)*.2)0 -2px oklch(82% .03 90/.4),calc(var(--art-moon-size)*.1)calc(var(--art-moon-size)*-.05)0 -3px oklch(82% .03 90/.3),calc(var(--art-moon-size)*-.08)calc(var(--art-moon-size)*-.12)0 -1px oklch(82% .03 90/.35);background:radial-gradient(circle,oklch(82% .03 90/.6) 0%,#0000 70%);border-radius:50%;position:absolute;top:25%;left:40%}.art-moon-sm{--art-moon-size:4rem}.art-moon-lg{--art-moon-size:12rem}.art-moon-xl{--art-moon-size:16rem}.art-moon-glow{animation:4s ease-in-out infinite art-moon-pulse}@keyframes art-moon-pulse{0%,to{box-shadow:0 0 calc(var(--art-moon-size)*.25)var(--art-moon-glow),0 0 calc(var(--art-moon-size)*.5)var(--art-moon-glow)}50%{box-shadow:0 0 calc(var(--art-moon-size)*.35)var(--art-moon-glow),0 0 calc(var(--art-moon-size)*.7)var(--art-moon-glow)}}.art-sun{--art-sun-size:8rem;--art-sun-color:oklch(85% .18 85);--art-sun-corona:oklch(90% .15 75);--art-sun-glow:oklch(90% .12 80/.4);width:var(--art-sun-size);height:var(--art-sun-size);background:radial-gradient(circle at 40% 40%,oklch(95% .12 90) 0%,var(--art-sun-color)50%,var(--art-sun-corona)100%);box-shadow:0 0 calc(var(--art-sun-size)*.2)var(--art-sun-glow),0 0 calc(var(--art-sun-size)*.5)var(--art-sun-glow),0 0 calc(var(--art-sun-size)*.8)oklch(90% .1 80/.15);border-radius:50%;position:relative}.art-sun-rays:before,.art-sun-rays:after{content:"";border-radius:50%;width:140%;height:140%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.art-sun-rays:before{background:repeating-conic-gradient(oklch(90% .14 85/.3) 0deg 5deg,#0000 5deg 30deg);animation:30s linear infinite art-sun-rotate}.art-sun-rays:after{background:repeating-conic-gradient(from 15deg,oklch(90% .14 85/.15) 0deg 3deg,#0000 3deg 30deg);animation:45s linear infinite reverse art-sun-rotate}@keyframes art-sun-rotate{0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(360deg)}}.art-sun-sunset{--art-sun-color:oklch(75% .2 40);--art-sun-corona:oklch(70% .22 30);--art-sun-glow:oklch(80% .18 40/.4)}.art-sun-sm{--art-sun-size:4rem}.art-sun-lg{--art-sun-size:12rem}.art-sun-xl{--art-sun-size:16rem}.art-sun-pulse{animation:3s ease-in-out infinite art-sun-breathe}@keyframes art-sun-breathe{0%,to{box-shadow:0 0 calc(var(--art-sun-size)*.2)var(--art-sun-glow),0 0 calc(var(--art-sun-size)*.5)var(--art-sun-glow),0 0 calc(var(--art-sun-size)*.8)oklch(90% .1 80/.15)}50%{box-shadow:0 0 calc(var(--art-sun-size)*.3)var(--art-sun-glow),0 0 calc(var(--art-sun-size)*.6)var(--art-sun-glow),0 0 calc(var(--art-sun-size)*1)oklch(90% .1 80/.2)}}.art-mountain{--art-mountain-width:16rem;--art-mountain-height:10rem;--art-mountain-color:oklch(45% .05 150);--art-mountain-shadow:oklch(35% .04 150);--art-mountain-snow:oklch(97% .005 90);width:var(--art-mountain-width);height:var(--art-mountain-height);position:relative}.art-mountain:before{content:"";border-left:calc(var(--art-mountain-width)*.45)solid transparent;border-right:calc(var(--art-mountain-width)*.45)solid transparent;border-bottom:var(--art-mountain-height)solid var(--art-mountain-color);width:0;height:0;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.art-mountain:after{content:"";border-left:calc(var(--art-mountain-width)*.1)solid transparent;border-right:calc(var(--art-mountain-width)*.1)solid transparent;border-bottom:calc(var(--art-mountain-height)*.25)solid var(--art-mountain-snow);z-index:1;width:0;height:0;position:absolute;top:0;left:50%;transform:translate(-50%)}.art-mountain-range{--art-mountain-width:24rem;--art-mountain-height:10rem;width:var(--art-mountain-width);height:var(--art-mountain-height);align-items:flex-end;display:flex;position:relative}.art-mountain-range:before,.art-mountain-range:after{content:none}.art-mountain-range .art-peak{width:0;height:0;position:absolute;bottom:0}.art-mountain-range .art-peak:first-child{border-left:calc(var(--art-mountain-width)*.25)solid transparent;border-right:calc(var(--art-mountain-width)*.25)solid transparent;border-bottom:calc(var(--art-mountain-height)*.7)solid var(--art-mountain-shadow);left:10%}.art-mountain-range .art-peak:nth-child(2){border-left:calc(var(--art-mountain-width)*.3)solid transparent;border-right:calc(var(--art-mountain-width)*.3)solid transparent;border-bottom:var(--art-mountain-height)solid var(--art-mountain-color);z-index:1;left:30%}.art-mountain-range .art-peak:nth-child(3){border-left:calc(var(--art-mountain-width)*.22)solid transparent;border-right:calc(var(--art-mountain-width)*.22)solid transparent;border-bottom:calc(var(--art-mountain-height)*.6)solid oklch(40% .04 150);right:5%}.art-mountain-sunset{--art-mountain-color:oklch(30% .06 280);--art-mountain-shadow:oklch(22% .05 280);--art-mountain-snow:oklch(85% .08 50)}.art-mountain-forest{--art-mountain-color:oklch(40% .08 145);--art-mountain-shadow:oklch(30% .06 145)}.art-mountain-sm{--art-mountain-width:10rem;--art-mountain-height:6rem}.art-mountain-lg{--art-mountain-width:24rem;--art-mountain-height:15rem}.art-atom{--art-atom-size:360px;--art-atom-color:#00d8ff;--art-atom-nucleus-size:calc(var(--art-atom-size)/5);--art-atom-electron-color:#99f8ff;--art-atom-electron-size:calc(var(--art-atom-size)/25);--art-atom-orbit-size:calc(var(--art-atom-size)/2.5);--art-atom-speed:1.2s;--art-atom-speed-alpha:1s;--art-atom-speed-omega:.8s;width:var(--art-atom-size);height:var(--art-atom-size);box-sizing:border-box;animation:8s cubic-bezier(1,.25,0,.75) infinite art-atom-rotate;position:relative;overflow:hidden;& *,& :before,& :after{box-sizing:border-box}&:before{content:"";width:var(--art-atom-nucleus-size);height:var(--art-atom-nucleus-size);margin-top:calc(var(--art-atom-nucleus-size)/-2);margin-left:calc(var(--art-atom-nucleus-size)/-2);background:color-mix(in srgb,var(--art-atom-color)70%,transparent);box-shadow:0 0 3px 0 color-mix(in srgb,var(--art-atom-color)70%,transparent);border-radius:100%;animation:2s cubic-bezier(.65,0,.35,1) infinite art-atom-nucleus;display:block;position:absolute;top:50%;left:50%}&>[class^=electron]{border-top:solid color-mix(in srgb,var(--art-atom-color)50%,transparent)1px;border-right:solid color-mix(in srgb,var(--art-atom-color)35%,transparent)2px;border-bottom:solid color-mix(in srgb,var(--art-atom-color)20%,transparent)4px;border-left:solid color-mix(in srgb,var(--art-atom-color)0%,transparent)2px;width:100%;height:var(--art-atom-orbit-size);margin-top:calc(var(--art-atom-orbit-size)/-2);animation:var(--art-atom-speed)art-atom-electron-orbit infinite linear;border-radius:100%;position:absolute;top:50%}&>.electron-alpha{animation:var(--art-atom-speed-alpha)art-atom-electron-orbit infinite linear;transform:rotate(60deg)}&>.electron-omega{animation:var(--art-atom-speed-omega)art-atom-electron-orbit infinite linear;transform:rotate(-60deg)}& [class^=electron]:after{content:"";width:var(--art-atom-electron-size);height:var(--art-atom-electron-size);background:var(--art-atom-electron-color);margin-top:calc(var(--art-atom-electron-size)/-2);top:50%;left:calc(var(--art-atom-electron-size)/-1);animation:calc(var(--art-atom-speed)*2)art-atom-electron infinite ease-in-out;border-radius:50%;display:block;position:absolute;transform:scale(1)}& .electron-alpha:after{animation:calc(var(--art-atom-speed-alpha)*2)art-atom-electron infinite ease-in-out}& .electron-omega:after{animation:calc(var(--art-atom-speed-omega)*2)art-atom-electron infinite ease-in-out}}.art-atom-sm{--art-atom-size:180px}.art-atom-lg{--art-atom-size:480px}@keyframes art-atom-electron-orbit{0%{border-top:solid color-mix(in srgb,var(--art-atom-color)50%,transparent)1px;border-right:solid color-mix(in srgb,var(--art-atom-color)35%,transparent)2px;border-bottom:solid color-mix(in srgb,var(--art-atom-color)20%,transparent)4px;border-left:solid color-mix(in srgb,var(--art-atom-color)0%,transparent)2px}25%{border-top:solid color-mix(in srgb,var(--art-atom-color)35%,transparent)1px;border-right:solid color-mix(in srgb,var(--art-atom-color)20%,transparent)2px;border-bottom:solid color-mix(in srgb,var(--art-atom-color)0%,transparent)4px;border-left:solid color-mix(in srgb,var(--art-atom-color)50%,transparent)2px}50%{border-top:solid color-mix(in srgb,var(--art-atom-color)20%,transparent)1px;border-right:solid color-mix(in srgb,var(--art-atom-color)0%,transparent)2px;border-bottom:solid color-mix(in srgb,var(--art-atom-color)50%,transparent)4px;border-left:solid color-mix(in srgb,var(--art-atom-color)35%,transparent)2px}75%{border-top:solid color-mix(in srgb,var(--art-atom-color)0%,transparent)1px;border-right:solid color-mix(in srgb,var(--art-atom-color)50%,transparent)2px;border-bottom:solid color-mix(in srgb,var(--art-atom-color)35%,transparent)4px;border-left:solid color-mix(in srgb,var(--art-atom-color)20%,transparent)2px}to{border-top:solid color-mix(in srgb,var(--art-atom-color)50%,transparent)1px;border-right:solid color-mix(in srgb,var(--art-atom-color)35%,transparent)2px;border-bottom:solid color-mix(in srgb,var(--art-atom-color)20%,transparent)4px;border-left:solid color-mix(in srgb,var(--art-atom-color)0%,transparent)2px}}@keyframes art-atom-rotate{0%{transform:rotate(0)scale(1)}12.5%{transform:rotate(-45deg)scale(.9)}25%{transform:rotate(-90deg)scale(1)}37.5%{transform:rotate(-135deg)scale(.9)}50%{transform:rotate(-180deg)scale(1)}62.5%{transform:rotate(-225deg)scale(.9)}75%{transform:rotate(-270deg)scale(1)}87.5%{transform:rotate(-315deg)scale(.9)}to{transform:rotate(-360deg)scale(1)}}@keyframes art-atom-nucleus{0%{transform:scale(1)}25%{transform:scale(.9)}50%{transform:scale(1)}75%{transform:scale(.85)}to{transform:scale(1)}}@keyframes art-atom-electron{0%{left:calc(var(--art-atom-electron-size)/-1);transform:scale(1)}12.5%{top:100%;transform:scale(1.5)}25%{left:100%;transform:scale(1)}37.5%{top:0%;transform:scale(.25)}50%{left:calc(var(--art-atom-electron-size)/-1);transform:scale(1)}62.5%{top:100%;transform:scale(1.5)}75%{left:100%;transform:scale(1)}87.5%{top:0%;transform:scale(.25)}to{left:calc(var(--art-atom-electron-size)/-1);transform:scale(1)}}.art-eclipse{--art-eclipse-bg:#09090b;--art-eclipse-size:600px;width:var(--art-eclipse-size);height:var(--art-eclipse-size);position:relative;overflow:hidden;& .layer{position:absolute;inset:0}& .layer-1{transform-origin:66% 40%;background:repeating-conic-gradient(#fff0 0%,#fff8b075 3.96%,#45a8ff00 8.33% 8.33%) 69.5% 37.7%/17.2% 17.2% no-repeat,radial-gradient(#fff8b0 0%,#45a8ff00 47.22%) 74.1% 35.6%/33.6% 36.6% no-repeat;animation:30s linear infinite art-eclipse-rotate}& .layer-2{transform-origin:66% 40%;background:radial-gradient(ellipse at 50% 50%,#45a8ff00 20%,var(--art-eclipse-bg)29%)77.4% 33.8%/40% 40% no-repeat,repeating-conic-gradient(from 15deg at 50% 50%,#fff0 0%,#fff8b082 2.64%,#45a8ff00 5.56%,#45a8ff00 5.56%)69.5% 37.7%/17.2% 17.2% no-repeat;animation:20s linear infinite reverse art-eclipse-rotate}& .layer-3{background:repeating-conic-gradient(from 355deg,#fff0 0%,#ffc64542 8.1%,#45a8ff00 16.67% 16.67%) 0 0/100% 100% no-repeat;animation:20s linear infinite art-eclipse-rotate}& .layer-4{background:repeating-conic-gradient(from 355deg,#fff0 0%,#ffc64542 2.86%,#45a8ff00 5.88% 5.88%) 0 0/100% 100% no-repeat;animation:40s linear infinite reverse art-eclipse-rotate}& .layer-5{background:repeating-conic-gradient(#fff0 0%,#ffc64542 6.62%,#45a8ff00 7.69% 7.69%) 0 0/100% 100% no-repeat;animation:40s linear infinite art-eclipse-rotate}& .layer-6{background:radial-gradient(ellipse at 50% 50%,#fff8b045 0%,#45a8ff00 63.54%)67% 39.3%/5.8% 5.8% no-repeat,radial-gradient(ellipse at 50% 50%,#45a8ff00 40.28%,#ffb7a30d 52.43%,#45a8ff00 63.54%)68% 38.6%/13% 13% no-repeat,radial-gradient(ellipse at 50% 50%,#fff8b08c 0%,#45a8ff00 63.54%)66.9% 39.3%/3.4% 3.4% no-repeat,radial-gradient(ellipse at 50% 50%,#fff8b033 0%,#45a8ff00 66.67%)70.7% 36.5%/25.6% 25.6% no-repeat,radial-gradient(ellipse at 50% 50%,var(--art-eclipse-bg)26%,#45a8ff00 26.4%)0% 0%/100% 100% no-repeat,radial-gradient(ellipse at 50% 50%,#ffd4940a 0%,#45a8ff00 69.79%)0% 0%/100% 100% no-repeat,radial-gradient(ellipse at 50% 50%,#fff0941c 0%,#45a8ff00 52.43%)0% 0%/100% 100% no-repeat,radial-gradient(ellipse at 51% 49%,#45a8ff00 23.96%,var(--art-eclipse-bg)40.63%)0% 0%/100% 100% no-repeat,repeating-conic-gradient(from 0deg at 50% 50%,#fff0 0%,#ffef4524 11.04%,#45a8ff00 20%,#45a8ff00 20%)0% 0%/100% 100% no-repeat,radial-gradient(ellipse at 52% 48%,#45a8ff00 23.96%,var(--art-eclipse-bg)34.03%)0% 0%/100% 100% no-repeat,radial-gradient(ellipse at 50% 50%,#ffb9934a 28%,#45a8ff00 30%)0% 0%/100% 100% no-repeat}}.art-eclipse-sm{--art-eclipse-size:300px}.art-eclipse-lg{--art-eclipse-size:800px}@keyframes art-eclipse-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.art-plasma-ball{--art-plasma-ball-size:350px;--art-plasma-ball-base-color:#222;--art-plasma-ball-switch-size:calc(var(--art-plasma-ball-size)*37/350);width:var(--art-plasma-ball-size);height:var(--art-plasma-ball-size);box-sizing:border-box;margin:0 auto;position:relative;& *{box-sizing:border-box}& .base{background:var(--art-plasma-ball-base-color);width:calc(var(--art-plasma-ball-size)*6/7);height:calc(var(--art-plasma-ball-size)*4/7);margin:calc(var(--art-plasma-ball-size)*48/350)auto;top:calc(var(--art-plasma-ball-size)*286/350);left:calc(var(--art-plasma-ball-size)*25/350);position:absolute}& .base:before{top:calc(var(--art-plasma-ball-size)*-44/350);width:calc(var(--art-plasma-ball-size)*300/350);height:calc(var(--art-plasma-ball-size)*80/350);content:"";box-sizing:border-box;z-index:0;background:conic-gradient(from 167deg,#666,#232323,#232323,#666);border:2px solid #597481;border-radius:100%;position:absolute;left:0}& .base:after{left:calc(var(--art-plasma-ball-size)*-35/350);bottom:calc(var(--art-plasma-ball-size)*-65/350);width:calc(var(--art-plasma-ball-size)*370/350);height:calc(var(--art-plasma-ball-size)*110/350);content:"";background:var(--art-plasma-ball-base-color);z-index:-1;border-radius:30% 30% 50% 50%;position:absolute}& .base div{background:var(--art-plasma-ball-base-color);height:calc(var(--art-plasma-ball-size)*100/350);margin-top:calc(var(--art-plasma-ball-size)*48/350);float:left;margin-left:calc(var(--art-plasma-ball-size)*-53/350);z-index:-1;width:63%;position:relative;transform:rotate(-85deg)}& .base div+div{margin-top:calc(var(--art-plasma-ball-size)*-99/350);margin-left:calc(var(--art-plasma-ball-size)*164/350);transform:rotate(85deg)}& .base span{left:calc(var(--art-plasma-ball-size)*-51/350);bottom:calc(var(--art-plasma-ball-size)*-4/350);width:calc(var(--art-plasma-ball-size)*402/350);height:calc(var(--art-plasma-ball-size)*160/350);content:"";z-index:0;background:#242f3400;border:2px solid #0000;border-bottom-color:#435761;border-radius:0% 0% 80% 80%;position:absolute}& input.switcher{width:calc(var(--art-plasma-ball-size)*48/350);height:calc(var(--art-plasma-ball-size)*48/350);opacity:0;z-index:3333;cursor:pointer;top:calc(var(--art-plasma-ball-size)*425/350);left:calc(var(--art-plasma-ball-size)*151/350);outline:none;margin:0;position:absolute;border-radius:calc(var(--art-plasma-ball-size)*50/350)!important}& .glassball{background-color:#ffffff26;border-radius:100%;width:100%;height:100%;margin:0 auto;position:absolute;top:0%;overflow:hidden;box-shadow:0 20px 30px #0003,inset 0 10px 30px 5px #fff}& .glassball:after{content:"";z-index:1;background:radial-gradient(#ffffff80 0%,#fff0 70%);border-radius:50%;width:96%;height:96%;position:absolute;top:2%;left:2%;box-shadow:inset 0 20px 30px #ffffff4d}& .glassball:hover{cursor:grab}& .glassball:before{filter:blur(15px);z-index:2;color:#d6faff;text-align:center;content:"s";opacity:.75;background:radial-gradient(circle closest-side,#9c27b0,#0000);border:8px dotted #24e6ff;border-radius:100%;width:0;height:0;font-size:10em;line-height:1;transition:width .2s,height .2s;animation:5ms infinite alternate art-plasma-ball-spark;display:none;position:absolute;top:50%;left:48%;transform:translate(-45%,-48%)}& .glassball:hover:before{width:calc(var(--art-plasma-ball-size)*120/350);height:calc(var(--art-plasma-ball-size)*150/350)}& input.switcher:checked+.glassball:before,& input.switcher:checked+.glassball:after{display:block}& input.switcher:checked+.glassball:after{width:97%;height:97%;top:1.5%;left:1.5%}& input.switcher:checked+.glassball:hover:after{filter:brightness(1.75);opacity:.5;background:radial-gradient(#ffffff7d 0%,#54ecff94 10%,#0000 100%);animation:3s infinite alternate art-plasma-ball-rotation}& input.switcher:checked+.glassball{backface-visibility:hidden;perspective:calc(var(--art-plasma-ball-size)*1000/350);background:radial-gradient(circle,#ff5affb8 0% 20%,#5493d2a8 70% 100%);border:1px solid #0000;transition:background .4s;animation:5s linear infinite art-plasma-ball-innerlight,.82s cubic-bezier(.36,.07,.19,.97) both art-plasma-ball-shake;transform:translate(0,0);box-shadow:0 0 15px 5px #5493d2a8}& .switch{width:var(--art-plasma-ball-switch-size);height:var(--art-plasma-ball-switch-size);left:calc(50% - var(--art-plasma-ball-switch-size)/2);top:calc(var(--art-plasma-ball-size)*430/350);z-index:5;background:#1b1b1b;border:3px solid #4e4e4e;border-radius:100%;position:absolute;box-shadow:0 0 10px #000,0 0 5px 1px #2d2d2d,inset 0 0 3px 1px #000}& .switch:before{content:"";width:calc(var(--art-plasma-ball-switch-size)*16/37);height:calc(var(--art-plasma-ball-switch-size)*16/37);bottom:calc(var(--art-plasma-ball-switch-size)*6/37);border:calc(var(--art-plasma-ball-switch-size)*3/37)solid #4e4e4e;left:calc(var(--art-plasma-ball-switch-size)*5.5/37);border-top-color:#0000;border-radius:100%;position:absolute}& .switch:after{content:"";width:calc(var(--art-plasma-ball-switch-size)*3/37);height:calc(var(--art-plasma-ball-switch-size)*9/37);bottom:calc(var(--art-plasma-ball-switch-size)*14/37);left:calc(var(--art-plasma-ball-switch-size)*11.5/37);background:#4e4e4e;position:absolute}& input:checked+div+div+.switch{color:#fff;background:linear-gradient(#171717,#404040);border-color:#222222d1;box-shadow:0 0 10px #03a9f4,0 0 5px 1px #03a9f4}& input:checked+div+div+.switch:before{border-color:#0000 #03a9f4 #03a9f4}& input:checked+div+div+.switch:after{background:#03a9f4}& .electrode{width:calc(var(--art-plasma-ball-size)*16/350);height:calc(var(--art-plasma-ball-size)*140/350);bottom:calc(var(--art-plasma-ball-size)*20/350);position:absolute;left:calc(50% - .5em);overflow:visible}& .electrode:not(.hide-electrode){background:linear-gradient(75deg,#3a3a3a 20%,#2d2d2d);border-bottom:1px solid #657882;border-radius:0 0 6px 5px}& .electrode:before{left:calc(var(--art-plasma-ball-size)*-16/350);top:calc(var(--art-plasma-ball-size)*-40/350);width:calc(var(--art-plasma-ball-size)*48/350);height:calc(var(--art-plasma-ball-size)*48/350);content:"";box-sizing:border-box;background:radial-gradient(at 0 0,#4a4949 20%,#2d2d2d);border:1px solid #758e99;border-radius:100%;position:absolute}& .electrode:not(.hide-electrode):after{left:calc(var(--art-plasma-ball-size)*-3/350);bottom:calc(var(--art-plasma-ball-size)*-11/350);width:calc(var(--art-plasma-ball-size)*22/350);height:calc(var(--art-plasma-ball-size)*16/350);border-radius:calc(var(--art-plasma-ball-size)*140/350)/calc(var(--art-plasma-ball-size)*50/350);content:"";z-index:-1;background:linear-gradient(-263deg,#191919 20%,#0a0a0a);position:absolute}& input.switcher:checked+.glassball .electrode:after{background:linear-gradient(-263deg,#3a3a3a 20%,#2d2d2d)}& input.switcher:checked+.glassball .electrode:before{background:radial-gradient(ellipse farthest-corner at calc(var(--art-plasma-ball-size)*30/350)calc(var(--art-plasma-ball-size)*30/350),#999,#e449ff,#e449ff,#9763ff,#62edff,#fff);border-color:#ffffff94;box-shadow:0 0 10px 2px #e449ffb3,0 0 10px 2px #fff,inset 0 0 50px -10px #fff}& input.switcher+.glassball .rays{display:none}& input.switcher:checked+.glassball .rays{float:left;width:100%;height:100%;display:block;position:absolute}& .ray{width:calc(var(--art-plasma-ball-size)*160/350);height:calc(var(--art-plasma-ball-size)*32/350);bottom:calc(var(--art-plasma-ball-size)*144/350);filter:drop-shadow(0 0 7px #9660f7)drop-shadow(0 0 2px #fff);position:absolute}& .ray:before{content:"";width:calc(var(--art-plasma-ball-size)*8/350);height:calc(var(--art-plasma-ball-size)*7.2/350);top:calc(var(--art-plasma-ball-size)*4.8/350);left:calc(var(--art-plasma-ball-size)*3/350);filter:blur(2px);border:3px dashed #03a9f4;border-width:3px 3px 1px 1px;border-radius:10px 5px 8px 7px;position:absolute;transform:rotate(87deg);box-shadow:0 0 10px -1px #000}& .ray:after{content:"s";float:left;width:calc(var(--art-plasma-ball-size)*32/350);height:calc(var(--art-plasma-ball-size)*96/350);margin-top:calc(var(--art-plasma-ball-size)*20/350);border:calc(var(--art-plasma-ball-size)*8/350)dotted #24e6ff;filter:blur(5px);z-index:2;font-size:calc(var(--art-plasma-ball-size)*64/350);color:#d6faff;text-align:center;background:radial-gradient(circle closest-side,#9c27b0,#0000);border-radius:100%;margin-left:0;line-height:1;transition:width .2s,height .2s;animation:1s linear infinite alternate art-plasma-ball-blink;transform:translate(-45%,-48%)}& .ray span{width:calc(var(--art-plasma-ball-size)*64/350);height:calc(var(--art-plasma-ball-size)*16/350);border:solid calc(var(--art-plasma-ball-size)*4/350)#000;top:calc(var(--art-plasma-ball-size)*8/350);border-color:#6bbdff #0000 #0000;border-radius:238%/50px 50px 0 0;position:absolute;left:0}& .ray span+span{left:30%;top:calc(var(--art-plasma-ball-size)*2.4/350);transform:rotate(180deg)}& .ray span+span+span{left:60%;top:calc(var(--art-plasma-ball-size)*8/350);transform:rotate(0)}& .ray span:last-of-type:before{content:"";float:right;width:calc(var(--art-plasma-ball-size)*8/350);height:calc(var(--art-plasma-ball-size)*8/350);filter:blur(1px);margin-top:calc(var(--art-plasma-ball-size)*-2/350);left:calc(var(--art-plasma-ball-size)*3/350);background:#d1eefb;border-radius:100%;position:relative;box-shadow:0 0 4px 3px #fff}& .ray.bigwave span:last-of-type:before{content:"";float:left;width:calc(var(--art-plasma-ball-size)*8/350);height:calc(var(--art-plasma-ball-size)*8/350);filter:blur(1px);margin-top:calc(var(--art-plasma-ball-size)*-3/350);left:calc(var(--art-plasma-ball-size)*-2/350);background:#d1eefb;border-radius:100%;position:relative;box-shadow:0 0 4px 3px #fff}& .ray.bigwave span{border-width:calc(var(--art-plasma-ball-size)*4/350);width:55%}& .ray.bigwave span+span{border-width:calc(var(--art-plasma-ball-size)*5/350);width:60%;margin-left:calc(var(--art-plasma-ball-size)*4/350);margin-top:calc(var(--art-plasma-ball-size)*2/350);left:40%}& .rays+.rays{transform:rotate(180deg)}& .rays+.rays+.rays{transform:rotate(90deg)}& .rays+.rays+.rays+.rays{transform:rotate(270deg)}& .rays+.rays+.rays+.rays+.rays{animation:2.5s .1s infinite alternate art-plasma-ball-touchray1;display:none;transform:skew(-187deg)scale(.675)rotate(0)}& .rays+.rays+.rays+.rays+.rays+.rays{animation:1s .25s infinite art-plasma-ball-touchray2;display:none;transform:skew(-140deg,-40deg)scale(.675)rotate(180deg)}& input.switcher:checked+.glassball:hover .rays+.rays+.rays+.rays+.rays{display:block}& .rays+.rays+.rays+.rays+.rays .ray{width:calc(var(--art-plasma-ball-size)*136/350);animation:.5s linear infinite alternate art-plasma-ball-ray1}& .rays+.rays+.rays+.rays+.rays .ray span{border-top-width:calc(var(--art-plasma-ball-size)*8/350)}& .ray:first-of-type{animation:.5s linear infinite art-plasma-ball-ray1}& .ray:nth-of-type(2){animation:.75s linear infinite alternate art-plasma-ball-ray1}& .ray:nth-of-type(3){animation:.65s linear infinite reverse art-plasma-ball-ray1}& .ray:nth-of-type(4){animation:.95s linear infinite alternate art-plasma-ball-ray1}& .ray:nth-of-type(5){animation:.85s linear infinite reverse art-plasma-ball-ray1}& .rays+.rays .ray:first-of-type{animation-duration:1.55s}& .rays+.rays .ray:nth-of-type(2){animation-duration:1.75s}& .rays+.rays .ray:nth-of-type(3){animation-duration:.65s}& .rays+.rays .ray:nth-of-type(4){animation-duration:1.85s}& .rays+.rays .ray:nth-of-type(5){animation-duration:1.6s}& .rays+.rays+.rays .ray:first-of-type{animation-duration:1.15s}& .rays+.rays+.rays .ray:nth-of-type(2){animation-duration:1.5s}& .rays+.rays+.rays .ray:nth-of-type(3){animation-duration:1.35s}& .rays+.rays+.rays .ray:nth-of-type(4){animation-duration:1s}& .rays+.rays+.rays .ray:nth-of-type(5){animation-duration:1.25s}& .rays+.rays+.rays+.rays .ray:first-of-type{animation-duration:1.05s}& .rays+.rays+.rays+.rays .ray:nth-of-type(2){animation-duration:1.35s}& .rays+.rays+.rays+.rays .ray:nth-of-type(3){animation-duration:1.25s}& .rays+.rays+.rays+.rays .ray:nth-of-type(4){animation-duration:1.15s}& .rays+.rays+.rays+.rays .ray:nth-of-type(5){animation-duration:1.45s}& .rays+.rays+.rays+.rays+.rays .ray:first-of-type{animation-duration:.85s}& .rays+.rays+.rays+.rays+.rays .ray:nth-of-type(2){animation-duration:.95s}& .rays+.rays+.rays+.rays+.rays .ray:nth-of-type(3){animation-duration:.75s}& .rays+.rays+.rays+.rays+.rays+.rays .ray:first-of-type{animation-duration:1.1s}& .rays+.rays+.rays+.rays+.rays+.rays .ray:nth-of-type(2){animation-duration:1.25s}& .rays+.rays+.rays+.rays+.rays+.rays .ray:nth-of-type(3){animation-duration:1.35s}}.art-plasma-ball-sm{--art-plasma-ball-size:200px}.art-plasma-ball-lg{--art-plasma-ball-size:500px}@keyframes art-plasma-ball-rotation{50%{transform:rotate(360deg)}}@keyframes art-plasma-ball-blink{0%{background:radial-gradient(circle closest-side,#ff5affb8,#5493d2a8);transform:translate(-50%,-50%)scale(.75)rotate(6deg)}50%{background:radial-gradient(circle closest-side,#5493d2a8,#ff5affb8);transform:translate(-50%,-50%)scale(.5)rotate(2deg)}to{background:radial-gradient(circle closest-side,#ffffffa8,#5493d2a8);transform:translate(-50%,-50%)scale(.35)rotate(11deg)}}@keyframes art-plasma-ball-innerlight{0%{background-position:50%;background-size:105% 105%;box-shadow:0 0 15px 5px #5493d2a8}25%{box-shadow:0 0 15px 5px #ff5aff30}50%{background-position:50%;background-size:85% 85%;box-shadow:0 0 15px 5px #5493d2a8}75%{box-shadow:0 0 15px 5px #ff5aff30}to{background-position:50%;background-size:105% 105%;box-shadow:0 0 15px 5px #5493d2a8}}@keyframes art-plasma-ball-touchray1{0%{transform:skew(-187deg)scale(.675)rotate(0)}50%{opacity:1;transform:skew(-185deg,2deg)scale(.525)rotate(180deg)}51%{opacity:0}52%{opacity:1}to{transform:skew(-188deg,-2deg)scale(.625)rotate(360deg)}}@keyframes art-plasma-ball-touchray2{0%{transform:skew(-140deg,-40deg)scale(.675)rotate(140deg)}50%{opacity:1;transform:skew(-143deg,-42deg)scale(.525)rotate(0)}51%{opacity:0}52%{opacity:1}to{transform:skew(-145deg,-38deg)scale(.625)rotate(210deg)}}@keyframes art-plasma-ball-spark{0%{background:radial-gradient(circle closest-side,#ff5affb8,#5493d2a8);transform:translate(-50%,-50%)scale(.75)rotate(0)}50%{background:radial-gradient(circle closest-side,#5493d2a8,#ff5affb8);transform:translate(-50%,-50%)scale(.5)rotate(180deg)}to{background:radial-gradient(circle closest-side,#ffffffa8,#5493d2a8);transform:translate(-50%,-50%)scale(1)rotate(360deg)}}@keyframes art-plasma-ball-ray1{0%{opacity:0;transform:rotate(0)translate(0)}12%{opacity:1;transform:rotate(22deg)translate(0px,calc(var(--art-plasma-ball-size)*-35/350));filter:brightness(1.75)}25%{opacity:0;transform:rotate(45deg)translate(calc(var(--art-plasma-ball-size)*-33/350),calc(var(--art-plasma-ball-size)*-69/350))}37%{opacity:1;transform:rotate(67deg)translate(calc(var(--art-plasma-ball-size)*-64/350),calc(var(--art-plasma-ball-size)*-86/350));filter:brightness(1.15)}50%{opacity:0;transform:rotate(90deg)translate(calc(var(--art-plasma-ball-size)*-108/350),calc(var(--art-plasma-ball-size)*-93/350))}62%{opacity:1;transform:rotate(112deg)translate(calc(var(--art-plasma-ball-size)*-140/350),calc(var(--art-plasma-ball-size)*-90/350));filter:brightness(1.25)}75%{opacity:0;transform:rotate(135deg)translate(calc(var(--art-plasma-ball-size)*-169/350),calc(var(--art-plasma-ball-size)*-69/350))}87%{opacity:1;transform:rotate(157deg)translate(calc(var(--art-plasma-ball-size)*-185/350),calc(var(--art-plasma-ball-size)*-36/350));filter:brightness(1.75)}to{opacity:0;transform:rotate(180deg)translate(calc(var(--art-plasma-ball-size)*-192/350),calc(var(--art-plasma-ball-size)*6/350))}}.art-snowflake{width:var(--art-snowflake-size,10px);height:var(--art-snowflake-size,10px);pointer-events:none;border-radius:50%;position:absolute;&:not(.art-snowflake-unicode){background:var(--art-snowflake-color,#fff);filter:drop-shadow(0 0 var(--art-snowflake-size,10px)var(--art-snowflake-color,#fff))}}.art-snowflake.art-snowflake-unicode:after{content:"❆";color:var(--art-snowflake-color,#fff);font-size:var(--art-snowflake-size,10px);filter:drop-shadow(0 0 var(--art-snowflake-size,10px)var(--art-snowflake-color,#fff))}.art-snowflake-fall{animation:art-snowflake-fall var(--art-snowflake-duration,5s)linear infinite}@keyframes art-snowflake-fall{0%{opacity:1;transform:translateY(-10%)rotate(0)}to{opacity:.3;transform:translateY(100vh)rotate(360deg)}}}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@duskmoon-dev/css-art",
+  "version": "0.1.0",
+  "description": "Pure CSS art components - decorative illustrations built entirely with CSS",
+  "type": "module",
+  "main": "./dist/index.css",
+  "exports": {
+    ".": {
+      "default": "./dist/index.css",
+      "style": "./dist/index.css"
+    },
+    "./art": {
+      "style": "./dist/art/index.css"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "bun run build --watch",
+    "build": "bun run clean && bun run build:css",
+    "build:css": "bun run scripts/build-css.ts",
+    "clean": "rm -rf dist",
+    "test": "bun test tests/unit",
+    "test:unit": "bun test tests/unit"
+  },
+  "keywords": [
+    "css-art",
+    "pure-css",
+    "illustrations",
+    "decorative",
+    "css-only",
+    "css-drawings"
+  ],
+  "author": "DuskMoon Development",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/duskmoon-dev/duskmoonui.git",
+    "directory": "packages/css-art"
+  },
+  "homepage": "https://github.com/duskmoon-dev/duskmoonui#readme",
+  "bugs": {
+    "url": "https://github.com/duskmoon-dev/duskmoonui/issues"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "lightningcss": "^1.22.0",
+    "vitest": "^1.0.0"
+  },
+  "engines": {
+    "node": ">=18.0.0",
+    "bun": ">=1.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}