.connect-story{--connect-ease:cubic-bezier(.2, .8, .2, 1);--connect-spring:cubic-bezier(.34, 1.45, .55, 1)}.connect-blob{z-index:-1;filter:blur(40px);opacity:.55;transition:translate 1.6s var(--connect-ease), background-color 1.6s var(--connect-ease);border-radius:9999px;position:absolute}.connect-blob-a{background-color:var(--color-wayward-tint);width:260px;height:260px;top:27%;left:-60px}.connect-blob-b{background-color:var(--color-blush);width:220px;height:220px;top:55%;right:-70px}.connect-title span{opacity:0;filter:blur(6px);transition:translate .6s var(--connect-spring), opacity .4s var(--connect-ease), filter .4s var(--connect-ease);display:inline-block;translate:0 18px}.connect-title[data-state=on] span{opacity:1;filter:blur();transition-delay:calc(.12s + var(--i) * 55ms);translate:0}.connect-title[data-state=past] span{transition-duration:.3s;translate:0 -14px}.connect-anchor{position:absolute;top:50%;left:50%}.connect-el{transition:translate .95s var(--connect-spring), rotate .95s var(--connect-spring), scale .95s var(--connect-spring), opacity .6s var(--connect-ease), filter .6s var(--connect-ease), box-shadow .8s var(--connect-ease);position:absolute;top:0;left:0}.connect-card{box-shadow:0 1px 0 #0000000a, 0 10px 30px -12px color-mix(in srgb, var(--color-wayward-ink) 22%, transparent), 0 2px 6px color-mix(in srgb, var(--color-wayward-ink) 6%, transparent);border-radius:20px}.connect-rings{z-index:1;position:absolute;top:0;left:0}.connect-rings span{border:1.5px solid color-mix(in srgb, var(--color-wayward) 35%, transparent);opacity:0;border-radius:30px;width:240px;height:320px;margin:-178px 0 0 -120px;position:absolute}.connect-post{z-index:2;margin:-172px 0 0 -108px;rotate:3deg}.connect-sponsor{transition:grid-template-rows .5s var(--connect-ease);grid-template-rows:0fr}.connect-sponsor span{clip-path:inset(0 100% 0 0);transition:clip-path .9s steps(22,end)}.connect-photo:after{content:"";background:linear-gradient(105deg,#0000 35%,#ffffff8c 50%,#0000 65%);position:absolute;inset:0;translate:-120%}.connect-burst{color:#fff;filter:drop-shadow(0 4px 12px #00000040);opacity:0;width:70px;height:70px;margin:-35px;position:absolute;top:50%;left:50%;scale:0}.connect-tag{opacity:0;transition:translate .6s var(--connect-spring), opacity .3s;translate:0 40px}.connect-mini{opacity:0;width:14px;height:14px;position:absolute;top:0;left:3px}.connect-badge{background-color:var(--color-wayward);color:#fff;width:46px;height:46px;box-shadow:0 8px 20px -6px color-mix(in srgb, var(--color-wayward) 60%, transparent);transition:scale .5s var(--connect-spring), background-color .4s, color .4s, box-shadow .4s;border-radius:9999px;place-items:center;display:grid;position:absolute;top:-20px;right:-20px;scale:0}.connect-badge-icon{opacity:0;width:22px;height:22px;transition:opacity .3s, scale .5s var(--connect-spring), rotate .5s var(--connect-spring);grid-area:1/1;rotate:-40deg;scale:.4}.connect-sparks{position:absolute;inset:0}.connect-sparks svg{width:10px;height:10px;color:var(--color-wayward);position:absolute;scale:0}.connect-sparks svg:first-child{top:-6px;left:-14px}.connect-sparks svg:nth-child(2){top:30px;right:-12px}.connect-sparks svg:nth-child(3){top:-18px;left:24px}.connect-product{z-index:3;opacity:0;margin:-150px 0 0 -108px;translate:280px 60px;rotate:22deg}.connect-product .connect-badge{top:-22px;right:-22px}.connect-earn{transform-origin:0}.connect-earn:after{content:"";background:linear-gradient(105deg,#0000 30%,#ffffffe6 50%,#0000 70%);position:absolute;inset:0;translate:-130%}.connect-plus{opacity:0}.connect-tile{width:124px;height:90px;box-shadow:0 1px 0 #0000000a, 0 8px 22px -10px color-mix(in srgb, var(--color-wayward-ink) 25%, transparent);z-index:4;opacity:0;scale:.5;translate:var(--connect-offstage);rotate:var(--connect-offstage-rotate);transition:translate .95s var(--connect-spring), rotate .95s var(--connect-spring), scale .95s var(--connect-spring), opacity .5s var(--connect-ease), width .7s var(--connect-spring), height .7s var(--connect-spring), margin .7s var(--connect-spring), border-radius .7s var(--connect-ease), box-shadow .5s;transition-delay:var(--connect-delay,0s);background:#fff;border-radius:18px;margin:-45px 0 0 -62px}.connect-tile-0{--connect-offstage:-240px -60px;--connect-offstage-rotate:-30deg}.connect-tile-1{--connect-offstage:240px -80px;--connect-offstage-rotate:25deg}.connect-tile-2{--connect-offstage:-240px 140px;--connect-offstage-rotate:20deg}.connect-tile-3{--connect-offstage:240px 160px;--connect-offstage-rotate:-25deg}.connect-tile img{border-radius:inherit;object-fit:contain;width:100%;height:100%;transition:padding .7s var(--connect-spring);padding:10px;position:absolute;inset:0}.connect-check{scale:0}[data-scene=discover] .connect-blob-a{translate:120px 40px}[data-scene=discover] .connect-blob-b{background-color:var(--color-butter);translate:-140px -120px}[data-scene=discover] .connect-post{opacity:0;translate:-60px 420px;rotate:-20deg}[data-scene=discover] .connect-product{opacity:0;translate:300px -240px;rotate:30deg}[data-scene=discover] .connect-tile{opacity:1;scale:1}[data-scene=discover] .connect-tile-0{--connect-delay:.15s;translate:-66px -50px;rotate:-4deg}[data-scene=discover] .connect-tile-1{--connect-delay:.25s;translate:66px -56px;rotate:-2deg}[data-scene=discover] .connect-tile-2{--connect-delay:.35s;translate:-62px 48px;rotate:-3deg}[data-scene=discover] .connect-tile-3{--connect-delay:.45s;translate:70px 42px;rotate:-2deg}[data-scene=link] .connect-blob-a{background-color:var(--color-mint);translate:60px -60px}[data-scene=link] .connect-blob-b{translate:-30px 60px}[data-scene=link] .connect-post{opacity:.55;filter:saturate(.7);translate:-46px -34px;rotate:-8deg;scale:.8}[data-scene=link] .connect-product{opacity:1;translate:18px 20px;rotate:4deg}[data-scene=link] .connect-product .connect-badge{transition-delay:.45s;scale:1}[data-scene=link] .connect-badge-link{opacity:1;rotate:0deg;scale:1}[data-scene=share] .connect-post .connect-badge{color:var(--color-brand-400);box-shadow:none;background-color:#0000;transition-delay:.35s;top:80px;right:-26px;scale:1}[data-scene=share] .connect-badge-heart{opacity:1;width:34px;height:34px;rotate:0deg;scale:1}[data-scene=seen] .connect-blob-a{translate:90px 90px}[data-scene=seen] .connect-blob-b{translate:-90px -60px}[data-scene=seen] .connect-post .connect-badge{color:var(--color-wayward);box-shadow:0 8px 22px -6px color-mix(in srgb, var(--color-wayward-ink) 30%, transparent);background-color:#fff;transition-delay:.35s;scale:1}[data-scene=seen] .connect-badge-eye{opacity:1;rotate:0deg;scale:1}[data-scene=seen] .connect-tag{opacity:1;transition-delay:.75s;translate:0}[data-scene=seen] .connect-tile{opacity:1;border-radius:50%;width:52px;height:52px;margin:-26px 0 0 -26px;rotate:0deg;scale:1}[data-scene=seen] .connect-tile img{padding:5px}[data-scene=seen] .connect-tile-0{--connect-delay:.3s;translate:-138px -118px}[data-scene=seen] .connect-tile-1{--connect-delay:.45s;translate:142px 4px}[data-scene=seen] .connect-tile-2{--connect-delay:.6s;translate:-142px 96px}[data-scene=seen] .connect-tile-3{--connect-delay:.75s;translate:128px 168px}[data-scene=boost] .connect-blob-a{background-color:var(--color-brand-200);translate:40px -20px}[data-scene=boost] .connect-blob-b{background-color:var(--color-wayward-tint);translate:-40px -40px}[data-scene=boost] .connect-post{box-shadow:0 1px 0 #0000000a, 0 18px 44px -12px color-mix(in srgb, var(--color-wayward) 50%, transparent), 0 2px 6px color-mix(in srgb, var(--color-wayward-ink) 6%, transparent);rotate:-3deg}[data-scene=boost] .connect-post .connect-badge{transition-delay:.35s;scale:1}[data-scene=boost] .connect-badge-rocket{opacity:1;rotate:0deg;scale:1}[data-scene=boost] .connect-sponsor{grid-template-rows:1fr}[data-scene=boost] .connect-sponsor span{clip-path:inset(0);transition-delay:.5s}[data-scene=boost] .connect-tag{opacity:1;transition-delay:.75s;translate:0}[data-scene=boost] .connect-tile-0{transition-duration:.8s,.8s,.8s,.9s;translate:-50px 104px;rotate:-3deg;scale:.22}[data-scene=boost] .connect-tile-1{translate:260px -200px;rotate:30deg}[data-scene=boost] .connect-tile-2{translate:-260px 240px;rotate:-30deg}[data-scene=boost] .connect-tile-3{translate:260px 260px;rotate:30deg}@starting-style{.connect-story .connect-tile{opacity:0;scale:.5;translate:var(--connect-offstage);rotate:var(--connect-offstage-rotate)}}[data-scene=discover] .connect-tile-0{animation:connect-pick .7s 1.8s var(--connect-spring) forwards}[data-scene=discover] .connect-check{animation:connect-pop .5s 2s var(--connect-spring) forwards}[data-scene=discover] :is(.connect-tile-1,.connect-tile-2,.connect-tile-3){animation:connect-dim .6s 1.8s var(--connect-ease) forwards}[data-scene=link] .connect-earn{animation:connect-earn .7s 1.55s var(--connect-spring) both}[data-scene=link] .connect-earn:after{animation:connect-sheen 1s 1.9s var(--connect-ease) both}[data-scene=link] .connect-plus{animation:connect-plus 1.2s 1.6s var(--connect-ease) both}[data-scene=share] .connect-burst{animation:connect-burst .9s .8s var(--connect-ease) both}[data-scene=share] .connect-like>:first-child{animation:connect-thump .5s 1.05s var(--connect-spring) both}[data-scene=share] .connect-mini{animation:connect-rise 1.3s var(--connect-ease) both}[data-scene=share] .connect-mini:nth-child(2){--connect-drift:-14px;animation-delay:1.1s}[data-scene=share] .connect-mini:nth-child(3){--connect-drift:10px;animation-delay:1.3s}[data-scene=share] .connect-mini:nth-child(4){--connect-drift:-4px;animation-delay:1.5s}[data-scene=share] .connect-badge-heart{animation:2.4s ease-in-out .8s infinite connect-float}[data-scene=seen] .connect-rings span{animation:connect-ring 2.4s var(--connect-ease) infinite}[data-scene=seen] .connect-rings span:nth-child(2){animation-delay:.8s}[data-scene=seen] .connect-rings span:nth-child(3){animation-delay:1.6s}[data-scene=seen] .connect-badge-eye{animation:2.6s 1s infinite connect-blink}[data-scene=seen] .connect-tile{animation:connect-peek 2.8s calc(var(--connect-delay) + .9s) ease-in-out infinite}[data-scene=boost] .connect-photo:after{animation:connect-sheen 1.4s 1.2s var(--connect-ease) both}[data-scene=boost] .connect-sparks svg{animation:connect-twinkle .9s var(--connect-spring) both}[data-scene=boost] .connect-sparks svg:first-child{animation-delay:.7s}[data-scene=boost] .connect-sparks svg:nth-child(2){animation-delay:.85s}[data-scene=boost] .connect-sparks svg:nth-child(3){animation-delay:1s}[data-scene=boost] .connect-badge-rocket{animation:2.4s ease-in-out .8s infinite connect-wiggle}.connect-story[data-running=false] *,.connect-story[data-running=false] :after{animation-play-state:paused}@media (prefers-reduced-motion:reduce){.connect-story *,.connect-story :after{transition:none!important;animation:none!important}}@keyframes connect-pick{to{box-shadow:0 0 0 2px var(--color-wayward), 0 16px 30px -10px color-mix(in srgb, var(--color-wayward) 50%, transparent);transform:scale(1.1)}}@keyframes connect-pop{to{scale:1}}@keyframes connect-dim{to{opacity:.45;transform:scale(.95)}}@keyframes connect-earn{0%{background-color:#0000;transform:scale(1)}45%{background-color:var(--color-mint);box-shadow:0 0 0 4px color-mix(in srgb, var(--color-emerald) 12%, transparent);transform:scale(1.22)}to{background-color:color-mix(in srgb, var(--color-mint) 70%, white);transform:scale(1.06);box-shadow:0 0 #0000}}@keyframes connect-sheen{to{translate:120%}}@keyframes connect-plus{0%{opacity:0;transform:translateY(6px)}25%{opacity:1}to{opacity:0;transform:translateY(-36px)}}@keyframes connect-burst{0%{opacity:0;scale:0}30%{opacity:1;scale:1.2}55%{opacity:1;scale:.95}to{opacity:0;scale:1.1}}@keyframes connect-thump{50%{transform:scale(1.35)}}@keyframes connect-rise{0%{opacity:0;transform:translate(0)scale(.4)}20%{opacity:1}to{opacity:0;transform:translate(var(--connect-drift), -70px) scale(1)}}@keyframes connect-float{50%{transform:translateY(-6px)rotate(8deg)}}@keyframes connect-ring{0%{opacity:.9;transform:scale(.92)}to{opacity:0;transform:scale(1.35)}}@keyframes connect-blink{0%,90%,to{transform:scaleY(1)}95%{transform:scaleY(.1)}}@keyframes connect-peek{50%{transform:translateY(-4px)scale(1.06)}}@keyframes connect-twinkle{0%{rotate:-90deg;scale:0}50%{scale:1.3}to{rotate:90deg;scale:0}}@keyframes connect-wiggle{50%{transform:translate(2px,-3px)}}