.go-wrap{position:relative;width:100%;height:100%}.go-shadow{position:absolute;left:14%;right:14%;bottom:-9%;height:14%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in oklab,var(--base) 45%,rgb(0 0 0 / .35)),transparent);filter:blur(6px);opacity:.7;transition:transform .52s cubic-bezier(.34,1.4,.64,1)}.go{--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:relative;isolation:isolate;width:100%;height:100%;overflow:hidden;border-radius:50%;background:radial-gradient(circle at 34% 30%,color-mix(in oklab,var(--base) 55%,#fff) 0%,transparent 42%),radial-gradient(circle at 50% 55%,var(--base) 0%,color-mix(in oklab,var(--base) 78%,#000) 78%,color-mix(in oklab,var(--base) 55%,#000) 100%);box-shadow:0 10px 28px -8px color-mix(in oklab,var(--base) 55%,transparent),0 0 0 1px #ffffff38;transition:transform .52s cubic-bezier(.34,1.4,.64,1)}.go-roll{position:absolute;inset:0;transition:transform .9s cubic-bezier(.22,1,.36,1)}.go-wrap{cursor:pointer}.go-wrap:hover .go{transform:scale(1.14)}.go-wrap:hover .go-roll{transform:rotate(-150deg)}.go-wrap:hover .go-shadow{transform:scale(1.12)}.go-grain{position:absolute;inset:0;z-index:2;background-image:var(--grain);background-size:160px;mix-blend-mode:overlay;opacity:.35;pointer-events:none}.go-haze{position:absolute;left:10%;right:10%;top:18%;height:64%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in oklab,var(--wave) 50%,transparent),transparent);filter:blur(12px);animation:go-haze var(--breath) ease-in-out infinite alternate;will-change:transform,opacity}.go-waves{position:absolute;inset:0;z-index:1;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 38%,transparent 70%);mask-image:radial-gradient(circle at 50% 50%,#000 38%,transparent 70%)}.go-wave{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform-origin:50% 50%;animation:go-bob var(--breath) ease-in-out infinite alternate;will-change:transform}.go-wave--glow{filter:blur(var(--blur));opacity:.9}.go-wave--core{filter:blur(calc(var(--blur) * .35));opacity:.4;animation-delay:-.6s}.go-wave path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;animation:go-travel var(--dur) linear infinite;will-change:transform}.go-w-main{stroke:var(--wave)}.go-w-ghost{stroke:var(--echo);opacity:.5;animation-duration:calc(var(--dur) * 1.35);animation-direction:reverse}.go-shade,.go-rim,.go-spec,.go-glint{position:absolute;pointer-events:none;border-radius:50%;z-index:3}.go-shade{inset:0;box-shadow:inset 0 -10px 22px -6px #00001473,inset 0 0 18px 2px #00001447,inset 0 6px 14px -8px #ffffff80}.go-rim{inset:0;background:radial-gradient(circle at 72% 84%,color-mix(in oklab,var(--wave) 60%,#fff) 0%,transparent 22%),radial-gradient(circle at 50% 50%,transparent 64%,rgb(255 255 255 / .28) 70%,transparent 72%);mix-blend-mode:screen;opacity:.75}.go-spec{left:14%;top:5%;width:60%;height:38%;background:radial-gradient(ellipse at 50% 40%,rgb(255 255 255 / .75),rgb(255 255 255 / .18) 55%,transparent 72%);transform:rotate(-18deg);filter:blur(1px)}.go-glint{left:26%;top:16%;width:16%;height:10%;background:#fffffff2;transform:rotate(-32deg);filter:blur(1.2px)}@keyframes go-travel{to{transform:translate(calc(var(--travel) * -1px))}}@keyframes go-bob{0%{transform:scaleY(.82)}to{transform:scaleY(1.12)}}@keyframes go-haze{0%{transform:scale(.9);opacity:.55}to{transform:scale(1.08);opacity:1}}.go-wrap[data-shape=motif] .go{border-radius:0;box-shadow:none;-webkit-mask-image:var(--motif);mask-image:var(--motif);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:125%;mask-size:125%}.go-bevel{position:relative;width:100%;height:100%}.go-wrap[data-shape=motif] .go-bevel{filter:url(#go-motif-bevel)}.go-wrap[data-shape=motif] .go-shade,.go-wrap[data-shape=motif] .go-rim{display:none}.go-wave,.go-haze,.go-waves{transition:opacity .4s ease,filter .4s ease}.go-wrap[data-playing=true] .go-wave{animation-name:go-bob-loud;animation-duration:1.1s}.go-wrap[data-playing=true] .go-wave--glow{opacity:1;filter:blur(calc(var(--blur) * .7)) brightness(1.3) saturate(1.4)}.go-wrap[data-playing=true] .go-wave--core{opacity:.8}.go-wrap[data-playing=true] .go-haze{animation-duration:1.1s;filter:blur(10px) brightness(1.25)}.go-wrap[data-playing=true] .go-waves{-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 50%,transparent 78%);mask-image:radial-gradient(circle at 50% 50%,#000 50%,transparent 78%)}@keyframes go-bob-loud{0%{transform:scaleY(.7)}to{transform:scaleY(1.8)}}.go-control{position:absolute;left:50%;top:50%;z-index:4;display:grid;place-items:center;width:24%;height:24%;color:#fffffff0;transform:translate(-50%,-50%) scale(.85);transition:opacity .22s ease,transform .32s cubic-bezier(.34,1.4,.64,1);pointer-events:none}.go-control svg{width:100%;height:100%;filter:drop-shadow(0 1px 1px rgb(0 0 0 / .38)) drop-shadow(0 2px 5px color-mix(in oklab,var(--base) 55%,#000))}.go-wrap[data-control=hover] .go-control{opacity:0}.go-wrap[data-control=always] .go-control,.go-wrap:hover .go-control{opacity:1;transform:translate(-50%,-50%) scale(1)}@media(prefers-reduced-motion:reduce){.go-wrap[data-playing=true] .go-wave{animation:none;transform:scaleY(1.4)}.go,.go-roll,.go-shadow{transition:none}.go-wrap:hover .go-roll{transform:none}.go-haze,.go-wave,.go-wave path{animation:none}}
