/* Compolis Obsidian Motion — animated password login based on reference video.
   Pure CSS + SVG art; no third-party scripts, no OTP fields or code-based login. */
body.motion-auth{
  --motion-accent:#ad71ff;
  --motion-ink:#0a101d;
  --motion-line:rgba(180,168,219,.34);
  min-height:100svh;
  overflow-x:hidden;
  color:#f1eff9;
  background:#070b14;
  isolation:isolate;
}
.motion-auth .cinematic-scene{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(ellipse 60% 48% at 53% 50%,rgba(14,22,39,.72),transparent 79%),
    radial-gradient(ellipse 55% 80% at 100% 10%,rgba(41,32,80,.24),transparent 75%),
    radial-gradient(ellipse 40% 68% at 0 93%,rgba(28,37,73,.24),transparent 78%),
    #070a12;
}
.motion-auth .scene-ribbons{
  position:absolute;
  inset:-10%;
  height:120%;
  width:120%;
  opacity:.89;
  animation:scene-arrival 1600ms cubic-bezier(.2,.7,.18,1) both;
  will-change:transform;
}
.motion-auth .ribbon-set-left{transform-origin:20% 80%;animation:ribbon-left 24s ease-in-out infinite alternate}
.motion-auth .ribbon-set-right{transform-origin:80% 22%;animation:ribbon-right 22s ease-in-out infinite alternate}
.motion-auth .scene-noise{
  position:absolute;inset:0;opacity:.20;
  background-image:repeating-linear-gradient(110deg,transparent 0,transparent 11px,rgba(164,140,246,.018) 12px,transparent 13px);
}
.motion-auth .scene-aura{position:absolute;border-radius:50%;filter:blur(50px);opacity:.34;mix-blend-mode:screen}
.motion-auth .scene-aura-left{left:-17vw;bottom:0;width:43vw;height:37vw;background:radial-gradient(circle,#7468ba 0,transparent 62%);animation:glow-drift 18s ease-in-out infinite alternate}
.motion-auth .scene-aura-right{right:-13vw;top:7vh;width:47vw;height:35vw;background:radial-gradient(circle,#443e94 0,transparent 64%);animation:glow-drift 23s ease-in-out infinite alternate-reverse}
.motion-auth .scene-grain{position:absolute;inset:0;opacity:.17;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(255,255,255,.012) 4px);mix-blend-mode:soft-light}
.motion-auth .scene-vignette{position:absolute;inset:0;background:radial-gradient(ellipse 60% 63% at 50% 49%,transparent 34%,rgba(4,6,12,.25) 90%,rgba(3,5,12,.57) 100%)}
.motion-auth .brand-header{
  position:relative;z-index:2;height:77px;padding:0 clamp(18px,4vw,72px);
  border-bottom:1px solid rgba(147,137,180,.16);
  background:linear-gradient(to bottom,rgba(5,8,15,.61),rgba(8,11,20,.18));
  backdrop-filter:blur(9px);
}
.motion-auth .brand-header .brand{
  font-size:25px;
  font-weight:610;
  letter-spacing:-1.06px;
  text-shadow:0 1px 20px #9b77ff14;
}
.motion-auth .brand-header-right{
  display:flex;align-items:center;gap:10px;
  color:#a2abc1;font-size:11px;letter-spacing:.035em;white-space:nowrap;
}
.motion-auth .header-dot{height:6px;width:6px;border-radius:50%;background:#ae87ef;box-shadow:0 0 12px #af82f0;animation:status-glow 3.6s ease-in-out infinite}
.motion-auth .header-rule{height:15px;width:1px;background:#7a759466;margin:0 8px}
.motion-auth .header-version{font-size:10px;color:#6f7e99;letter-spacing:.14em}
.motion-auth .auth-layout{
  position:relative;z-index:1;
  width:100%;max-width:unset;min-height:calc(100svh - 77px);
  margin:0; padding:50px 18px 28px;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:21px;
}
.motion-auth .motion-frame{
  position:relative;width:min(100%,502px);
  padding:15px;
  flex:none;
  transform-style:preserve-3d;
  animation:panel-arrive 850ms cubic-bezier(.22,1,.36,1) both;
}
.motion-auth .motion-frame::before{
  content:"";position:absolute;inset:15px;
  clip-path:polygon(0 24px,24px 0,calc(100% - 24px) 0,100% 24px,100% calc(100% - 24px),calc(100% - 24px) 100%,24px 100%,0 calc(100% - 24px));
  background:linear-gradient(150deg,rgba(193,185,240,.52),rgba(94,116,150,.21) 25%,rgba(99,89,148,.3) 64%,rgba(178,154,233,.46));
  box-shadow:0 0 25px #6b48ba33;
}
.motion-auth .motion-frame::after{
  content:"";position:absolute;inset:0;border-radius:31px;
  background:radial-gradient(ellipse 65% 55% at 50% 59%,#8971da42,transparent 78%);
  z-index:-1;filter:blur(25px);pointer-events:none;animation:ambient-breath 7s ease-in-out infinite alternate;
}
.motion-auth .frame-corner{
  position:absolute;display:block;z-index:0;
  width:40px;height:40px;
  border:1px solid rgba(148,142,204,.49);
  background:linear-gradient(145deg,rgba(53,68,100,.47),rgba(24,31,53,.12));
  clip-path:polygon(0 20px,20px 0,100% 0,100% 100%,0 100%);
  backdrop-filter:blur(13px);
}
.motion-auth .frame-corner-top{top:-4px;left:0;transform:translate(-6px,3px)}
.motion-auth .frame-corner-bottom{right:0;bottom:-4px;transform:rotate(180deg) translate(-6px,3px)}
.motion-auth .auth-card{
  position:relative;
  margin:0;
  padding:42px clamp(27px,4vw,49px) 30px;
  width:100%;
  border:0;
  border-radius:0;
  overflow:hidden;
  clip-path:polygon(0 24px,24px 0,calc(100% - 24px) 0,100% 24px,100% calc(100% - 24px),calc(100% - 24px) 100%,24px 100%,0 calc(100% - 24px));
  background:
    linear-gradient(150deg,rgba(39,53,75,.78) 0,rgba(14,22,39,.88) 23%,rgba(12,18,34,.94) 66%,rgba(27,30,56,.85)),
    rgba(14,18,30,.87);
  box-shadow:none;
  backdrop-filter:blur(28px) saturate(120%);
}
.motion-auth .auth-card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(128deg,rgba(205,204,238,.17),transparent 30%,rgba(184,154,232,.025) 60%,rgba(139,139,220,.12));
  pointer-events:none;z-index:0;
}
.motion-auth .auth-card::after{
  content:"";position:absolute;inset:0;
  border:1px solid rgba(197,184,227,.19);
  clip-path:inherit;pointer-events:none;
}
.motion-auth .glass-glint{
  position:absolute;top:-150px;left:-180px;width:130px;height:660px;
  transform:rotate(37deg) translateX(0);
  background:linear-gradient(90deg,transparent,rgba(222,220,255,.085),transparent);
  opacity:0;pointer-events:none;z-index:0;
  animation:glass-pass 12s ease-in-out 1.4s infinite;
}
.motion-auth .auth-main{position:relative;z-index:1;transition:opacity .26s,filter .35s,transform .35s}
.motion-auth .auth-crest{
  width:54px;height:54px;margin:0 auto 19px;
  display:grid;place-items:center;
  background:radial-gradient(circle at 40% 20%,rgba(175,133,244,.22),rgba(55,43,90,.15));
  border:1px solid rgba(179,144,237,.33);
  border-radius:13px;transform:none;
  color:#c49cff;
  box-shadow:0 0 28px #a879ed12,inset 0 0 19px #8c60d220;
  animation:crest-breath 4.5s ease-in-out infinite;
}
.motion-auth .eyebrow{
  display:flex;justify-content:center;align-items:center;gap:10px;
  margin:0;color:#a2a2bf;letter-spacing:.19em;font-weight:600;font-size:9px;
}
.motion-auth .eyebrow-index{color:#c59dfd}
.motion-auth .eyebrow-divider{width:1px;height:11px;background:#666781}
.motion-auth .auth-card h1{
  font-size:29px;letter-spacing:-.85px;
  font-weight:610;text-align:center;
  margin:14px 0 9px;
  text-wrap:balance;
}
.motion-auth .auth-card .intro{
  font-size:12px;line-height:1.75;
  color:#9ca6bf;text-align:center;
  max-width:310px;margin:0 auto 28px;
}
.motion-auth .auth-form{gap:18px}
.motion-auth .field{gap:9px}
.motion-auth .field>span:not(.input-shell){font-size:11px;color:#bdc5d8;font-weight:500;letter-spacing:.025em}
.motion-auth .input-shell{
  position:relative;display:flex;align-items:center;gap:10px;
  height:49px;width:100%;
  border-radius:8px;
  border:1px solid rgba(129,142,177,.31);
  background:linear-gradient(140deg,rgba(15,23,39,.83),rgba(13,20,36,.92));
  box-shadow:inset 0 1px 0 rgba(213,216,253,.04),0 8px 18px #00000009;
  transition:border-color .2s,box-shadow .23s,background .23s,transform .15s;
  padding:0 13px;
}
.motion-auth .input-shell:focus-within{
  border-color:#a989f7;
  box-shadow:0 0 0 3px rgba(155,114,235,.11),0 0 23px rgba(129,82,225,.17),inset 0 1px 0 rgba(222,216,255,.13);
  transform:translateY(-1px);
}
.motion-auth .input-icon{width:18px;height:18px;flex:none;color:#8595b4}
.motion-auth .input-shell:focus-within .input-icon{color:#bf9cef}
.motion-auth .input-shell input{
  height:100%;width:100%;flex:1;min-width:0;
  padding:0;border:0;outline:0;box-shadow:none;
  background:none;color:#f1edfb;
  font-size:13px;letter-spacing:.012em;font-weight:400;
}
.motion-auth .input-shell input:focus{box-shadow:none;border:0}
.motion-auth .input-shell input::placeholder{color:#75839e}
.motion-auth .input-shell input:-webkit-autofill{
  -webkit-text-fill-color:#f1edfb;
  -webkit-box-shadow:0 0 0 60px #101a2a inset;
  transition:background-color 600000s 0s;
}
.motion-auth .reveal-password{
  display:grid;place-items:center;
  border:0;background:transparent;color:#7d8ba6;
  padding:5px;border-radius:6px;line-height:0;flex:none;
}
.motion-auth .reveal-password:hover,.motion-auth .reveal-password:focus-visible{color:#d2b6ff;background:#2b244177}
.motion-auth .keyboard-feedback{font-size:10px;color:#deb98c;margin-top:-11px}
.motion-auth .keyboard-feedback[hidden]{display:none}
.motion-auth .login-submit{
  margin-top:7px;
  height:51px;
  border:1px solid rgba(199,159,255,.45);
  background:linear-gradient(125deg,#8950d4,#7533b4 66%,#6330ac);
  box-shadow:inset 0 1px 0 #d0a7ff33,0 9px 23px rgba(119,62,195,.26);
  color:white;font-size:13px;font-weight:600;letter-spacing:.005em;
  transition:background .18s,box-shadow .2s,transform .2s,border-color .2s;
  position:relative;overflow:hidden;
}
.motion-auth .login-submit::after{
  content:"";position:absolute;inset:-130% -70%;
  background:linear-gradient(90deg,transparent 35%,rgba(255,255,255,.13) 50%,transparent 66%);
  transform:translateX(-145%) rotate(17deg);
  animation:submit-shine 6.8s ease-in-out infinite;
  pointer-events:none;
}
.motion-auth .login-submit:hover{
  background:linear-gradient(125deg,#a46ae8,#843fc9 66%,#7941bf);
  box-shadow:0 12px 33px #844ad338;
  transform:translateY(-1px);
}
.motion-auth .login-submit:active{transform:translateY(1px)}
.motion-auth .login-submit.is-loading .submit-end svg{animation:spin .7s linear infinite}
.motion-auth .login-submit.is-loading::after{animation:none}
.motion-auth .login-submit .submit-end{display:flex;position:relative;z-index:1}
.motion-auth .login-submit #loginSubmitText{position:relative;z-index:1}
.motion-auth .form-error{
  margin-top:-5px;background:#51273988;
  border-color:#b05a77aa;
  color:#ffd2df;font-size:11px;
  backdrop-filter:blur(10px);
}
.motion-auth .auth-switch{
  display:flex;gap:8px;
  margin-top:25px;padding-top:21px;
  border-top:1px solid rgba(148,148,180,.17);
  color:#8993ad;font-size:11px;
}
.motion-auth .auth-switch a{color:#cdaaff;font-weight:600}
.motion-auth .auth-switch a:hover{text-decoration:none;color:#e2c7ff}
.motion-auth .edge-label{
  position:absolute;right:29px;bottom:12px;
  font-size:8px;font-weight:600;letter-spacing:.22em;color:#79708d55;
  pointer-events:none;
}
.motion-auth .access-footer{
  display:flex;justify-content:center;align-items:center;gap:9px;
  flex-wrap:wrap;text-align:center;
  font-size:10px;color:#7f8aa4;letter-spacing:.04em;
  animation:footer-arrive 950ms ease-out 350ms both;
}
.motion-auth .footer-marker{height:6px;width:6px;border:1px solid #a984ef;border-radius:50%;box-shadow:0 0 8px #ad79ff55}
.motion-auth .footer-separator{color:#58647e}

/* Only the register route uses the invitation/code field; the login route never does. */
.motion-auth.is-register .motion-frame{width:min(100%,510px)}
.motion-auth.is-register .auth-card{padding-top:26px;padding-bottom:26px}
.motion-auth.is-register .auth-crest{height:42px;width:42px;margin-bottom:13px}
.motion-auth.is-register .auth-crest svg{width:24px}
.motion-auth.is-register .auth-card h1{font-size:25px;margin-top:10px}
.motion-auth.is-register .auth-card .intro{margin-bottom:18px}
.motion-auth.is-register .auth-form{gap:11px}
.motion-auth.is-register .field{gap:6px}
.motion-auth.is-register .field>input{
  background:#11192a;color:#e9eafa;
  border:1px solid #43506b;border-radius:7px;
  height:40px;padding:0 12px;
}
.motion-auth.is-register .field>input:focus{border-color:#ad85ed;box-shadow:0 0 0 2px #b18df418}
.motion-auth.is-register .auth-switch{margin-top:17px;padding-top:16px}
.motion-auth.is-register .access-footer{padding-bottom:15px}

/* Authentication feedback: only genuine successful password verification triggers success. */
.motion-auth .login-success{
  position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:13px;padding:30px;text-align:center;
  background:linear-gradient(147deg,rgba(21,31,51,.93),rgba(12,19,35,.96));
  animation:success-enter .28s ease-out both;
}
.motion-auth .login-success h2{margin:5px 0 0;font-size:20px;letter-spacing:-.4px;font-weight:600}
.motion-auth .login-success p{margin:0;color:#a6afc9;font-size:12px}
.motion-auth .success-orbit{position:relative;display:grid;place-items:center;width:115px;height:115px;color:#d2b1ff}
.motion-auth .success-orbit::before{content:"";position:absolute;inset:13px;border-radius:50%;border:1px solid #9d86da38;box-shadow:0 0 60px #9362de44}
.motion-auth .success-symbol{width:90px;height:90px;animation:verified-pop .64s cubic-bezier(.2,.9,.2,1.3) both}
.motion-auth .success-symbol path{stroke-dasharray:44;stroke-dashoffset:44;animation:verified-check .48s ease-out .15s forwards}
.motion-auth .success-particle{position:absolute;width:5px;height:5px;background:#ba91ff;border-radius:1.5px;opacity:0;animation:particle-float .85s ease-out .2s both}
.motion-auth .p1{--x:-55px;--y:-44px}.motion-auth .p2{--x:46px;--y:-48px}.motion-auth .p3{--x:-65px;--y:24px}.motion-auth .p4{--x:63px;--y:14px}.motion-auth .p5{--x:-18px;--y:58px}.motion-auth .p6{--x:37px;--y:49px}
.motion-auth .success-progress{height:2px;width:172px;background:#66528255;overflow:hidden;margin-top:14px;border-radius:3px}
.motion-auth .success-progress span{height:100%;width:100%;display:block;background:#b88fff;transform:translateX(-100%);animation:progress-fill .9s ease-out forwards}
.motion-auth .auth-card.is-success .auth-main{opacity:0;filter:blur(7px);transform:scale(.96)}
.motion-auth .auth-card.is-error{animation:card-shake .38s ease-out}
.motion-auth .auth-card.is-error .auth-crest{border-color:#a35b7b;color:#f3a6bd}

/* Spatial motion is intentionally subtle; reduced-motion is fully supported. */
@keyframes panel-arrive{from{opacity:0;transform:translateY(22px) scale(.96);filter:blur(7px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes scene-arrival{from{opacity:0;transform:scale(1.05) translateY(15px)}to{opacity:.89;transform:scale(1) translateY(0)}}
@keyframes ribbon-left{from{transform:translate(-10px,2px) rotate(-1deg)}to{transform:translate(30px,-25px) rotate(1.3deg)}}
@keyframes ribbon-right{from{transform:translate(0,0) rotate(0)}to{transform:translate(-30px,13px) rotate(-1.4deg)}}
@keyframes glow-drift{from{transform:translate(0,0);opacity:.2}to{transform:translate(35px,-25px);opacity:.39}}
@keyframes crest-breath{0%,100%{box-shadow:0 0 25px #a879ed0f,inset 0 0 19px #8c60d220}50%{box-shadow:0 0 37px #a879ed2e,inset 0 0 26px #8c60d22b}}
@keyframes ambient-breath{from{opacity:.32;transform:scale(.98)}to{opacity:.67;transform:scale(1.08)}}
@keyframes glass-pass{0%,72%,100%{opacity:0;transform:translateX(0) rotate(37deg)}76%{opacity:1}92%{opacity:0;transform:translateX(850px) rotate(37deg)}}
@keyframes submit-shine{0%,55%,100%{transform:translateX(-145%) rotate(17deg)}75%{transform:translateX(145%) rotate(17deg)}}
@keyframes status-glow{0%,100%{opacity:.6;box-shadow:0 0 6px #af82f0}50%{opacity:1;box-shadow:0 0 15px #af82f0}}
@keyframes footer-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes success-enter{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:scale(1)}}
@keyframes verified-pop{0%{opacity:0;transform:scale(.65) rotate(-14deg)}65%{opacity:1;transform:scale(1.07) rotate(3deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes verified-check{to{stroke-dashoffset:0}}
@keyframes particle-float{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(.85)}}
@keyframes progress-fill{to{transform:translateX(0)}}
@keyframes card-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-2px)}}

@media(max-height:750px) and (min-width:721px){
 .motion-auth .auth-layout{padding-top:14px;padding-bottom:12px}
 .motion-auth .auth-card{padding-top:27px;padding-bottom:23px}
 .motion-auth .auth-crest{margin-bottom:12px}
 .motion-auth .auth-card .intro{margin-bottom:19px}
 .motion-auth .auth-form{gap:13px}
 .motion-auth .auth-switch{margin-top:15px;padding-top:15px}
}
@media(max-width:720px){
 .motion-auth .brand-header{height:65px;padding:0 18px}
 .motion-auth .brand-header .brand{font-size:22px}
 .motion-auth .brand-header-right{font-size:10px}
 .motion-auth .header-version,.motion-auth .header-rule{display:none}
 .motion-auth .auth-layout{min-height:calc(100svh - 65px);padding:24px 8px 16px}
 .motion-auth .motion-frame{width:min(100%,460px);padding:12px}
 .motion-auth .motion-frame::before{inset:12px}
 .motion-auth .auth-card{padding:38px 31px 27px}
 .motion-auth .auth-card h1{font-size:27px}
 .motion-auth .scene-ribbons{inset:-25%;width:150%;height:150%;opacity:.65}
 .motion-auth .access-footer{font-size:9px;padding:0 16px}
}
@media(max-width:390px){
 .motion-auth .auth-card{padding:33px 24px 23px}
 .motion-auth .auth-crest{height:46px;width:46px}
 .motion-auth .auth-card h1{font-size:25px}
 .motion-auth .field .input-shell{height:46px}
 .motion-auth .login-submit{height:48px}
 .motion-auth .auth-card .intro{font-size:11px;margin-bottom:21px}
}
@media(prefers-reduced-motion:reduce){
 .motion-auth .scene-ribbons,.motion-auth .ribbon-set-left,.motion-auth .ribbon-set-right,
 .motion-auth .scene-aura,.motion-auth .auth-crest,.motion-auth .motion-frame,
 .motion-auth .motion-frame::after,.motion-auth .glass-glint,.motion-auth .login-submit::after,
 .motion-auth .header-dot,.motion-auth .access-footer,.motion-auth .auth-card.is-error,
 .motion-auth .success-symbol,.motion-auth .success-symbol path,.motion-auth .success-particle,
 .motion-auth .success-progress span{animation:none!important;transition:none!important}
 .motion-auth .scene-ribbons{opacity:.74}
 .motion-auth .success-symbol path{stroke-dashoffset:0}
 .motion-auth .success-progress span{transform:none}
}