/* Sign in (pages/login.html): the card in the middle of a slow aurora, rings turning around it and cards of what
   Jellyn does drifting around them, following the pointer a little. Once you are signed in, everything flies away
   and the jelly drops into the middle, landing with a splash, while your dashboard opens (js/login-scene.js).
   Nothing moves with reduced motion. */
.login{position:relative;display:grid;place-items:center;min-height:calc(100dvh - var(--header-h) - 2 * var(--header-gap,0px) - 14px);margin:14px var(--header-gap,12px) 0;padding:48px 20px;overflow:hidden;isolation:isolate;border:1px solid var(--line);border-radius:32px;background:#12090e}
.login-scene{--mx:0;--my:0;position:absolute;inset:0;z-index:0;overflow:hidden}
.login-aurora{position:absolute;inset:-30%;background:radial-gradient(34% 40% at 30% 30%,#ff6a8f 0%,transparent 62%),radial-gradient(32% 38% at 72% 70%,#b65cff 0%,transparent 62%),radial-gradient(26% 30% at 70% 22%,#ffb36b 0%,transparent 60%),radial-gradient(30% 34% at 24% 78%,#6fd3ff 0%,transparent 64%);filter:blur(70px) saturate(1.15);opacity:.42;animation:login-aurora 22s ease-in-out infinite alternate}
@keyframes login-aurora{to{transform:rotate(30deg) scale(1.18)}}
.login-grid{position:absolute;inset:0;background-image:linear-gradient(rgb(255 255 255 / .05) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / .05) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(60% 60% at 50% 50%,transparent 18%,#000 45%,transparent 80%);transform:translate(calc(var(--mx) * -10px),calc(var(--my) * -10px))}

/* Rings around the card, each with a small light travelling on it */
.login-orbit{position:absolute;left:50%;top:50%;border:1px dashed rgb(255 255 255 / .1);border-radius:50%;translate:-50% -50%;animation:login-turn 60s linear infinite}
.login-orbit i{position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#ff6a8f;box-shadow:0 0 14px 3px rgb(255 106 143 / .7)}
.login-orbit.o1{width:min(560px,92vw);height:min(560px,92vw)}
.login-orbit.o2{width:min(800px,140vw);height:min(800px,140vw);animation-duration:90s;animation-direction:reverse}
.login-orbit.o2 i{background:#b65cff;box-shadow:0 0 14px 3px rgb(182 92 255 / .7)}
.login-orbit.o3{width:min(1060px,190vw);height:min(1060px,190vw);border-style:solid;border-color:rgb(255 255 255 / .05);animation-duration:140s}
.login-orbit.o3 i{background:#ffb36b;box-shadow:0 0 14px 3px rgb(255 179 107 / .6)}
@keyframes login-turn{to{rotate:1turn}}

/* What Jellyn does, drifting around the card */
.login-float{--depth:1;--out-x:0px;--out-y:0px;position:absolute;z-index:2;display:flex;align-items:center;gap:10px;min-width:200px;padding:10px 14px;border:1px solid rgb(255 255 255 / .12);border-radius:16px;background:rgb(24 14 19 / .72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 40px -20px rgb(0 0 0 / .7);color:#f6eef2;opacity:0;translate:calc(var(--mx) * var(--depth) * 26px) calc(var(--my) * var(--depth) * 22px);animation:login-in .9s cubic-bezier(.2,1,.3,1) forwards,login-drift 9s ease-in-out infinite alternate;transition:opacity .5s,transform .7s cubic-bezier(.5,0,.75,0)}
.login-float.f1{left:7%;top:12%;--depth:1.3;--out-x:-60vw;--out-y:-40vh;animation-delay:.3s,1.1s}
.login-float.f2{right:7%;top:15%;--depth:.8;--out-x:60vw;--out-y:-40vh;animation-delay:.42s,1.6s}
.login-float.f3{left:4%;top:46%;--depth:1.1;--out-x:-70vw;--out-y:0px;animation-delay:.54s,.8s}
.login-float.f4{right:4%;top:50%;--depth:1.5;--out-x:70vw;--out-y:0px;animation-delay:.66s,2s}
.login-float.f5{left:9%;bottom:10%;--depth:.9;--out-x:-60vw;--out-y:40vh;animation-delay:.78s,1.3s}
.login-float.f6{right:9%;bottom:12%;--depth:1.2;--out-x:60vw;--out-y:40vh;animation-delay:.9s,1.8s}
@keyframes login-in{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
@keyframes login-drift{from{margin-top:0}to{margin-top:-14px}}
.lf-words{display:grid;line-height:1.25}
.lf-words b{font-size:.875rem}
.lf-words small{color:rgb(246 238 242 / .66);font-size:.75rem}
.lf-time{margin-left:auto;font:700 1.05rem/1 var(--font-mono,monospace);letter-spacing:.02em}
.lf-dot{width:9px;height:9px;border-radius:50%;background:#58d69c;box-shadow:0 0 0 4px rgb(88 214 156 / .2);animation:login-pulse 1.6s ease-in-out infinite}
@keyframes login-pulse{50%{box-shadow:0 0 0 7px rgb(88 214 156 / .05)}}
.lf-chip{padding:3px 8px;border-radius:999px;font-size:.6875rem;font-weight:700}
.lf-chip.warn{background:rgb(245 196 96 / .18);color:#f5c460}
.lf-chip.info{background:rgb(134 180 255 / .18);color:#86b4ff}
.lf-chip.good{background:rgb(88 214 156 / .18);color:#58d69c;font-family:var(--font-mono,monospace)}
.lf-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:linear-gradient(150deg,#ffb1d6,#c060ff 70%,#7b4cff);color:#fff;font-weight:800;font-size:.8125rem}
.lf-icon.mint{background:linear-gradient(150deg,#7fe3b3,#2fb67c)}
.login-spark{position:absolute;z-index:1;width:5px;height:5px;border-radius:50%;background:#fff;opacity:0;animation:login-spark 4s ease-in-out infinite}
.login-spark.s1{left:30%;top:20%;animation-delay:.2s}.login-spark.s2{left:66%;top:14%;animation-delay:1.4s}.login-spark.s3{left:74%;top:64%;animation-delay:2.2s}.login-spark.s4{left:22%;top:66%;animation-delay:3s}.login-spark.s5{left:50%;top:86%;animation-delay:.9s}
@keyframes login-spark{0%,100%{opacity:0;transform:scale(.4)}20%{opacity:.9;transform:scale(1)}40%{opacity:0;transform:scale(.2)}}

/* The card, in the middle */
.login-center{position:relative;z-index:3;display:grid;place-items:center;width:100%;transition:opacity .45s,transform .6s cubic-bezier(.5,0,.75,0),filter .45s}
.login-card{width:min(430px,100%);transition:opacity .45s;padding:30px 30px 24px;border:1px solid rgb(255 255 255 / .12);border-radius:30px;background:rgb(26 16 21 / .78);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);box-shadow:0 40px 80px -40px rgb(0 0 0 / .85),inset 0 1px 0 rgb(255 255 255 / .08);color:#f6eef2;animation:login-card .8s cubic-bezier(.2,1,.3,1) both}
@keyframes login-card{from{opacity:0;transform:translateY(24px) scale(.96)}}
.login-mascot{position:relative;width:96px;height:96px;margin:-6px auto 4px}
.login-jelly-img{position:relative;z-index:1;width:100%;height:auto;transform-origin:50% 92%;animation:login-wobble 3.6s cubic-bezier(.45,0,.3,1) infinite;filter:drop-shadow(0 14px 20px rgb(0 0 0 / .45))}
@keyframes login-wobble{0%,100%{transform:scale(1,1)}12%{transform:scale(1.08,.9)}24%{transform:scale(.94,1.07)}36%{transform:scale(1.03,.97)}48%{transform:scale(.99,1.01)}60%{transform:scale(1,1)}}
.login-jelly-shadow{position:absolute;left:22%;right:22%;bottom:4%;height:10%;border-radius:50%;background:rgb(0 0 0 / .5);filter:blur(6px);animation:login-shadow 3.6s cubic-bezier(.45,0,.3,1) infinite}
@keyframes login-shadow{12%{transform:scaleX(1.14)}24%{transform:scaleX(.9)}36%{transform:scaleX(1.04)}}
.login-card h1{display:grid;gap:2px;margin:6px 0 10px;color:#fff;text-align:center}
.login-line{display:block}
.login-line>span,.login-line>em{display:inline-block;animation:login-rise .7s cubic-bezier(.2,1,.3,1) both}
.login-line:first-child>:nth-child(1){animation-delay:.18s}.login-line:first-child>:nth-child(2){animation-delay:.26s}.login-line:first-child>:nth-child(3){animation-delay:.34s}
.login-line:last-child>:nth-child(1){animation-delay:.46s}.login-line:last-child>:nth-child(2){animation-delay:.54s}.login-line:last-child>:nth-child(3){animation-delay:.66s}
@keyframes login-rise{from{opacity:0;transform:translateY(16px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.login-card .auth-lede{margin-inline:auto;color:rgb(246 238 242 / .72);text-align:center;animation:login-rise .7s .72s cubic-bezier(.2,1,.3,1) both}
.discord-login{position:relative;overflow:hidden;animation:login-rise .7s .82s cubic-bezier(.2,1,.3,1) both}
.discord-login::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgb(255 255 255 / .35) 50%,transparent 70%);transform:translateX(-120%);animation:login-shine 3.8s 1.8s ease-in-out infinite}
@keyframes login-shine{0%,60%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.discord-login-face .icon{margin-right:2px}
.discord-login-face,.discord-login-wait{display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:opacity .2s,transform .25s}
.discord-login-wait{position:absolute;inset:0;opacity:0;transform:translateY(100%)}
.discord-login.leaving .discord-login-face{opacity:0;transform:translateY(-100%)}
.discord-login.leaving .discord-login-wait{opacity:1;transform:none}
.login-spinner{width:16px;height:16px;border:2px solid rgb(255 255 255 / .4);border-top-color:#fff;border-radius:50%;animation:login-spin .7s linear infinite}
@keyframes login-spin{to{transform:rotate(1turn)}}
.login-card .id-signin{animation:login-rise .7s .9s cubic-bezier(.2,1,.3,1) both}
.login-ticker{position:relative;width:100%;height:22px;margin:18px 0 0;padding:0;overflow:hidden;list-style:none;color:rgb(246 238 242 / .62);font-size:.8125rem;text-align:center}
.login-ticker li{position:absolute;inset:0;opacity:0;animation:login-tick 9s infinite}
.login-ticker li:nth-child(2){animation-delay:3s}.login-ticker li:nth-child(3){animation-delay:6s}
@keyframes login-tick{0%{opacity:0;transform:translateY(100%)}5%,30%{opacity:1;transform:none}35%,100%{opacity:0;transform:translateY(-100%)}}
.login-card .auth-foot{color:rgb(246 238 242 / .5);text-align:center}

/* Signed in: everything flies away, and the jelly drops into the middle while the next page opens */
.login.login-done .login-float{animation:none;opacity:0;transform:translate(var(--out-x),var(--out-y)) scale(.8)}
.login.login-done .login-orbit{transition:opacity .6s,scale .8s cubic-bezier(.5,0,.75,0);opacity:0;scale:1.5}
.login.login-done .login-spark,.login.login-done .login-grid{transition:opacity .4s;opacity:0}
.login.login-done .login-center{opacity:0;transform:scale(.9) translateY(10px);filter:blur(8px);pointer-events:none}
.login.login-done .login-aurora{transition:opacity .8s;opacity:.7}
/* The landing: the jelly drops in from above, squashes as it lands, splashes and pops pluses, then wobbles while
   the welcome and a jelly bar come in. */
.login,.login-wait{--plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3a3 3 0 0 1 6 0v6h6a3 3 0 0 1 0 6h-6v6a3 3 0 0 1-6 0v-6H3a3 3 0 0 1 0-6h6z'/%3E%3C/svg%3E")}
.login-loading{position:absolute;inset:0;z-index:4;display:grid;place-items:center;align-content:center;gap:10px;text-align:center;color:#fff}
.login-loading[hidden]{display:none}
.login-drop{position:relative;display:grid;place-items:end center;width:240px;height:210px;margin-bottom:10px}
.login-drop-jelly{position:relative;z-index:2;width:132px;height:132px;transform-origin:50% 100%;filter:drop-shadow(0 16px 22px rgb(0 0 0 / .45));animation:login-drop 1.15s .25s both,login-wobble 3s 1.6s cubic-bezier(.45,0,.3,1) infinite}
@keyframes login-drop{
  0%{opacity:0;transform:translateY(-340px) scale(.84,1.16);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  10%{opacity:1}
  46%{transform:translateY(0) scale(.86,1.16);animation-timing-function:cubic-bezier(.2,.8,.3,1)}
  56%{transform:translateY(0) scale(1.3,.68)}
  68%{transform:translateY(-22px) scale(.92,1.1)}
  79%{transform:translateY(0) scale(1.1,.9)}
  89%{transform:scale(.97,1.03)}
  100%{transform:none}}
.login-drop-shadow{position:absolute;bottom:-6px;left:50%;width:124px;height:18px;margin-left:-62px;border-radius:50%;background:rgb(0 0 0 / .5);filter:blur(5px);animation:login-drop-shadow 1.15s .25s both}
@keyframes login-drop-shadow{0%{opacity:0;transform:scale(.2)}46%{opacity:1;transform:scale(.9)}56%{transform:scale(1.35,1.1)}79%{transform:scale(1.06)}100%{opacity:1;transform:none}}
.login-splash{position:absolute;bottom:-10px;left:50%;width:180px;height:46px;margin-left:-90px;border:3px solid #ff6a8f;border-radius:50%;opacity:0;animation:login-splash .8s .78s cubic-bezier(.2,.8,.3,1) both}
.login-splash.two{border-color:#ffb36b;border-width:2px;animation-delay:.9s}
@keyframes login-splash{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.75)}}
.login-confetti{--dx:0px;--dy:-100px;--r:90deg;--c:#ff6a8f;position:absolute;left:50%;bottom:28px;z-index:1;width:15px;height:15px;margin-left:-7.5px;background:var(--c);-webkit-mask:var(--plus) center/contain no-repeat;mask:var(--plus) center/contain no-repeat;opacity:0;animation:login-pop .95s .8s cubic-bezier(.15,.9,.3,1) both}
.login-confetti.c1{--dx:-118px;--dy:-86px;--r:-140deg}
.login-confetti.c2{--dx:-80px;--dy:-150px;--r:110deg;--c:#ffb36b;width:11px;height:11px}
.login-confetti.c3{--dx:-20px;--dy:-178px;--r:-90deg;--c:#ffb1d6}
.login-confetti.c4{--dx:44px;--dy:-160px;--r:160deg;--c:#b65cff;width:12px;height:12px}
.login-confetti.c5{--dx:104px;--dy:-112px;--r:-120deg;--c:#ff6a8f}
.login-confetti.c6{--dx:132px;--dy:-38px;--r:80deg;--c:#7fe3b3;width:10px;height:10px}
.login-confetti.c7{--dx:-142px;--dy:-24px;--r:200deg;--c:#7fe3b3;width:10px;height:10px}
.login-confetti.c8{--dx:72px;--dy:-202px;--r:-60deg;--c:#ffb36b;width:9px;height:9px}
@keyframes login-pop{0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0)}18%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1) rotate(var(--r))}}
.login-loading-title{margin:0;color:#fff;font:800 clamp(1.6rem,1.2rem + 1.4vw,2.2rem)/1.1 var(--font-display);letter-spacing:-.01em;animation:login-rise .6s 1s cubic-bezier(.2,1,.3,1) both}
.login-loading-sub{margin:0;color:rgb(255 255 255 / .7);animation:login-rise .6s 1.08s cubic-bezier(.2,1,.3,1) both}
.login-loading-bar{position:relative;width:min(240px,60vw);height:8px;margin-top:12px;overflow:hidden;border-radius:999px;background:rgb(255 255 255 / .1);box-shadow:inset 0 1px 2px rgb(0 0 0 / .4);animation:login-rise .6s 1.12s both}
.login-loading-bar span{position:relative;display:block;height:100%;overflow:hidden;border-radius:inherit;background:linear-gradient(90deg,#ff6a8f,#ffb1d6 55%,#ffb36b);box-shadow:0 0 12px rgb(255 106 143 / .6);transform-origin:left;animation:login-fill 1.2s 1.15s cubic-bezier(.4,0,.2,1) both}
/* A shine running along the jelly. */
.login-loading-bar span::after{content:"";position:absolute;inset:1px 0 auto;height:3px;border-radius:999px;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .75),transparent);transform:translateX(-100%);animation:login-gloss 1.1s 1.3s ease-in-out infinite}
@keyframes login-fill{0%{transform:scaleX(0)}70%{transform:scaleX(1.03,1.2)}100%{transform:scaleX(1)}}
@keyframes login-gloss{to{transform:translateX(100%)}}

@media (max-width:900px){
  .login{padding:28px 14px;border-radius:24px}
  .login-float{min-width:0;padding:8px 11px}
  .login-float.f1{left:3%;top:3%}.login-float.f2{right:3%;top:auto;bottom:3%}
  .login-float.f3,.login-float.f4,.login-float.f5,.login-float.f6{display:none}
  .login-card{padding:24px 18px 20px}
  .login-ticker{height:38px;line-height:1.35}
}
@media (prefers-reduced-motion:reduce){
  .login *,.login *::before,.login *::after{animation:none!important;transition:none!important}
  .login-float,.login-card{opacity:1}
  .login-ticker li:first-child{opacity:1}
}

/* While the Discord window is open (js/login-scene.js): the page goes dark and grey, and a jelly portal glows where
   that window is (--cx and --cy its middle in this page, --pw and --ph its size with room around), rippling, with
   pluses rising around it. Welcome to Jellyn on its left, with how it is going and the buttons; what Jellyn is on its
   right. Signed in, the portal folds into a flash (.lw-done) and the jelly drops in (above). A modal <dialog>, so the
   page under it cannot be used or focused meanwhile. Too narrow for the portal and its two sides: a card instead. */
.login-wait{--cx:50vw;--cy:50vh;--pw:536px;--ph:min(836px,calc(100dvh - 24px));position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#fff;overflow:hidden;overscroll-behavior:contain;opacity:0;transition-property:opacity,display,overlay;transition-duration:.35s;transition-timing-function:cubic-bezier(.2,.8,.2,1);transition-behavior:allow-discrete}
.login-wait[open]{opacity:1}
@starting-style{.login-wait[open]{opacity:0}}
.login-wait::backdrop{overflow:hidden;overscroll-behavior:contain;background-color:rgb(14 8 12 / 0);-webkit-backdrop-filter:grayscale(0);backdrop-filter:grayscale(0);transition-property:background-color,backdrop-filter,display,overlay;transition-duration:.35s;transition-behavior:allow-discrete}
.login-wait[open]::backdrop{background-color:rgb(14 8 12 / .8);-webkit-backdrop-filter:grayscale(1) blur(4px);backdrop-filter:grayscale(1) blur(4px)}
@starting-style{.login-wait[open]::backdrop{background-color:rgb(14 8 12 / 0);-webkit-backdrop-filter:grayscale(0);backdrop-filter:grayscale(0)}}

/* The portal: a turning pink frame with a soft glow that breathes, and ripples going out from it */
.lw-stage{position:absolute;inset:0;pointer-events:none}
.lw-portal{position:absolute;left:calc(var(--cx) - var(--pw) / 2);top:calc(var(--cy) - var(--ph) / 2);width:var(--pw);height:var(--ph);border-radius:38px;animation:lw-open .8s cubic-bezier(.2,1.25,.3,1) both,lw-breathe 3.6s 1s ease-in-out infinite}
@keyframes lw-open{from{opacity:0;transform:scale(.9)}}
@keyframes lw-breathe{0%,100%{scale:1}30%{scale:1.012 .992}62%{scale:.995 1.008}}
.lw-portal::before,.lw-portal::after{content:"";position:absolute;inset:0;border-radius:inherit}
.lw-portal::before{background:radial-gradient(70% 55% at 50% 50%,rgb(255 106 143 / .14),transparent 75%);box-shadow:0 0 50px 6px rgb(255 106 143 / .42),0 0 150px 40px rgb(182 92 255 / .16),inset 0 0 50px rgb(255 106 143 / .22)}
.lw-portal::after{box-shadow:0 0 90px 18px rgb(255 177 214 / .4),0 0 220px 70px rgb(255 179 107 / .14);opacity:0;animation:lw-glow 2.8s ease-in-out infinite alternate}
@keyframes lw-glow{to{opacity:1}}
@property --lw-turn{syntax:'<angle>';inherits:false;initial-value:0deg}
.lw-frame{position:absolute;inset:0;padding:3px;border-radius:inherit;background:conic-gradient(from var(--lw-turn),#ff6a8f,#ffb1d6,#b65cff,#ffb36b,#ff6a8f);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:lw-turn 5s linear infinite}
@keyframes lw-turn{to{--lw-turn:360deg}}
.lw-ripple{position:absolute;inset:0;border:2px solid rgb(255 150 185 / .6);border-radius:38px;opacity:0;animation:lw-ripple 3.6s cubic-bezier(.2,.6,.3,1) infinite}
.lw-ripple.r2{animation-delay:1.2s}.lw-ripple.r3{animation-delay:2.4s}
@keyframes lw-ripple{0%{inset:0;opacity:.7;border-radius:38px}100%{inset:-96px;opacity:0;border-radius:130px}}
/* Pluses rising beside the portal */
.lw-plus{--x:0px;--y:0px;--s:14px;--c:#ff9db4;position:absolute;left:calc(var(--cx) + var(--x));top:calc(var(--cy) + var(--y));width:var(--s);height:var(--s);background:var(--c);-webkit-mask:var(--plus) center/contain no-repeat;mask:var(--plus) center/contain no-repeat;opacity:0;animation:lw-rise 7s ease-in-out infinite}
.lw-plus.p1{--x:calc(var(--pw) / -2 - 70px);--y:160px;animation-delay:.4s}
.lw-plus.p2{--x:calc(var(--pw) / -2 - 150px);--y:-40px;--s:10px;--c:#ffb36b;animation-delay:2.6s}
.lw-plus.p3{--x:calc(var(--pw) / -2 - 40px);--y:-220px;--s:18px;--c:#b65cff;animation-delay:4.8s}
.lw-plus.p4{--x:calc(var(--pw) / 2 + 60px);--y:200px;--s:18px;animation-delay:1.5s}
.lw-plus.p5{--x:calc(var(--pw) / 2 + 140px);--y:0px;--s:11px;--c:#7fe3b3;animation-delay:3.7s}
.lw-plus.p6{--x:calc(var(--pw) / 2 + 36px);--y:-180px;--c:#ffb1d6;animation-delay:5.9s}
@keyframes lw-rise{0%{opacity:0;transform:translateY(40px) rotate(0) scale(.5)}20%{opacity:.9}75%{opacity:.5}100%{opacity:0;transform:translateY(-150px) rotate(100deg) scale(1)}}
.lw-flash{position:absolute;left:var(--cx);top:var(--cy);width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;background:radial-gradient(circle,#fff 0,rgb(255 177 214 / .9) 22%,rgb(255 106 143 / .45) 48%,transparent 70%);opacity:0}

/* Beside it: welcome, how it is going and the buttons on the left; what Jellyn is on the right */
.lw-hello,.lw-tag{position:absolute;top:var(--cy);display:grid;justify-items:center;text-align:center;translate:0 -50%}
.lw-hello{left:24px;right:calc(100% - var(--cx) + var(--pw) / 2 + 40px);animation:lw-from-left .8s .15s cubic-bezier(.2,1,.3,1) both}
.lw-tag{left:calc(var(--cx) + var(--pw) / 2 + 40px);right:24px;animation:lw-from-right .8s .25s cubic-bezier(.2,1,.3,1) both}
@keyframes lw-from-left{from{opacity:0;transform:translateX(-48px);filter:blur(8px)}}
@keyframes lw-from-right{from{opacity:0;transform:translateX(48px);filter:blur(8px)}}
.lw-mark{width:76px;height:76px;margin-bottom:10px}
.lw-mark img{width:100%;height:auto;transform-origin:50% 92%;filter:drop-shadow(0 12px 18px rgb(0 0 0 / .5));animation:login-wobble 3.6s cubic-bezier(.45,0,.3,1) infinite}
.lw-big{max-width:12ch;margin:0;color:#fff;font:800 clamp(2rem,1rem + 2.1vw,3.1rem)/1.05 var(--font-display);letter-spacing:-.02em;text-wrap:balance}
.lw-tag .lw-big{max-width:14ch;font-size:clamp(1.6rem,.9rem + 1.6vw,2.5rem)}
.lw-big em{font-style:normal;background:linear-gradient(100deg,#ff6a8f,#ffb1d6 50%,#ffb36b);-webkit-background-clip:text;background-clip:text;color:transparent}
.lw-status{display:flex;align-items:center;gap:10px;margin-top:22px}
.lw-status h2{margin:0;color:#fff;font-size:1rem;line-height:1.3}
.lw-dots{display:inline-flex;gap:5px}
.lw-dots i{width:8px;height:8px;border-radius:50%;background:#ff6a8f;animation:lw-dot 1.2s ease-in-out infinite}
.lw-dots i:nth-child(2){background:#ffb1d6;animation-delay:.15s}.lw-dots i:nth-child(3){background:#ffb36b;animation-delay:.3s}
@keyframes lw-dot{0%,60%,100%{transform:none}25%{transform:translateY(-7px) scale(.9,1.12)}42%{transform:translateY(0) scale(1.25,.78)}}
#login-wait-text{max-width:34ch;margin:6px 0 0;color:rgb(255 255 255 / .7);font-size:.875rem;line-height:1.5}
.login-wait-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.login-wait-actions .button{background:#5865f2;border-color:#5865f2;color:#fff}
.login-wait-actions .text-button{color:rgb(255 255 255 / .72)}
.lw-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:340px;margin:20px 0 0;padding:0;list-style:none}
.lw-chips li{--c:#ff6a8f;display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid rgb(255 255 255 / .14);border-radius:999px;background:rgb(255 255 255 / .06);color:rgb(255 255 255 / .86);font-size:.8125rem;font-weight:600;animation:lw-chip .5s cubic-bezier(.2,1.5,.4,1) both}
.lw-chips li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.lw-chips .k1{animation-delay:.6s}.lw-chips .k2{--c:#ffb36b;animation-delay:.7s}.lw-chips .k3{--c:#7fe3b3;animation-delay:.8s}.lw-chips .k4{--c:#b65cff;animation-delay:.9s}
@keyframes lw-chip{from{opacity:0;transform:translateY(10px) scale(.8)}}

/* Signed in: the portal folds into the middle with a flash, and both sides go */
.login-wait.lw-done .lw-portal{animation:lw-fold .5s cubic-bezier(.6,0,.8,.3) forwards}
@keyframes lw-fold{to{opacity:0;transform:scale(.06);border-radius:50%}}
.login-wait.lw-done .lw-flash{animation:lw-flash .7s .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes lw-flash{0%{opacity:0;transform:scale(.2)}30%{opacity:1}100%{opacity:0;transform:scale(4)}}
.login-wait.lw-done .lw-hello{animation:lw-to-left .45s cubic-bezier(.5,0,.75,0) forwards}
.login-wait.lw-done .lw-tag{animation:lw-to-right .45s cubic-bezier(.5,0,.75,0) forwards}
@keyframes lw-to-left{to{opacity:0;transform:translateX(-60px);filter:blur(6px)}}
@keyframes lw-to-right{to{opacity:0;transform:translateX(60px);filter:blur(6px)}}
.login-wait.lw-done .lw-plus{animation:none;opacity:0}

/* Narrower than the portal and its sides (and on phones, where Discord opens as a tab): a card in the middle */
@media (max-width:1199px){
  .lw-portal,.lw-plus,.lw-tag{display:none}
  .lw-hello{left:50%;right:auto;top:50%;width:min(400px,calc(100% - 32px));padding:28px 24px 22px;border:1px solid rgb(255 255 255 / .12);border-radius:26px;background:rgb(24 16 22 / .94);box-shadow:0 30px 80px -20px rgb(0 0 0 / .6);translate:-50% -50%}
  .lw-big{font-size:1.9rem}
  .lw-flash{left:50%;top:50%}
}
@media (prefers-reduced-motion:reduce){
  .login-wait,.login-wait::backdrop{transition-duration:.1s}
  .login-wait *,.login-wait *::before,.login-wait *::after{animation:none!important}
  .lw-ripple,.lw-plus,.lw-flash,.lw-portal::after{display:none}
}