/* Sonder / Roganverse CTA. Burst interaction inspired by MuhammadHasann on Uiverse. */
[data-rogan-cta].rogan-cta{
  --rc-acid:#c8ff79;--rc-ink:#10190e;
  position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;
  gap:14px;min-height:58px;min-width:210px;max-width:100%;padding:17px 22px;
  border:1px solid #c5f78a;border-radius:4px 18px 4px 18px;
  background:var(--rc-acid);color:var(--rc-ink);text-decoration:none;
  font-family:"IBM Plex Sans",Arial,sans-serif;font-size:14px;font-weight:700;line-height:1.2;
  letter-spacing:.025em;cursor:pointer;overflow:visible;vertical-align:middle;
  box-shadow:inset 0 1px 0 #f3ffcd,0 4px 0 #2a421e,0 12px 28px #0003;
  transition:box-shadow .25s,transform .25s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.rogan-cta::before{content:"";position:absolute;inset:0;z-index:0;background:inherit;border:3px double #19330d26;border-radius:inherit;pointer-events:none}
.rogan-cta::after{content:"";position:absolute;inset:-12px;border-radius:20px;background:radial-gradient(ellipse,#b5ff5a36,transparent 72%);opacity:0;z-index:-1;pointer-events:none;transition:opacity .3s}
.rogan-cta .rc-label{position:relative;z-index:4;display:block;white-space:normal;text-align:left}
.rogan-cta .rc-eye{position:relative;flex:0 0 25px;width:25px;height:27px;z-index:4;display:grid;place-items:center}
.rogan-cta .rc-eye svg{width:25px;height:27px;overflow:visible}
.rogan-cta .rc-arrow{position:relative;display:grid;place-items:center;flex:0 0 25px;width:25px;height:25px;margin-left:2px;z-index:4;border:1px solid currentColor;border-radius:50%;transition:transform .4s,background .3s}
.rogan-cta .rc-arrow svg{width:12px;height:12px;transition:transform .4s}
.rogan-cta .rc-scene{position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit}
.rogan-cta .rc-orbit{position:absolute;left:50%;top:50%;width:160%;height:130%;border:1px solid #c7ff775e;border-radius:50%;opacity:0;transform:translate(-50%,-50%) rotate(-15deg) scale(.5);transition:transform .7s cubic-bezier(.15,.8,.2,1),opacity .3s}
.rogan-cta .rc-orbit:nth-child(2){width:140%;height:180%;transform:translate(-50%,-50%) rotate(22deg) scale(.5);border-color:#80eeff42}
.rogan-cta .rc-character{position:absolute;left:50%;top:50%;width:68px;height:68px;opacity:0;transform:translate(-50%,-50%) scale(.15) rotate(0deg);filter:drop-shadow(0 0 7px #abff5c55);transition:transform .65s cubic-bezier(.16,1,.3,1),opacity .15s;will-change:auto}
.rogan-cta .rc-character .rc-sprite{width:100%;height:100%;overflow:hidden}
.rogan-cta .rc-ufo{width:66px;height:44px;filter:drop-shadow(0 0 12px #b8ff86aa)}
.rogan-cta .rc-ufo svg{width:100%;height:100%;overflow:visible}
.rogan-cta .rc-spark{position:absolute;left:50%;top:50%;width:6px;height:6px;background:#ddffbb;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:0;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .25s}
[data-rogan-cta].rogan-cta:is(:focus-visible,.rc-preview,.rc-fired){background:#101f16;color:#f5ffe8;box-shadow:inset 0 0 22px #bbff6b0a,0 4px 0 #243b1b,0 0 34px #b5ff5a2e;z-index:10}
.rogan-cta:is(:focus-visible,.rc-preview,.rc-fired)::after{opacity:1}
.rogan-cta:is(:focus-visible,.rc-preview,.rc-fired) .rc-orbit{opacity:1;transform:translate(-50%,-50%) rotate(-15deg) scale(1)}
.rogan-cta:is(:focus-visible,.rc-preview,.rc-fired) .rc-orbit:nth-child(2){transform:translate(-50%,-50%) rotate(22deg) scale(1)}
.rogan-cta:is(:focus-visible,.rc-preview,.rc-fired) .rc-character{opacity:1}
.rogan-cta:is(:focus-visible,.rc-preview,.rc-fired) .rc-ape{transform:translate(calc(-50% - 135px),calc(-50% - 24px)) rotate(-19deg) scale(1)}
.rogan-cta:is(:focus-visible,.rc-preview,.rc-fired) .rc-alien{transform:translate(calc(-50% + 125px),calc(-50% - 33px)) rotate(17deg) scale(.95);transition-delay:40ms}
.rogan-cta:is(:focus-visible,.rc-preview,.rc-fired) .rc-joe{transform:translate(calc(-50% + 60px),calc(-50% + 50px)) rotate(13deg) scale(.9);transition-delay:70ms}
.rogan-cta:is(:focus-visible,.rc-preview,.rc-fired) .rc-ufo{transform:translate(calc(-50% - 46px),calc(-50% - 60px)) rotate(-12deg) scale(1);transition-delay:20ms}
.rogan-cta:is(:focus-visible,.rc-preview,.rc-fired) .rc-spark{opacity:1}
.rogan-cta:is(:focus-visible,.rc-preview,.rc-fired) .rc-spark:nth-last-child(1){transform:translate(-92px,53px) rotate(50deg)}
.rogan-cta:is(:focus-visible,.rc-preview,.rc-fired) .rc-spark:nth-last-child(2){transform:translate(91px,-66px) rotate(80deg) scale(1.5)}
.rogan-cta:is(:focus-visible,.rc-preview,.rc-fired) .rc-spark:nth-last-child(3){transform:translate(-155px,35px) rotate(40deg) scale(.7)}
.rogan-cta:is(:focus-visible,.rc-preview,.rc-fired) .rc-arrow{transform:rotate(45deg)}
.rogan-cta:focus-visible{outline:2px solid #fff;outline-offset:8px}
.rogan-cta.rc-fired .rc-eye{animation:rc-blink .4s ease}
.rogan-cta.rc-fired{transform:translateY(3px);box-shadow:0 0 36px #c5ff7560}
@keyframes rc-blink{0%,100%{transform:scaleY(1)}40%{transform:scaleY(.2)}}
@media(hover:hover) and (pointer:fine){
[data-rogan-cta].rogan-cta:hover{background:#101f16;color:#f5ffe8;box-shadow:inset 0 0 22px #bbff6b0a,0 4px 0 #243b1b,0 0 34px #b5ff5a2e;z-index:10}
.rogan-cta:hover::after{opacity:1}
.rogan-cta:hover .rc-orbit{opacity:1;transform:translate(-50%,-50%) rotate(-15deg) scale(1)}
.rogan-cta:hover .rc-orbit:nth-child(2){transform:translate(-50%,-50%) rotate(22deg) scale(1)}
.rogan-cta:hover .rc-character{opacity:1}
.rogan-cta:hover .rc-ape{transform:translate(calc(-50% - 135px),calc(-50% - 24px)) rotate(-19deg) scale(1)}
.rogan-cta:hover .rc-alien{transform:translate(calc(-50% + 125px),calc(-50% - 33px)) rotate(17deg) scale(.95);transition-delay:40ms}
.rogan-cta:hover .rc-joe{transform:translate(calc(-50% + 60px),calc(-50% + 50px)) rotate(13deg) scale(.9);transition-delay:70ms}
.rogan-cta:hover .rc-ufo{transform:translate(calc(-50% - 46px),calc(-50% - 60px)) rotate(-12deg) scale(1);transition-delay:20ms}
.rogan-cta:hover .rc-spark{opacity:1}
.rogan-cta:hover .rc-spark:nth-last-child(1){transform:translate(-92px,53px) rotate(50deg)}
.rogan-cta:hover .rc-spark:nth-last-child(2){transform:translate(91px,-66px) rotate(80deg) scale(1.5)}
.rogan-cta:hover .rc-spark:nth-last-child(3){transform:translate(-155px,35px) rotate(40deg) scale(.7)}
.rogan-cta:hover .rc-arrow{transform:rotate(45deg)}
}
[data-rogan-sound]{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:10px 14px;border:1px solid #bdd79755;border-radius:100px;background:#10170eed;color:#daf8ba;font:500 11px/1.2 "IBM Plex Sans",Arial,sans-serif;cursor:pointer}
[data-rogan-sound]::before{content:"";width:6px;height:6px;border-radius:50%;background:#b9f574;box-shadow:0 0 7px #b9f57466}
[data-rogan-sound][aria-pressed="false"]::before{background:#929a87;box-shadow:none}
[data-rogan-sound]:focus-visible{outline:2px solid #c8ff79;outline-offset:4px}
@media(max-width:480px){
[data-rogan-cta].rogan-cta{min-width:0;gap:10px;padding:16px;min-height:56px;font-size:13px}
.rogan-cta .rc-character{width:52px;height:52px}
.rogan-cta .rc-ape{left:14%;top:0}.rogan-cta .rc-alien{left:86%;top:0}.rogan-cta .rc-joe{left:70%;top:100%}
.rogan-cta:is(:focus-visible,.rc-preview,.rc-fired) .rc-ape{transform:translate(-50%,-100%) rotate(-15deg)}
.rogan-cta:is(:focus-visible,.rc-preview,.rc-fired) .rc-alien{transform:translate(-50%,-100%) rotate(15deg)}
.rogan-cta:is(:focus-visible,.rc-preview,.rc-fired) .rc-joe{transform:translate(-50%,0) rotate(8deg)}
.rogan-cta .rc-orbit{max-width:110%}
}
@media(prefers-reduced-motion:reduce){
[data-rogan-cta].rogan-cta,.rogan-cta *,.rogan-cta::after{transition:none!important;animation:none!important}
.rogan-cta .rc-scene{display:none}.rogan-cta.rc-fired{transform:none}
}
html.rc-motion-off .rogan-cta *,html.rc-motion-off .rogan-cta{animation:none!important;transition:none!important}
html.rc-motion-off .rogan-cta .rc-scene{display:none}

.rogan-cta:is(:focus-visible,.rc-preview,.rc-fired){--rc-eye-fill:#101f16}
@media(hover:hover) and (pointer:fine){.rogan-cta:hover{--rc-eye-fill:#101f16}}
@media(max-width:480px) and (hover:hover) and (pointer:fine){
.rogan-cta:hover .rc-ape{transform:translate(-50%,-100%) rotate(-15deg)}
.rogan-cta:hover .rc-alien{transform:translate(-50%,-100%) rotate(15deg)}
.rogan-cta:hover .rc-joe{transform:translate(-50%,0) rotate(8deg)}
}