.cylinder{width:100%;height:100%;transform-style:preserve-3d;--pi:3.14159;--cylinder-height:300px;--item-deg:calc(360/var(--segments));--item-offset:calc(var(--cylinder-height)/calc(var(--pi)/2));transform:rotateX(calc(var(--item-deg)*var(--index)*1deg))translateZ(calc(var(--item-offset) - 6px));position:absolute}.segment{width:100%;transform:rotateX(calc(var(--item-deg)*var(--index)*1deg))translateZ(calc(var(--item-offset) - 6px));opacity:1;justify-content:center;align-items:center;height:60px;display:flex;position:absolute;top:38%;right:-150px}.overlay-mask{background:linear-gradient(0deg,transparent 90%,var(--background)),linear-gradient(90deg,transparent 90%,var(--background)),linear-gradient(180deg,transparent 90%,var(--background))}
.cylinder-container{transform-style:preserve-3d;height:100%;position:relative;overflow:hidden}.cylinder{width:100%;height:100%;transform-style:preserve-3d;--pi:3.14159;--cylinder-height:300px;--segment-deg:calc(360/var(--segments));--segment-shift:calc(var(--cylinder-height)/calc(var(--pi)/2));position:absolute}.segment{width:100%;transform:rotateX(calc(var(--segment-deg)*var(--index)*1deg))translateZ(calc(var(--segment-shift) - 6px));opacity:1;backface-visibility:hidden;justify-content:center;align-items:center;height:60px;display:flex;position:absolute;top:50%;right:-150px}
.shield-container{--easing:cubic-bezier(1,0,0,1)}.shield-outline,.shield{color:#2f2e2e}.shield-outline path:nth-child(2){color:#a3a3a3;z-index:1;opacity:0;transition:all .5s;position:relative}.shield-outline{filter:blur();transition-duration:.75s;transition-delay:.5s}.shield-outline path:first-child{opacity:0}.shield path{transition:stroke .5s;transition-delay:0}.shield{transition:opacity .5s}.shield,.shield-inner,.shield-outline{-webkit-mask-image:linear-gradient(304deg,#0000 10%,#000000bf 70%);mask-image:linear-gradient(304deg,#0000 10%,#000000bf 70%)}.shield-dots{color:#2f2e2e;-webkit-mask-image:radial-gradient(#0000 40%,#000 70%);mask-image:radial-gradient(#0000 40%,#000 70%)}.shield-inner{opacity:1;transition:all .5s}.shield-container:hover .shield-inner{opacity:1;transition:opacity .5s ease-in-out .25s}.shield-container:hover .shield-outline path:nth-child(2){stroke-dashoffset:0;opacity:1;transition:opacity .25s,stroke-dashoffset 1.5s cubic-bezier(1,0,0,1)}.shield-container:hover .shield-outline{filter:blur(6px);opacity:0;transition:all .75s ease-in-out .75s}.shield-container:hover .shield path{stroke:#a3a3a3}.shield-container:hover .shield path:first-child{transition:stroke .25s ease-in-out .25s}.shield-container:hover .shield path:nth-child(2){transition:stroke .25s ease-in-out .5s}.shield-container:hover .shield path:nth-child(3){transition:stroke .25s ease-in-out .75s}.switchboard{-webkit-mask-image:radial-gradient(#0000 50%,#000 70%);mask-image:radial-gradient(#0000 50%,#000 70%)}.shield-container:not(:hover) .light:before,.shield-container:not(:hover) .light:after{box-shadow:none;background:#707070}.switchboard-canvas{z-index:0;opacity:.5;height:calc(100% + 30px);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-mask-image:radial-gradient(circle,#0000 30%,#000 50%);mask-image:radial-gradient(circle,#0000 30%,#000 50%)}
.circle-pulse{opacity:.7;animation:ping 6s cubic-bezier(0,0,.2,1)var(--pulse-delay)infinite;pointer-events:none}.mid{animation:6s cubic-bezier(0,0,.2,1) infinite pingmid}@keyframes pingmid{0%{transform:scale(.9)}10%{transform:scale(1.25)}to{transform:scale(1)}}@keyframes ping{33%{opacity:0;transform:scale(1.5)}to{opacity:0;transform:scale(1.5)}}.pulse-container{--factor:8;--width:300;--height:300;--n-mouse-x:clamp(calc(var(--width)*-1),var(--mouse-x),var(--width)*2);--n-mouse-y:clamp(calc(var(--height)*-1),var(--mouse-y),var(--height)*2);width:calc(var(--width)*1px);height:calc(var(--height)*1px);transform:perspective(var(--width))rotateX(0deg)rotateY(0deg)translateZ(-30px);z-index:1;-webkit-tap-highlight-color:transparent;pointer-events:initial;--rotate-x:calc(var(--factor)/2 - var(--n-mouse-x)/var(--width)*var(--factor));--rotate-y:calc(var(--n-mouse-y)/var(--width)*var(--factor) - var(--factor)/2);transform:perspective(calc(var(--width)*1px))rotateX(calc(var(--rotate-y)*-1deg))rotateY(calc(var(--rotate-x)*-1deg))translateZ(30px);padding:4px;transition:all .2s;-webkit-mask-image:radial-gradient(circle,#000 50%,#0000 70%);mask-image:radial-gradient(circle,#000 50%,#0000 70%)}
.item:not(:last-child):after{opacity:.25;content:"/";font-weight:200;font-size:inherit;display:block;position:absolute;right:-2rem}.carousel-shadow{background:linear-gradient(90deg,var(--background-base)10%,transparent 40%),linear-gradient(90deg,transparent 60%,var(--background-base))}
.glow-outline{--width-px:calc(var(--width)*1px);--radius-px:calc(var(--radius)*1px);pointer-events:none;inset:calc(var(--width-px)*-1);clip-path:inset(0 0 0 0 round var(--radius-px));border-radius:var(--radius-px);position:absolute;overflow:hidden}@keyframes glow-outline{0%{opacity:0;offset-distance:var(--start)}50%{opacity:1;offset-distance:calc(var(--start) + 25%)}to{opacity:0;offset-distance:calc(var(--start) + 45%)}}.glow-outline:before,.glow-outline:after{content:"";height:var(--width-px);offset-path:border-box;offset-anchor:100% 50%;background:radial-gradient(circle at right,#fff3,transparent 50%),radial-gradient(circle at right,var(--primary)50%,transparent);width:200px;animation:calc(var(--speed)*1s)1 ease-in-out forwards glow-outline;box-shadow:0 0 6px 1px color-mix(in oklab,var(--primary)25%,transparent);display:inline-block;position:absolute}.glow-outline:before{--start:5%}.glow-outline:after{--start:55%}