/* ============================================================
   auth.css — layout específico de pré-auth (painel dividido)
   ============================================================ */

.auth-shell {
  min-height: 100vh;
  display: flex;
  background: var(--bg);
}

.auth-form-panel {
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.auth-visual-panel {
  flex: 0 0 50%;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 120% 100% at 60% 50%, #0c0c1c 0%, #08080f 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Blobs de profundidade (DS v2) */
.av-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.av-blob--1 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(39,41,92,.6), transparent 70%);
  top: -40px; right: -40px;
}
.av-blob--2 {
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(66,22,60,.55), transparent 70%);
  bottom: -40px; left: 20px;
}
.av-blob--3 {
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(170,77,9,.3), transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* Dot grid */
.av-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

/* Cubo 3D (DS v2) */
.av-cube-wrap {
  position: relative;
  z-index: 2;
  width: 220px; height: 220px;
  perspective: 900px;
}
.av-cube {
  width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: avSpin 18s linear infinite, avFloat 6s ease-in-out infinite;
}
.av-face {
  position: absolute;
  width: 200px; height: 200px;
  left: 10px; top: 10px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  overflow: hidden;
}
.av-logo {
  width: 160px;
  height: 160px;
  display: block;
  opacity: .93;
}
.av-face--front {
  background: linear-gradient(145deg, rgba(39,41,92,.92), rgba(53,56,114,.92));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 0 50px rgba(39,41,92,.5), inset 0 1px 0 rgba(255,255,255,.18);
  transform: translateZ(100px);
}
.av-face--back {
  background: linear-gradient(145deg, rgba(66,22,60,.92), rgba(90,32,85,.92));
  border: 1px solid rgba(255,255,255,.1);
  transform: translateZ(-100px) rotateY(180deg);
}
.av-face--right {
  background: linear-gradient(90deg, rgba(18,19,40,.9), rgba(39,41,92,.5));
  border: 1px solid rgba(255,255,255,.07);
  transform: rotateY(90deg) translateZ(100px);
}
.av-face--left {
  background: linear-gradient(90deg, rgba(39,41,92,.5), rgba(18,19,40,.9));
  border: 1px solid rgba(255,255,255,.05);
  transform: rotateY(-90deg) translateZ(100px);
}
.av-face--top {
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(39,41,92,.35));
  border: 1px solid rgba(255,255,255,.13);
  transform: rotateX(90deg) translateZ(100px);
}
.av-face--bottom {
  background: linear-gradient(180deg, rgba(39,41,92,.25), rgba(0,0,0,.55));
  border: 1px solid rgba(255,255,255,.04);
  transform: rotateX(-90deg) translateZ(100px);
}

@keyframes avSpin {
  from { transform: rotateY(0) rotateX(8deg); }
  to   { transform: rotateY(360deg) rotateX(8deg); }
}
@keyframes avFloat {
  0%, 100% { margin-top: 0; }
  50%       { margin-top: -14px; }
}

.auth-card {
  width: 100%;
  max-width: var(--card-w);
  background: var(--card);
  border-radius: var(--rlg);
  box-shadow: var(--sh);
  padding: 40px;
  animation: kIn 0.35s ease;
}

.auth-card h1 {
  font-size: 22px;
  font-weight: 600;
  color: var(--tp);
  margin: 0 0 8px 0;
  letter-spacing: -0.01em;
}
.auth-card p.lead {
  font-size: 14px;
  color: var(--ts);
  margin: 0 0 24px 0;
  line-height: 1.5;
}

.auth-card .actions {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-card .link-row {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
}

/* Tela de fade entre passos */
.auth-step {
  animation: fIn 0.25s ease;
}

/* prefers-reduced-motion respeitado */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Animações oficiais do DS */
@keyframes kIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes shake {
  10%, 90%  { transform: translate3d(-1px, 0, 0); }
  20%, 80%  { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
  40%, 60%  { transform: translate3d(3px, 0, 0); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}