/* =========================================================
   Telas de acesso: painel à esquerda + animação da empresa
   ========================================================= */

/* Painel mais largo (cerca de 45% da tela), para o formulário não ficar alto e fino */
.ax {
  display: grid;
  grid-template-columns: minmax(460px, 45%) 1fr;
  min-height: 100vh;
}

.ax-painel {
  display: flex;
  flex-direction: column;
  padding: 2.25rem 4rem 1.5rem;
  background: var(--ac-branco);
  box-shadow: 4px 0 24px rgba(31, 39, 51, 0.08);
  position: relative;
  z-index: 1;
}

/* Rastro do mouse (rastro.js): fica atrás do conteúdo do painel */
.ax-rastro {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 0;
}

.ax-painel > :not(.ax-rastro) {
  position: relative;
  z-index: 1;
}

.ax-logo img {
  display: block;
  max-width: 220px;
  max-height: 56px;
}

.ax-logo {
  text-decoration: none;
}

.ax-painel__conteudo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 560px;
  margin: 2rem auto;
}

/* Com o painel mais largo, os campos de senha ficam lado a lado */
.ax-linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 1199.98px) {
  .ax-linha {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Os cartões das telas de conta viram conteúdo "solto" dentro do painel */
.ax-painel .ct-card {
  max-width: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  background: transparent;
}

.ax-painel .ct-titulo {
  font-size: 1.5rem;
}

.ax-painel__rodape {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.78rem;
  color: var(--ac-texto-suave);
}

.ax-painel__rodape a {
  color: var(--ac-texto-suave);
}

/* ---------- Abas Entrar | Cadastrar ---------- */

.ax-abas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  margin-bottom: 1.75rem;
  border-radius: 10px;
  background: #eef0f4;
}

.ax-aba {
  padding: 0.6rem 0.5rem;
  border-radius: 8px;
  color: var(--ac-texto-suave);
  font-weight: 500;
  font-size: 0.95rem;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.ax-aba:hover {
  color: var(--ac-roxo);
}

.ax-aba--ativa {
  background: var(--ac-branco);
  color: var(--ac-roxo);
  box-shadow: 0 1px 4px rgba(31, 39, 51, 0.12);
}

/* ---------- Vitrine (lado da animação) ---------- */

/* Fica parada na altura da tela enquanto o formulário rola */
.ax-vitrine {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--ac-roxo);
}

.ax-animacao,
.ax-animacao > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ax-animacao__texto {
  position: absolute;
  left: 3rem;
  bottom: 3rem;
  right: 3rem;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.ax-animacao__texto strong {
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.15;
}

.ax-animacao__texto span {
  font-size: 1.1rem;
  font-weight: 300;
}

/* ---------- CimentPav: assentamento do piso (desenhado por js/pavimento.js) ---------- */

.ax-animacao--pavimento {
  background: linear-gradient(180deg, #3a393d 0%, #2a292c 100%);
}

.pav-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- Cemare: pórtico rolante assentando aduelas na vala ----------
   As @keyframes (pm-carrinho, pm-cabo, pm-gancho, pm-aduela-N, pm-agua-N)
   são geradas em Views/Conta/Animacoes/_PreMoldado.cshtml. */

.pm-carrinho,
.pm-cabo,
.pm-gancho,
.pm-aduela,
.pm-balanco,
.pm-poeira,
.pm-agua {
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

/* A aduela balança presa pelo meio do topo, como num cabo */
.pm-balanco {
  transform-box: fill-box;
  transform-origin: 50% 0;
}

.pm-poeira {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation-timing-function: ease-out;
}

/* Luz de advertência do carrinho */
.pm-luz {
  animation: pm-piscar 1.2s steps(2, jump-none) infinite;
}

@keyframes pm-piscar {
  from { opacity: 1; }
  to   { opacity: 0.2; }
}

.pm-sol {
  transform-box: fill-box;
  transform-origin: center;
  animation: pm-brilho 6s ease-in-out infinite alternate;
}

@keyframes pm-brilho {
  from { transform: scale(0.92); opacity: 0.85; }
  to   { transform: scale(1.08); opacity: 1; }
}

.pm-bolha {
  animation: pm-bolha 2.2s linear infinite;
}

.pm-bolha--2 {
  animation-duration: 3s;
  animation-delay: -1.2s;
}

@keyframes pm-bolha {
  from { transform: translateX(-20px); }
  to   { transform: translateX(80px); }
}

.pm-carrinho { animation-name: pm-carrinho; }
.pm-gancho   { animation-name: pm-gancho; }

/* O cabo é um retângulo de 1px de altura esticado até o comprimento atual */
.pm-cabo {
  animation-name: pm-cabo;
  transform-box: fill-box;
  transform-origin: top;
}

.pm-agua {
  opacity: 0;
  animation-timing-function: linear;
}

.pm-agua__onda {
  animation: pm-correr 1.4s linear infinite;
}

@keyframes pm-correr {
  from { transform: translateX(0); }
  to   { transform: translateX(40px); }
}

.pm-nuvem {
  animation: pm-nuvem 45s linear infinite;
}

.pm-nuvem--lenta {
  animation-duration: 70s;
  animation-delay: -30s;
}

@keyframes pm-nuvem {
  from { transform: translateX(-300px); }
  to   { transform: translateX(700px); }
}

/* Quem prefere menos movimento vê a cena já montada, sem animação */
@media (prefers-reduced-motion: reduce) {
  /* O piso da CimentPav já é desenhado parado pelo pavimento.js nesse caso */

  .pm-carrinho,
  .pm-cabo,
  .pm-gancho,
  .pm-nuvem,
  .pm-agua__onda,
  .pm-balanco,
  .pm-luz,
  .pm-sol,
  .pm-bolha {
    animation: none;
  }

  .pm-poeira {
    animation: none;
    opacity: 0;
  }

  .pm-carrinho { transform: translateX(300px); }
  .pm-cabo     { transform: scaleY(110); }
  .pm-gancho   { transform: translateY(110px); }

  .pm-aduela {
    animation: none;
    transform: translate(var(--fx), var(--fy));
  }

  .pm-agua {
    animation: none;
    opacity: 1;
  }
}

/* ---------- Telas menores: só o painel ---------- */

@media (max-width: 991.98px) {
  .ax {
    grid-template-columns: 1fr;
  }

  .ax-vitrine {
    display: none;
  }

  .ax-painel {
    padding: 1.5rem 1.25rem;
    box-shadow: none;
  }

  .ax-painel__conteudo {
    margin: 1.5rem auto;
  }
}

.ax-ajuda-senha {
  margin: -0.6rem 0 1.15rem;
}