/* ═══════════════════════════════════════════════
   AfriAsante: sign in / sign up (motion screen)
   Dark stage, magenta + champagne gold, self-hosted only.
   ═══════════════════════════════════════════════ */
.auth-body{--bg:#0b0a0b;--panel:#121012;--line:rgba(255,255,255,.12);--txt:#f4eef1;--sub:rgba(244,238,241,.66);
  background:var(--bg);color:var(--txt);min-height:100vh;min-height:100dvh;margin:0;overflow-x:hidden;position:relative}
.auth-body a{color:var(--gold-light)}
.auth-body a:hover{color:#fff}
.auth-body .skip-link:focus{z-index:99;background:#fff;color:#000;padding:.5rem 1rem;position:fixed;top:8px;left:8px;border-radius:6px}

/* ── Ambient background ── */
.auth-aurora{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.auth-aurora .blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
.auth-aurora .b1{width:46vw;height:46vw;left:-14vw;top:8vh;background:radial-gradient(circle,#C9973A 0%,rgba(201,151,58,0) 70%);animation:af-float 18s ease-in-out infinite}
.auth-aurora .b2{width:38vw;height:38vw;right:-10vw;bottom:-8vh;background:radial-gradient(circle,#8B0A3C 0%,rgba(139,10,60,0) 70%);animation:af-float 22s ease-in-out -6s infinite reverse}
.auth-aurora .b3{width:26vw;height:26vw;left:38vw;top:-12vh;background:radial-gradient(circle,#C0185A 0%,rgba(192,24,90,0) 70%);opacity:.3;animation:af-float 26s ease-in-out -12s infinite}
.auth-aurora .grain{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:28px 28px;opacity:.5;mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 80%)}
@keyframes af-float{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(4vw,-3vh,0) scale(1.08)}66%{transform:translate3d(-3vw,4vh,0) scale(.94)}}

/* ── Tickers ── */
.auth-ticker{position:fixed;left:0;right:0;z-index:3;height:34px;overflow:hidden;border-color:var(--line);background:rgba(11,10,11,.72);backdrop-filter:blur(6px);display:flex;align-items:center}
.auth-ticker-top{top:0;border-bottom:1px solid var(--line)}
.auth-ticker-bottom{bottom:0;border-top:1px solid var(--line)}
.auth-ticker-track{display:flex;gap:2.4rem;white-space:nowrap;width:max-content;animation:af-marquee 46s linear infinite;font-family:var(--ff-utility);letter-spacing:.2em;font-size:.82rem;color:rgba(255,255,255,.4)}
.auth-ticker-track.reverse{animation-direction:reverse;animation-duration:58s}
.auth-ticker-track span{position:relative;padding-right:2.4rem}
.auth-ticker-track span::after{content:"";position:absolute;right:0;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--gold);opacity:.7}
.auth-ticker-track span:nth-child(3n+1){color:var(--gold-light)}
@keyframes af-marquee{to{transform:translateX(-50%)}}

/* ── Layout ── */
.auth-shell{position:relative;z-index:2;min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;padding:56px 0}
.auth-shell-single{grid-template-columns:1fr;justify-items:center;padding:56px 1rem}
.auth-stage{position:relative;display:flex;align-items:center;justify-content:center;padding:2rem 3vw;min-height:520px;perspective:1100px}
.stage-gold{position:absolute;left:0;top:50%;width:46%;height:78%;transform:translateY(-50%);background:linear-gradient(160deg,#E4B65B 0%,#C9973A 45%,#7a4a14 100%);
  clip-path:polygon(0 0,62% 0,78% 14%,70% 30%,86% 46%,72% 62%,80% 80%,64% 100%,0 100%);opacity:.85;animation:af-gold 14s ease-in-out infinite;filter:saturate(1.1)}
@keyframes af-gold{0%,100%{clip-path:polygon(0 0,62% 0,78% 14%,70% 30%,86% 46%,72% 62%,80% 80%,64% 100%,0 100%)}50%{clip-path:polygon(0 0,70% 0,74% 18%,82% 34%,70% 50%,84% 66%,70% 84%,76% 100%,0 100%)}}
.stage-card-wrap{position:relative;width:min(560px,86%);aspect-ratio:16/10;z-index:2;animation:af-bob 7s ease-in-out infinite}
@keyframes af-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.stage-card{position:absolute;inset:0;border-radius:22px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);
  transform-style:preserve-3d;transition:transform .25s ease-out,background-color .7s ease;background:#8B0A3C;--rx:0deg;--ry:0deg;transform:rotateX(var(--rx)) rotateY(var(--ry))}
.stage-card[data-tone=magenta]{background:linear-gradient(135deg,#8B0A3C,#5E0729 70%);color:#fff}
.stage-card[data-tone=light]{background:linear-gradient(135deg,#f1ecee,#cfc6ca);color:#8B0A3C}
.stage-card[data-tone=dark]{background:linear-gradient(135deg,#1b1418,#0a0709);color:#F0D5A0}
.stage-card::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%);transform:translateX(-120%);animation:af-sheen 6s ease-in-out infinite;pointer-events:none}
@keyframes af-sheen{60%,100%{transform:translateX(120%)}}
.scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;opacity:0;visibility:hidden;transform:translateY(24px) scale(.96);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1),visibility 0s .7s}
.scene.is-active{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.scene.is-leaving{opacity:0;transform:translateY(-24px) scale(1.03)}
.scene-line{font-family:var(--ff-display);font-size:clamp(1.6rem,3vw,2.7rem);font-weight:700;line-height:1.15;margin:0;max-width:90%}
.scene-line span{display:block;font-weight:400;opacity:.9}
.scene-line strong,.scene-line mark{display:block;color:inherit;font-weight:900}
.scene[data-tone=dark] .scene-line strong{color:var(--gold)}
.scene-line mark{background:#fff;color:#8B0A3C;padding:.05em .4em;border-radius:6px;display:inline-block;margin-top:.35rem;transform:rotate(-2deg)}
.scene[data-tone=magenta] .scene-line mark{background:#F0D5A0}
.scene.is-active .scene-line span,.scene.is-active .scene-line strong,.scene.is-active .scene-line mark{animation:af-rise .8s cubic-bezier(.2,.8,.2,1) both}
.scene.is-active .scene-line strong,.scene.is-active .scene-line mark{animation-delay:.18s}
@keyframes af-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.scene-spark{position:absolute;width:10px;height:10px;background:var(--gold-light);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:af-twinkle 2.4s ease-in-out infinite}
.scene-spark.s1{left:14%;top:20%}.scene-spark.s2{right:16%;top:28%;animation-delay:.7s;width:14px;height:14px}.scene-spark.s3{left:24%;bottom:18%;animation-delay:1.3s}
@keyframes af-twinkle{0%,100%{transform:scale(.4) rotate(0);opacity:.2}50%{transform:scale(1.2) rotate(90deg);opacity:1}}
.scene-cursor{position:absolute;right:30%;bottom:26%;font-size:1.5rem;color:#8B0A3C;animation:af-cursor 3.2s ease-in-out infinite;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.scene[data-tone=magenta] .scene-cursor{color:#fff}
@keyframes af-cursor{0%{transform:translate(40px,40px)}45%,60%{transform:translate(-30px,-18px) scale(.9)}100%{transform:translate(40px,40px)}}
.scene-orb{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-size:2rem;color:#fff;background:radial-gradient(circle at 30% 30%,#C0185A,#8B0A3C);box-shadow:0 0 0 0 rgba(139,10,60,.5);animation:af-pulse 2.2s ease-out infinite;margin-bottom:.9rem}
.scene[data-tone=magenta] .scene-orb{background:radial-gradient(circle at 30% 30%,#F0D5A0,#C9973A);color:#5E0729}
@keyframes af-pulse{to{box-shadow:0 0 0 38px rgba(139,10,60,0)}}
.scene-stat b{display:block;font-family:var(--ff-utility);font-size:clamp(2.6rem,6vw,4.4rem);letter-spacing:.04em;line-height:1}
.scene-stat small{display:block;font-size:1rem;letter-spacing:.14em;text-transform:uppercase;opacity:.8;margin-top:.3rem}
.scene-title{font-family:var(--ff-display);font-weight:900;font-size:clamp(1.5rem,2.6vw,2.3rem);margin:0 0 1rem}
.scene-brands{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;max-width:90%}
.scene-brands span{font-size:.85rem;font-weight:600;padding:.35rem .8rem;border-radius:999px;background:rgba(139,10,60,.12);border:1px solid rgba(139,10,60,.25);opacity:0;transform:scale(.6) rotate(-6deg)}
.scene[data-tone=magenta] .scene-brands span{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
.scene.is-active .scene-brands span{animation:af-pop .5s cubic-bezier(.3,1.5,.5,1) calc(var(--i)*.09s + .2s) forwards}
@keyframes af-pop{to{opacity:1;transform:none}}
.stage-progress{position:absolute;left:1.25rem;right:1.25rem;bottom:.9rem;height:3px;background:rgba(127,127,127,.25);border-radius:3px;overflow:hidden}
.stage-progress i{display:block;height:100%;width:0;background:currentColor;opacity:.8}
.stage-progress i.run{animation:af-progress var(--dur,3.8s) linear forwards}
@keyframes af-progress{to{width:100%}}

/* ── Form panel ── */
.auth-panel{position:relative;display:flex;justify-content:center;padding:1.5rem 3vw}
.auth-panel-inner{width:100%;max-width:430px;background:rgba(18,16,18,.78);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:22px;padding:2.2rem 2.1rem;box-shadow:0 30px 70px rgba(0,0,0,.5);animation:af-enter .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes af-enter{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.auth-brand{display:inline-flex;align-items:baseline;gap:0;text-decoration:none;margin-bottom:1.3rem;line-height:1}
.auth-brand .brand-afri{color:#C0185A;font-size:1.9rem}.auth-brand .brand-asante{color:#fff;font-size:1.9rem}
.auth-brand small{margin-left:.6rem;font-size:.6rem;letter-spacing:.35em;color:var(--gold)}
.role-switch{position:relative;display:grid;grid-template-columns:1fr 1fr;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:14px;padding:4px;margin-bottom:1.4rem}
.role-switch a{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:.45rem;min-height:44px;border-radius:10px;color:var(--sub);font-weight:600;font-size:.92rem;text-decoration:none;transition:color .3s}
.role-switch a[aria-selected=true]{color:#fff}
.role-switch a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.role-pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:10px;background:linear-gradient(135deg,#B01550,#8B0A3C);box-shadow:0 6px 18px rgba(139,10,60,.5);transition:transform .45s cubic-bezier(.5,1.4,.5,1)}
body[data-role=talent] .role-pill{transform:translateX(100%)}
.auth-title{font-family:var(--ff-display);font-size:1.75rem;color:#fff;margin:0 0 .35rem}
.auth-sub{color:var(--sub);font-size:.9rem;margin-bottom:1.3rem;min-height:2.6em}
[data-mode-show],[data-role-show]{display:none}
body[data-mode=signin] [data-mode-show=signin],body[data-mode=signup] [data-mode-show=signup],
body[data-role=organization] [data-role-show=organization],body[data-role=talent] [data-role-show=talent]{display:inline}
.auth-form[hidden],.field[hidden]{display:none!important}
.auth-form.is-switching{animation:af-switch .45s ease both}
@keyframes af-switch{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.field{position:relative;margin-bottom:.95rem}
.field input{width:100%;height:56px;padding:1.45rem 1rem .45rem;background:rgba(255,255,255,.05);border:1.5px solid var(--line);border-radius:12px;color:#fff;font-size:1rem;transition:border-color .25s,box-shadow .25s,background .25s}
.field.has-toggle input{padding-right:3rem}
.field label{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--sub);font-size:.95rem;pointer-events:none;transition:all .2s ease;transform-origin:left}
.field input:focus,.field input:not(:placeholder-shown){padding-top:1.5rem}
.field input:focus+label,.field input:not(:placeholder-shown)+label{top:.55rem;transform:none;font-size:.72rem;letter-spacing:.04em;color:var(--gold-light)}
.field input:focus{outline:0;border-color:var(--gold);background:rgba(201,151,58,.07);box-shadow:0 0 0 4px rgba(201,151,58,.18)}
.field input:-webkit-autofill{-webkit-text-fill-color:#fff;box-shadow:0 0 0 40px #1d171a inset}
.pw-toggle{position:absolute;right:6px;top:6px;width:44px;height:44px;border:0;background:none;color:var(--sub);border-radius:10px}
.pw-toggle:hover{color:#fff}.pw-toggle:focus-visible{outline:2px solid var(--gold)}
.pw-meter{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin:-.35rem 0 .95rem}
.pw-meter i{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.12);transition:background .3s}
.pw-meter[data-score="1"] i:nth-child(-n+1){background:#e5484d}.pw-meter[data-score="2"] i:nth-child(-n+2){background:#f0a030}
.pw-meter[data-score="3"] i:nth-child(-n+3){background:#c9c93a}.pw-meter[data-score="4"] i:nth-child(-n+4){background:#3fb27f}
.pw-meter small{flex:0 0 100%;color:var(--sub);font-size:.74rem;margin-top:.15rem}
.auth-row{display:flex;justify-content:flex-end;margin:-.3rem 0 1rem;font-size:.85rem}
.auth-link{text-decoration:none}.auth-link:hover{text-decoration:underline}
.auth-check{display:flex;gap:.65rem;align-items:flex-start;font-size:.8rem;color:var(--sub);margin:.2rem 0 1.1rem;cursor:pointer}
.auth-check input{flex:0 0 auto;width:20px;height:20px;margin-top:.1rem;accent-color:#B01550}
.auth-btn{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;min-height:52px;border:0;border-radius:12px;padding:.8rem 1rem;font-weight:700;font-size:1rem;color:#fff!important;text-decoration:none;
  background:linear-gradient(135deg,#B01550,#8B0A3C);box-shadow:0 10px 28px rgba(139,10,60,.5);transition:transform .2s,box-shadow .2s}
.auth-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s}
.auth-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(139,10,60,.65)}.auth-btn:hover::after{transform:translateX(120%)}
.auth-btn:active{transform:none}.auth-btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.auth-btn i{transition:transform .25s}.auth-btn:hover i{transform:translateX(5px)}
.auth-btn.is-loading{pointer-events:none;opacity:.8}.auth-btn.is-loading i{animation:af-spin 1s linear infinite}
@keyframes af-spin{to{transform:rotate(360deg)}}
.auth-switch{text-align:center;color:var(--sub);font-size:.88rem;margin:1.1rem 0 0}
.auth-switch a{font-weight:600}
.auth-back{text-align:center;margin:1.3rem 0 0;font-size:.82rem}.auth-back a{color:var(--sub)}
.auth-alert{display:flex;gap:.7rem;align-items:flex-start;background:rgba(229,72,77,.12);border:1px solid rgba(229,72,77,.45);color:#ffd5d6;border-radius:12px;padding:.75rem .9rem;margin-bottom:1.1rem;font-size:.88rem;animation:af-shake .45s}
.auth-alert.is-info{background:rgba(201,151,58,.12);border-color:rgba(201,151,58,.45);color:var(--gold-light);animation:none}
.auth-alert i{margin-top:.15rem}
@keyframes af-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.auth-done{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font-size:2.2rem;color:#fff;background:linear-gradient(135deg,#B01550,#8B0A3C);margin:0 auto 1.2rem;animation:af-pulse 2.4s ease-out infinite}
.auth-simple .auth-panel-inner{text-align:center}.auth-simple .auth-form,.auth-simple .auth-sub{text-align:left}.auth-simple .auth-sub{text-align:center}

/* ── Responsive ── */
@media (max-width:991.98px){
  .auth-shell{grid-template-columns:1fr;padding-top:44px;align-content:start}
  .auth-stage{min-height:0;padding:1.2rem 1rem .2rem}
  .stage-gold{display:none}
  .stage-card-wrap{width:min(420px,92%);aspect-ratio:16/8}
  .scene-line{font-size:1.35rem}.scene-orb{width:52px;height:52px;font-size:1.2rem;margin-bottom:.4rem}.scene-stat b{font-size:2.2rem}
  .scene-brands span{font-size:.7rem;padding:.2rem .55rem}
  .auth-panel{padding-top:.8rem}
  .auth-panel-inner{padding:1.7rem 1.3rem}
}
@media (prefers-reduced-motion:reduce){
  .auth-body *,.auth-body *::before,.auth-body *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .auth-ticker-track{animation:none}
  .scene-brands span{opacity:1;transform:none}
}