/* ==========================================================================
   WeCredit splash — full-screen intro on first visit and a greeting after login
   ========================================================================== */
html.wc-pre body{ background:#071E38; }
html.wc-pre body > *:not(#splash){ visibility:hidden; animation: spReveal 0s 7s forwards; }   /* safety: never stay hidden if JS fails */
@keyframes spReveal{ to{ visibility:visible; } }

#splash{
  position:fixed; inset:0; z-index:10000; display:grid; place-items:center; overflow:hidden; color:#fff;
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  background:
    radial-gradient(1100px 760px at 14% 8%, rgba(46,143,224,.85) 0%, transparent 62%),
    radial-gradient(900px 700px at 92% 92%, rgba(27,95,168,.9) 0%, transparent 58%),
    linear-gradient(160deg, #061A31 0%, #0B3260 52%, #1262A8 100%);
  transition: opacity .75s ease, transform .75s ease, visibility .75s;
  cursor:pointer;
}
#splash.out{ opacity:0; transform:scale(1.045); visibility:hidden; pointer-events:none; }
#splash canvas{ position:absolute; inset:0; width:100%; height:100%; }

/* soft glowing colour blobs */
.sp-blob{ position:absolute; border-radius:50%; filter:blur(80px); animation: spFloat 15s ease-in-out infinite alternate; }
.sp-b1{ width:560px; height:560px; background:#2E8FE0; left:-140px; top:-120px; opacity:.5; }
.sp-b2{ width:480px; height:480px; background:#1FA184; right:-120px; bottom:-140px; opacity:.32; animation-delay:-5s; }
.sp-b3{ width:400px; height:400px; background:#E8A93B; right:16%; top:-170px; opacity:.24; animation-delay:-9s; }
@keyframes spFloat{ to{ transform:translate(70px,46px) scale(1.18); } }

/* rising "performance" line across the bottom */
.sp-chart{ position:absolute; left:0; right:0; bottom:0; width:100%; height:44%; }
.sp-chart .line{ fill:none; stroke:url(#spLine); stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:2600; stroke-dashoffset:2600; animation: spDraw 3.4s .5s cubic-bezier(.3,.7,.2,1) forwards; }
.sp-chart .area{ fill:url(#spArea); opacity:0; animation: spFade 1.8s 1.8s forwards; }
.sp-chart .dot{ fill:#FFD27A; opacity:0; animation: spFade .6s 3.5s forwards; filter:drop-shadow(0 0 10px #FFC95C); }
@keyframes spDraw{ to{ stroke-dashoffset:0; } }
@keyframes spFade{ to{ opacity:1; } }

/* centre stack */
.sp-center{ position:relative; text-align:center; padding:24px; max-width:900px; }
.sp-logo{ height:min(36vh, 340px); width:auto; max-width:78vw; display:block; margin:0 auto; animation: spLogo 1.3s cubic-bezier(.2,.8,.2,1) both; filter:drop-shadow(0 12px 44px rgba(46,143,224,.7)); }
@keyframes spLogo{ from{ opacity:0; transform:scale(.76) translateY(24px); filter:blur(16px); } to{ opacity:1; transform:none; filter:drop-shadow(0 12px 44px rgba(46,143,224,.7)); } }
.sp-greet{ margin-top:30px; font:600 clamp(14px,1.9vw,19px)/1 var(--font-display, "Space Grotesk", sans-serif); letter-spacing:.46em; text-transform:uppercase; color:#9BD0FF; animation: spUp .9s .6s both; }
.sp-title{ margin:14px 0 0; font:700 clamp(30px,5.6vw,64px)/1.08 var(--font-display, "Space Grotesk", sans-serif); letter-spacing:-.02em; animation: spUp .9s .8s both; }
.sp-title span{ background:linear-gradient(90deg,#7CC4FF,#FFD27A); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sp-tag{ margin:18px auto 0; max-width:640px; font-size:clamp(14px,1.6vw,17px); line-height:1.6; color:#CFE6FA; animation: spUp .9s 1s both; }
.sp-role{ margin-top:14px; display:inline-block; padding:6px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:#DDEEFF; animation: spUp .9s 1s both; }
.sp-enter{ margin-top:34px; padding:14px 34px; border-radius:999px; border:1px solid rgba(255,255,255,.4); background:linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.08)); color:#fff; font:600 15px var(--font-body, "Inter", sans-serif); letter-spacing:.03em; cursor:pointer; backdrop-filter: blur(8px); box-shadow:0 10px 30px rgba(0,0,0,.25); animation: spUp .9s 1.25s both; transition: transform .2s, background .2s; }
.sp-enter:hover{ transform:translateY(-2px); background:linear-gradient(160deg, rgba(255,255,255,.34), rgba(255,255,255,.14)); }
@keyframes spUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
.sp-progress{ position:absolute; left:0; bottom:0; height:4px; width:100%; background:rgba(255,255,255,.12); }
.sp-progress i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#58B0F5,#FFD27A); animation: spBar var(--sp-dur, 5200ms) linear forwards; }
@keyframes spBar{ to{ width:100%; } }
.sp-skip{ position:absolute; right:22px; top:18px; font-size:12px; color:#9BD0FF; letter-spacing:.1em; text-transform:uppercase; opacity:.8; }

/* floating glass cards (decoration only — no numbers, so nothing goes stale) */
.sp-card{ position:absolute; width:190px; padding:14px 16px; border-radius:18px; background:linear-gradient(160deg, rgba(255,255,255,.2), rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.26); backdrop-filter: blur(10px); box-shadow:0 20px 50px rgba(0,0,0,.28); animation: spCard 6s ease-in-out infinite alternate, spFade .9s both; }
.sp-card b{ display:block; font:600 11px var(--font-body, sans-serif); letter-spacing:.14em; text-transform:uppercase; color:#BFE0FF; margin-bottom:10px; }
.sp-bars{ display:flex; align-items:flex-end; gap:6px; height:44px; }
.sp-bars i{ flex:1; border-radius:4px 4px 2px 2px; background:linear-gradient(180deg,#8FD0FF,#2E8FE0); transform-origin:bottom; animation: spGrow 1.2s cubic-bezier(.2,.8,.2,1) both; }
.sp-bars i:nth-child(4){ background:linear-gradient(180deg,#FFD98A,#E8A93B); }
.sp-ring{ width:46px; height:46px; border-radius:50%; background:conic-gradient(#35D0A8 0 72%, rgba(255,255,255,.18) 0); -webkit-mask: radial-gradient(circle 15px at center, transparent 98%, #000 100%); mask: radial-gradient(circle 15px at center, transparent 98%, #000 100%); }
.sp-c1{ left:7%; top:15%; animation-delay:0s, .9s; } .sp-c2{ right:7%; top:21%; animation-delay:-2s, 1.1s; } .sp-c3{ left:11%; bottom:24%; animation-delay:-4s, 1.3s; } .sp-c4{ right:10%; bottom:27%; animation-delay:-1s, 1.5s; }
@keyframes spCard{ to{ transform:translateY(-16px) rotate(1.2deg); } }
@keyframes spGrow{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
.sp-card .sp-coin{ width:34px; height:34px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #FFE7A8, #E8A93B 62%, #B97A14); box-shadow:0 0 22px rgba(255,201,92,.6); display:grid; place-items:center; color:#7A4A06; font:700 15px var(--font-display, sans-serif); }
.sp-card .sp-line{ height:6px; border-radius:6px; background:rgba(255,255,255,.22); margin-top:8px; } .sp-card .sp-line.s{ width:62%; }

/* the greeting shown right after login is a bit quicker and calmer */
#splash.sp-welcome .sp-card{ display:none; }
#splash.sp-welcome .sp-logo{ height:min(24vh, 210px); }
#splash.sp-welcome .sp-greet{ margin-top:26px; }

@media (max-width: 900px){ .sp-card{ display:none; } .sp-greet{ letter-spacing:.3em; } }
@media (prefers-reduced-motion: reduce){
  #splash *{ animation-duration:.01s !important; animation-delay:0s !important; }
  .sp-chart .line{ stroke-dashoffset:0; } .sp-chart .area, .sp-chart .dot{ opacity:1; }
}
/* logos in the app chrome */
.brand-horizontal{ height:38px; width:auto; display:block; }
.aside-logo-card{ display:block; width:fit-content; align-self:flex-start; background:#fff; border-radius:20px; padding:14px 22px; box-shadow:0 14px 40px rgba(6,26,49,.28); }
.aside-logo-card img{ height:60px; width:auto; display:block; }