/* Demonstração "sem design → com design" da home.

   Este arquivo nunca é desativado: ele veste o próprio aviso na versão crua
   e na versão estilizada. Por isso não usa os tokens do site.css — em modo
   cru nenhuma variável do design system está carregada. */

.visual-demo,
.visual-demo * {
  /* Em modo cru nenhum reset do site está carregado: sem isto o padding soma
     por fora da largura e o cartão estoura a tela do celular. */
  box-sizing: border-box;
}

.visual-demo {
  z-index: 9999;
  max-width: 26rem;
  padding: 20px;
  border: 1px solid #3a4038;
  border-radius: 16px;
  background: #20231f;
  box-shadow: 0 18px 40px rgba(15, 17, 14, 0.35);
  color: #efe7da;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

/* Aviso da primeira visita: no centro da tela, alguns instantes depois da
   página crua aparecer. No canto inferior ele exigia que o visitante fosse
   procurar a explicação justamente quando a página parece quebrada. */
.visual-demo[data-visual-placement="center"] {
  position: fixed;
  inset: 0;
  width: min(26rem, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: auto;
  overflow-y: auto;
  height: fit-content;
}

/* Scrim leve, não blackout: a página crua precisa continuar visível atrás do
   aviso — ela é o argumento da demonstração. */
.visual-demo[data-visual-placement="center"]::backdrop {
  background: rgba(20, 22, 19, 0.45);
}

.visual-demo[data-visual-placement="corner"] {
  position: fixed;
  inset: auto 16px 16px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .visual-demo[data-visual-placement="corner"] {
    inset: auto 24px 24px auto;
  }
}

.visual-demo:focus {
  outline: 2px solid #c9f43d;
  outline-offset: 4px;
}

.visual-demo .visual-demo__eyebrow {
  margin: 0 0 6px;
  color: #c9f43d;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.visual-demo .visual-demo__text {
  margin: 0 0 16px;
}

.visual-demo .visual-demo__action {
  display: inline-block;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  background: #c9f43d;
  color: #20231f;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
}

.visual-demo .visual-demo__action:hover {
  background: #ddff70;
}

.visual-demo .visual-demo__action:focus-visible {
  outline: 2px solid #efe7da;
  outline-offset: 3px;
}

.visual-demo .visual-demo__dismiss {
  margin-left: 8px;
  padding: 12px 8px;
  border: 0;
  background: none;
  color: #d5cec1;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.visual-demo .visual-demo__dismiss:hover {
  color: #efe7da;
}

/* Única concessão do modo cru: sem isto, as imagens em tamanho natural
   ficam mais largas que a tela do celular, o navegador reduz o zoom da
   página inteira e o botão da demonstração vira um ponto ilegível. A
   ausência de layout, tipografia e hierarquia — que é o ponto da demo —
   continua intacta. */
html[data-plain] img {
  max-width: 100%;
  height: auto;
}

/* A folga só existe enquanto o aviso está fixo no rodapé da janela: com o
   aviso central, este espaço seria um buraco no fim da página. */
html[data-plain][data-visual-notice="corner"] body {
  padding-bottom: 280px;
}

@media (min-width: 768px) {
  html[data-plain][data-visual-notice="corner"] body {
    padding-bottom: 200px;
  }
}

/* Botão discreto no rodapé para repetir a demonstração. Só aparece na
   versão estilizada, então acompanha os tokens e o alvo de toque dos
   demais links do rodapé — sem opacidade, que derrubava o contraste. */
.visual-demo-replay {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--profile-text-secondary, inherit);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.visual-demo-replay:hover {
  text-decoration-thickness: 2px;
}

html[data-visual-reveal] body {
  animation: visual-demo-reveal 420ms ease-out both;
}

.visual-demo[data-visual-placement="center"][open] {
  animation: visual-demo-appear 260ms ease-out both;
}

.visual-demo[data-visual-state="revealed"] {
  animation: visual-demo-rise 320ms ease-out both;
}

@keyframes visual-demo-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes visual-demo-appear {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes visual-demo-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-visual-reveal] body,
  .visual-demo[data-visual-placement="center"][open],
  .visual-demo[data-visual-state="revealed"] {
    animation: none;
  }
}