/*
 * s1stema — o site: as RÉPLICAS do app que se mexem sozinhas.
 *
 * Cada demonstração é um laço em CSS (fora da thread principal: não
 * engasga com a página carregando) e só anda quando está na tela — fora
 * dela, fica pausada (`data-ativo`, ligado pelo IntersectionObserver).
 * Só transform, opacity e clip-path. As do console estão aqui; as das
 * funções, em `demos-funcoes.css`.
 */

/* Os pseudo-elementos dos filhos também: senão eles seguem andando
   enquanto o resto espera, e a demonstração sai de fase. */
.demo:not([data-ativo]) *,
.demo:not([data-ativo]) *::before,
.demo:not([data-ativo]) *::after,
.demo:not([data-ativo])::before,
.demo:not([data-ativo])::after {
  animation-play-state: paused !important;
}

/* ---------- a moldura comum (vidro do app, cantos de HUD) ---------- */

.quadro,
.console__vidro {
  position: relative;
  border: 1px solid rgba(var(--neon-rgb), 0.24);
  border-radius: 0.75rem;
  background:
    repeating-linear-gradient(0deg, rgba(var(--neon-rgb), 0.03) 0 1px, transparent 1px 0.25rem),
    var(--vidro);
  box-shadow:
    0 1.875rem 4.375rem -1.875rem rgba(0, 0, 0, 0.85),
    0 0 2.5rem -0.625rem rgba(var(--neon-rgb), 0.18),
    inset 0 0 2.5rem rgba(var(--neon-rgb), 0.05);
  font-family: var(--f-app);
  color: var(--texto);
}

.quadro {
  display: grid;
  place-items: center;
  min-height: 18.75rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  overflow: hidden;
}

.quadro::before,
.quadro::after,
.hud-canto {
  content: '';
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 0 solid var(--neon-forte);
  filter: drop-shadow(0 0 0.25rem rgba(var(--neon-rgb), 0.8));
}

.quadro::before,
.hud-canto--no {
  top: -1px;
  left: -1px;
  border-top-width: 0.125rem;
  border-left-width: 0.125rem;
  border-top-left-radius: 0.75rem;
}

.quadro::after,
.hud-canto--se {
  right: -1px;
  bottom: -1px;
  border-right-width: 0.125rem;
  border-bottom-width: 0.125rem;
  border-bottom-right-radius: 0.75rem;
}

.hud-canto--ne {
  top: -1px;
  right: -1px;
  border-top-width: 0.125rem;
  border-right-width: 0.125rem;
  border-top-right-radius: 0.75rem;
}

.hud-canto--so {
  bottom: -1px;
  left: -1px;
  border-bottom-width: 0.125rem;
  border-left-width: 0.125rem;
  border-bottom-left-radius: 0.75rem;
}

/* ---------- o console da abertura ---------- */

.console {
  --ciclo: 9s;
  width: 100%;
  max-width: 32.5rem;
  justify-self: end;
}

.console__vidro {
  padding: 1.375rem 1.375rem 1.5rem;
  backdrop-filter: blur(0.625rem);
}

.console__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.console__titulo {
  font-family: var(--f-hud);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-shadow: 0 0 0.875rem rgba(var(--neon-rgb), 0.55);
}

.console__demo {
  font-family: var(--f-num);
  font-size: 0.6875rem;
  color: var(--texto-3);
}

.console__lista {
  display: grid;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}

.missao {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'caixa nome xp'
    'caixa tipo xp';
  align-items: center;
  gap: 0.125rem 0.75rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--fio);
  border-radius: 0.5rem;
  background: rgba(2, 6, 15, 0.45);
}

.missao__caixa {
  grid-area: caixa;
  position: relative;
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border: 1.5px solid rgba(var(--neon-rgb), 0.55);
  border-radius: 0.375rem;
}

.missao__caixa::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 0.375rem;
  background: var(--neon);
  box-shadow: 0 0 0.875rem rgba(var(--neon-rgb), 0.7);
  opacity: 0;
}

.missao__caixa svg {
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
  fill: none;
  stroke: var(--vazio);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.6);
}

.missao__nome {
  grid-area: nome;
  overflow: hidden;
  font-size: 0.9375rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.missao__tipo {
  grid-area: tipo;
  font-family: var(--f-hud);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--texto-3);
}

.missao__xp {
  grid-area: xp;
  font-family: var(--f-num);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--neon-forte);
}

.missao--1 .missao__caixa::before,
.missao--1 .missao__caixa svg {
  animation: check-1 var(--ciclo) var(--saida) infinite;
}

.missao--2 .missao__caixa::before,
.missao--2 .missao__caixa svg {
  animation: check-2 var(--ciclo) var(--saida) infinite;
}

.missao--3 .missao__caixa::before,
.missao--3 .missao__caixa svg {
  animation: check-3 var(--ciclo) var(--saida) infinite;
}

.missao--1 .missao__xp {
  animation: xp-1 var(--ciclo) var(--saida) infinite;
}

.missao--2 .missao__xp {
  animation: xp-2 var(--ciclo) var(--saida) infinite;
}

.missao--3 .missao__xp {
  animation: xp-3 var(--ciclo) var(--saida) infinite;
}

@keyframes check-1 {
  0%,
  10% {
    opacity: 0;
    transform: scale(0.6);
  }
  13%,
  90% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}

@keyframes check-2 {
  0%,
  26% {
    opacity: 0;
    transform: scale(0.6);
  }
  29%,
  90% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}

@keyframes check-3 {
  0%,
  42% {
    opacity: 0;
    transform: scale(0.6);
  }
  45%,
  90% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}

/* O "+XP" salta quando a caixa marca, e assenta. */
@keyframes xp-1 {
  0%,
  11%,
  20%,
  100% {
    transform: none;
  }
  14% {
    transform: translateY(-0.3125rem) scale(1.14);
  }
}

@keyframes xp-2 {
  0%,
  27%,
  36%,
  100% {
    transform: none;
  }
  30% {
    transform: translateY(-0.3125rem) scale(1.14);
  }
}

@keyframes xp-3 {
  0%,
  43%,
  52%,
  100% {
    transform: none;
  }
  46% {
    transform: translateY(-0.3125rem) scale(1.14);
  }
}

/* ---------- o nível ---------- */

.nivel {
  margin-top: 1.125rem;
}

.nivel__linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-family: var(--f-hud);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--texto-3);
}

.nivel__num,
.nivel__rep {
  display: inline-grid;
}

.nivel__num {
  font-family: var(--f-num);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--texto);
}

.nivel__num i,
.nivel__rep i {
  grid-area: 1 / 1;
  font-style: normal;
}

.nivel__rep {
  justify-items: end;
  color: var(--neon-forte);
}

.nivel__de {
  animation: sai-cima var(--ciclo) var(--saida) infinite;
}

.nivel__para {
  opacity: 0;
  animation: entra-baixo var(--ciclo) var(--saida) infinite;
}

@keyframes sai-cima {
  0%,
  55% {
    opacity: 1;
    transform: none;
  }
  59%,
  97% {
    opacity: 0;
    transform: translateY(-60%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes entra-baixo {
  0%,
  55% {
    opacity: 0;
    transform: translateY(60%);
  }
  59%,
  93% {
    opacity: 1;
    transform: none;
  }
  97%,
  100% {
    opacity: 0;
    transform: translateY(60%);
  }
}

.nivel__barra {
  height: 0.375rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--neon-rgb), 0.12);
}

.nivel__enche {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--azul), var(--neon-forte));
  box-shadow: 0 0 0.75rem rgba(var(--neon-rgb), 0.8);
  transform: scaleX(0.32);
  transform-origin: 0 50%;
  animation: barra var(--ciclo) var(--saida) infinite;
}

@keyframes barra {
  0%,
  11% {
    transform: scaleX(0.32);
  }
  15%,
  27% {
    transform: scaleX(0.5);
  }
  31%,
  43% {
    transform: scaleX(0.76);
  }
  48%,
  55% {
    transform: scaleX(1);
  }
  59%,
  92% {
    transform: scaleX(0.08);
  }
  100% {
    transform: scaleX(0.32);
  }
}

/* ---------- SUBIU DE NÍVEL (o momento da demonstração) ---------- */

.subiu {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.25rem;
  border-radius: 0.75rem;
  background: radial-gradient(
    ellipse 70% 60% at 50% 50%,
    rgba(10, 30, 66, 0.96),
    rgba(2, 6, 15, 0.92)
  );
  opacity: 0;
  transform: scale(0.97);
  animation: subiu var(--ciclo) var(--saida) infinite;
}

.subiu__titulo {
  font-family: var(--f-hud);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--neon-forte);
  text-shadow: 0 0 1rem rgba(var(--neon-rgb), 0.8);
}

.subiu__num {
  font-family: var(--f-num);
  font-size: clamp(4rem, 9vw, 5.75rem);
  font-weight: 500;
  line-height: 1;
  color: var(--texto);
  text-shadow: 0 0 1.875rem rgba(var(--neon-rgb), 0.6);
}

.subiu__rep {
  font-family: var(--f-hud);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.28em;
}

.subiu__pontos {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--texto-3);
}

@keyframes subiu {
  0%,
  52% {
    opacity: 0;
    transform: scale(0.97);
  }
  56%,
  84% {
    opacity: 1;
    transform: none;
  }
  88%,
  100% {
    opacity: 0;
    transform: scale(1.02);
  }
}