/* s1stema — o site: as réplicas das funções (porteiro, sequência, atributos, dupla, ranking). */

/* ---------- o porteiro (a IA que julga a missão) ---------- */

.porteiro {
  --ciclo: 9s;
}

.porteiro__caso {
  grid-area: 1 / 1;
  display: grid;
  justify-items: center;
  gap: 1.125rem;
  width: min(100%, 22.5rem);
}

.porteiro__caso--1 {
  animation: caso-1 var(--ciclo) var(--saida) infinite;
}

.porteiro__caso--2 {
  opacity: 0;
  animation: caso-2 var(--ciclo) var(--saida) infinite;
}

@keyframes caso-1 {
  0%,
  46% {
    opacity: 1;
  }
  49%,
  97% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes caso-2 {
  0%,
  48% {
    opacity: 0;
  }
  51%,
  95% {
    opacity: 1;
  }
  98%,
  100% {
    opacity: 0;
  }
}

/* O campo onde a pessoa escreveu a missão; o texto entra "digitado". */
.porteiro__entrada {
  position: relative;
  width: 100%;
  padding: 0.875rem 1rem;
  overflow: hidden;
  border: 1px solid var(--fio-forte);
  border-radius: 0.5rem;
  background: rgba(2, 6, 15, 0.6);
  font-size: 1rem;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0 round 0.5rem);
}

.porteiro__caso--1 .porteiro__entrada {
  animation: digita-1 var(--ciclo) steps(22, end) infinite;
}

.porteiro__caso--2 .porteiro__entrada {
  animation: digita-2 var(--ciclo) steps(22, end) infinite;
}

@keyframes digita-1 {
  0% {
    clip-path: inset(0 100% 0 0 round 0.5rem);
  }
  14%,
  100% {
    clip-path: inset(0 0 0 0 round 0.5rem);
  }
}

@keyframes digita-2 {
  0%,
  50% {
    clip-path: inset(0 100% 0 0 round 0.5rem);
  }
  64%,
  100% {
    clip-path: inset(0 0 0 0 round 0.5rem);
  }
}

/* A varredura: o porteiro "lendo" a missão. */
.porteiro__scan {
  width: 100%;
  height: 0.125rem;
  border-radius: 0.125rem;
  background: linear-gradient(90deg, transparent, var(--neon-forte), transparent);
  box-shadow: 0 0 0.75rem rgba(var(--neon-rgb), 0.9);
  opacity: 0;
  transform: scaleX(0.2);
}

.porteiro__caso--1 .porteiro__scan {
  animation: scan-1 var(--ciclo) var(--mover) infinite;
}

.porteiro__caso--2 .porteiro__scan {
  animation: scan-2 var(--ciclo) var(--mover) infinite;
}

@keyframes scan-1 {
  0%,
  15% {
    opacity: 0;
    transform: scaleX(0.2);
  }
  18% {
    opacity: 1;
  }
  26% {
    opacity: 1;
    transform: scaleX(1);
  }
  29%,
  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}

@keyframes scan-2 {
  0%,
  65% {
    opacity: 0;
    transform: scaleX(0.2);
  }
  68% {
    opacity: 1;
  }
  76% {
    opacity: 1;
    transform: scaleX(1);
  }
  79%,
  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}

.veredito {
  padding: 0.5rem 0.875rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--f-hud);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(0.5rem) scale(0.97);
}

.veredito--ok {
  color: var(--ok);
  background: rgba(61, 255, 176, 0.08);
  animation: veredito-1 var(--ciclo) var(--saida) infinite;
}

.veredito--nao {
  color: var(--nao);
  background: rgba(255, 90, 122, 0.08);
  animation: veredito-2 var(--ciclo) var(--saida) infinite;
}

@keyframes veredito-1 {
  0%,
  28% {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.97);
  }
  32%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes veredito-2 {
  0%,
  78% {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.97);
  }
  82%,
  100% {
    opacity: 1;
    transform: none;
  }
}

/* ---------- a sequência ---------- */

.sequencia {
  --ciclo: 7s;
  gap: 1.75rem;
}

.sequencia__contador {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    'fogo num'
    'fogo rotulo';
  align-items: center;
  column-gap: 0.875rem;
}

.sequencia__fogo {
  grid-area: fogo;
  width: 3.25rem;
  height: 3.25rem;
  fill: rgba(255, 158, 64, 0.18);
  stroke: #ffb35c;
  stroke-width: 1.4;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 0.75rem rgba(255, 150, 60, 0.55));
  transform-origin: 50% 90%;
  animation: chama var(--ciclo) var(--saida) infinite;
}

@keyframes chama {
  0%,
  30%,
  44%,
  100% {
    transform: none;
  }
  35% {
    transform: scale(1.18) rotate(-4deg);
  }
}

.sequencia__num {
  grid-area: num;
  display: inline-grid;
  font-family: var(--f-num);
  font-size: 2.75rem;
  font-weight: 500;
  line-height: 1;
}

.sequencia__num i {
  grid-area: 1 / 1;
  font-style: normal;
}

.sequencia__de {
  animation: seq-sai var(--ciclo) var(--saida) infinite;
}

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

@keyframes seq-sai {
  0%,
  31% {
    opacity: 1;
    transform: none;
  }
  35%,
  94% {
    opacity: 0;
    transform: translateY(-60%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes seq-entra {
  0%,
  31% {
    opacity: 0;
    transform: translateY(60%);
  }
  35%,
  90% {
    opacity: 1;
    transform: none;
  }
  94%,
  100% {
    opacity: 0;
    transform: translateY(60%);
  }
}

.sequencia__rotulo {
  grid-area: rotulo;
  font-family: var(--f-hud);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.semana {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.5rem;
  width: min(100%, 23.75rem);
  padding: 0;
  list-style: none;
}

.semana li {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 179, 92, 0.45);
  border-radius: 0.5rem;
  background: rgba(255, 158, 64, 0.14);
  font-family: var(--f-hud);
  font-size: 0.875rem;
  font-weight: 700;
  color: #ffd2a1;
}

.semana__hoje {
  border-color: var(--fio-forte) !important;
  background: transparent !important;
  color: var(--texto-3) !important;
}

/* O dia de hoje acende por cima (camada que aparece, sem repintar a caixa). */
.semana__hoje::after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid #ffb35c;
  border-radius: 0.5rem;
  background: rgba(255, 158, 64, 0.2);
  box-shadow: 0 0 1.125rem rgba(255, 150, 60, 0.55);
  opacity: 0;
  transform: scale(0.9);
  animation: hoje var(--ciclo) var(--saida) infinite;
}

@keyframes hoje {
  0%,
  30% {
    opacity: 0;
    transform: scale(0.9);
  }
  34%,
  90% {
    opacity: 1;
    transform: none;
  }
  95%,
  100% {
    opacity: 0;
    transform: scale(0.9);
  }
}