/* =====================================================================
   FundRapido · "Dos mundos" — split-screen sign-in with an animated role fork.
   Loaded only on the sign-in page, after fr-app.css.
   Base (no-JS) state: the form stage is visible, single column, fully usable.
   JS adds [data-enhanced] to reveal the two-world fork first.
   ===================================================================== */

/* ---- tokens for the two worlds ---- */
.authx {
  --client-a: #0b1f3a; --client-b: #17357a; --client-hi: #7fe6c0;
  --partner-a: #06795a; --partner-b: #00805c; --partner-hi: #d7fff0;   /* b: #00a878 gave white text 3.0:1 (WCAG 1.4.3 needs 4.5) */
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* override .auth base: the fork owns the whole viewport */
.auth.authx {
  display: block; min-height: calc(100vh - 57px);
  padding: 0; background: var(--client-a);
  position: relative; overflow: hidden;
}

/* no-JS fallback: hide the fork, show the stage as a single column */
.authx__fork { display: none; }
.authx__stage { display: grid; }
.authx:not([data-enhanced]) .authx__panel { grid-template-columns: 1fr; }

/* enhanced: the fork takes over until a role is chosen */
.authx[data-enhanced] .authx__fork { display: flex; }
.authx[data-enhanced]:not([data-role]) .authx__stage { display: none; }
.authx[data-enhanced][data-role] .authx__fork { display: none; }

/* =====================================================================
   THE FORK — two full-height worlds (flex, so hover can resize them)
   ===================================================================== */
.authx__fork {
  flex-direction: row; flex-wrap: nowrap;
  min-height: calc(100vh - 57px);
  position: relative;
}

.authx__world {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  gap: 14px; padding: clamp(28px, 6vw, 92px) clamp(24px, 5vw, 80px);
  border: 0; margin: 0; text-align: left; cursor: pointer;
  color: #fff; font: inherit;
  transition: flex-grow .55s var(--ease), filter .45s var(--ease), opacity .45s var(--ease);
  flex: 1 1 0;
}
.authx__world--client  { background: radial-gradient(120% 120% at 15% 0%, var(--client-b) 0, var(--client-a) 70%); }
.authx__world--partner { background: radial-gradient(120% 120% at 85% 0%, var(--partner-b) 0, var(--partner-a) 72%); }

/* decorative floating orb per world */
.authx__world::after {
  content: ""; position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%;
  filter: blur(8px); opacity: .22; pointer-events: none;
  transition: transform .8s var(--ease), opacity .45s var(--ease);
}
.authx__world--client::after  { right: -16vmax; top: -14vmax; background: radial-gradient(circle, var(--client-hi) 0, transparent 62%); }
.authx__world--partner::after { left: -16vmax; bottom: -16vmax; background: radial-gradient(circle, var(--partner-hi) 0, transparent 62%); }

/* desktop hover: the pointed world grows, the other recedes */
@media (hover: hover) and (pointer: fine) {
  .authx__fork:hover .authx__world { flex-grow: .72; filter: brightness(.62) saturate(.85); }
  .authx__fork .authx__world:hover  { flex-grow: 1.5; filter: none; }
  .authx__world:hover::after { transform: scale(1.12); opacity: .34; }
  .authx__world:hover .authx__w-cta { transform: translateX(6px); }
  .authx__world:hover .authx__w-cta::after { transform: translateX(4px); }
}
/* keyboard focus ring — kept inside the panel so overflow:hidden can't clip it.
   High specificity to beat .auth button:focus-visible from fr-app.css */
.auth.authx .authx__world:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

.authx__w-eyebrow { font-size: .68rem; letter-spacing: .14em; font-weight: 700; opacity: .9; }
.authx__world--client  .authx__w-eyebrow { color: var(--client-hi); }
.authx__world--partner .authx__w-eyebrow { color: var(--partner-hi); }
.authx__world--partner .authx__w-sub, .authx__world--partner .authx__w-list { color: #fff; }   /* full white: the green is lighter than the client blue */
.authx__w-title {
  font-family: var(--display); font-weight: 750; letter-spacing: -.035em; line-height: 1;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
}
.authx__w-sub { font-size: clamp(.98rem, 1.4vw, 1.18rem); color: #ffffffd9; max-width: 22ch; }

/* benefit lists: <ul>/<li> in the brand asides, <span>/<span> inside the <button> worlds */
.authx__w-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 9px; font-size: .92rem; color: #ffffffcf; max-width: 32ch; }
.authx__w-list li, .authx__w-pt { display: flex; gap: 10px; align-items: baseline; }
.authx__w-list li::before, .authx__w-pt::before { content: "✓"; flex: none; font-weight: 800; }
.authx__world--client  .authx__w-pt::before, .authx__brand--client  .authx__w-list li::before { color: var(--client-hi); }
.authx__world--partner .authx__w-pt::before, .authx__brand--partner .authx__w-list li::before { color: var(--partner-hi); }

.authx__w-cta {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 2px;
  font-weight: 700; font-size: 1rem; transition: transform .35s var(--ease);
}
.authx__w-cta::after { content: "→"; margin-left: 8px; transition: transform .35s var(--ease); }

/* centre seam badge */
.authx__seam {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 9px; z-index: 3; pointer-events: none;
  padding: 10px 18px; border-radius: 999px;
  background: #ffffff; color: var(--client-a); box-shadow: 0 16px 40px -14px #0008;
  font-weight: 700; font-size: .82rem; letter-spacing: -.01em; white-space: nowrap;
  margin: 0; font-family: inherit; line-height: 1.2;   /* the badge is the page's h1 (A11Y-005): no heading margins */
}
.authx__seam svg, .authx__seam .fr-brand-mark { width: 20px; height: 20px; }
@media (max-width: 760px) { .authx__seam { font-size: .74rem; padding: 8px 14px; } }
/* side by side: the badge sits on the 50/50 seam, so the inner edges of both worlds keep clear of it (half the
   badge ≈ 110px + air); on hover the seam moves (flex-grow) and the badge would land on the text → fade it out */
@media (min-width: 861px) {
  .authx__seam { transition: opacity .3s var(--ease); }
  .authx__world--client  { padding-right: max(clamp(24px, 5vw, 80px), 140px); }
  .authx__world--partner { padding-left:  max(clamp(24px, 5vw, 80px), 140px); }
}
@media (min-width: 861px) and (hover: hover) and (pointer: fine) {
  .authx__fork:hover .authx__seam { opacity: 0; }
}

/* =====================================================================
   THE STAGE — brand panel + sign-in form (split-screen premium)
   ===================================================================== */
.authx__stage {
  place-items: center; min-height: calc(100vh - 57px);
  padding: 40px 24px 64px;
  background: radial-gradient(ellipse at 12% 8%, #16305f 0, var(--client-a) 60%);
}
.authx[data-role="partner"] .authx__stage { background: radial-gradient(ellipse at 88% 8%, #0a9c74 0, var(--partner-a) 62%); }

.authx__panel {
  display: grid; grid-template-columns: 1.05fr .95fr;
  width: 100%; max-width: 1040px; align-items: stretch;
  border-radius: 28px; overflow: hidden; background: #fff;
  box-shadow: 0 40px 90px -40px #000a;
}

.authx__brand { display: none; position: relative; overflow: hidden;
  flex-direction: column; justify-content: center; gap: 16px;
  padding: clamp(30px, 4vw, 56px); color: #fff; }
.authx[data-role="client"]  .authx__brand--client  { display: flex; }
.authx[data-role="partner"] .authx__brand--partner { display: flex; }
.authx__brand--client  { background: radial-gradient(120% 120% at 20% 0%, var(--client-b), var(--client-a) 72%); }
.authx__brand--partner { background: radial-gradient(120% 120% at 20% 0%, var(--partner-b), var(--partner-a) 72%); }
.authx__brand::after { content: ""; position: absolute; width: 30vmax; height: 30vmax; border-radius: 50%;
  right: -12vmax; bottom: -14vmax; opacity: .25; filter: blur(6px); pointer-events: none; }
.authx__brand--client::after  { background: radial-gradient(circle, var(--client-hi) 0, transparent 62%); }
.authx__brand--partner::after { background: radial-gradient(circle, var(--partner-hi) 0, transparent 62%); }
.authx__brand .authx__w-eyebrow { position: relative; z-index: 1; }
.authx__brand h2 { position: relative; z-index: 1; font-family: var(--display); font-weight: 750;
  font-size: clamp(1.9rem, 2.8vw, 2.6rem); line-height: 1.06; letter-spacing: -.04em; white-space: pre-line; margin: 0; }
.authx__brand .authx__w-list { position: relative; z-index: 1; max-width: none; }
.authx__brand-trust { position: relative; z-index: 1; margin: 16px 0 0; padding-top: 16px;
  border-top: 1px solid #ffffff2e; font-size: .76rem; color: #ffffffbf; }

.authx__form { padding: clamp(30px, 4vw, 52px); display: flex; flex-direction: column; gap: 14px;
  min-width: 0; align-content: center; justify-content: center; }
.authx__form form { display: grid; gap: 14px; }   /* field spacing, formerly from .auth__box form */
.authx__form h1, .authx__form h2 { font-size: clamp(1.6rem, 2.3vw, 2rem); letter-spacing: -.035em; line-height: 1.12; margin: 0; color: var(--ink); }
.authx__form .muted { color: var(--muted); font-size: .94rem; margin: 0; }
.authx__back {
  display: none;                                   /* no-JS / signed-in: no dead button */
  align-self: flex-start; align-items: center; gap: 7px;
  margin-bottom: 2px; padding: 7px 14px 7px 11px; border-radius: 999px;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  font: 650 .84rem/1 var(--font); cursor: pointer; transition: border-color .15s, background .15s, transform .15s;
}
.authx[data-role] .authx__back { display: inline-flex; }
.authx__back::before { content: "←"; font-size: 1rem; }
.authx__back:hover { border-color: var(--ink); background: var(--surface-2); transform: translateX(-2px); }

/* role-aware accent on the form side (partner: darker green for AA contrast) */
.authx[data-role="partner"] .authx__form .btn--primary { background: var(--partner-a); }
.authx[data-role="partner"] .authx__form .btn--primary:hover { background: #055f47; }
.authx[data-role="partner"] .authx__form a:not(.btn), .authx[data-role="partner"] .authx__form .btn--link { color: var(--partner-a); }

/* =====================================================================
   ENTRANCE ANIMATIONS
   ===================================================================== */
.authx[data-enhanced] .authx__world { animation: fkRise .6s var(--ease) both; }
.authx[data-enhanced] .authx__world--partner { animation-delay: .07s; }
@keyframes fkRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.authx[data-role] .authx__panel { animation: fkZoom .5s var(--ease) both; }
@keyframes fkZoom { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
.authx[data-role] .authx__brand { animation: fkInLeft .55s var(--ease) both; }
.authx[data-role] .authx__form  { animation: fkInRight .55s .05s var(--ease) both; }
@keyframes fkInLeft  { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes fkInRight { from { opacity: 0; transform: translateX(26px); }  to { opacity: 1; transform: none; } }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 860px) {
  .authx__fork { flex-direction: column; min-height: 0; }
  .authx__world { flex: none; min-height: 48vh; }
  .authx__fork:hover .authx__world,
  .authx__fork .authx__world:hover { flex-grow: 0; filter: none; }   /* no hover growth when stacked (beats the desktop :hover rule) */
  .authx__seam { top: 50%; }
  .authx__panel { grid-template-columns: 1fr; max-width: 460px; }
  .authx__brand { min-height: 148px; padding: 24px; }
  .authx__brand .authx__w-list, .authx__brand-trust { display: none; }   /* keep the mobile brand compact */
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .authx__world, .authx__world::after, .authx__w-cta, .authx__w-cta::after,
  .authx__back, .authx__panel, .authx__brand, .authx__form { transition: none !important; animation: none !important; }
  .authx__fork:hover .authx__world,
  .authx__fork .authx__world:hover { flex-grow: 1; filter: none; }   /* no size jump without motion (beats the desktop :hover rule) */
}