@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}.fade-in{animation:fadeIn 1s ease-out}.fade-out{animation:fadeOut 1s ease-in forwards}:root{--glowing-backdrop: hsl(0 0% 60% / .12);--glowing-radius: 14;--glowing-border: 3;--glowing-backup-border: var(--glowing-backdrop);--glowing-size: 200;--glowing-base: 80;--glowing-spread: 500;--glowing-outer: 1}[data-glow]{--glowing-border-size: calc(var(--glowing-border, 2) * 1px);--glowing-spotlight-size: calc(var(--glowing-size, 150) * 1px);--glowing-hue: calc( var(--glowing-base) + (var(--glowing-xp, 0) * var(--glowing-spread, 0)) );background-image:radial-gradient(var(--glowing-spotlight-size) var(--glowing-spotlight-size) at calc(var(--glowing-x, 0) * 1px) calc(var(--glowing-y, 0) * 1px),hsl(var(--glowing-hue, 210) calc(var(--glowing-saturation, 100) * 1%) calc(var(--glowing-lightness, 70) * 1%) / var(--glowing-bg-spot-opacity, .1)),transparent);background-size:calc(100% + (2 * var(--glowing-border-size))) calc(100% + (2 * var(--glowing-border-size)));background-position:50% 50%;background-attachment:fixed;position:relative;touch-action:none}[data-glow]:before,[data-glow]:after{pointer-events:none;content:"";position:absolute;inset:calc(var(--glowing-border-size) * -1);border:var(--glowing-border-size) solid transparent;border-radius:calc(var(--glowing-radius) * 1px);background-attachment:fixed;background-size:calc(100% + (2 * var(--glowing-border-size))) calc(100% + (2 * var(--glowing-border-size)));background-repeat:no-repeat;background-position:50% 50%;-webkit-mask:linear-gradient(transparent,transparent),linear-gradient(white,white);mask:linear-gradient(transparent,transparent),linear-gradient(white,white);-webkit-mask-clip:padding-box,border-box;mask-clip:padding-box,border-box;-webkit-mask-composite:source-in,xor;mask-composite:intersect}[data-glow]:before{background-image:radial-gradient(calc(var(--glowing-spotlight-size) * .75) calc(var(--glowing-spotlight-size) * .75) at calc(var(--glowing-x, 0) * 1px) calc(var(--glowing-y, 0) * 1px),hsl(var(--glowing-hue, 210) calc(var(--glowing-saturation, 100) * 1%) calc(var(--glowing-lightness, 50) * 1%) / var(--glowing-border-spot-opacity, 1)),transparent 100%);filter:brightness(2)}[data-glow]:after{background-image:radial-gradient(calc(var(--glowing-spotlight-size) * .5) calc(var(--glowing-spotlight-size) * .5) at calc(var(--glowing-x, 0) * 1px) calc(var(--glowing-y, 0) * 1px),hsl(0 100% 100% / var(--glowing-border-light-opacity, 1)),transparent 100%)}[data-glow]>[data-glow]:not(:is(a,button)){position:absolute;top:0;right:0;bottom:0;left:0;will-change:filter;opacity:var(--glowing-outer, 1);border-radius:calc(var(--glowing-radius) * 1px);border-width:calc(var(--glowing-border-size) * 20);filter:blur(calc(var(--glowing-border-size) * 10));background:none;pointer-events:none}[data-glow]>[data-glow]:not(:is(a,button)):before{top:-10px;right:-10px;bottom:-10px;left:-10px;border-width:10px}[data-glow]>[data-glow]{border:none}[data-glow] :is(a,button){border-radius:calc(var(--glowing-radius) * 1px);border:var(--glowing-border-size) solid transparent}[data-glow] :is(a,button) [data-glow]{background:none}[data-glow] :is(a,button) [data-glow]:before{inset:calc(var(--glowing-border-size) * -1);border-width:calc(var(--glowing-border-size) * 1)}.glowing-card button{padding:.75rem 2rem;align-self:end;color:#ccc}button[data-glow] span{font-weight:700;background-image:radial-gradient(var(--glowing-spotlight-size) var(--glowing-spotlight-size) at calc(var(--glowing-x, 0) * 1px) calc(var(--glowing-y, 0) * 1px),hsl(var(--glowing-hue, 210) calc(var(--glowing-saturation, 100) * 1%) calc(var(--glowing-lightness, 70) * 1%) / var(--glowing-bg-spot-opacity, 1)),transparent);background-color:var(--glowing-backdrop, transparent);background-position:50% 50%;background-attachment:fixed;-webkit-background-clip:text;background-clip:text;filter:brightness(1.5);color:transparent}:root{--speed: 10s;--transition: .15s}@keyframes shade{to{background-position:100% 0}}.dark .cta .item{background-color:#1a1a1a;color:#fff;border-color:#404040;background-color:#000}.dark .cta li:before{background-color:#000}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.cta .window{height:250px;container-type:inline-size;transform-style:preserve-3d;width:100%;outline:4px dashed transparent;transition:outline .5s}.cta .scene{--buff: 3rem;height:100%;width:100%;-webkit-mask:linear-gradient(transparent,white var(--buff) calc(100% - var(--buff)),transparent),linear-gradient(90deg,transparent,white var(--buff) calc(100% - var(--buff)),transparent);mask:linear-gradient(transparent,white var(--buff) calc(100% - var(--buff)),transparent),linear-gradient(90deg,transparent,white var(--buff) calc(100% - var(--buff)),transparent);-webkit-mask-composite:source-in,xor;mask-composite:intersect}.cta .grid:hover li{animation-play-state:paused}.cta .grid{--count: 6;--inset: 0;--outset: 3.5;height:100%;width:100%;list-style-type:none;position:relative;padding:0 1rem;display:grid;grid-template-columns:1fr 1fr;gap:0 2rem;transition:transform .5s;transform:rotateX(calc(var(--rotate, 0) * 20deg)) rotate(calc(var(--rotate, 0) * -20deg)) skew(calc(var(--rotate, 0) * 20deg));--rotate: 1}.cta li{min-height:60px;transform-style:preserve-3d;width:100%;z-index:calc(1 + var(--active))}.cta li:before{content:"";position:absolute;top:4px;right:4px;bottom:-2px;left:-2px;border-radius:6px;background:#0000001a;filter:blur(calc(var(--active, 0) * 8px));z-index:-1;transition:scale var(--transition),opacity var(--transition),translate var(--transition),filter var(--transition);transform-origin:50% 0;scale:1 calc(1 + (var(--active, 0) * .05));--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);box-shadow:0 0 #0000,0 0 #0000,var(--tw-shadow)}.cta .grid{transform-style:preserve-3d;gap:1rem}.cta .item{align-items:center;background:#fff;border:1px solid hsl(0 0% 90%);color:#1a1a1a;border-radius:6px;cursor:pointer;display:flex;gap:1rem;height:100%;justify-content:flex-start;overflow:hidden;padding:1.25rem;text-align:center;width:100%;transition:transform var(--transition),scale var(--transition),background-color .25s,color .25s,border .25s,box-shadow .25s;scale:calc(1 + (var(--active, 0) * .05));transform:translateZ(calc(var(--active, 0) * 24px))}.cta .item__icon{width:24px;color:#7c3aed}.cta .item__text{flex:1;text-align:center}.cta li:nth-of-type(1){--index: 0}.cta li:nth-of-type(2){--index: 0}.cta li:nth-of-type(3){--index: 1}.cta li:nth-of-type(4){--index: 1}.cta li:nth-of-type(5){--index: 2}.cta li:nth-of-type(6){--index: 2}.cta li:nth-of-type(7){--index: 3}.cta li:nth-of-type(8){--index: 3}.cta li:nth-of-type(9){--index: 4}.cta li:nth-of-type(10){--index: 4}.cta li:nth-of-type(11){--index: 5}.cta li:nth-of-type(12){--index: 5}@container (width < 400px){.cta .grid{--count: 12;--inset: 0;--outset: 4;grid-template-columns:1fr}.cta li:nth-of-type(1){--index: 0}.cta li:nth-of-type(2){--index: 1}.cta li:nth-of-type(3){--index: 2}.cta li:nth-of-type(4){--index: 3}.cta li:nth-of-type(5){--index: 4}.cta li:nth-of-type(6){--index: 5}.cta li:nth-of-type(7){--index: 6}.cta li:nth-of-type(8){--index: 7}.cta li:nth-of-type(9){--index: 8}.cta li:nth-of-type(10){--index: 9}.cta li:nth-of-type(11){--index: 10}.cta li:nth-of-type(12){--index: 11}.cta li{--duration: calc(var(--speed) * 2);--delay: calc((var(--duration) / var(--count)) * (var(--index, 0) - 8))}}@media (prefers-reduced-motion: no-preference){.cta .grid{gap:0 2rem}.cta li{--duration: calc(var(--speed) * 1);--delay: calc((var(--duration) / var(--count)) * (var(--index, 0) - 8));animation:slide var(--duration) var(--delay) infinite linear;translate:0% calc(((var(--count) - var(--index)) + var(--inset, 0)) * 100%)}.cta li:hover{--active: 1}@keyframes slide{to{translate:0% calc(calc((var(--index) + var(--outset, 0)) * -100%))}}@container (width < 400px){.cta li{--duration: calc(var(--speed) * 2);--delay: calc((var(--duration) / var(--count)) * (var(--index, 0) - 8))}}}// TODO: Scope this CSS to the component only :root{}.flicker{border-radius:50%;aspect-ratio:1;filter:drop-shadow(0 -.25vmin .25vmin #0000) drop-shadow(0 0 .5vmin rgba(230,230,230,.5)) drop-shadow(0 0 1vmin rgba(230,230,230,.5)) drop-shadow(0 0 5vmin #e6e6e6) brightness(1.2) drop-shadow(0 -3vmin 3vmin hsl(262.1,0%,0%)) drop-shadow(0 0 6vmin hsl(262.1,83.3%,57.8%));opacity:.8;animation:flicker 4s infinite linear(0 0% .5%,.1723 .7925%,.2408 .865%,.1991 1.6425%,0 7.69% 13.69%,.3451 3.795%,.0006 3.94%,.5332 4.37%,.0001 4.895%,.595 5.175%,.0001 6.29%,.6263 6.755%,.0004 7.7775%,.4634 7.8725%,.4869 8.075%,.6052 8.455%,.6504 8.9525%,.0011 9.0925%,.6832 10.3875%,.2716 11.5425%,.5783 11.6675%,.5956 13.0475%,.1565 13.6625%,.869 15.095%,.4566 15.745%,.3918 15.975%,.4768 16.1675%,.3041 17.29%,.5036 17.295%,.9561 17.96%,.4202 18.1475%,.9997 18.59%,.9389 18.9675%,.5199 19.5325%,.9878 19.6325%,.5212 19.8075%,.8476 21.1625%,.5724 21.615%,.7517 21.9%,.5716 22.4%,.8177 22.8325%,.9997 23.865%,1 25%,1 100%) alternate}@keyframes flicker{25%{opacity:.2;filter:drop-shadow(0 -3vmin 3vmin hsl(262.1,0%,0%,0)) drop-shadow(0 0 6vmin hsl(262.1,83.3%,57.8%,0))}}