/* ARC Learnings -- the login screen (ARC's request, 2026-10-01). Plain CSS, no libraries, no network fonts.
   Builds on assets/tokens.css (the same colours as the app; day mode redefines them on body[data-mode="light"]).

   LAYERS, back to front:  .scene (sky gradient, soft light blobs, the constellation <canvas>)  ->  .stage (the logo + product demo on the left, the
   sign-in card on the right)  ->  .modeswitch.  The logo, the demo and the greeting are built by js/login_logo.js, js/login_demo.js, js/greetings.js;
   the constellation by js/login_scene.js; the small form helpers by js/login_ui.js. The sign-in code itself is the inline script in index.html.

   MOTION RULES: only transform and opacity are ever animated (never a filter, never layout); nothing runs while the tab is hidden (the scripts pause
   it); and under `prefers-reduced-motion` everything is a calm still picture (the last block of this file). */

/* ---- login-only tokens (the app's tokens come from tokens.css) ---- */
body{
  --l-sky:linear-gradient(172deg,#040a1c 0%,#071536 36%,#0a2658 70%,#0e3a86 100%);
  --l-blob-a:rgba(0,196,255,.30); --l-blob-b:rgba(80,110,255,.34); --l-blob-c:rgba(40,230,200,.16);
  --l-glass:rgba(12,26,56,.66); --l-glass-line:rgba(160,200,255,.24); --l-glass-hi:rgba(190,220,255,.40);
  --l-ink:#eef4ff; --l-muted:#b4c8e6; --l-faint:#8fa8cf;
  --l-field:rgba(255,255,255,.07); --l-field-focus:rgba(255,255,255,.12);
  --l-node:190,220,255;                       /* r,g,b of the constellation (read by js/login_scene.js) */
  --l-glow:rgba(40,150,255,.55);
  --l-btn:linear-gradient(135deg,#2f8bff,#1459d9);
  --l-btn-ink:#ffffff;
  --l-demo-bg:rgba(10,22,48,.62);
  --l-shadow:0 10px 30px rgba(2,8,24,.50),0 40px 90px rgba(2,8,24,.45);
}
body[data-mode="light"]{
  --l-sky:linear-gradient(172deg,#1b6fd2 0%,#3b92e7 34%,#86c4f5 72%,#d9eeff 100%);
  --l-blob-a:rgba(255,255,255,.40); --l-blob-b:rgba(120,190,255,.50); --l-blob-c:rgba(255,236,170,.34);
  --l-glass:rgba(255,255,255,.82); --l-glass-line:rgba(255,255,255,.85); --l-glass-hi:rgba(255,255,255,1);
  --l-ink:#0f2440; --l-muted:#46648a; --l-faint:#42608a;
  --l-field:rgba(15,36,64,.05); --l-field-focus:rgba(15,36,64,.09);
  --l-node:255,255,255;
  --l-glow:rgba(255,255,255,.75);
  --l-btn:linear-gradient(135deg,#2a86f4,#0f4fc4);
  --l-demo-bg:rgba(255,255,255,.70);
  --l-shadow:0 8px 24px rgba(20,60,120,.20),0 34px 70px rgba(20,60,120,.20);
}

html{height:100%}
body{margin:0;min-height:100%;color:var(--l-ink);background:#040a1c;overflow-x:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
body[data-mode="light"]{background:#86c4f5}
button,input{font-family:inherit}
:focus-visible{outline:3px solid #7cc0ff;outline-offset:2px}

/* ---- the scene behind everything ---- */
.scene{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:strict}
.sky{position:absolute;inset:0;background:var(--l-sky)}
.blob{position:absolute;border-radius:50%;will-change:transform;transform:translate3d(0,0,0)}
.blob.b1{width:70vmax;height:70vmax;left:-22vmax;top:-26vmax;background:radial-gradient(closest-side,var(--l-blob-a),transparent 70%);animation:drift1 38s ease-in-out infinite alternate}
.blob.b2{width:62vmax;height:62vmax;right:-20vmax;bottom:-24vmax;background:radial-gradient(closest-side,var(--l-blob-b),transparent 70%);animation:drift2 46s ease-in-out infinite alternate}
.blob.b3{width:44vmax;height:44vmax;left:38vw;top:30vh;background:radial-gradient(closest-side,var(--l-blob-c),transparent 70%);animation:drift3 52s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(9vmax,7vmax,0) scale(1.08)}}
@keyframes drift2{to{transform:translate3d(-8vmax,-6vmax,0) scale(1.1)}}
@keyframes drift3{to{transform:translate3d(-10vmax,9vmax,0) scale(.92)}}
#constellation{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---- the stage ---- */
.stage{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr);
  align-items:center;gap:clamp(20px,4vw,72px);padding:clamp(18px,4vh,56px) clamp(18px,5vw,88px);max-width:1680px;margin:0 auto}
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(8px,1.6vh,18px);min-width:0}
.panel{display:flex;flex-direction:column;align-items:center;min-width:0}

/* ---- the logo (built by js/login_logo.js from ARC's own picture, taken apart in layers) ---- */
.lg{--lg:clamp(150px,min(36vh,34vw),430px);position:relative;width:var(--lg);height:var(--lg);flex:none;perspective:900px}
.lg-glow{position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(closest-side,var(--l-glow),transparent 72%);opacity:0;transform:scale(.8)}
.lg-box{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out}
.lg-box img,.lg-box .lg-shine,.lg-box .lg-orb{position:absolute;display:block;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
.lg-bg,.lg-full{left:0;top:0;width:100%;height:100%}
.lg-orb{left:0;top:0;width:100%;height:100%;overflow:visible}
.lg-shine{left:0;top:0;width:100%;height:100%;overflow:hidden;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}   /* the mask image itself is set by js/login_logo.js */
.lg-shine i{position:absolute;top:-10%;bottom:-10%;left:-45%;width:34%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(0) skewX(-18deg);opacity:0}
/* before the build starts nothing of the logo shows (the glow is already breathing, so the page is never empty) */
.lg:not(.go) .lg-box{opacity:0}
.lg.go .lg-glow{animation:lgGlowIn 1.2s ease-out .1s both,lgBreath 6s ease-in-out 1.4s infinite}
.lg.go .lg-box{animation:lgFloat 7s ease-in-out 3.6s infinite}
.lg.go .lg-bg{animation:lgBgIn .8s cubic-bezier(.2,.9,.25,1.12) .05s both}
.lg.go .lg-wave{animation:lgWipe 1.4s cubic-bezier(.45,.05,.3,1) .6s both}
.lg.go .lg-a{animation:lgRise .62s cubic-bezier(.2,.9,.3,1.15) 1.55s both}
.lg.go .lg-r{animation:lgRise .62s cubic-bezier(.2,.9,.3,1.15) 1.72s both}
.lg.go .lg-c{animation:lgRise .62s cubic-bezier(.2,.9,.3,1.15) 1.89s both}
.lg.go .lg-learn{animation:lgWipe 1.1s cubic-bezier(.45,.05,.3,1) 2.35s both}
.lg.go .lg-full{animation:lgFullIn .9s ease-out 3.3s both}      /* the real picture, glow and all, takes over once the build-up is done */
.lg.go .lg-shine i{animation:lgShine 7.5s ease-in-out 4.4s infinite}
@keyframes lgGlowIn{from{opacity:0;transform:scale(.7)}to{opacity:.7;transform:scale(1)}}
@keyframes lgBreath{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.85;transform:scale(1.09)}}
@keyframes lgFloat{0%,100%{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(0)}50%{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-7px)}}
@keyframes lgBgIn{from{opacity:0;transform:scale(.84)}to{opacity:1;transform:scale(1)}}
@keyframes lgWipe{from{clip-path:inset(0 100% 0 0);opacity:.2}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes lgRise{from{opacity:0;transform:translateY(7%) scale(.94)}to{opacity:1;transform:none}}
@keyframes lgFullIn{from{opacity:0}to{opacity:1}}
@keyframes lgShine{0%,62%{transform:translateX(0) skewX(-18deg);opacity:0}66%{opacity:1}86%{opacity:1}92%,100%{transform:translateX(430%) skewX(-18deg);opacity:0}}

.tagline{margin:0;font-size:clamp(22px,3.2vw,40px);line-height:1.1;font-weight:800;letter-spacing:-.4px;color:var(--l-ink);opacity:0;transform:translateY(8px);animation:fadeUp .8s ease-out 2.2s forwards}
.tagline em{font-style:normal;color:#8ee6ff}      /* a solid colour on purpose: gradient text made with transparent ink disappears in high-contrast modes */
body[data-mode="light"] .tagline em{color:#0a3a8a}
body[data-mode="light"] .sub{color:#12365f}
.sub{margin:0;font-size:clamp(14px,1.45vw,18px);color:var(--l-muted);max-width:30em;opacity:0;animation:fadeUp .8s ease-out 2.45s forwards}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* ---- the product demo: "this is what you will do here" ---- */
.demo{position:relative;width:min(380px,100%);margin-top:clamp(4px,1.4vh,16px);padding:16px 18px 14px;border-radius:20px;background:var(--l-demo-bg);border:1px solid var(--l-glass-line);
  box-shadow:var(--l-shadow);text-align:left;overflow:hidden;opacity:0;transform:translateY(14px);animation:fadeUp .9s ease-out 2.8s forwards;
  -webkit-backdrop-filter:blur(14px) saturate(130%);backdrop-filter:blur(14px) saturate(130%)}
.dm-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--l-muted);font-weight:700}
.dm-chip{padding:3px 9px;border-radius:999px;background:var(--arc-sky);color:var(--arc-blue);font-weight:800;letter-spacing:.2px}
body:not([data-mode="light"]) .dm-chip{color:#9fd0ff;background:rgba(111,180,255,.18)}
body[data-mode="light"] .dm-chip{color:#0d4690;background:#dcebfb}
.dm-bar{height:6px;border-radius:99px;background:var(--track);margin:10px 0 14px;overflow:hidden}
.dm-bar i{display:block;height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,#2f8bff,#33d6c0);transform-origin:left;transform:scaleX(.2);transition:transform .7s var(--ease)}
.dm-q{min-height:2.7em;font-size:clamp(17px,1.5vw,20px);font-weight:800;line-height:1.3;color:var(--l-ink);transition:opacity .35s,transform .35s}
.dm-in{position:relative;display:flex;align-items:center;gap:6px;height:50px;margin-top:10px;padding:0 14px;border-radius:14px;border:2px solid var(--l-glass-line);background:var(--l-field);
  font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--l-ink);transition:border-color .25s,background .25s}
.dm-in.focus{border-color:#4aa0ff}
.dm-in.right{border-color:#2fd39b;background:rgba(47,211,155,.14)}
.dm-caret{width:2px;height:24px;border-radius:2px;background:#4aa0ff;animation:caret 1s steps(2,jump-none) infinite}
.dm-in.right .dm-caret{display:none}
@keyframes caret{50%{opacity:0}}
.dm-ok{margin-left:auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#2fd39b;color:#05261a;font-size:17px;font-weight:900;transform:scale(0);opacity:0;transition:transform .35s var(--bounce),opacity .2s}
.dm-in.right .dm-ok{transform:scale(1);opacity:1}
.dm-fb{height:1.4em;margin-top:9px;font-size:13.5px;font-weight:800;color:#2fd39b;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
body[data-mode="light"] .dm-fb{color:#0b7a4e}
.dm-fb.show{opacity:1;transform:none}
.dm-burst{position:absolute;right:30px;top:50%;width:0;height:0;pointer-events:none}
.dm-burst i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--c,#6fe0ff);opacity:0;animation:burst .7s ease-out forwards}
@keyframes burst{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}
.demo.swap .dm-q{opacity:0;transform:translateY(-6px)}

/* ---- the sign-in card ---- */
.card{width:min(440px,100%);padding:clamp(22px,3.4vh,36px) clamp(20px,2.4vw,34px) clamp(20px,3vh,30px);border-radius:26px;background:var(--l-glass);border:1px solid var(--l-glass-line);
  box-shadow:var(--l-shadow),inset 0 1px 0 var(--l-glass-hi);-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);
  opacity:0;transform:translateY(18px);animation:fadeUp .9s cubic-bezier(.2,.8,.25,1) .5s forwards}
.hello{margin:0 0 4px;min-height:3.1em;color:var(--l-muted)}
.hello .hellot{display:block;font-size:clamp(20px,2.1vw,26px);font-weight:800;line-height:1.2;color:var(--l-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .42s var(--ease)}
.hello small{display:block;margin-top:2px;font-size:12px;letter-spacing:.06em;color:var(--l-faint);transition:opacity .42s var(--ease)}
.hello .gfade{opacity:0}
.card h1{margin:0 0 4px;font-size:clamp(23px,2.3vw,28px);line-height:1.15;font-weight:800;letter-spacing:-.3px}
.card .lead{margin:0 0 18px;color:var(--l-muted);font-size:14.5px}
.field{margin:0 0 15px}
label{display:block;margin:0 0 7px;font-size:13.5px;font-weight:700;color:var(--l-muted)}
.inwrap{position:relative}
input[type=text],input[type=password]{width:100%;height:54px;padding:0 16px;border-radius:15px;border:1.5px solid var(--l-glass-line);background:var(--l-field);color:var(--l-ink);
  font-size:16.5px;outline:none;transition:border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease)}
input::placeholder{color:var(--l-faint)}
input[type=text]:focus,input[type=password]:focus{border-color:#4aa0ff;background:var(--l-field-focus);box-shadow:0 0 0 4px rgba(74,160,255,.22)}
.pwtoggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);height:38px;padding:0 12px;border:0;border-radius:10px;background:none;color:var(--l-muted);
  font-size:12.5px;font-weight:800;letter-spacing:.5px;cursor:pointer}
.pwtoggle:hover{background:var(--l-field-focus);color:var(--l-ink)}
.pwrow input{padding-right:78px}
.caps{margin:7px 2px 0;font-size:12.5px;font-weight:700;color:#ffc05c}
body[data-mode="light"] .caps{color:#9a6205}
.caps[hidden]{display:none}
button.go{position:relative;width:100%;height:56px;margin-top:8px;border:0;border-radius:16px;background:var(--l-btn);color:var(--l-btn-ink);font-size:17px;font-weight:800;letter-spacing:.2px;cursor:pointer;
  box-shadow:0 8px 22px rgba(20,90,230,.40);transition:transform .15s var(--bounce),box-shadow .15s var(--ease),opacity .15s}
button.go:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(20,90,230,.48)}
button.go:active{transform:translateY(0)}
button.go:disabled{opacity:.88;cursor:progress;transform:none}
button.go:disabled::before{content:"";display:inline-block;width:17px;height:17px;margin:-3px 10px -3px 0;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .75s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.err{display:none;margin:0 0 14px;padding:11px 14px;border-radius:13px;background:var(--red-bg);color:var(--red-ink);border:1px solid var(--red-br);font-size:14px;font-weight:600;line-height:1.4}
body[data-mode="light"] .err{background:#fdeaea;color:#a42f2f;border-color:#f3c0c0}
.err.shake{animation:shake .45s ease-in-out}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.foot{margin:16px 6px 0;max-width:420px;text-align:center;color:var(--l-muted);font-size:13px;line-height:1.45;opacity:0;animation:fadeUp .8s ease-out 1.2s forwards}
body[data-mode="light"] .foot{color:#12365f}

.ver{margin:6px 0 0;text-align:center;font-size:11.5px;letter-spacing:.04em;color:var(--l-muted);opacity:0;animation:fadeUp .8s ease-out 1.4s forwards}
body[data-mode="light"] .ver{color:#12365f}
.modeswitch{position:fixed;top:16px;right:16px;z-index:5;width:46px;height:46px;border-radius:50%;border:1px solid var(--l-glass-line);background:var(--l-glass);color:var(--l-ink);
  font-size:19px;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:var(--l-shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .2s var(--bounce)}
.modeswitch:hover{transform:scale(1.08)}

/* ---- laptop height: tighten a little so card and demo both fit ---- */
@media (max-height:760px) and (min-width:921px){
  .lg{--lg:clamp(130px,min(30vh,30vw),340px)}
  .demo{padding:12px 16px 10px}
  .dm-bar{margin:8px 0 10px}
  .dm-in{height:44px;margin-top:6px}
}

/* ---- tablet and phone: one column; the logo sits above the card; the demo is a short strip below it ---- */
@media (max-width:920px){
  .stage{grid-template-columns:minmax(0,1fr);justify-items:center;align-content:start;gap:18px;padding:max(18px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom))}
  .hero{gap:8px}
  .lg{--lg:clamp(120px,min(26vh,52vw),230px)}
  .tagline{font-size:clamp(20px,5.2vw,30px)}
  .sub{display:none}
  .demo{order:3;width:min(440px,100%)}
  .panel{width:100%}
  /* the demo sits UNDER the card on a phone: the card is what the child came for */
  .stage{display:flex;flex-direction:column;align-items:center}
  .hero{display:contents}
  .lg{order:1} .tagline{order:2} .panel{order:3} .demo{order:4}
}
@media (max-width:920px) and (max-height:620px){ .tagline{display:none} .lg{--lg:110px} }
@media (max-width:420px){ .card{border-radius:22px} .modeswitch{top:10px;right:10px;width:42px;height:42px} }
@media (max-height:520px) and (orientation:landscape){
  .stage{display:grid;grid-template-columns:minmax(0,.7fr) minmax(300px,1.3fr);align-items:center;padding:12px 20px}
  .hero{display:flex} .lg{--lg:120px;order:0} .tagline,.sub,.demo{display:none}
  .panel{order:0}
}

/* ---- phones and touch screens: no live blur. A blurred glass over a canvas that moves every frame is re-blurred every frame, which is what makes a phone
   hot and slow; a more solid glass looks nearly the same and costs nothing. ---- */
@media (max-width:920px),(pointer:coarse){
  body{--l-glass:rgba(12,26,56,.90);--l-demo-bg:rgba(10,22,48,.84)}
  body[data-mode="light"]{--l-glass:rgba(255,255,255,.93);--l-demo-bg:rgba(255,255,255,.88)}
  .card,.demo,.modeswitch{-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ---- the calm version: asked for by the device ("reduce motion"). Everything is still; nothing loops. ---- */
@media (prefers-reduced-motion:reduce){
  .blob,.lg-glow,.lg-box,.lg-shine i{animation:none !important}
  .lg:not(.go) .lg-box{opacity:1}
  .lg.go .lg-bg,.lg.go .lg-wave,.lg.go .lg-a,.lg.go .lg-r,.lg.go .lg-c,.lg.go .lg-learn{animation:none !important}
  .lg.go .lg-full{animation:none !important;opacity:1}
  .lg-glow{opacity:.65;transform:none}
  .tagline,.sub,.demo,.card,.foot,.ver{animation:none !important;opacity:1;transform:none}
  .dm-caret{animation:none}
  .err.shake{animation:none}
  button.go:disabled::before{animation-duration:2s}
  *{transition-duration:.01ms !important}
}