/* sg-genie.css — StockGenie animated genie (Oct 2026). Layers cut from
   design/genie-logo_v5.png by design/genie-anim/make_genie.py. */
.sg-genie{position:relative;width:100%;aspect-ratio:1254/1254}
.sg-genie.no-word{aspect-ratio:1254/1090}
.sg-genie img{position:absolute;display:block;height:auto;user-select:none;-webkit-user-drag:none}
.sg-genie .g-float,.sg-genie .g-tailwrap{position:absolute;inset:0}
.sg-genie .g-fx{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sg-genie .g-float{animation:sgBob 3.4s ease-in-out infinite}
.sg-genie .g-tailwrap{transform-origin:49.44% 61.40%;animation:sgWag 3.4s ease-in-out infinite}
.sg-genie .g-spark{animation:sgTwinkle 2.4s ease-in-out infinite}
.sg-genie .s2{animation-delay:.8s}.sg-genie .s3{animation-delay:1.5s}
.sg-genie .lid{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);animation:sgLid 5s infinite}
.sg-genie .shut{opacity:0;animation:sgShut 5s infinite}
.sg-genie .glint{transform-box:fill-box;transform-origin:center;opacity:0;animation:sgGlint 3s ease-in-out infinite}
.sg-genie .g1{animation-delay:.6s}.sg-genie .g2{animation-delay:1.3s}.sg-genie .g3{animation-delay:2s}.sg-genie .g4{animation-delay:2.5s}
@keyframes sgBob{50%{transform:translateY(-1.6%)}}
@keyframes sgWag{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
@keyframes sgTwinkle{0%,100%{transform:scale(.82);filter:brightness(1)}50%{transform:scale(1.12);filter:brightness(1.25)}}
@keyframes sgLid{0%,90%,100%{transform:scaleY(0)}93%,95%{transform:scaleY(1)}}
@keyframes sgShut{0%,92%,96.5%,100%{opacity:0}93%,95%{opacity:1}}
@keyframes sgGlint{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
@media (prefers-reduced-motion:reduce){.sg-genie *{animation:none!important}.sg-genie .glint{opacity:.8}}

/* sign-in page (portal.html) */
#loginScreen{gap:56px;flex-wrap:wrap}
#loginScreen .login-genie{width:min(360px,38vw);text-align:center;color:var(--muted,#8a94a8);font-size:13px}
#loginScreen .login-genie p{margin:6px 0 0}
#loginScreen .login-genie b{color:#2cc7bf;font-weight:600}
@media (max-width:860px){
  #loginScreen{flex-direction:column;gap:6px}
  #loginScreen .login-genie{width:190px}
  #loginScreen .login-genie p{display:none}   /* nobody scans their own phone screen */
}
/* website hero */
.hero-split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:40px;align-items:center}
.hero-genie{max-width:400px;justify-self:end;width:100%;text-align:center}
.hero-genie p{margin:4px 0 0;font-size:13px;color:var(--muted,#94a3b8)}
@media (max-width:900px){.hero-split{grid-template-columns:1fr}.hero-genie{justify-self:center;max-width:260px;order:-1}}