/* rmg-account-2026 v1.0.1: signed-out My Account (client login) motion + spacing. Scoped to #rmgad.out.
   Styles/animates existing markup only; the sign-in form (fields, names, action, nonce, redirect) is not changed.
   Reused motion: rmgh-drop + rmgh-pulse + rmgh-floaty + rmgh-wig (rmg-home-2026 1.0.4.3.3), rmgClPulse (rmg-header-client-login 1.0.2.2). */

/* ---------- keyframes (copied from the live plugins, renamed rmgma-*) ---------- */
@keyframes rmgma-drop{0%{opacity:0;transform:translateY(-120px) scale(.4)}60%{opacity:1;transform:translateY(12px) scale(1.1)}100%{opacity:1;transform:none}}
@keyframes rmgma-pop{0%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:none}}
@keyframes rmgma-float{0%,100%{transform:none}50%{transform:translateY(-12px) scale(1.04)}}
@keyframes rmgma-float2{0%,100%{transform:none}50%{transform:translate(8px,-10px) scale(1.06)}}
@keyframes rmgma-dot{50%{transform:scale(1.6);opacity:.5}}
@keyframes rmgma-clpulse{0%{box-shadow:inset 0 0 0 1px #DDE7EE,0 0 0 0 rgba(0,149,217,.45)}70%{box-shadow:inset 0 0 0 1px #DDE7EE,0 0 0 9px rgba(0,149,217,0)}100%{box-shadow:inset 0 0 0 1px #DDE7EE,0 0 0 0 rgba(0,149,217,0)}}
@keyframes rmgma-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes rmgma-wig{25%{transform:rotate(10deg)}75%{transform:rotate(-10deg)}}
@keyframes rmgma-bob{0%,100%{transform:none}50%{transform:translateY(-3px)}}
@keyframes rmgma-flap{0%,70%,100%{transform:none}80%,88%{transform:scaleY(-1)}}
@keyframes rmgma-shackle{0%,70%,100%{transform:none}80%,88%{transform:translateY(-3px)}}

/* ---------- 1. circles: pop in (homepage drop/pop), then float ---------- */
#rmgad.out .rmgad-hero::before{animation:rmgma-drop .9s cubic-bezier(.22,1,.36,1) .1s both,rmgma-float 7s ease-in-out 1.1s infinite}
#rmgad.out .rmgad-hero::after{animation:rmgma-drop .9s cubic-bezier(.22,1,.36,1) .3s both,rmgma-float2 5.5s ease-in-out 1.3s infinite}
#rmgad.out .rmgcp-lgx-steps .n{animation:rmgma-pop .6s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.5s + var(--n,0) * .14s)}
#rmgad.out .rmgcp-lgx-steps li:nth-child(1) .n{--n:1}#rmgad.out .rmgcp-lgx-steps li:nth-child(2) .n{--n:2}
#rmgad.out .rmgcp-lgx-steps li:nth-child(3) .n{--n:3}#rmgad.out .rmgcp-lgx-steps li:nth-child(4) .n{--n:4}
#rmgad.out .rmgcp-lgx-chip i{animation:rmgma-dot 1.6s infinite}

/* ---------- 2. "Sign in to your client portal" -> Email: even gap ---------- */
#rmgad.out .rmgcp-lgx .rmgcp-lgx-h2{margin:0 0 16px}
#rmgad.out .rmgcp-lgx .rmgcp-lgx-logo{margin:0 auto 12px}
#rmgad.out .rmgcp-lgx .rmgcp-lgx-fld{gap:8px;margin-bottom:16px}

/* ---------- 3 + 4. Email / Password icons: bigger, lined up with the label, animated ---------- */
/* the dashboard's generic form card (ring + 22px corners, account.css) drew a stray box through the icons on this form: switched off here, presentation only */
#rmgad.out .rmgcp-lgx form.rmgcp-lgx-form{box-shadow:none;border-radius:0;background:none}
#rmgad.out .rmgcp-lgx .rmgcp-lgx-fld label{display:flex;align-items:center;gap:10px;line-height:1.2;font-size:15.5px;margin:0}
#rmgad.out .rmgcp-lgx .rmgcp-lgx-fld label .rmgcp-ico{width:34px;height:34px;padding:6px;border-radius:50%;background:#E6F4FB;color:#0077B0;stroke-width:2.1;overflow:visible;flex:0 0 34px;transform-origin:50% 50%}
#rmgad.out .rmgcp-lgx .rmgcp-lgx-fld label .rmgcp-ico path{transform-box:fill-box}
#rmgad.out .rmgcp-lgx label[for=username] .rmgcp-ico path{transform-origin:50% 0;animation:rmgma-flap 4.5s ease-in-out 2s infinite}
#rmgad.out .rmgcp-lgx label[for=password] .rmgcp-ico path{transform-origin:50% 100%;animation:rmgma-shackle 4.5s ease-in-out 3.2s infinite}
#rmgad.out .rmgcp-lgx .rmgcp-lgx-fld label .rmgcp-ico{animation:rmgma-pop .6s cubic-bezier(.22,1,.36,1) both,rmgma-bob 3s ease-in-out infinite}
#rmgad.out .rmgcp-lgx label[for=username] .rmgcp-ico{animation-delay:.55s,1.4s}
#rmgad.out .rmgcp-lgx label[for=password] .rmgcp-ico{animation-delay:.7s,2s}
#rmgad.out .rmgcp-lgx .rmgcp-lgx-fld:focus-within label .rmgcp-ico{animation:rmgma-wig .5s;background:#0077B0;color:#fff}

/* ---------- 5. "Client portal" pill: same pulse as the Client Login pill ---------- */
#rmgad.out .rmgcp-lgx .rmgcp-lgx-chip{animation:rmgma-clpulse 2s ease-out infinite}

/* ---------- 7. company name never breaks across two lines ---------- */
#rmgad.out .rmgad-nowrap,#rmgad.out .rmgcp-lgx-lead strong{white-space:nowrap}

/* ---------- 8. "New here? Start a project request": bold, off the divider line ---------- */
#rmgad.out .rmgcp-lgx .rmgcp-lgx-links{margin:22px 0 0;padding:18px 0 0;gap:12px;line-height:1.5}
#rmgad.out .rmgcp-lgx .rmgcp-lgx-links li:first-child,#rmgad.out .rmgcp-lgx .rmgcp-lgx-links li:first-child a{font-weight:700}

/* ---------- 9. one-click "View Our Services" button in the banner ---------- */
#rmgad.out .rmgad-hero-cta{margin-top:24px}
#rmgad.out .rmgad-svc-btn{text-decoration:none}
#rmgad.out .rmgad-svc-btn .ic{width:20px;height:20px;transition:transform .25s cubic-bezier(.22,1,.36,1)}
#rmgad.out .rmgad-svc-btn:hover .ic,#rmgad.out .rmgad-svc-btn:focus-visible .ic{transform:translateX(4px)}

/* ---------- 6. all text flows in, one step at a time (only when JS + motion allowed; see page.php) ---------- */
#rmgad.rmgma-on .rmgad-hero .rmgad-eyebrow{--i:0}
#rmgad.rmgma-on .rmgad-hero h1{--i:1}
#rmgad.rmgma-on .rmgad-hero .rmgad-lead{--i:2}
#rmgad.rmgma-on .rmgad-hero .rmgad-hero-cta{--i:3}
#rmgad.rmgma-on .rmgcp-lgx-logo{--i:0}
#rmgad.rmgma-on .rmgcp-lgx-h2{--i:1}
#rmgad.rmgma-on .rmgcp-lgx-fld:nth-of-type(1){--i:2}
#rmgad.rmgma-on .rmgcp-lgx-fld:nth-of-type(2){--i:3}
#rmgad.rmgma-on .rmgcp-lgx-forgot{--i:4}
#rmgad.rmgma-on .rmgcp-lgx-form>p:not(.rmgcp-lgx-forgot){--i:5}
#rmgad.rmgma-on .rmgcp-lgx-links li:nth-child(1){--i:6}
#rmgad.rmgma-on .rmgcp-lgx-links li:nth-child(2){--i:7}
#rmgad.rmgma-on .rmgcp-lgx-left>.rmgcp-lgx-chip{--i:0}
#rmgad.rmgma-on .rmgcp-lgx-h1{--i:1}
#rmgad.rmgma-on .rmgcp-lgx-lead{--i:2}
#rmgad.rmgma-on .rmgcp-lgx-steps li:nth-child(1){--i:3}
#rmgad.rmgma-on .rmgcp-lgx-steps li:nth-child(2){--i:4}
#rmgad.rmgma-on .rmgcp-lgx-steps li:nth-child(3){--i:5}
#rmgad.rmgma-on .rmgcp-lgx-steps li:nth-child(4){--i:6}
#rmgad.rmgma-on:not(.rmgma-all) :is(.rmgad-hero,.rmgcp-lgx-card,.rmgcp-lgx-left):not(.rmgma-in) :is(.rmgad-eyebrow,h1,.rmgad-lead,.rmgad-hero-cta,.rmgcp-lgx-logo,.rmgcp-lgx-h2,.rmgcp-lgx-fld,.rmgcp-lgx-forgot,.rmgcp-lgx-form>p,.rmgcp-lgx-links li,.rmgcp-lgx-chip,.rmgcp-lgx-lead,.rmgcp-lgx-steps li){opacity:0}
#rmgad.rmgma-on :is(.rmgad-hero,.rmgcp-lgx-card,.rmgcp-lgx-left).rmgma-in :is(.rmgad-eyebrow,h1,.rmgad-lead,.rmgad-hero-cta,.rmgcp-lgx-logo,.rmgcp-lgx-h2,.rmgcp-lgx-fld,.rmgcp-lgx-forgot,.rmgcp-lgx-form>p,.rmgcp-lgx-links li,.rmgcp-lgx-lead,.rmgcp-lgx-steps li){animation:rmgma-up .7s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0) * .12s)}
#rmgad.rmgma-on .rmgcp-lgx-left.rmgma-in>.rmgcp-lgx-chip{animation:rmgma-up .7s cubic-bezier(.22,1,.36,1) backwards,rmgma-clpulse 2s ease-out .9s infinite}
/* step circles + field icons wait for their row */
#rmgad.rmgma-on :is(.rmgad-hero,.rmgcp-lgx-card,.rmgcp-lgx-left):not(.rmgma-in) .rmgcp-lgx-steps .n,#rmgad.rmgma-on :is(.rmgad-hero,.rmgcp-lgx-card,.rmgcp-lgx-left):not(.rmgma-in) .rmgcp-lgx-fld label .rmgcp-ico{animation-play-state:paused}
#rmgad.rmgma-on :is(.rmgad-hero,.rmgcp-lgx-card,.rmgcp-lgx-left).rmgma-in .rmgcp-lgx-steps .n{animation-delay:calc(.35s + var(--n,0) * .12s)}

/* ---------- phones ---------- */
@media (max-width:600px){
 #rmgad.out .rmgad-hero-cta .rmgad-svc-btn{width:100%}
 #rmgad.out .rmgcp-lgx .rmgcp-lgx-fld label .rmgcp-ico{width:32px;height:32px;flex-basis:32px}
}
@media (max-width:359px){#rmgad.out .rmgad-lead,#rmgad.out .rmgcp-lgx-lead{font-size:15.5px}}

/* ---------- reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion:reduce){
 #rmgad.out *,#rmgad.out *::before,#rmgad.out *::after,#rmgad.out .rmgad-hero::before,#rmgad.out .rmgad-hero::after{animation:none!important;transition:none!important}
}