/* Eli's World — welcome intro (logo assembles on indigo → the cream world opens → words spring in → ELi bursts out) + join pop-up */
.pg.w-wel{background:#1B2A7A;overflow:hidden;--px:0;--py:0}
.wl-back{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 40%,#3448B8 0%,#2A3B9C 40%,#16215F 100%)}
.wl-glow{position:absolute;left:50%;top:42%;width:420px;height:420px;margin:-210px;border-radius:50%;background:radial-gradient(closest-side,rgba(247,212,122,.35),transparent);animation:wlPulse 2.4s ease-in-out infinite}
@keyframes wlPulse{50%{transform:scale(1.15);opacity:.7}}
.wl-star{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px 2px rgba(255,255,255,.6);animation:twk 2.2s ease-in-out infinite;animation-delay:var(--d)}
.wl-stage{position:absolute;inset:0;clip-path:circle(0px at 50% 42%);background:var(--wcream)}
.wl-stage .wbg{transform-origin:50% 0;transform:translate(calc(var(--px) * -10px),calc(var(--py) * -8px)) scale(1.18)}
/* sunburst behind ELi — quiet sand rays turning slowly */
.wl-rays{position:absolute;width:560px;height:560px;margin:-280px;border-radius:50%;z-index:1;pointer-events:none;opacity:0;
  background:repeating-conic-gradient(from 0deg,rgba(220,200,165,.38) 0 7deg,transparent 7deg 18deg);
  -webkit-mask:radial-gradient(closest-side,#000 28%,transparent 72%);mask:radial-gradient(closest-side,#000 28%,transparent 72%);
  animation:spin 38s linear infinite;transition:opacity 1.2s}
.w-wel.portal .wl-rays{opacity:1}
/* portal flash on the pedestal */
.wl-portal{position:absolute;width:230px;height:52px;margin:-26px 0 0 -115px;border-radius:50%;z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(123,149,244,.65) 45%,rgba(42,59,156,0) 100%)}
.w-wel.portal .wl-portal{animation:wlPortal 1.2s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes wlPortal{0%{opacity:0;transform:scale(.2,.4)}25%{opacity:1;transform:scale(1.25,1.4)}100%{opacity:.35;transform:scale(1,1)}}
.wl-stage .eli-m{z-index:4;transform-origin:50% 100%}
.wl-hit{position:absolute;width:160px;height:190px;z-index:6;cursor:pointer}
/* the logo pieces (original art, recoloured by mask) */
.wl-logo{position:absolute;z-index:8;transform-origin:0 0;pointer-events:none}
.wl-logo .lp{position:absolute;inset:0;background:#fff;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
.wl-logo .u{-webkit-mask-image:url(assets/logo_u.png);mask-image:url(assets/logo_u.png)}
.wl-logo .s{-webkit-mask-image:url(assets/logo_stem.png);mask-image:url(assets/logo_stem.png)}
.wl-logo .d{-webkit-mask-image:url(assets/logo_dot.png);mask-image:url(assets/logo_dot.png)}
.wl-ring{position:absolute;z-index:7;width:60px;height:60px;border-radius:50%;border:3px solid rgba(247,212,122,.9);opacity:0;pointer-events:none}
/* the words */
.wl-title{position:absolute;left:0;right:0;z-index:5;text-align:center;pointer-events:none;
  transform:translate(calc(var(--px) * 6px),calc(var(--py) * 4px));transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.wl-title span{display:inline-block;opacity:0}
.wl-title .sp{display:inline-block;width:.32em}
.wl-title .t1{font:600 20px/1.2 var(--en);color:var(--wink);letter-spacing:.06em}
.wl-title .t2{margin-top:2px;font:700 46px/1.1 var(--en);color:var(--wi);letter-spacing:-.02em}
.w-wel.words .wl-title span{animation:wlLetter .7s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i) * 45ms)}
.w-wel.words .t2 span{animation-delay:calc(220ms + var(--i) * 55ms)}
@keyframes wlLetter{from{opacity:0;transform:translateY(30px) rotate(-14deg) scale(.5)}to{opacity:1;transform:none}}
/* a light sweep across "eli's world" once the words are in */
.wl-title .t2{position:relative;background:linear-gradient(100deg,var(--wi) 0 40%,#7B95F4 50%,var(--wi) 60% 100%);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text}
.w-wel.ready .wl-title .t2 span{color:transparent;animation:none;opacity:1;transform:none}
.w-wel.ready .wl-title .t2{animation:wlSweep 3.6s ease-in-out 1s infinite}
@keyframes wlSweep{0%,60%{background-position:100% 0}100%{background-position:-50% 0}}
/* floating motes */
.wl-motes i{position:absolute;bottom:-12px;width:var(--s);height:var(--s);border-radius:50%;background:rgba(42,59,156,.25);z-index:3;animation:wlMote var(--t) linear infinite;animation-delay:var(--d);pointer-events:none}
.wl-motes i:nth-child(3n){background:rgba(242,193,78,.5)}
@keyframes wlMote{from{transform:translateY(0);opacity:0}15%{opacity:1}to{transform:translateY(calc(var(--H,844px) * -1));opacity:0}}
.wl-skip{position:absolute;right:16px;top:56px;z-index:9;height:28px;padding:0 12px;border-radius:14px;background:rgba(255,255,255,.14);color:#fff;font:500 11px var(--f);transition:background .3s,color .3s}
.w-wel.words .wl-skip{background:rgba(42,59,156,.08);color:var(--wi)}
/* leaving for Eli's World: the world zooms toward you */
.w-wel.leave .wl-stage{animation:wlLeave .65s cubic-bezier(.7,0,.3,1) forwards}
.w-wel.leave .wl-logo{animation:wlFade .4s forwards}
@keyframes wlLeave{to{transform:scale(1.25);filter:blur(4px);opacity:0}}
@keyframes wlFade{to{opacity:0}}
/* join pop-up */
.wl-join{position:absolute;inset:0;z-index:20;display:flex;align-items:flex-end;background:rgba(20,24,60,0);pointer-events:none;transition:background .4s}
.wl-join.on{background:rgba(20,24,60,.28);pointer-events:auto}
.wl-join .jc{position:relative;width:100%;padding:12px 22px 34px;border-radius:26px 26px 0 0;background:#fff;box-shadow:0 -10px 40px rgba(20,24,60,.2);transform:translateY(105%);transition:transform .55s cubic-bezier(.2,.9,.3,1.1)}
.wl-join.on .jc{transform:none}
.wl-join .grab{display:block;width:40px;height:4px;margin:0 auto 14px;border-radius:2px;background:#E2DCD3}
.wl-join .v{display:none}
.wl-join .v.on{display:block;animation:rise .4s var(--ease) both}
.wl-join .h{display:block;font:700 20px/1.3 var(--f);color:var(--wink);margin-bottom:6px}
.wl-join p{margin:0 0 16px;font:400 13px/1.55 var(--f);color:#5C5651}
.jb{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;margin-top:10px;border-radius:24px;font:700 15px var(--f)}
.jb.p{background:var(--wi);color:#fff;box-shadow:0 8px 20px rgba(42,59,156,.28)}
.jb.s{background:#fff;color:var(--wi);box-shadow:0 0 0 1.5px #DCCFBE inset}
.jb.a{background:#111;color:#fff}
.jb.t{height:36px;color:var(--wi);font-weight:600}
.jf{display:block;margin-top:10px}
.jf span{display:block;font:600 11px var(--f);color:#5C5651;margin:0 0 4px 4px}
.jf input{width:100%;height:44px;padding:0 14px;border:0;border-radius:14px;background:#F4F0EA;font:500 14px var(--f);color:var(--wink);outline:none;box-shadow:0 0 0 1.5px transparent inset;transition:box-shadow .2s}
.jf input:focus{box-shadow:0 0 0 1.5px var(--wi) inset;background:#fff}
/* round 2 (client 2026-10-13): no skip, no speech; social sign-in first, e-mail as a small link; the Citizen ID card */
.w-wel .wl-stage,.w-wel .m3{transition:transform .55s cubic-bezier(.2,.9,.3,1),opacity .25s}
.w-wel .wl-title{transition:top .55s cubic-bezier(.2,.9,.3,1),opacity .3s}
.w-wel.ready .wl-back{background:#F4EFE6}
.w-wel .wl-stage .eli-m{transition:scale .55s cubic-bezier(.2,.9,.3,1)}
.wl-join .h{text-align:center;margin-bottom:12px}
.jb.so{position:relative;justify-content:center;gap:10px;color:#fff;font-weight:700}
.jb.so svg{position:absolute;left:18px;width:22px;height:22px}
.jb.so.line{background:#06C755;box-shadow:0 3px 0 #04A346}
.jb.so.tiktok{background:#111;box-shadow:0 3px 0 #000}
.jb.so.tiktok svg{filter:drop-shadow(-1.2px -1px 0 #25F4EE) drop-shadow(1.2px 1px 0 #FE2C55)}
.jb.so.fb{background:#1877F2;box-shadow:0 3px 0 #1060C9}
.jb.so.apple{background:#000;box-shadow:0 3px 0 #333}
.jb.so.wait{opacity:.75}
.jb.so.wait::after{content:"";position:absolute;right:18px;width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .8s linear infinite}
.wl-join.busy .jb.so:not(.wait){opacity:.5;pointer-events:none}
.jb.t.sm{height:34px;margin-top:8px;font:600 12.5px var(--f);color:#6E6A66;text-decoration:underline;text-underline-offset:3px}
.wl-cid{position:absolute;inset:0;z-index:22;display:grid;place-items:center;background:rgba(20,24,60,0);transition:background .35s;pointer-events:none}
.wl-cid.on{background:rgba(20,24,60,.35);pointer-events:auto}
.wl-cid .cc{position:relative;width:286px;padding:20px 20px 18px;border-radius:24px;text-align:center;color:#fff;
  background:linear-gradient(150deg,#4A62D8 0%,#2A3B9C 55%,#1C287A 100%);box-shadow:0 0 0 4px #fff,0 18px 40px rgba(20,24,60,.4);transform:translateY(40px) scale(.7) rotate(-6deg);opacity:0;transition:transform .6s cubic-bezier(.34,1.56,.64,1),opacity .3s}
.wl-cid.on .cc{transform:none;opacity:1}
.wl-cid .wlogo{width:40px;height:44px;margin:0 auto 6px;background:#F6C343}
.wl-cid .k{display:block;font:700 13px var(--f);letter-spacing:.08em;color:#C9D2FF;text-transform:uppercase}
.wl-cid .id{display:flex;justify-content:center;gap:4px;margin:10px 0 8px}
.wl-cid .id i{display:grid;place-items:center;width:34px;height:46px;border-radius:9px;background:rgba(255,255,255,.14);box-shadow:0 0 0 1px rgba(255,255,255,.22) inset;font:700 28px var(--num);font-style:normal;color:#F6C343;animation:wlDigit .5s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(.35s + var(--i) * 90ms)}
@keyframes wlDigit{from{transform:translateY(-14px) rotateX(90deg);opacity:0}}
.wl-cid .nm{display:block;font:800 16px var(--f)}
.wl-join .v0 .jb.so{height:44px;margin-top:8px;font-size:14px}
.wl-join .v0 .h{font-size:18px;margin-bottom:6px}
.wl-join .jc{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
/* short screens: while the pop-up is open the coins and rays step aside */
.w-wel.squeeze .c3,.w-wel.squeeze .wl-rays,.w-wel.squeeze .wl-portal{opacity:0!important;transition:opacity .3s}
.w-wel .wl-stage .eli-m{transition:scale .55s cubic-bezier(.2,.9,.3,1),translate .55s cubic-bezier(.2,.9,.3,1)}
/* brief 15.10.69: e-mail forms — back at the top, remember me, forgot password */
.wl-join .jhd{position:relative;display:flex;align-items:center;justify-content:center;height:34px;margin-bottom:8px}
.wl-join .jhd .h{margin:0;font-size:18px}
.wl-join .jback{position:absolute;left:-6px;top:0;height:34px;padding:0 8px;border:0;background:none;font:800 14px var(--f);color:var(--wi);cursor:pointer}
.wl-join .jrow{display:flex;align-items:center;justify-content:space-between;margin-top:10px;min-height:28px}
.wl-join .jrem{display:flex;align-items:center;gap:8px;font:700 13px var(--f);color:#3C3A45;cursor:pointer;user-select:none}
.wl-join .jrem input{position:absolute;opacity:0;width:0;height:0}
.wl-join .jrem i{width:20px;height:20px;border-radius:6px;background:#F4F0EA;box-shadow:inset 0 0 0 1.5px #CFC6BA;display:grid;place-items:center;transition:background .2s,box-shadow .2s}
.wl-join .jrem input:checked+i{background:var(--wi);box-shadow:none}
.wl-join .jrem input:checked+i::after{content:"";width:5px;height:10px;margin-top:-2px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.wl-join .jrem input:focus-visible+i{outline:2px solid var(--wi);outline-offset:2px}
.wl-join .jforgot{border:0;background:none;padding:4px 0;font:700 13px var(--f);color:#E8453C;cursor:pointer}
.wl-join .jp{margin:0 0 4px;font:500 13px/1.55 var(--f);color:#5C5651;text-align:center}
.wl-join .v1 .jb.p,.wl-join .v2 .jb.p,.wl-join .v3 .jb.p{margin-top:12px}
/* profile setup wizard — one question per page */
.wl-setup{position:absolute;inset:0;z-index:24;display:flex;align-items:flex-end;background:rgba(20,24,60,0);transition:background .35s;pointer-events:none}
.wl-setup.on{background:rgba(20,24,60,.35);pointer-events:auto}
.wl-setup .sc{position:relative;width:100%;max-width:430px;margin:0 auto;padding:12px 22px calc(22px + env(safe-area-inset-bottom,0px));border-radius:26px 26px 0 0;background:#fff;box-shadow:0 -10px 40px rgba(20,24,60,.2);transform:translateY(105%);transition:transform .5s cubic-bezier(.2,.9,.3,1.05)}
.wl-setup.on .sc{transform:none}
.wl-setup .top{display:flex;align-items:center;gap:10px;height:40px}
.wl-setup .bk{width:36px;height:36px;border:0;border-radius:18px;background:#F4F0EA;font:800 22px/1 var(--f);color:var(--wi);cursor:pointer}
.wl-setup .dots{flex:1;display:flex;gap:6px}
.wl-setup .dots i{flex:1;height:6px;border-radius:3px;background:#ECE6DE;transition:background .3s}
.wl-setup .dots i.on{background:linear-gradient(90deg,#F6C343,#F28C28)}
.wl-setup .n{font:700 12px var(--num);color:#8A847E;min-width:26px;text-align:right}
.wl-setup .steps{overflow:hidden;margin:14px -22px 0}
.wl-setup .rail{display:flex;transition:transform .45s cubic-bezier(.2,.9,.3,1)}
.wl-setup section{flex:none;width:100%;padding:0 22px;min-height:236px;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}
.wl-setup .sq{display:block;font:800 21px/1.3 var(--f);color:#1B2357}
.wl-setup p{margin:6px 0 16px;font:500 13px/1.5 var(--f);color:#6E6A66}
.wl-setup .ph{position:relative;width:118px;height:118px;border-radius:50%;cursor:pointer}
.wl-setup .ph img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#F1ECE6;box-shadow:0 0 0 4px #fff,0 0 0 7px #F6C343,0 10px 22px rgba(30,40,60,.18)}
.wl-setup .ph .cam{position:absolute;right:-2px;bottom:2px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--wi);color:#fff;box-shadow:0 0 0 3px #fff}
.wl-setup .ph .cam svg{width:20px;height:20px}
.wl-setup .shint{margin-top:14px;font:600 12px var(--f);color:#8A847E}
.wl-setup .in{display:block;width:100%;padding:0 16px;border:0;border-radius:16px;background:#F4F0EA;font:600 16px/1.5 var(--f);color:#1B2357;outline:none;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .2s,background .2s;text-align:center}
.wl-setup input.in{height:54px}
.wl-setup textarea.in{padding:12px 16px;resize:none;text-align:left;font-size:15px}
.wl-setup .in:focus{background:#fff;box-shadow:inset 0 0 0 1.5px var(--wi)}
.wl-setup .age{margin-top:14px;padding:10px 18px;border-radius:14px;background:#EEF1FF;font:700 14px var(--f);color:#5C6699}
.wl-setup .age b{font:700 26px var(--num);color:var(--wi);margin:0 4px}
.wl-setup .age small{display:block;font:600 11.5px var(--f);color:#7A80A6}
.wl-setup .seg{display:flex;gap:10px;width:100%}
.wl-setup .seg button{flex:1;height:64px;border:0;border-radius:18px;background:#F4F0EA;font:800 17px var(--f);color:#5C5651;cursor:pointer;box-shadow:inset 0 0 0 1.5px transparent;transition:background .2s,color .2s}
.wl-setup .seg button.on{background:#fff;color:var(--wi);box-shadow:inset 0 0 0 2px var(--wi),0 4px 10px rgba(42,59,156,.15)}
.wl-setup .cnt{align-self:flex-end;margin-top:6px;font:600 11px var(--f);font-style:normal;color:#A39C94}
.wl-setup .nx{margin-top:14px}