/* ============================================================================
   Sign-in pages: the landing page's hero, beside the card (5 Oct 2026).

   The markup in server/templates/_auth_art.html is the landing page's own hero
   stage (index.html .hero-stage), and the rules below are landing-v3.css's,
   copied and scoped under .auth-art so nothing else on these pages changes.
   If the landing hero changes, copy it here again.

   Added for these pages: everything arrives in turn (circles first, then the
   people, then the cards), the stage leans a little towards the pointer, and
   the counts on the stats card count up. auth-plus.js runs the moving parts.
   ========================================================================== */
.auth-art{
  --c-blue:#1E7FD0;--c-teal:#00B3A6;--c-rose:#C2567F;--c-pink:#ED0F68;
  --c-gold:#F0A52B;--c-purple:#7C5CE7;--c-green:#2FA96B;
  --ink:#141F3A;--ink-2:#3C4A66;--ink-soft:#66748F;--ink-faint:#93A0B6;
  --line:rgba(24,40,90,.09);--line-2:rgba(24,40,90,.055);
  --ease:cubic-bezier(.22,1,.36,1);
  --lift:0 2px 6px rgba(28,45,95,.05),0 14px 34px -12px rgba(28,45,95,.16);
  --lift-lg:0 4px 10px rgba(28,45,95,.06),0 34px 70px -26px rgba(28,45,95,.28);
  font-family:'Outfit',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  margin:0;width:100%;max-width:560px;padding:20px 46px;text-align:center;
}
.auth-art .aa-tilt{transition:transform .9s cubic-bezier(.16,.84,.3,1);transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}

.auth-art .hero-stage{
  position:relative;aspect-ratio:1/1;width:100%;max-height:74svh;margin-inline:auto;
  container-type:inline-size;container-name:stage;
}

/* the connectors, behind everything */
.auth-art .net-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.auth-art .net-links line{stroke-width:1.4;stroke-linecap:round}

/* ---- the node itself ---- */
.auth-art .pnode{
  --s:24cqw;
  position:absolute;z-index:3;
  width:var(--s);height:var(--s);
  translate:-50% -50%;
  border-radius:50%;
  border:1.25px solid color-mix(in srgb,var(--node) 70%,#DDE5EE);
  background:radial-gradient(circle at 32% 23%,
    #fff 12%,
    color-mix(in srgb,var(--node) 10%,#fff) 72%,
    color-mix(in srgb,var(--node) 16%,#fff));
  box-shadow:
    0 12px 30px color-mix(in srgb,var(--node) 13%,transparent),
    inset 0 2px 5px rgba(255,255,255,.8);
  display:grid;place-items:center;text-align:center;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.auth-art .pnode:hover{
  transform:translateY(-4px);
  box-shadow:
    0 20px 44px color-mix(in srgb,var(--node) 22%,transparent),
    0 0 0 5px color-mix(in srgb,var(--node) 11%,transparent),
    inset 0 2px 5px rgba(255,255,255,.8);
}
.auth-art .pnode .project-label{
  width:83%;height:63%;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:calc(var(--s) * .027);min-width:0;pointer-events:none;
}
.auth-art .pnode .title{
  font-size:calc(var(--s) * .119);
  font-weight:740;letter-spacing:-.35px;line-height:1.2;
  color:#243B4E;
  max-width:100%;overflow-wrap:anywhere;
}
.auth-art .pnode .status{
  font-size:calc(var(--s) * .062);
  padding:.30em .52em;border-radius:7px;
  background:#fff;border:1.25px solid #DCE5EB;color:#243B4E;
  white-space:nowrap;line-height:1.2;
}

/* ---- the progress ring, exactly as the app draws it ---- */
.auth-art .node-progress{
  position:absolute;inset:-4.5%;width:109%;height:109%;
  overflow:visible;transform:rotate(-90deg);pointer-events:none;
}
.auth-art .node-progress circle{fill:none}
.auth-art .node-progress .progress-base{stroke:rgba(24,40,90,.10);stroke-width:2}
.auth-art .node-progress .progress-value{
  stroke:var(--node);stroke-width:3;stroke-linecap:round;
  filter:drop-shadow(0 0 3px color-mix(in srgb,var(--node) 65%,transparent));
}

/* ---- YOU at the centre ---- */
.auth-art .you-node{
  --s:18cqw;
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:4;
  width:var(--s);height:var(--s);border-radius:50%;
  border:1.5px solid color-mix(in srgb,var(--c-rose) 62%,#DDE5EE);
  background:radial-gradient(circle at 32% 23%,#fff 14%,color-mix(in srgb,var(--c-rose) 9%,#fff) 74%,color-mix(in srgb,var(--c-rose) 15%,#fff));
  box-shadow:0 14px 34px color-mix(in srgb,var(--c-rose) 17%,transparent),inset 0 2px 5px rgba(255,255,255,.85);
  display:grid;place-items:center;text-align:center;
}
.auth-art .you-node b{display:block;font-size:calc(var(--s) * .18);font-weight:780;letter-spacing:-.02em;color:var(--c-rose);line-height:1}
.auth-art .you-node small{display:block;font-size:calc(var(--s) * .088);color:var(--ink-faint);margin-top:.35em}

/* ---- people: the app's small ringed initials ---- */
.auth-art .person-node{
  --s:8.4cqw;
  position:absolute;z-index:5;translate:-50% -50%;
  width:var(--s);height:var(--s);border-radius:50%;
  display:grid;place-items:center;
  background:#fff;
  border:1.6px solid color-mix(in srgb,var(--node) 72%,#fff);
  box-shadow:0 6px 16px color-mix(in srgb,var(--node) 22%,transparent);
  font-size:calc(var(--s) * .34);font-weight:750;letter-spacing:-.02em;
  color:color-mix(in srgb,var(--node) 78%,#243B4E);
  transition:transform .35s var(--ease);
}
.auth-art .person-node:hover{transform:translateY(-3px) scale(1.06)}

/* ------------------------------------------- real product cards, floating */
.auth-art .float-card{
  position:absolute;z-index:4;
  background:rgba(255,255,255,.90);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--lift-lg);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  padding:13px 15px;
  animation:floaty 8s ease-in-out infinite;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.auth-art .float-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 6px 14px rgba(28,45,95,.08),0 44px 84px -28px rgba(28,45,95,.36)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.auth-art .fc-label{
  display:block;font-size:9.5px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:9px;
}

/* --- a real task row --- */
.auth-art .fc-task{left:-9%;top:1%;width:248px;animation-delay:-1s}
.auth-art .fc-task .t-row{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.35;color:var(--ink);font-weight:450}
.auth-art .fc-task .tick{
  flex:0 0 auto;width:17px;height:17px;border-radius:5px;margin-top:1px;
  border:1.6px solid rgba(24,40,90,.22);background:#fff;position:relative;
  transition:background .22s,border-color .22s;
}
.auth-art .fc-task .t-row.done .tick{background:var(--c-green);border-color:var(--c-green)}
.auth-art .fc-task .t-row.done .tick::after{
  content:'';position:absolute;left:5px;top:1.5px;width:4.5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg);
}
.auth-art .fc-task .t-row.done span{color:var(--ink-faint);text-decoration:line-through}
.auth-art .fc-task .t-meta{display:flex;align-items:center;gap:7px;margin:10px 0 0;padding-top:9px;border-top:1px solid var(--line-2);font-size:10.5px;color:var(--ink-soft)}
.auth-art .fc-task .dot{width:7px;height:7px;border-radius:50%;background:var(--c-blue)}
.auth-art .fc-task .pill{margin-left:auto;padding:2.5px 8px;border-radius:999px;background:rgba(240,165,43,.16);color:#9A6A10;font-size:9.5px;font-weight:650}

/* --- a real note card --- */
.auth-art .fc-note{right:-10%;top:-2%;width:222px;animation-delay:-4s}
.auth-art .fc-note h4{margin:0 0 7px;font-size:13px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.auth-art .fc-note p{margin:0;font-size:11.5px;line-height:1.5;color:var(--ink-soft);font-weight:350}
.auth-art .fc-note .n-foot{display:flex;align-items:center;gap:7px;margin-top:11px;padding-top:9px;border-top:1px solid var(--line-2);font-size:10px;color:var(--ink-faint)}
.auth-art .fc-note .n-foot b{font-weight:550;color:var(--ink-soft)}

/* --- a real person chip --- */
.auth-art .fc-person{right:-7%;bottom:4%;width:204px;animation-delay:-6.5s;display:flex;align-items:center;gap:11px;padding:12px 14px}
.auth-art .fc-person .av{
  width:36px;height:36px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#E2799F,var(--c-rose));
  box-shadow:0 6px 16px -6px rgba(194,86,127,.7);
}
.auth-art .fc-person strong{display:block;font-size:13px;font-weight:600;letter-spacing:-.015em}
.auth-art .fc-person small{display:block;font-size:10.5px;color:var(--ink-faint);margin-top:1px}

/* --- real stat tiles --- */
.auth-art .fc-stats{left:-6%;bottom:-1%;width:236px;animation-delay:-2.5s;padding:13px 14px}
.auth-art .fc-stats .s-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.auth-art .fc-stats .s-grid div{
  text-align:center;padding:9px 4px;border-radius:11px;
  background:var(--sb,rgba(30,127,208,.08));
}
.auth-art .fc-stats .s-grid b{display:block;font-size:19px;font-weight:700;letter-spacing:-.04em;color:var(--sc,var(--c-blue));line-height:1}
.auth-art .fc-stats .s-grid small{display:block;font-size:8.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-top:4px}


/* ---------------------------------------------------- arriving, in turn */
.auth-art .net-links line{stroke-dasharray:120;animation:as-draw 1.2s cubic-bezier(.16,.84,.3,1) backwards;animation-delay:calc(.35s + var(--i,0) * .1s)}
.auth-art .pnode,.auth-art .you-node,.auth-art .person-node{animation:as-pop 1s cubic-bezier(.16,.84,.3,1) backwards;animation-delay:calc(.15s + var(--i,0) * .1s)}
.auth-art .float-card{animation:as-card 1.1s cubic-bezier(.16,.84,.3,1) backwards,floaty 8s ease-in-out infinite;animation-delay:calc(.9s + var(--i,0) * .14s),var(--fd,0s)}
.auth-art .fc-task{--fd:-1s}.auth-art .fc-note{--fd:-4s}.auth-art .fc-person{--fd:-6.5s}.auth-art .fc-stats{--fd:-2.5s}
.auth-art .you-node::after{content:"";position:absolute;inset:-12%;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--c-rose) 40%,transparent);animation:as-ping 3.6s cubic-bezier(.16,.84,.3,1) 1.6s infinite;pointer-events:none}
@keyframes as-pop{from{opacity:0;scale:.3}}
@keyframes as-draw{from{stroke-dashoffset:120}}
@keyframes as-card{from{opacity:0;translate:0 26px}}
@keyframes as-ping{0%{opacity:.9;scale:.9}70%,100%{opacity:0;scale:1.35}}
.auth-art .aa-caption{margin:58px auto 0;max-width:380px;display:grid;gap:4px;font-size:14px;color:#66748F;line-height:1.5;animation:as-card 1.2s cubic-bezier(.16,.84,.3,1) 1.3s backwards}
.auth-art .aa-caption strong{font-size:17px;color:#141F3A;font-weight:650;letter-spacing:-.3px}

/* Narrower screens: the circles move behind the card, faint, and the cards go */
@media(max-width:980px){
  .auth-art{padding:0}
  .auth-art .float-card,.auth-art .aa-caption{display:none}
}
@media(prefers-reduced-motion:reduce){
  .auth-art *,.auth-art *::after{animation:none!important;transition:none!important}
  .auth-art .aa-tilt{transform:none}
}


/* ------------------------------------------- this page's own cards (5 Oct) */
.auth-art .fc-wait{right:-13%;top:39%;width:212px;text-align:left}
.auth-art .fc-wait strong{display:block;font-size:13px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.auth-art .w-meta{display:flex;align-items:center;gap:7px;margin-top:9px;padding-top:8px;border-top:1px solid var(--line-2);font-size:10.5px;color:var(--ink-soft)}
.auth-art .w-meta i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.auth-art .w-meta b{margin-left:auto;padding:2.5px 8px;border-radius:999px;background:rgba(240,165,43,.16);color:#9A6A10;font-size:9.5px;font-weight:650}
.auth-art .fc-promise{left:-14%;top:-3%;width:226px;text-align:left}
.auth-art .fc-promise .t-row{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.35;color:var(--ink);font-weight:450}
.auth-art .fc-promise .tick{flex:0 0 auto;width:17px;height:17px;border-radius:5px;margin-top:1px;border:1.6px solid rgba(24,40,90,.22);background:#fff;position:relative;transition:background .3s,border-color .3s;cursor:pointer}
.auth-art .t-row.done .tick{background:var(--c-green);border-color:var(--c-green)}
.auth-art .t-row.done .tick::after{content:'';position:absolute;left:5px;top:1.5px;width:4.5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg)}
.auth-art .t-row.done span{color:var(--ink-faint);text-decoration:line-through}
.auth-art .fc-event{right:-9%;top:-9%;display:flex;align-items:center;gap:11px;padding:10px 14px 10px 10px;text-align:left}
.auth-art .ev-date{display:grid;place-items:center;width:40px;height:42px;border-radius:10px;background:linear-gradient(160deg,#9C84F0,var(--c-purple));color:#fff;font-size:17px;font-weight:700;line-height:1;box-shadow:0 8px 18px -8px rgba(124,92,231,.8)}
.auth-art .ev-date b{font-size:8.5px;letter-spacing:.12em;font-weight:700;opacity:.85}
.auth-art .fc-event strong{display:block;font-size:13px;font-weight:600;letter-spacing:-.015em}
.auth-art .fc-event small{display:block;font-size:10.5px;color:var(--ink-faint);margin-top:1px}
.auth-art .fc-week{left:-10%;bottom:-7%;width:168px;text-align:left}
.auth-art .wk{display:flex;align-items:baseline;gap:6px}
.auth-art .wk b{font-size:26px;font-weight:700;letter-spacing:-.04em;color:var(--c-green);line-height:1}
.auth-art .wk span{font-size:12px;color:var(--ink-soft)}
.auth-art .wk-bar{margin-top:9px;height:6px;border-radius:99px;background:rgba(47,169,107,.14);overflow:hidden}
.auth-art .wk-bar i{display:block;height:100%;width:70%;border-radius:99px;background:linear-gradient(90deg,#7ED3A8,var(--c-green));animation:as-bar 1.6s cubic-bezier(.16,.84,.3,1) 1.5s backwards}
@keyframes as-bar{from{width:0}}
.auth-art .fc-wait{--fd:-1.5s}.auth-art .fc-promise{--fd:-5s}.auth-art .fc-event{--fd:-3s}.auth-art .fc-week{--fd:-6.5s}

/* A circle under the pointer lights its line */
.auth-art .net-links line{transition:stroke-opacity .5s cubic-bezier(.16,.84,.3,1),stroke-width .5s cubic-bezier(.16,.84,.3,1)}
.auth-art .net-links line.lit{stroke-opacity:.85;stroke-width:2.6}

/* ---------------------------------------------- depth: far and near layers
   Soft out-of-focus circles behind and in front of the stage. They drift on
   their own and follow the pointer: far ones a little, near ones more
   (--px/--py, set by auth-plus.js), which is what makes it read as depth. */
.auth-art{position:relative}
.auth-art .aa-far,.auth-art .aa-near{position:absolute;inset:20px 46px;pointer-events:none}
.auth-art .aa-far{z-index:0;translate:calc(var(--px,0) * -10px) calc(var(--py,0) * -10px);transition:translate 1.2s cubic-bezier(.16,.84,.3,1)}
.auth-art .aa-near{z-index:6;translate:calc(var(--px,0) * 26px) calc(var(--py,0) * 26px);transition:translate 1s cubic-bezier(.16,.84,.3,1)}
.auth-art .aa-tilt{position:relative;z-index:2}
.auth-art .aa-far i,.auth-art .aa-near i{position:absolute;width:var(--z);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 32% 26%,#fff 8%,color-mix(in srgb,var(--c) 26%,#fff) 60%,color-mix(in srgb,var(--c) 40%,#fff));
  border:1px solid color-mix(in srgb,var(--c) 45%,#fff);
  animation:as-fade 1.6s cubic-bezier(.16,.84,.3,1) backwards,as-drift 16s ease-in-out infinite alternate;animation-delay:.2s,var(--d,0s)}
.auth-art .aa-far i{filter:blur(5px);opacity:.55}
.auth-art .aa-near i{filter:blur(11px);opacity:.45}
@keyframes as-fade{from{opacity:0}}
@keyframes as-drift{from{transform:translate(0,0)}to{transform:translate(14px,-18px)}}
@media(max-width:980px){.auth-art .aa-near{display:none}.auth-art .aa-far,.auth-art .aa-near{inset:0}}
@media(prefers-reduced-motion:reduce){.auth-art .aa-far,.auth-art .aa-near{translate:none}}