/* -------- Auth / Landing (escopado) -------- */
:root{
  --bg:#0b0b0f;
  --panel:#111318;
  --text:#e5e7eb;
  --muted:#9aa3b2;
  --brand:#35b4ff; /* azul da nuvem */
  --accent:#ff4db6; /* pontinho rosa */
  --focus:#cbd5e1;
  --radius:16px;
}

.auth-page{
  min-height:100dvh;
  background:var(--bg);
  color:var(--text);
  display:grid;
  grid-template-columns: 1.2fr 1fr;
}

.auth-left, .auth-right{ display:flex; }

.auth-left{
  align-items:center;
  justify-content:center;
  padding:48px clamp(24px,4vw,72px);
  position:relative;
  overflow:hidden;
}

/* Container do logo + tagline */
.hero-brand{
  max-width:880px;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;   /* sem espaço entre logo e frase; quem manda é a margin da tagline */
  transform-origin:left center;
}


/* Imagem do logo */
.hero-logo{
  width:min(760px, 100%);
  height:auto;
  display:block;
  filter: drop-shadow(0 6px 24px rgba(53,180,255,.25));
  opacity:0;
  transform:scale(.92);
  animation: logoPop .9s .1s cubic-bezier(.2, .8, .2, 1) forwards;
  position:relative;
}

/* “brilho” que passa sobre o logo */
.hero-logo-wrap{
  position:relative;
  display:inline-block;
  overflow:visible;
}
.hero-logo-wrap::after{
  content:"";
  position:absolute; inset:-10%;
  pointer-events:none;
  background:linear-gradient(120deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%);
  transform:translateX(-120%);
  animation: shine 1.4s .6s ease-out forwards;
  mix-blend-mode:screen;
}

/* Tagline */
.hero-tagline{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans";
  font-weight:400;
  letter-spacing:.5px;
  font-size: clamp(18px, 2.2vw, 28px);
  color:var(--text);
  text-align:center;
  display:block;
  margin-top:-18px;   /* cola de verdade no logo (pode ajustar para -16/-20) */
  line-height:1.04;
  white-space: nowrap; /* fica em linha única para “caber” na largura do logo */
}
/* Faz a largura da frase = largura do logo */
.hero-logo-wrap,
.hero-tagline{
  width: min(760px, 100%);
}


	
/* Cada caractere animado */
.hero-tagline .char{
  opacity:0;
  display:inline-block;
  transform:translateY(6px);
  animation: charIn .5s ease forwards;
  /* 4s divididos igualmente por N caracteres */
  animation-delay: calc(var(--i) * (var(--dur, 4s) / var(--n, 40)));
}

/* Área do formulário */
.auth-right{
  align-items:center;
  justify-content:center;
  padding:48px clamp(24px,4vw,64px);
  background:
    radial-gradient(800px 600px at 0% 0%, rgba(53,180,255,.10), transparent 60%),
    radial-gradient(600px 500px at 100% 100%, rgba(255,77,182,.08), transparent 60%),
    var(--bg);
}

.auth-card{
  width:min(460px, 100%);
  background:linear-gradient(180deg, #111318, #0f1116);
  border:1px solid #1f2430;
  border-radius:var(--radius);
  padding:28px;
  box-shadow:0 8px 28px rgba(0,0,0,.35);
}

.auth-title{
  font-size: clamp(22px, 2.2vw, 28px);
  margin:0 0 6px;
  font-weight:700;
  letter-spacing:.2px;
}
.auth-sub{
  margin:0 0 20px;
  color:var(--muted);
  font-size:14px;
}

.form-row{ display:flex; flex-direction:column; gap:8px; margin:14px 0; }

.input{
  width:100%;
  background:#0b0d12;
  border:1px solid #232838;
  color:var(--text);
  border-radius:12px;
  font-size:16px;
  padding:12px 14px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input:focus{ border-color:#3a4257; box-shadow:0 0 0 3px rgba(58,66,87,.25); }

.actions{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:6px;
}
.small-link{
  color:var(--brand);
  text-decoration:none;
  font-size:14px;
}
.small-link:hover{ text-decoration:underline; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; width:100%;
  padding:12px 14px; border-radius:12px; border:0;
  font-weight:700; font-size:16px; cursor:pointer;
  background:linear-gradient(180deg, #38b6ff, #1f9fed);
  color:#06121c;
  box-shadow:0 10px 24px rgba(53,180,255,.25);
  transition: transform .08s ease, filter .15s ease;
}
.btn:hover{ filter:brightness(1.05); }
.btn:active{ transform:translateY(1px); }

.meta{
  margin-top:18px; font-size:13px; color:var(--muted);
  text-align:center;
}
.meta a{ color:var(--brand); text-decoration:none; }
.meta a:hover{ text-decoration:underline; }

/* Flash messages */
.flash{
  margin-bottom:10px; padding:10px 12px; border-radius:10px;
  font-size:14px; line-height:1.3;
}
.flash.error{ background:#2b1114; color:#ffd8de; border:1px solid #4a1b22; }
.flash.info{ background:#12212c; color:#d8f0ff; border:1px solid #1b3345; }
.flash.success{ background:#0f2415; color:#d3ffe2; border:1px solid #1e3a25; }

/* Responsivo */
@media (max-width: 980px){
  .auth-page{ grid-template-columns: 1fr; }
  .auth-left{ padding-bottom:16px; }
  .auth-right{ padding-top:10px; }
  .hero-logo{ width:min(600px,100%); }
}

/* Animações */
@keyframes logoPop{
  0%   { opacity:0; transform:scale(.90) translateY(12px) }
  60%  { opacity:1; transform:scale(1.02) translateY(0) }
  100% { opacity:1; transform:scale(1) }
}
@keyframes shine{
  to { transform:translateX(140%); }
}
@keyframes charIn{
  to { opacity:1; transform:none; }
}

/* Acessibilidade: reduz animação se preferido */
@media (prefers-reduced-motion: reduce){
  .hero-logo,
  .hero-logo-wrap::after{ animation:none; opacity:1; transform:none; }
  .hero-tagline .char{ animation:none; opacity:1; transform:none; }
}