/* SX Agency CRM | V6 left-login larger, behind-copy optical sphere refinement.
   Strictly scoped to .auth-art. No auth/right-panel/CRM logic changes.
   One stationary, translucent rendered-glass sphere; mobile performance fallback. */
.auth-page:has(#login-form) .auth-art {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-right: 1px solid rgba(190,199,212,.19);
  background:
    radial-gradient(ellipse 71% 67% at 59% 53%,rgba(112,131,155,.12),transparent 78%),
    radial-gradient(ellipse 72% 55% at 55% 6%,rgba(48,56,67,.15),transparent 89%),
    linear-gradient(133deg,#12151c 0%,#090b10 49%,#08090d 100%) !important;
}
/* Exactly ONE sphere: real transparent WebP glass material, not CSS fake circle.
   Clipped within the LEFT panel and entirely decorative. */
.auth-page:has(#login-form) .auth-art::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  width: clamp(590px, 47vw, 810px);
  aspect-ratio: 1;
  right: -3%;
  top: 52%;
  background: url('assets/sx-login-smoked-glass-orb.webp') center / contain no-repeat;
  opacity: .92;
  transform: translateY(-50%);
  transform-origin: center;
  animation: sxSphereReflection 21s ease-in-out infinite alternate;
  will-change: opacity;
}
.auth-page:has(#login-form) .auth-art::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(7,9,13,.76) 0%,rgba(7,9,13,.48) 28%,rgba(7,9,13,.19) 53%,transparent 83%),
    radial-gradient(ellipse 42% 50% at 82% 50%,rgba(173,187,205,.055),transparent 100%),
    linear-gradient(0deg,rgba(4,6,9,.28),transparent 29%);
}
.auth-page:has(#login-form) .auth-art > * {position:relative;z-index:2}
.auth-page:has(#login-form) .auth-art .bigbrand {
  color:#f4f5f7;
  font-weight:810;
  letter-spacing:-.07em;
}
.auth-page:has(#login-form) .auth-art > div:nth-child(2) {
  width:100%;max-width:650px;padding:20px 0;
}
.auth-page:has(#login-form) .auth-art > div:nth-child(2) .eyebrow {
  font-size:10px;letter-spacing:.24em;color:#a9b0ba;margin-bottom:22px;
}
.auth-page:has(#login-form) .auth-art h1 {
  position:relative;
  max-width:630px;
  font-size:clamp(45px,5vw,80px);
  line-height:1.045;
  letter-spacing:-.056em;
  font-weight:680;
  color:#f4f5f7;
  text-wrap:balance;
  text-shadow:0 2px 21px rgba(4,6,9,.46);
}
.auth-page:has(#login-form) .auth-art p {
  max-width:400px;
  margin-top:25px;
  font-size:14px;
  line-height:1.76;
  color:#b5bbc5;
  text-shadow:0 1px 10px rgba(1,2,4,.45);
}
/* Editorial workflow detail, CSS generated text only (not interactive). */
.auth-page:has(#login-form) .auth-art > div:nth-child(2):has(h1)::after {
  content:"DISCOVER   →   AUTOMATE   →   SCALE";
  display:block;
  margin-top:35px;
  padding-top:20px;
  width:max-content;
  max-width:100%;
  border-top:1px solid rgba(180,188,200,.32);
  color:#aab2bd;
  font-size:10.5px;
  font-weight:550;
  letter-spacing:.095em;
  line-height:1.8;
  white-space:pre-wrap;
  animation:sxSignatureArrive .75s ease-out both;
}
.auth-page:has(#login-form) .auth-art > span.eyebrow:last-child {
  color:#9ca5b1;
  font-size:10px;
  font-weight:680;
  letter-spacing:.22em;
  padding-top:18px;
  border-top:1px solid rgba(172,182,196,.23);
  width:max-content;max-width:100%;
  line-height:1.7;
}
/* The sphere NEVER translates/rotates: only a slow 21s change in reflected light. */
@keyframes sxSphereReflection {
  from {opacity:.89;filter:brightness(.96)}
  to   {opacity:.96;filter:brightness(1.045)}
}
@keyframes sxSignatureArrive {
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}
@media (min-width:771px) and (max-width:1200px) {
  .auth-page:has(#login-form) .auth-art{padding:clamp(28px,3vw,46px)}
  .auth-page:has(#login-form) .auth-art::before{width:clamp(490px,63vw,680px);right:-15%;top:52%;opacity:.83}
  .auth-page:has(#login-form) .auth-art h1{font-size:clamp(42px,4.8vw,65px)}
  .auth-page:has(#login-form) .auth-art p{max-width:335px;font-size:13px}
}
@media (max-width:770px) {
  .auth-page:has(#login-form) .auth-art {
    min-height:260px;
    padding:25px 27px;
    background:linear-gradient(145deg,#12151c,#08090d 88%) !important;
  }
  .auth-page:has(#login-form) .auth-art::before{width:370px;right:-110px;top:53%;opacity:.22}
  .auth-page:has(#login-form) .auth-art::after{background:linear-gradient(90deg,rgba(7,9,13,.44),transparent 70%)}
  .auth-page:has(#login-form) .auth-art > div:nth-child(2){padding:15px 0 5px}
  .auth-page:has(#login-form) .auth-art .bigbrand{font-size:25px}
  .auth-page:has(#login-form) .auth-art > div:nth-child(2) .eyebrow{font-size:9px;letter-spacing:.17em;margin-bottom:11px}
  .auth-page:has(#login-form) .auth-art h1{font-size:clamp(32px,7vw,45px);max-width:450px;letter-spacing:-.05em}
  .auth-page:has(#login-form) .auth-art p{font-size:12px;line-height:1.58;max-width:420px;margin-top:13px}
  .auth-page:has(#login-form) .auth-art > div:nth-child(2):has(h1)::after{margin-top:15px;padding-top:12px;font-size:9.4px}
  .auth-page:has(#login-form) .auth-art > span.eyebrow:last-child{font-size:9px;letter-spacing:.12em;padding-top:10px}
}
@media (max-width:425px) {
  .auth-page:has(#login-form) .auth-art{padding:22px;min-height:267px}
  .auth-page:has(#login-form) .auth-art::before{display:none}
  .auth-page:has(#login-form) .auth-art h1{font-size:34px}
  .auth-page:has(#login-form) .auth-art p{font-size:11.5px}
  .auth-page:has(#login-form) .auth-art > span.eyebrow:last-child{font-size:8px}
}
@media (prefers-reduced-motion: reduce) {
  .auth-page:has(#login-form) .auth-art::before,
  .auth-page:has(#login-form) .auth-art > div:nth-child(2)::after {animation:none!important;transition:none!important}
}
@media (prefers-reduced-transparency: reduce) {
  .auth-page:has(#login-form) .auth-art::before{opacity:.20}
}