/* NASH — a Cena rápida, o primeiro objeto do Portfólio. Um cartão do kit com
   quatro exemplos, o campo de pedido do kit (o mesmo do Contato) e, embaixo, as
   imagens que saem, a mais nova em cima. As cores vêm dos tokens da landing
   (--text, --text-mid, --border-weak, --site-signal), então o cartão vale nos
   dois temas; só o selo da imagem é escuro nos dois.
   sem-componente: STORE-10 — o cartão do kit não hospeda campo nem resultado
   (docs/card.md); o selo da imagem é cópia do da store; o seletor de estilo é
   um grupo de botões do kit com aria-pressed (não é aba: a Tab Bar é a única
   aba da casa e não é carregada nesta página). Sobem ao Roshan com o
   "pode subir" do dono. */

.site-cena .nash-text-input {
  margin-top: var(--nash-space-4);
}

/* Os exemplos: a imagem da store que cada um lembra */

.site-cena-exemplos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: var(--nash-space-4) 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 520px) {
  .site-cena-exemplos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.site-cena-exemplo {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.site-cena-exemplo img {
  display: block;
  width: 100%;
  aspect-ratio: 1280 / 688;
  object-fit: cover;
  border: 1px solid var(--border-weak);
  border-radius: 12px;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.site-cena-exemplo span {
  display: block;
  margin-top: 6px;
  color: var(--text-mid);
  font-size: 12px;
  line-height: 1.3;
  transition: color 140ms ease;
}

.site-cena-exemplo:hover img { transform: translateY(-2px); }
.site-cena-exemplo:hover span { color: var(--text); }
.site-cena-exemplo:focus-visible { outline: 2px solid var(--site-signal); outline-offset: 3px; border-radius: 12px; }

/* Os estilos: um botão do kit por estilo, aria-pressed no escolhido. Os LoRAs
   (o serviço lista os que existem) são o mesmo grupo, de até dois ligados. */

.site-cena-estilos,
.site-cena-loras {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--nash-space-4);
}

.site-cena-loras[hidden] { display: none; }

.site-cena-melhora {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: var(--nash-space-4);
}

.site-cena-dica,
.site-cena-ingles {
  color: var(--text-mid);
  font-size: 12px;
  line-height: 1.4;
}

.site-cena-ingles {
  margin: 0;
  overflow-wrap: anywhere;
}

.site-cena-rotulo {
  align-self: center;
  margin-right: 4px;
  color: var(--text-mid);
  font-size: 12px;
}

/* O fio: o pedido mais novo em cima */

.site-cena-fio {
  display: grid;
  gap: var(--nash-space-5);
  margin-top: var(--nash-space-5);
}

.site-cena-fio:empty { display: none; }

.site-cena-par {
  display: grid;
  gap: 8px;
  animation: site-cena-sobe 320ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.site-cena-pedido {
  margin: 0;
  color: var(--text-mid);
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.site-cena-arte {
  position: relative;
  aspect-ratio: 1280 / 688;
  overflow: hidden;
  border: 1px solid var(--border-weak);
  border-radius: 16px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.site-cena-arte img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: site-cena-revela 520ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

/* Gerando: a luz que passa, o contador e a barra no sinal da página */

.site-cena-espera {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--text-mid);
  font-size: 13px;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--text) 9%, transparent) 50%, transparent 70%) 0 0 / 220% 100%;
  animation: site-cena-luz 1.8s linear infinite;
}

.site-cena-espera b { color: var(--text); font-size: 15px; font-weight: 500; }

.site-cena-espera i {
  width: 120px;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
}

.site-cena-espera i::after {
  content: '';
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 3px;
  background: var(--site-signal);
  animation: site-cena-vai 1.1s ease-in-out infinite alternate;
}

.site-cena-erro {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 6px;
  padding: 24px;
  text-align: center;
  color: var(--text-mid);
  font-size: 13px;
}

.site-cena-erro b { color: var(--text); font-size: 15px; font-weight: 500; }

/* O selo: o ícone em repouso, abre com o ponteiro e mostra o tempo e a semente */

.site-cena-selo {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 11px;
  background: #111317;
  color: #fff;
  transition: width 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.site-cena-par:hover .site-cena-selo,
.site-cena-par:focus-within .site-cena-selo { width: var(--larg, 150px); }

.site-cena-selo-dentro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 12px 0 8px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.site-cena-selo svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-cena-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@keyframes site-cena-sobe { from { opacity: 0; transform: translateY(10px); } }
@keyframes site-cena-revela { from { opacity: 0; transform: scale(1.025); filter: blur(6px); } }
@keyframes site-cena-luz { to { background-position: -220% 0; } }
@keyframes site-cena-vai { to { transform: translateX(150%); } }

@media (prefers-reduced-motion: reduce) {
  .site-cena *, .site-cena *::before, .site-cena *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}