/* =====================================================================
   PeopleHub — cena 3D das páginas de autenticação
   (login, esqueci a senha, redefinir a senha)

   CSS 3D (perspective + preserve-3d) + canvas 3D, sem WebGL nem dependências:
     chão em grelha · feixes de luz · órbitas · mini-janela de vidro ·
     cartões a flutuar a diferentes profundidades (translateZ) · parallax.
   Canvas (.auth-canvas, desenhado por ph-auth-scene.js): partículas em
   profundidade + constelação de pessoas (login) ou escudo geodésico
   (recuperação/confirmação), centrados em --scene-x / --scene-y.

   Fica atrás do conteúdo do painel da marca (z-index -1 + isolation),
   por isso não altera nada do que já lá está.
   O parallax (--rx / --ry) é actualizado por assets/js/ph-auth-scene.js.
   Tudo pára com prefers-reduced-motion.
   ===================================================================== */

.login-left,
.left-panel {
    isolation: isolate;
}

.auth-scene {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    container-type: inline-size;
    --rx: 0deg;
    --ry: 0deg;
    --scene-x: 81%;
    --scene-y: 62%;
    --glass: rgba(255, 255, 255, 0.07);
    --glass-line: rgba(255, 255, 255, 0.14);
    --card-bg: #ffffff;
    --card-ink: #1e293b;
    --card-soft: #64748b;
    --card-line: rgba(226, 232, 240, 0.85);
    --amber: #f9a430;
}

html[data-theme="dark"] .auth-scene {
    --card-bg: var(--ph-surface, #252b36);
    --card-ink: var(--ph-ink, #eef1f6);
    --card-soft: #a3adbd;
    --card-line: rgba(255, 255, 255, 0.1);
}

/* Login: a constelação fica um pouco mais para dentro, para caber inteira no painel. */
.auth-scene--login {
    --scene-x: 76%;
}

/* Recuperação: o conteúdo é mais curto, a cena ocupa o espaço livre em baixo. */
.auth-scene--forgot,
.auth-scene--reset,
.auth-scene--confirm {
    --scene-x: 68%;
    --scene-y: 87%;
}

/* Ecrãs baixos: encolhe para não tocar no cartão informativo; muito baixos, só o ambiente. */
@media (max-height: 820px) {
    .auth-scene--forgot .auth-scale,
    .auth-scene--reset .auth-scale,
    .auth-scene--confirm .auth-scale { scale: .72; }

    .auth-scene--forgot,
    .auth-scene--reset,
    .auth-scene--confirm { --scene-y: 89%; }
}

@media (max-height: 700px) {
    .auth-scene--forgot .auth-enter,
    .auth-scene--reset .auth-enter,
    .auth-scene--confirm .auth-enter { display: none; }
}

/* ── Canvas 3D: entra em fade quando o primeiro frame está desenhado ── */
.auth-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.4s cubic-bezier(.16, 1, .3, 1);
}

.auth-scene.is-ready .auth-canvas {
    opacity: 1;
}

/* ── Chão em grelha, em perspectiva, a deslizar na direcção do observador ── */
.auth-floor {
    position: absolute;
    left: -60%;
    right: -60%;
    bottom: -18%;
    height: 62%;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.10) 1px, transparent 1px);
    background-size: 56px 56px;
    transform: perspective(520px) rotateX(64deg);
    transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 75%);
    mask-image: linear-gradient(to top, #000 10%, transparent 75%);
    animation: auth-grid 3.2s linear infinite;
}

@keyframes auth-grid {
    to { background-position: 0 56px; }
}

/* ── Feixes de luz a subir pela grelha ── */
.auth-beam {
    position: absolute;
    bottom: 0;
    width: 1px;
    height: 140px;
    background: linear-gradient(to top, transparent, rgba(253, 200, 120, 0.9), transparent);
    filter: drop-shadow(0 0 6px rgba(249, 164, 48, 0.9));
    opacity: 0;
    animation: auth-beam 5s ease-in infinite;
}

@keyframes auth-beam {
    0% { transform: translateY(40px); opacity: 0; }
    15% { opacity: 1; }
    70% { opacity: .6; }
    100% { transform: translateY(-320px); opacity: 0; }
}

/* ── Palco 3D ── */
.auth-stage {
    position: absolute;
    inset: 0;
    perspective: 1400px;
    perspective-origin: var(--scene-x) 40%;
}

.auth-enter {
    position: absolute;
    left: var(--scene-x);
    top: var(--scene-y);
    transform-style: preserve-3d;
    animation: auth-enter 1.4s cubic-bezier(.16, 1, .3, 1) .15s both;
}

@keyframes auth-enter {
    from { opacity: 0; transform: translate3d(0, 60px, -200px) rotateX(18deg); }
    to { opacity: 1; transform: none; }
}

.auth-scale {
    transform-style: preserve-3d;
    scale: .9;
}

/* Painel estreito: a cena encolhe e, abaixo de certo tamanho, fica só o ambiente. */
@container (max-width: 760px) {
    .auth-scale { scale: .72; }
}

@container (max-width: 640px) {
    .auth-enter { display: none; }
}

/* O "rig" roda ligeiramente com o rato e respira devagar. */
.auth-rig {
    position: relative;
    width: 260px;
    height: 170px;
    margin: -85px 0 0 -130px;
    transform-style: preserve-3d;
    transform: rotateX(calc(22deg + var(--ry))) rotateY(calc(-26deg + var(--rx))) rotateZ(7deg);
    transition: transform .9s cubic-bezier(.16, 1, .3, 1);
}

.auth-breathe {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    animation: auth-breathe 9s ease-in-out infinite;
}

@keyframes auth-breathe {
    0%, 100% { transform: rotateY(0deg) translateZ(0); }
    50% { transform: rotateY(4deg) translateZ(14px); }
}

/* Camadas a diferentes profundidades; cada uma flutua com o seu ritmo. */
.auth-layer {
    position: absolute;
    transform-style: preserve-3d;
    transform: translate3d(0, 0, var(--z, 0px));
    animation: auth-float var(--dur, 7s) ease-in-out var(--delay, 0s) infinite;
}

@keyframes auth-float {
    0%, 100% { transform: translate3d(0, 0, var(--z, 0px)); }
    50% { transform: translate3d(0, var(--lift, -12px), var(--z, 0px)); }
}

.auth-shadow {
    position: absolute;
    inset: 8% 6%;
    border-radius: 20px;
    background: rgba(0, 0, 0, .45);
    filter: blur(26px);
    transform: translateZ(-60px);
}

/* ── Órbitas com satélite ── */
.auth-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 520px;
    height: 520px;
    margin: -260px 0 0 -260px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .1);
    transform: rotateX(74deg) rotateZ(0deg);
    transform-style: preserve-3d;
    animation: auth-orbit 28s linear infinite;
}

.auth-orbit.is-inner {
    width: 380px;
    height: 380px;
    margin: -190px 0 0 -190px;
    border-style: dashed;
    border-color: rgba(255, 255, 255, .08);
    animation-duration: 40s;
    animation-direction: reverse;
}

.auth-orbit::after {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffd08a;
    box-shadow: 0 0 14px 4px rgba(249, 164, 48, .8);
}

@keyframes auth-orbit {
    to { transform: rotateX(74deg) rotateZ(360deg); }
}

/* ── Janela de vidro (base da cena) ── */
.auth-window {
    inset: 0;
}

.auth-window-inner {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid var(--glass-line);
    background: var(--glass);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font-family: 'DM Sans', system-ui, sans-serif;
}

.auth-window-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.auth-window-bar i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .25);
}

.auth-window-bar b {
    width: 70px;
    height: 6px;
    margin-left: 8px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .15);
}

.auth-window-body {
    padding: 10px;
    height: calc(100% - 24px);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auth-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.auth-kpi {
    padding: 6px 7px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .06);
}

.auth-kpi small {
    display: block;
    font-size: 7px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.auth-kpi strong {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1;
}

.auth-bars {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 8px 8px 5px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .04);
}

.auth-bar {
    flex: 1;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(to top, rgba(249, 164, 48, .55), #ffd08a);
    transform-origin: bottom;
    animation: auth-bar 3.6s ease-in-out var(--delay, 0s) infinite;
}

@keyframes auth-bar {
    0%, 100% { transform: scaleY(var(--from, .55)); }
    50% { transform: scaleY(1); }
}

/* Linhas de "texto" genéricas dentro da janela */
.auth-line {
    display: block;
    height: 6px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .15);
}

.auth-line.is-accent { background: rgba(249, 164, 48, .7); }

/* Janela de e-mail (esqueci a senha) */
.auth-mail {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.auth-mail-icon,
.auth-lock-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(249, 164, 48, .18);
    color: #ffd08a;
    font-size: 15px;
}

.auth-mail-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 3px;
}

.auth-mail-cta {
    align-self: flex-start;
    margin-top: auto;
    padding: 6px 12px;
    border-radius: 7px;
    background: #80162c;
    border: 1px solid rgba(249, 164, 48, .35);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .02em;
}

/* Campo de palavra-passe + medidor (redefinir) */
.auth-field {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    font-size: 11px;
    letter-spacing: .18em;
    color: rgba(255, 255, 255, .8);
}

.auth-field i { color: #ffd08a; font-size: 10px; letter-spacing: 0; }

.auth-meter {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.auth-meter span {
    height: 5px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .12);
    position: relative;
    overflow: hidden;
}

.auth-meter span::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #f9a430, #4ade80);
    transform-origin: left;
    animation: auth-meter 4.8s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes auth-meter {
    0%, 10% { transform: scaleX(0); }
    30%, 85% { transform: scaleX(1); }
    100% { transform: scaleX(0); }
}

.auth-meter-label {
    display: flex;
    justify-content: space-between;
    font-size: 8px;
    color: rgba(255, 255, 255, .55);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.auth-meter-label b { color: #4ade80; font-weight: 700; }

/* ── Cartões sólidos a flutuar à frente da janela ── */
.auth-card {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 11px;
    border: 1px solid var(--card-line);
    background: var(--card-bg);
    color: var(--card-ink);
    box-shadow: 0 24px 50px -12px rgba(15, 23, 42, .55);
    font-family: 'DM Sans', system-ui, sans-serif;
    white-space: nowrap;
}

.auth-card.is-pill {
    padding: 5px 11px;
    border-radius: 99px;
    gap: 6px;
}

.auth-card-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.auth-card-icon.is-green { background: rgba(16, 185, 129, .12); color: #059669; }
.auth-card-icon.is-brand { background: rgba(128, 22, 44, .1); color: #80162c; }

html[data-theme="dark"] .auth-card-icon.is-brand { background: rgba(224, 86, 111, .15); color: #f28ea0; }

.auth-card strong {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.2;
}

.auth-card small {
    display: block;
    font-size: 9.5px;
    color: var(--card-soft);
    line-height: 1.3;
}

.auth-card.is-pill span {
    font-size: 10px;
    font-weight: 600;
}

.auth-card .is-amber { color: #d97706; font-size: 10px; }
.auth-card .is-ok { color: #10b981; font-size: 11px; }

.auth-ping {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-left: 4px;
    border-radius: 50%;
    background: #10b981;
    animation: auth-ping 2.2s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes auth-ping {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .55); }
    100% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}

.auth-avatars {
    display: flex;
}

.auth-avatars span {
    width: 20px;
    height: 20px;
    margin-left: -6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7px;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 0 0 2px var(--card-bg);
}

.auth-avatars span:first-child { margin-left: 0; }

.auth-checks {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    font-size: 9.5px;
    color: var(--card-soft);
}

.auth-checks i { color: #10b981; width: 12px; }

/* ── Movimento reduzido ── */
@media (prefers-reduced-motion: reduce) {
    .auth-floor,
    .auth-beam,
    .auth-enter,
    .auth-breathe,
    .auth-layer,
    .auth-orbit,
    .auth-bar,
    .auth-meter span::after,
    .auth-ping {
        animation: none !important;
    }

    .auth-beam { display: none; }
    .auth-rig,
    .auth-canvas { transition: none; }
}