/* XParts brand & motion v1 — login scene, post-login intro and portal micro-animations.
   Palette: only existing tokens from app.css (--teal #087f7c, --dark #112f37, --mint #71dcce). */

.xp-mark .ink,.xp-svg .ink,.xp-flow .ink,.xp-boot .ink,.xp-stream .ink{fill:var(--xp-ink,#172f37)}
.xp-mark .acc,.xp-svg .acc,.xp-flow .acc,.xp-boot .acc,.xp-stream .acc{fill:var(--xp-acc,#087f7c)}

/* =====================================================================
   LOGIN
   ===================================================================== */
.xp-login{--xp-ink:#e8ffff;--xp-acc:var(--mint)}
/* plane cursor: login screen only */
.xp-login,.xp-login *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='-33 -33 99 99'%3E%3Cg transform='rotate(-45)'%3E%3Cpath d='M0 -40 L7 -7 L59 22 L58 31 L8 12 L6 45 L21 58 L20 64 L0 55 L-20 64 L-21 58 L-6 45 L-8 12 L-58 31 L-59 22 L-7 -7 Z' fill='%2371dcce' stroke='%2306222a' stroke-width='6' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") 2 2,auto}
.xp-login a,.xp-login button,.xp-login a *,.xp-login button *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='-33 -33 99 99'%3E%3Cg transform='rotate(-45)'%3E%3Cpath d='M0 -40 L7 -7 L59 22 L58 31 L8 12 L6 45 L21 58 L20 64 L0 55 L-20 64 L-21 58 L-6 45 L-8 12 L-58 31 L-59 22 L-7 -7 Z' fill='%23e8ffff' stroke='%2306222a' stroke-width='6' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") 2 2,pointer}
.xp-login input{cursor:text}

/* entrance sequence: hidden until the first planes take off; auto-shows after 8s if JS fails */
.xp-login .seq{opacity:0;transform:translateY(10px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1);animation:xp-seq-fallback 0s 8s forwards}
.xp-login .seq.show{opacity:1;transform:none;animation:none}
@keyframes xp-seq-fallback{to{opacity:1;transform:none}}

/* brand panel scene */
.xp-login .brand-panel{isolation:isolate}
.xp-login .flight-art{display:none}
.xp-login .brand-copy{margin-top:clamp(36px,7vh,80px)}
.xp-login .brand-footer{padding-top:0}
.xp-bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.xp-floor{position:absolute;left:0;right:0;bottom:0;height:46%;perspective:380px;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(to top,#000 0%,#000 25%,transparent 100%);mask-image:linear-gradient(to top,#000 0%,#000 25%,transparent 100%)}
.xp-floor i{position:absolute;left:-60%;right:-60%;top:-120%;bottom:0;transform:rotateX(74deg);transform-origin:50% 100%;background-image:linear-gradient(rgba(113,220,206,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(113,220,206,.16) 1px,transparent 1px);background-size:64px 64px;animation:xp-floor 3.2s linear infinite}
@keyframes xp-floor{to{background-position:0 64px}}
.xp-horizon{position:absolute;left:0;right:0;bottom:46%;height:1px;background:linear-gradient(90deg,transparent,rgba(113,220,206,.45),transparent);box-shadow:0 0 18px rgba(113,220,206,.35);pointer-events:none}
.xp-scan{position:absolute;left:0;right:0;top:-140px;height:140px;background:linear-gradient(transparent,rgba(113,220,206,.05),transparent);animation:xp-scan 8s linear infinite;pointer-events:none}
@keyframes xp-scan{to{top:100%}}
.xp-corner{position:absolute;width:22px;height:22px;border:1px solid rgba(113,220,206,.45);pointer-events:none}
.xp-corner.c1{top:20px;left:20px;border-right:0;border-bottom:0}.xp-corner.c2{top:20px;right:20px;border-left:0;border-bottom:0}
.xp-corner.c3{bottom:20px;left:20px;border-right:0;border-top:0}.xp-corner.c4{bottom:20px;right:20px;border-left:0;border-top:0}

.xp-flow-art{position:absolute;left:clamp(70px,10%,110px);bottom:clamp(90px,15vh,140px);width:max(180px,min(24vw,34vh,300px));aspect-ratio:1;z-index:1}
.xp-flow{position:absolute;inset:0}
.xp-flow svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 14px rgba(113,220,206,.35))}
.xp-radar{position:absolute;inset:-14%;border-radius:50%;pointer-events:none}
.xp-radar .sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(113,220,206,0) 0deg,rgba(113,220,206,0) 300deg,rgba(113,220,206,.16) 358deg,rgba(113,220,206,.5) 360deg);animation:xp-spin 4.5s linear infinite;-webkit-mask-image:radial-gradient(circle,transparent 30%,#000 31%);mask-image:radial-gradient(circle,transparent 30%,#000 31%)}
.xp-radar svg{position:absolute;inset:0;width:100%;height:100%;animation:xp-spin 40s linear infinite reverse}
@keyframes xp-spin{to{transform:rotate(360deg)}}

/* logo engine: intro assembly, then live flow */
.xp-flow .px{transform-box:fill-box;transform-origin:center;animation:xp-gather 1.6s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s)}
.xp-flow .core{transform-box:fill-box;transform-origin:center;animation:xp-pop .5s 1.3s cubic-bezier(.3,1.6,.5,1) both}
.xp-flow .out{transform-box:fill-box;transform-origin:center;animation:xp-rise .35s ease-out both;animation-delay:calc(1.6s + var(--d,0s))}
.xp-flow .ins{transition:opacity 1.2s ease}
.xp-flow .live .ins{opacity:.32}
.xp-flow .ring,.xp-flow .corewrap{transform-box:fill-box;transform-origin:center}
@keyframes xp-gather{from{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}to{transform:none}}
@keyframes xp-pop{from{transform:scale(0);opacity:0}to{transform:none}}
@keyframes xp-rise{from{transform:translate(-8px,8px) scale(.4);opacity:0}to{transform:none}}

/* HUD + terminal (illustrative) */
.xp-hud,.xp-term{position:absolute;z-index:2;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;color:#9fd9d1}
.xp-hud{top:46px;right:48px;display:flex;gap:6px;align-items:center;font-size:10px;letter-spacing:1.2px}
.xp-hud span{padding:5px 8px;border:1px solid rgba(113,220,206,.25);border-radius:4px;background:rgba(9,39,48,.6);color:#7fb3ae;animation:xp-step 4s infinite}
.xp-hud span:nth-of-type(2){animation-delay:.8s}.xp-hud span:nth-of-type(3){animation-delay:1.6s}.xp-hud span:nth-of-type(4){animation-delay:2.4s}.xp-hud span:nth-of-type(5){animation-delay:3.2s}
.xp-hud b{color:rgba(113,220,206,.5);font-weight:400}
@keyframes xp-step{0%,100%{color:#7fb3ae;border-color:rgba(113,220,206,.25);box-shadow:none}8%,22%{color:#e8ffff;background:rgba(113,220,206,.28);border-color:var(--mint);box-shadow:0 0 16px rgba(113,220,206,.45)}30%{color:#7fb3ae;background:rgba(9,39,48,.6)}}
.xp-term{right:48px;bottom:70px;width:300px;font-size:11px;line-height:1.75;padding:12px 14px;border:1px solid rgba(113,220,206,.2);border-radius:8px;background:rgba(7,31,37,.55);backdrop-filter:blur(4px)}
.xp-term .hd{display:flex;gap:6px;align-items:center;margin-bottom:6px;color:#5f9690;font-size:10px;letter-spacing:1px}
.xp-term .hd i{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint);animation:xp-blinkdot 1.6s infinite}
.xp-term .ln{white-space:pre;overflow:hidden}
.xp-term .ok{color:var(--mint)}
.xp-term .cur{display:inline-block;width:7px;height:12px;background:var(--mint);vertical-align:-2px;animation:xp-blinkdot 1s steps(1) infinite}
@keyframes xp-blinkdot{50%{opacity:.3}}


/* ---- modo leve (PC fraco, automático) e pausa por inatividade ---- */
.xp-login.xp-lite .xp-bg,.xp-login.xp-lite .xp-scan{display:none}
.xp-login.xp-lite .xp-floor i{animation:none}
.xp-login.xp-lite .xp-radar .sweep{animation-duration:9s}
.xp-login.xp-lite .xp-flow svg{filter:none}
.xp-login.xp-lite .login-content{backdrop-filter:none;background:linear-gradient(180deg,#143840,#0f2f37)}
.xp-login.xp-lite .xp-term{backdrop-filter:none;background:#0b2a31}
.xp-login.xp-lite .login-submit:after{animation:none}
.xp-login.xp-idle .brand-panel *,.xp-login.xp-idle .brand-panel *:before,.xp-login.xp-idle .brand-panel *:after,.xp-login.xp-idle .login-submit:after{animation-play-state:paused!important}

/* login panel: dark glass card integrated with the scene */
.xp-login .login-panel{position:relative;overflow:hidden;color:#e8ffff;border-left:1px solid rgba(113,220,206,.12);background:radial-gradient(ellipse at 75% 15%,rgba(113,220,206,.09),transparent 55%),radial-gradient(ellipse at 20% 95%,rgba(8,127,124,.18),transparent 60%),linear-gradient(160deg,#0e2d35,#0a232a)}
.xp-login .login-panel:before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:60px 60px}
.xp-login .login-panel>*{position:relative}
.xp-login .preview-label{color:#5f8a8d}.xp-login .preview-label span{background:var(--mint);box-shadow:0 0 8px var(--mint)}
.xp-login .small-symbol{display:none}
.xp-login .login-content{max-width:430px;padding:40px 40px 34px;border-radius:18px;border:1px solid rgba(113,220,206,.16);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));backdrop-filter:blur(12px);box-shadow:0 40px 90px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)}
.xp-login .login-content:before,.xp-login .login-content:after{content:'';position:absolute;width:18px;height:18px;border:1.5px solid var(--mint);opacity:.7;pointer-events:none}
.xp-login .login-content:before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-top-left-radius:18px}
.xp-login .login-content:after{bottom:-1px;right:-1px;border-left:0;border-top:0;border-bottom-right-radius:18px}
.xp-login .login-content .eyebrow{color:var(--mint)}
.xp-login .login-content h2{color:#f2fffd;font-size:30px}
.xp-login .login-content>.muted{color:#8fb3b4}
.xp-login .login-form{margin-top:28px}
.xp-login .login-form label{color:#b9d3d2;font-weight:500}
.xp-login .login-form input{background:rgba(4,24,30,.55);border:1px solid rgba(113,220,206,.18);color:#e8ffff;height:48px;border-radius:9px;transition:border-color .2s,box-shadow .2s,background .2s}
.xp-login .login-form input::placeholder{color:#62888b}
.xp-login .login-form input:focus{border-color:var(--mint);background:rgba(4,24,30,.8);box-shadow:0 0 0 3px rgba(113,220,206,.14),0 0 22px rgba(113,220,206,.12)}
.xp-login .login-form input:-webkit-autofill{-webkit-text-fill-color:#e8ffff;box-shadow:0 0 0 40px #0b2830 inset}
.xp-login .text-button{color:var(--mint)}
.xp-login .password-wrap button{color:#8fb3b4;height:48px}
.xp-login .password-wrap button:hover{color:var(--mint)}
.xp-login .login-submit{position:relative;overflow:hidden;height:50px;border-radius:9px;background:linear-gradient(90deg,#087f7c,#0b9a93);border:1px solid rgba(113,220,206,.45);box-shadow:0 10px 28px rgba(8,127,124,.35),inset 0 1px 0 rgba(255,255,255,.15);letter-spacing:.2px}
.xp-login .login-submit:hover{background:linear-gradient(90deg,#0a8d89,#0eaaa2);box-shadow:0 12px 34px rgba(8,127,124,.5),0 0 0 3px rgba(113,220,206,.12)}
.xp-login .login-submit:after{content:'';position:absolute;top:0;bottom:0;width:60px;left:-80px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:skewX(-20deg);animation:xp-shine 5s 4s infinite}
@keyframes xp-shine{0%{left:-80px}25%,100%{left:110%}}
.xp-login .login-submit .xp-svg{--xp-ink:#fff;--xp-acc:var(--mint)}
.xp-login .form-note,.xp-login .preview-note{color:#6f9598}
.xp-login .login-help{border-top-color:rgba(113,220,206,.12)}
.xp-login .help-icon{border-color:rgba(113,220,206,.3);color:var(--mint)}
.xp-login .login-help strong{color:#dcefed}.xp-login .login-help p{color:#7fa3a5}
.xp-login .legacy-link{color:var(--mint)}
.xp-login .login-footer{color:#55807f}
.xp-login .alert{background:rgba(113,220,206,.1);color:#cfe9e6;border:1px solid rgba(113,220,206,.2)}
.xp-login .alert.danger{background:rgba(255,120,90,.12);color:#ffc2b3;border-color:rgba(255,120,90,.3)}
.xp-login .profile-success{color:var(--mint)}
@media (max-height:800px){.xp-login .login-panel{padding-top:24px;padding-bottom:16px}.xp-login .login-content{padding:26px 32px 22px}.xp-login .login-content h2{font-size:26px;margin-bottom:6px}.xp-login .login-form{margin-top:18px}.xp-login .login-form>input{margin-bottom:14px}.xp-login .login-form input,.xp-login .password-wrap button{height:44px}.xp-login .login-submit{margin-top:18px;height:46px}.xp-login .form-note{margin-top:10px}.xp-login .login-help{margin-top:16px;padding-top:16px}.xp-login .preview-note{margin-top:12px}}
@media (max-width:1250px){.xp-term{display:none}.xp-hud{right:24px;font-size:9px}}
@media (max-width:1050px){.xp-hud{display:none}}
@media (max-width:760px){.xp-flow-art,.xp-floor,.xp-horizon,.xp-scan,.xp-corner,.xp-bg{display:none}.xp-login .login-content{padding:24px 20px}}

/* Static sidebar and login submit indicator only in stage 1. */
.xp-side-brand{display:flex;align-items:center;gap:11px;margin-bottom:58px}
.xp-side-brand .xp-mark{width:34px;height:34px;flex:none}
/* pixel loader inside busy buttons */
.xp-svg.loader{vertical-align:middle;margin-left:10px}
.xp-svg .l{animation:xp-blink 1.3s ease-in-out infinite}
.xp-svg .l:nth-child(2){animation-delay:.13s}.xp-svg .l:nth-child(3){animation-delay:.26s}.xp-svg .l:nth-child(4){animation-delay:.39s}.xp-svg .l:nth-child(5){animation-delay:.52s}.xp-svg .l:nth-child(6){animation-delay:.65s}
.button.primary .xp-svg,.primary .xp-svg{--xp-ink:#fff;--xp-acc:var(--mint)}
@keyframes xp-blink{0%,100%{opacity:.22}30%{opacity:1}60%{opacity:.22}}

@media(prefers-reduced-motion:reduce){.xp-login *{animation:none!important;transition:none!important}.xp-login .seq{opacity:1;transform:none}}

/* Stage 1: static authenticated sidebar; login fits short desktop screens. */
.xp-side-brand .xp-mark img{display:block;width:100%;height:100%}
.xp-side-brand small{white-space:normal;overflow-wrap:anywhere;line-height:1.4}
@media(min-width:761px){.xp-login .brand-panel{min-height:100svh}}
@media(max-width:760px){.xp-login .seq{opacity:1;transform:none;animation:none;transition:none}}

.xp-stream .ghost{opacity:.22}
.xp-stream .p{transform-box:view-box;animation:var(--k) 2.4s linear infinite;animation-delay:var(--d)}
.xp-stream .p.fast{animation-duration:.8s;animation-timing-function:cubic-bezier(.6,0,.9,.3)}
.xp-stream .core{transform-box:fill-box;transform-origin:center;animation:xp-beat .8s ease-out infinite}
@keyframes xp-tl{0%{transform:translate(8px,8px) scale(.35);opacity:0}20%{opacity:1}100%{transform:translate(50px,50px) scale(1);opacity:.9}}
@keyframes xp-bl{0%{transform:translate(8px,92px) scale(.35);opacity:0}20%{opacity:1}100%{transform:translate(50px,50px) scale(1);opacity:.9}}
@keyframes xp-br{0%{transform:translate(92px,92px) scale(.35);opacity:0}20%{opacity:1}100%{transform:translate(50px,50px) scale(1);opacity:.9}}
@keyframes xp-up{0%{transform:translate(50px,50px) scale(.7);opacity:0}8%{opacity:1}80%{opacity:1}100%{transform:translate(96px,4px) scale(1.15);opacity:0}}
@keyframes xp-beat{0%{transform:scale(1.18)}60%,100%{transform:scale(1)}}


/* sidebar: rests (static full mark) after 10s, wakes on hover */
.xp-stream .ghost{transition:opacity .4s}
.xp-stream.xp-rest .ghost{opacity:1}
.xp-stream.xp-rest .p{visibility:hidden;animation-play-state:paused}
.xp-stream.xp-rest .core{animation-play-state:paused}

/* post-login intro (once per login) */
.xp-boot{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 60%,#17414c 0%,#0e2d35 45%,#092730 100%);color:#e8ffff;--xp-ink:#e8ffff;--xp-acc:var(--mint);transition:opacity .6s ease,transform .6s ease,filter .6s ease}
.xp-boot.out{opacity:0;transform:scale(1.04);filter:blur(4px);pointer-events:none}
.xp-boot:after{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:60px 60px}
.xp-boot .stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;z-index:1}
.xp-boot svg{width:120px;height:120px;overflow:visible;filter:drop-shadow(0 0 16px rgba(113,220,206,.4))}
.xp-boot .px{transform-box:fill-box;transform-origin:center;animation:xp-gather 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s)}
.xp-boot .core{transform-box:fill-box;transform-origin:center;animation:xp-pop .4s .8s cubic-bezier(.3,1.6,.5,1) both}
.xp-boot .out{transform-box:fill-box;transform-origin:center;animation:xp-rise .28s ease-out both;animation-delay:calc(1.05s + var(--d,0s))}
.xp-boot .hello{font-size:22px;font-weight:500;letter-spacing:-.4px;opacity:0;animation:xp-fadeup .6s 1.2s ease both}
.xp-boot .hello b{color:var(--mint);font-weight:600}
.xp-boot .sub{font:11px ui-monospace,Consolas,monospace;letter-spacing:1.5px;color:#7fb3ae;opacity:0;animation:xp-fadeup .6s 1.45s ease both}
.xp-boot .skip{position:absolute;bottom:26px;right:30px;border:0;background:none;color:#5f8a8d;font-size:11px;z-index:1}
@keyframes xp-fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* "airborne": plane takes off after a send + toast */
.xp-flyer{position:fixed;z-index:950;width:26px;height:26px;pointer-events:none;filter:drop-shadow(0 0 6px rgba(113,220,206,.6))}
.xp-trail{position:fixed;z-index:949;width:4px;height:4px;border-radius:1px;background:var(--mint);pointer-events:none}
.xp-toast{position:fixed;right:24px;bottom:24px;z-index:960;display:flex;gap:12px;align-items:center;background:#112f37;color:#e8ffff;border:1px solid rgba(113,220,206,.25);border-radius:10px;padding:13px 16px;font-size:12px;box-shadow:0 18px 50px #0a1f2555;transform:translateY(20px);opacity:0;transition:.35s cubic-bezier(.2,.8,.2,1)}
.xp-toast.show{transform:none;opacity:1}
.xp-toast small{display:block;color:#8fb3b4;font-size:10px;margin-top:2px}
.xp-toast svg{width:20px;height:20px;flex:none}

/* Fitting the base company name; original wordmark has width:max-content. */
.sidebar{padding-top:20px}.sidebar .xp-side-brand{width:100%;gap:7px;align-items:center;flex-direction:column;margin-bottom:45px}.xp-brand-row{display:flex;align-items:center;justify-content:center;gap:8px}
.sidebar .xp-side-brand .wordmark{width:auto;min-width:0;flex:1;font-size:27px;margin:0;line-height:1.15}
.sidebar .xp-side-brand>small{font-size:8px;letter-spacing:.7px;line-height:1.55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;width:100%;text-align:center;color:#91b5b8}
.xp-mark img{display:block}.xp-mark.xp-has-stream img{display:none}
.xp-side-brand .xp-mark svg{width:100%;height:100%;overflow:visible;--xp-ink:#e8ffff;--xp-acc:var(--mint)}
.xp-boot{--xp-ink:#e8ffff;--xp-acc:var(--mint)}
.xp-boot.out{transition:opacity .3s ease,transform .3s ease,filter .3s ease}
.xp-boot .skip{color:#b9d3d2;padding:10px 16px;cursor:pointer}
.xp-progress{position:fixed;inset:0 0 auto;height:3px;z-index:1100;pointer-events:none;background:#71dcce44}
.xp-progress[hidden]{display:none}
.xp-progress i{display:block;width:35%;height:100%;background:var(--mint);animation:xp-indeterminate 1.2s ease-in-out infinite}
@keyframes xp-indeterminate{from{transform:translateX(-100%)}to{transform:translateX(385%)}}
.xp-motion-paused .xp-stream *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.xp-stream *,.xp-progress *{animation:none!important;transition:none!important}.xp-boot,.xp-flyer,.xp-trail{display:none}.xp-progress i{width:100%}}

/* Initial markup covers the workspace before deferred scripts execute. */
.xp-boot{animation:xp-boot-failsafe 1ms 6s forwards}
.xp-boot .stage>img{width:120px;height:120px}
.xp-flyer{z-index:980}.xp-trail{z-index:979}
@keyframes xp-boot-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}