/* Tokens e estilos da tela de autenticação. Esta página é manipulada por js/main.js. */
:root {
  --bg-deep: #0b1022;
  --bg-mid: #131a36;
  --orb-blue: #2d74ff;
  --orb-cyan: #1bd3ff;
  --card-bg: rgba(15, 22, 43, 0.62);
  --card-border: rgba(154, 188, 255, 0.24);
  --text-main: #eef4ff;
  --text-soft: #a9bad8;
  --btn-bg: #f5f7ff;
  --btn-text: #0f2040;
  --btn-shadow: rgba(76, 135, 255, 0.45);
}

/* Base de dimensionamento e altura da página de autenticação. */
* { box-sizing: border-box; }

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100vh;
}

body {
  color: var(--text-main);
  font-family: "Bahnschrift", "Trebuchet MS", "Segoe UI", sans-serif;
  background:
    radial-gradient(120% 120% at 15% 15%, #1e2f61 0%, var(--bg-deep) 55%),
    linear-gradient(140deg, var(--bg-mid), #0a1228);
}

.hidden { display: none !important; }

/* Camadas decorativas de fundo, sem interação. */
.auth-visual {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.bg-orb {
  position: fixed;
  z-index: 1;
  border-radius: 50%;
  filter: blur(42px);
}

.orb-a {
  width: 280px;
  height: 280px;
  background: var(--orb-blue);
  top: -70px;
  left: -60px;
  opacity: .42;
  animation: float-a 9s ease-in-out infinite;
}

.orb-b {
  width: 320px;
  height: 320px;
  background: var(--orb-cyan);
  right: -95px;
  bottom: -110px;
  opacity: .25;
  animation: float-b 10s ease-in-out infinite;
}

.bg-grid {
  position: fixed;
  z-index: 2;
  inset: 0;
  background-image:
    linear-gradient(rgba(163,197,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(163,197,255,.08) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at center, black 40%, transparent 90%);
}

/* Contêiner central e cartão principal do login. */
.login-shell {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
  overflow: hidden;
}

.login-card {
  position: relative;
  width: min(92vw, 360px);
  min-height: 410px;
  border-radius: 26px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  box-shadow: 0 30px 65px rgba(0, 0, 0, 0.48);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 34px 26px;
  animation: card-enter .55s cubic-bezier(.2,.72,.28,1);
}

/* Identidade visual e textos introdutórios do cartão. */
.logo-wrap {
  width: 86px;
  height: 86px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,255,255,.2), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.32);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  overflow: hidden;
}

.app-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}

h1 {
  margin: 2px 0 0;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .2px;
  text-align: center;
}

.subtitle,
.auth-status {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.35;
  text-align: center;
  font-size: 14px;
}

.subtitle { margin-bottom: 8px; }

/* Ações de entrada e retorno da autenticação. */
.actions {
  width: 100%;
  margin-top: 8px;
  display: grid;
  justify-items: center;
  gap: 12px;
}

.google-btn,
.secondary-button {
  width: 100%;
  max-width: 260px;
  min-height: 52px;
  border-radius: 15px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2px;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, border-color .2s ease;
  cursor: pointer;
}

.google-btn {
  border: 0;
  background: var(--btn-bg);
  color: var(--btn-text);
  box-shadow: 0 12px 28px -6px var(--btn-shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.secondary-button {
  border: 1px solid rgba(154, 188, 255, 0.24);
  color: #dceaff;
  background: rgba(255, 255, 255, .06);
}

.google-btn:hover,
.secondary-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.google-btn-wrap {
  width: 100%;
  display: grid;
  justify-items: center;
  min-height: 44px;
}

#landingView,
#loginView {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 12px;
}

/* Animações e adaptação do cartão para telas menores. */
@keyframes float-a {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(22px, 18px, 0); }
}

@keyframes float-b {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-24px, -16px, 0); }
}

@keyframes card-enter {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 520px) {
  .login-card {
    width: min(100%, 340px);
    min-height: 390px;
    padding: 30px 22px;
  }

  h1 { font-size: 30px; }
}