/* Copia do visual de src/app/(auth)/sign-in.* — medidas e cores lidas da tela do app. */
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 400; font-display: swap; src: url('/login/PlusJakartaSans_400Regular.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 500; font-display: swap; src: url('/login/PlusJakartaSans_500Medium.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 600; font-display: swap; src: url('/login/PlusJakartaSans_600SemiBold.woff2') format('woff2'); }

:root {
  --bg: #0e0e11;
  --panel: #0a0a0a;
  --ink: #ffffff;
  --gold: #ffcc00;
  --art-gold: #ffcc00;
  --bracket: rgba(255, 204, 0, 0.45);
  --grain: 0.05;
  --label: #a0a0a0;
  --eyebrow: #6b6b6b;
  --muted: #4a4a4a;
  --placeholder: #6b6b6b;
  --line: rgba(255, 255, 255, 0.1);
  --input: #1a1a1f;
  --focus: rgba(255, 204, 0, 0.4);
  --error: #ef4444;
  --ok: #22c55e;
  --bleed: linear-gradient(to right, #0a0a0a 0%, rgba(10, 10, 10, 0.2) 40%, transparent 100%);
  --warm: linear-gradient(to right, rgba(255, 204, 0, 0.04) 0%, rgba(255, 204, 0, 0.012) 40%, transparent 100%);
  --compact: #0a0a0a;
  color-scheme: dark;
}

:root[data-theme='light'] {
  --bg: #f0efeb;
  --panel: #e2e0da;
  --ink: #1c1c19;
  --art-gold: #b8960a;
  --bracket: rgba(184, 150, 10, 0.55);
  --grain: 0.035;
  --label: #2a2a26;
  --eyebrow: #44443e;
  --muted: #5e5e57;
  --placeholder: #5e5e57;
  --line: #dddbd6;
  --input: #f3f2ee;
  --focus: rgba(255, 204, 0, 0.55);
  --bleed: linear-gradient(to right, #e2e0da 0%, rgba(226, 224, 218, 0.3) 40%, transparent 100%);
  --warm: linear-gradient(to right, rgba(180, 150, 10, 0.03) 0%, rgba(180, 150, 10, 0.008) 40%, transparent 100%);
  --compact: linear-gradient(180deg, #e8e6e1 0%, #f0efeb 100%);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.layout { position: relative; display: flex; min-height: 100%; }

/* ---- Painel da marca (so' a partir de 900px, como no app) ---- */
.panel { position: relative; flex: 1; overflow: hidden; background: var(--panel); }
.art { position: absolute; inset: 0; }
.art > * { position: absolute; }
.art svg { display: block; }
.art .fade { inset: 0; animation: intro-fade 1.4s cubic-bezier(0.33, 1, 0.68, 1) both; }
.art .bloom { animation: bloom 10s linear 0.84s infinite both; }
.art .ping { animation: ping 10s linear 0.84s infinite both; }
.art .spin { animation: intro-fade 1.4s cubic-bezier(0.33, 1, 0.68, 1) both; }
.art .spin svg { animation: spin 48s linear infinite; transform-origin: 50% 50%; }
.art .logo { animation: intro-logo 1.4s cubic-bezier(0.33, 1, 0.68, 1) both; }
.art .band {
  left: 0; right: 0; top: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 85%);
  mask-image: linear-gradient(to bottom, transparent, #000 85%);
  animation: band 10s linear 0.84s infinite both;
}
.art .band .logo { background: var(--art-gold); animation: band-inner 10s linear 0.84s infinite both; }
.art .scan { left: 0; top: 0; animation: scan 10s linear 0.84s infinite both; }
.art .bracket {
  width: 26px; height: 26px; border: 0 solid var(--bracket);
  animation: intro-bracket 1.4s cubic-bezier(0.33, 1, 0.68, 1) both;
}
.art .grain {
  inset: 0; pointer-events: none; opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* O logo e' mascara: a cor vem daqui, como o tintColor do app. */
.logo {
  display: block;
  background: var(--ink);
  -webkit-mask: url('/login/logo.png') center / contain no-repeat;
  mask: url('/login/logo.png') center / contain no-repeat;
}

/* ---- Divisa entre os paineis ---- */
.edge { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; z-index: 10; pointer-events: none; }
.edge i { position: absolute; top: 0; bottom: 0; }
.edge .bleed { left: -15px; width: 140px; background: var(--bleed); }
.edge .warm { left: 0; width: 180px; background: var(--warm); }
.edge .line {
  left: -1px; width: 2px;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 204, 0, 0.2) 15%, rgba(255, 204, 0, 0.4) 50%, rgba(255, 204, 0, 0.2) 85%, transparent 100%);
  box-shadow: 0 0 15px 3px rgba(255, 204, 0, 0.06), 0 0 40px 8px rgba(255, 204, 0, 0.025);
  animation: intro-fade 1.4s cubic-bezier(0.33, 1, 0.68, 1) both, edge 10s linear 0.84s infinite both;
}

/* ---- Formulario ---- */
/* Padding so' vertical: o lateral entraria na divisao do flex e os paineis sairiam 816/864 em vez de metade. */
.side { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; }
.compact { display: none; }
.form-wrap {
  width: 100%; max-width: 440px; margin: 0 auto; padding: 0 48px;
  animation: form-in 0.7s ease-out 0.3s both;
}

.head { margin-bottom: 48px; }
.eyebrow { margin: 0; color: var(--eyebrow); font-size: 13px; line-height: 19.5px; letter-spacing: 0.1px; }
h1 { margin: 4px 0 0; font-size: 24px; line-height: 28.8px; font-weight: 600; letter-spacing: -0.2px; }

form { display: flex; flex-direction: column; }
label { font-size: 13px; font-weight: 500; letter-spacing: 0.2px; color: var(--label); margin-bottom: 8px; }

.field {
  display: flex; align-items: center; gap: 9px;
  height: 44px; margin-bottom: 12px; padding: 0 16px;
  background: var(--input); border: 1px solid var(--line); border-radius: 18px;
  transition: border-color 0.15s;
}
.field:focus-within { border-color: var(--focus); }
.field svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--placeholder); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.field input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent;
  color: var(--ink); font: inherit; font-size: 15px; letter-spacing: 0.1px;
}
.field input::placeholder { color: var(--placeholder); }
.field input:-webkit-autofill { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 40px var(--input) inset; caret-color: var(--ink); }
.eye { display: flex; padding: 4px; margin-right: -4px; border: 0; background: none; cursor: pointer; border-radius: 6px; }
.eye svg { stroke: none; fill: var(--label); }
.eye[aria-pressed='true'] svg { fill: var(--gold); }

.forgot {
  align-self: flex-end; margin-bottom: 24px; padding: 4px 0;
  color: var(--ink); font-size: 13px; line-height: 19.5px; letter-spacing: 0.1px; text-decoration: none;
}
.forgot:hover, .back:hover { text-decoration: underline; }
.back { display: inline-block; margin-top: 20px; color: var(--ink); font-size: 13px; text-decoration: none; }

.hint { margin: -4px 0 12px; color: var(--eyebrow); font-size: 12px; line-height: 18px; }
.msg { margin: 0 0 8px; font-size: 13px; line-height: 18px; color: var(--error); }
.msg:empty { display: none; }
.msg[data-kind='ok'] { color: var(--ok); }

.primary {
  margin-top: 8px; height: 46px; border: 0; border-radius: 10px;
  background: var(--gold); color: #1c1c19;
  font: inherit; font-size: 17px; font-weight: 600; letter-spacing: 0.3px;
  cursor: pointer; box-shadow: 0 6px 22px rgba(255, 204, 0, 0.16);
  transition: filter 0.15s, transform 0.1s;
}
.primary:hover { filter: brightness(1.05); }
.primary:active { transform: translateY(1px); }
.primary:disabled { opacity: 0.6; cursor: progress; }
.primary:focus-visible, .eye:focus-visible, .forgot:focus-visible, .back:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

footer {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 11px; line-height: 16.5px; letter-spacing: 0.2px; text-align: center;
}

/* ---- Tela estreita: logo em cima, sem painel ---- */
@media (max-width: 899px) {
  .panel, .edge { display: none; }
  .side { padding: 24px; }
  /* CompactBrand do app: 48 px acima, imagem de 173 px (o desenho ocupa 94x43 dela), 24 px abaixo. */
  .compact {
    display: flex; align-items: center; justify-content: center; position: relative;
    height: 245px; padding-top: 24px; background: var(--compact);
    border-bottom: 1px solid rgba(255, 204, 0, 0.18);
  }
  .compact::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 32px;
    background: linear-gradient(180deg, var(--bg) 0%, transparent 100%);
  }
  :root[data-theme='light'] .compact { border-bottom-color: #d0cec8; }
  .compact .logo { width: 94px; height: 43px; }
  .form-wrap { padding: 0; }
}

/* ---- Animacoes (tempos do app: entrada 1,4 s, ciclo 10 s, giro 48 s) ---- */
@keyframes intro-fade { 0% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes intro-logo { 0%, 25% { opacity: 0; transform: scale(0.94); } 100% { opacity: 1; transform: scale(1); } }
@keyframes intro-bracket {
  0%, 15% { opacity: 0; transform: translate(calc(var(--dx) * 14px), calc(var(--dy) * 14px)); }
  60% { opacity: 1; }
  85%, 100% { opacity: 1; transform: translate(0, 0); }
}
@keyframes form-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
/* A linha desce em 55% do ciclo e passa pelo logo na metade (27,5%): ali reagem o brilho, o eco do anel e a divisa. */
@keyframes scan {
  0% { transform: translateY(-70px); opacity: 0; }
  3% { opacity: 1; }
  50% { opacity: 1; }
  55% { transform: translateY(calc(var(--h) - 70px)); opacity: 0; }
  100% { transform: translateY(calc(var(--h) - 70px)); opacity: 0; }
}
@keyframes band { 0% { transform: translateY(calc(-1 * var(--band))); } 55%, 100% { transform: translateY(calc(var(--h) - var(--band))); } }
@keyframes band-inner { 0% { transform: translateY(var(--band)); } 55%, 100% { transform: translateY(calc(var(--band) - var(--h))); } }
@keyframes bloom { 0%, 25.5% { opacity: 0; } 31.5% { opacity: 1; } 59.5%, 100% { opacity: 0; } }
@keyframes ping {
  0%, 27.5% { opacity: 0; transform: scale(1); }
  28.5% { opacity: 0.6; }
  51.5%, 100% { opacity: 0; transform: scale(1.55); }
}
@keyframes edge { 0%, 27.5% { opacity: 0.35; } 31.5% { opacity: 0.9; } 67.5%, 100% { opacity: 0.35; } }

@media (prefers-reduced-motion: reduce) {
  .art *, .edge .line, .form-wrap { animation: none !important; }
  .art .scan, .art .band, .art .bloom, .art .ping { display: none; }
  .edge .line { opacity: 0.35; }
}