/* A porta da sede (docs/porta-e-despertador.md): a identidade da ADM do BrandingBook,
   a mesma da tela de login da sede (server/marca.js) - azul institucional de fundo,
   luz do azul secundario subindo do canto, vermelho de acao, creme, DM Sans nos
   titulos e Bree Serif no texto. Um tema so, de proposito: e a marca. */
:root {
  --fundo: #11003A;
  --apoio: #1B0075;
  --acao: #BD0100;
  --creme: #FFF6F1;
  --creme-suave: rgba(255, 246, 241, 0.72);
  --trilho: rgba(255, 246, 241, 0.14);
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background:
    radial-gradient(ellipse 70% 60% at 100% 100%, rgba(27, 0, 117, 0.9), transparent 70%),
    var(--fundo);
  color: var(--creme);
  font-family: 'DM Sans', system-ui, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.porta {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

/* O arquivo e quadrado com a marca na faixa do meio: mostra so a faixa. */
.porta-marca {
  width: 240px;
  height: 140px;
  object-fit: cover;
  object-position: center;
}

.porta-titulo {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--creme-suave);
}

.porta-status {
  margin: 10px 0 0;
  min-height: 3.2em;
  font-family: 'Bree Serif', Georgia, serif;
  font-size: 19px;
  line-height: 1.45;
  text-wrap: balance;
}

/* Um estado por vez: o body diz qual (porta.js). */
.so-abrindo, .so-acordando, .so-demorou, .so-entrando { display: none; }
body[data-estado="abrindo"] .so-abrindo,
body[data-estado="acordando"] .so-acordando,
body[data-estado="demorou"] .so-demorou,
body[data-estado="entrando"] .so-entrando { display: inline; }
body[data-estado="demorou"] .porta-acoes.so-demorou { display: flex; }

/* O mascote correndo enquanto espera: a animacao e o proprio arquivo (mascote-correndo.webp,
   16 quadros em ~0,5 s); o chao embaixo passa pra tras no ritmo da corrida. Quando demorou
   (ai a acao e da pessoa), ele para em pe e o chao para junto. */
.porta-pista {
  position: relative;
  width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 6px;
}
.porta-cao { display: block; width: 172px; height: auto; }
.porta-cao-parado { display: none; }
body[data-estado="demorou"] .porta-cao-correndo { display: none; }
body[data-estado="demorou"] .porta-cao-parado { display: block; }

/* Sombra macia debaixo das patas. */
.porta-pista::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 136px;
  height: 12px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.45), transparent);
  pointer-events: none;
}

.porta-chao {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 3px;
  margin-top: -5px;
  border-radius: 3px;
  background-color: var(--trilho);
  background-image: repeating-linear-gradient(90deg, var(--acao) 0 14px, transparent 14px 30px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  animation: chao 0.12s linear infinite;
}
body[data-estado="demorou"] .porta-chao { animation-play-state: paused; }

@keyframes chao {
  from { background-position: 0 0; }
  to { background-position: -30px 0; }
}

.porta-acoes {
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.porta-botao {
  display: inline-block;
  padding: 11px 22px;
  border: none;
  border-radius: 999px;
  background: var(--creme);
  color: var(--fundo);
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}
.porta-botao:hover { background: #ffffff; }

.porta-link {
  color: var(--creme-suave);
  font-size: 14px;
}
.porta-link:hover { color: var(--creme); }

.porta-botao:focus-visible, .porta-link:focus-visible {
  outline: 2px solid var(--creme);
  outline-offset: 3px;
}

/* Sem JavaScript: some o "Abrindo..." e o mascote; fica o botao do noscript. */
.sem-js main > .porta-status, .sem-js .porta-pista { display: none; }

/* Menos movimento: o mascote segue correndo no lugar (e o "carregando", como um icone que
   gira), mas o chao para - e ele que da a sensacao de deslocamento. */
@media (prefers-reduced-motion: reduce) {
  .porta-chao { animation: none; }
}