/* Shared stage of the public pages: welcome (/, /Dashboard signed out), login and register.
   The photo backdrop lives once in App.razor, outside <Routes>, so Blazor never rebuilds it
   while navigating between these pages: it stays perfectly still and only the card changes.
   js/auth-stage.js picks and cross-fades the photo and plays the exit animation. */

/* ---------- Backdrop (App.razor) ---------- */
.auth-backdrop{position:fixed;inset:0;z-index:1034;overflow:hidden;pointer-events:none;background:#2f3a52;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
html.auth-stage-active .auth-backdrop,html.auth-stage-hold .auth-backdrop{opacity:1;visibility:visible;transition:opacity .5s ease}
.auth-backdrop-layer{position:absolute;inset:-3%;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity 1.8s ease;animation:auth-drift 32s ease-in-out infinite alternate;will-change:opacity,transform}
.auth-backdrop-layer.is-active{opacity:1}
.auth-backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(16,24,40,.46),rgba(57,46,91,.30)),linear-gradient(180deg,rgba(15,23,42,.04),rgba(15,23,42,.34))}
@keyframes auth-drift{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.08) translate3d(-1.2%,-.8%,0)}}

/* ---------- Stage + glass card ---------- */
.auth-stage{position:fixed;inset:0;z-index:1035;display:grid;place-items:center;align-content:center;gap:3.2rem;overflow-y:auto;padding:clamp(3.2rem,5vh,4.5rem) clamp(1rem,3vw,2.5rem);direction:rtl;color:#10275a;background:transparent}
.auth-card{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(21rem,.92fr);grid-template-rows:34rem;align-items:center;width:min(74rem,100%);border:1px solid rgba(255,255,255,.42);border-radius:1.8rem;background:rgba(235,239,246,.18);box-shadow:0 2rem 5rem rgba(15,23,42,.32);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:auth-card-in .6s cubic-bezier(.22,1,.36,1) both}

/* Brand side: identical on welcome and login (AuthBrandPanel.razor). */
.auth-brand{display:flex;flex-direction:column;align-items:center;padding:2rem clamp(1.6rem,4vw,3.2rem);color:#fff;text-align:center;text-shadow:0 .1rem .8rem rgba(15,23,42,.35)}
.auth-brand-logo{display:grid;place-items:center;min-width:11rem;max-width:min(18rem,100%);margin-bottom:1rem;padding:.85rem 1.5rem;border-radius:1.25rem;background:rgba(255,255,255,.9);box-shadow:0 .9rem 2rem rgba(15,23,42,.18)}
.auth-brand-logo img{display:block;width:auto;max-width:100%;height:auto;max-height:4.4rem;object-fit:contain}
.auth-brand-kicker{display:inline-flex;margin-bottom:.6rem;padding:.35rem .8rem;border:1px solid rgba(255,255,255,.24);border-radius:999px;color:#f4ca83;background:rgba(32,39,66,.26);font-size:.72rem;font-weight:800;text-shadow:none}
.auth-brand h2{margin:0 0 .4rem;font-size:clamp(1.35rem,2.1vw,1.85rem);font-weight:900;line-height:1.65}
.auth-brand>p{margin:0 0 1.3rem;font-size:.9rem;opacity:.85}
.auth-brand-points{display:grid;gap:.65rem;width:min(100%,25rem);margin:0;padding:0;list-style:none;text-align:start}
.auth-brand-points li{display:flex;align-items:center;gap:.8rem;font-size:.88rem}
.auth-brand-points li::before{content:"";flex:0 0 .5rem;height:.5rem;border-radius:50%;background:#fff;box-shadow:0 0 0 .38rem rgba(255,255,255,.16)}

/* The white panel: the only part that changes between welcome and login. */
.auth-panel{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;align-self:center;min-height:38rem;margin-inline-end:1.4rem;padding:2.4rem clamp(1.5rem,3.2vw,2.7rem);border-radius:1.55rem;color:#10275a;background:rgba(255,255,255,.97);box-shadow:0 1.5rem 3.5rem rgba(15,23,42,.24);text-align:center;animation:auth-panel-in .74s cubic-bezier(.22,1,.36,1) both;transform-origin:50% 60%}
.auth-panel>*{animation:auth-rise .52s cubic-bezier(.22,1,.36,1) both}
.auth-panel>:nth-child(1){animation-delay:.10s}.auth-panel>:nth-child(2){animation-delay:.15s}.auth-panel>:nth-child(3){animation-delay:.20s}.auth-panel>:nth-child(4){animation-delay:.25s}
.auth-panel>:nth-child(5){animation-delay:.30s}.auth-panel>:nth-child(6){animation-delay:.35s}.auth-panel>:nth-child(n+7){animation-delay:.40s}
.auth-panel-mark{display:block;width:auto;max-width:9rem;height:auto;max-height:4.4rem;margin:0 auto .85rem;object-fit:contain;filter:drop-shadow(0 .6rem 1.2rem rgba(31,58,120,.22))}
.auth-panel h1{margin:0;color:#10275a;font-size:1.45rem;font-weight:900}
.auth-panel-intro{max-width:26rem;margin:.45rem auto 1.3rem;color:#71809e;font-size:.86rem;line-height:1.9}
.auth-panel-actions{display:grid;gap:.75rem}
.auth-btn{display:flex;min-height:3.25rem;align-items:center;justify-content:center;border-radius:.85rem;font-size:.92rem;font-weight:850;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,color .16s ease}
.auth-btn-primary{color:#fff;background:linear-gradient(100deg,var(--brand-primary,#1e3c72),color-mix(in srgb,var(--brand-primary,#1e3c72) 72%,#6a45ef));box-shadow:0 .75rem 1.55rem rgba(31,58,120,.24)}
.auth-btn-primary:hover{color:#fff;transform:translateY(-1px);box-shadow:0 .9rem 1.8rem rgba(31,58,120,.3)}
.auth-btn-outline{color:var(--brand-primary,#1e3c72);border:1px solid color-mix(in srgb,var(--brand-primary,#1e3c72) 28%,#fff);background:#fff}
.auth-btn-outline:hover{color:#fff;background:var(--brand-primary,#1e3c72)}
.auth-panel-note{margin:1.25rem 0 0;color:#7a8493;font-size:.84rem;line-height:1.9}
.auth-panel-note a{color:var(--brand-primary,#1e3c72);font-weight:750;text-decoration:none}
.auth-panel-note a:hover{text-decoration:underline}
.auth-stage-footer{color:#fff;font-size:.8rem;text-shadow:0 1px 5px rgba(15,23,42,.75)}

/* Register keeps its own wizard card; it only joins the shared backdrop and motion. */
.auth-stage.register-v2-shell{min-height:0;background:none}
.auth-stage .register-v2-card{animation:auth-panel-in .74s cubic-bezier(.22,1,.36,1) both}

/* ---------- Motion ---------- */
@keyframes auth-card-in{from{opacity:0;transform:translate3d(0,14px,0) scale(.985)}to{opacity:1;transform:none}}
/* Enter with a little overshoot and settle, the way a motion designer would key it. */
@keyframes auth-panel-in{0%{opacity:0;transform:translate3d(0,26px,0) scale(.955);filter:blur(10px)}58%{opacity:1;transform:translate3d(0,-5px,0) scale(1.008);filter:blur(0)}80%{transform:translate3d(0,1.5px,0) scale(.998)}100%{opacity:1;transform:none;filter:none}}
@keyframes auth-rise{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
@keyframes auth-panel-out{to{opacity:0;transform:translate3d(0,-14px,0) scale(.965);filter:blur(6px)}}
/* Moving between public pages: the frame stays put, only the panel re-enters. */
.auth-stage.auth-continue .auth-card{animation:none}
/* Blazor re-rendering the prerendered page must not replay the entrance. */
.auth-stage.auth-no-enter .auth-card,.auth-stage.auth-no-enter .auth-panel,.auth-stage.auth-no-enter .auth-panel>*,.auth-stage.auth-no-enter .register-v2-card{animation:none}
.auth-stage.is-leaving .auth-panel,.auth-stage.is-leaving .register-v2-card{animation:auth-panel-out .24s cubic-bezier(.4,0,1,1) forwards}
.auth-stage.is-leaving .auth-panel>*{animation:none}

/* ---------- Small screens ---------- */
@media(max-width:991.98px){.auth-card{grid-template-columns:1fr 1fr}.auth-panel{margin-inline-end:.8rem;padding-inline:1.5rem}}
@media(max-width:767.98px){
    .auth-stage{padding:1rem .8rem}
    .auth-card{display:block;border:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
    .auth-brand{display:none}
    .auth-panel{min-height:0;margin:0;padding:2rem 1.15rem;border-radius:1.2rem}
}

@media(prefers-reduced-motion:reduce){
    .auth-backdrop-layer{animation:none;transition:none}
    .auth-card,.auth-panel,.auth-panel>*,.auth-stage .register-v2-card,.auth-stage.is-leaving .auth-panel{animation:none!important}
}