/* Loader Opera Pixel — uma grade de "pixels" pinta uma onda em cor
   Mango, convergindo pro ícone da marca (que se desenha via traço
   SVG), enquanto o nome "Opera Pixel" aparece letra por letra e uma
   barra de progresso varre a tela. Criado pra ser inconfundivelmente
   "opera pixel": pixel art + pincelada, num só gesto. */

.opx-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.opx-loader.opx-loader--saindo {
  opacity: 0;
  pointer-events: none;
}

.opx-loader__fundo {
  position: absolute;
  inset: 0;
  background: var(--bg-base, #0a0c10);
}

.opx-loader__conteudo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5, 20px);
}

/* --- Grade de pixels: 5x5, onda diagonal em Mango --- */
.opx-loader__grade {
  display: grid;
  grid-template-columns: repeat(5, 10px);
  grid-template-rows: repeat(5, 10px);
  gap: 4px;
  position: absolute;
  opacity: 0.9;
}
.opx-loader__grade span {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--color-borda-forte, #2a2e38);
  animation: opx-loader-pixel 1.8s ease-in-out infinite;
}
.opx-loader__grade span:nth-child(1)  { animation-delay: 0.00s; }
.opx-loader__grade span:nth-child(2)  { animation-delay: 0.05s; }
.opx-loader__grade span:nth-child(3)  { animation-delay: 0.10s; }
.opx-loader__grade span:nth-child(4)  { animation-delay: 0.15s; }
.opx-loader__grade span:nth-child(5)  { animation-delay: 0.20s; }
.opx-loader__grade span:nth-child(6)  { animation-delay: 0.05s; }
.opx-loader__grade span:nth-child(7)  { animation-delay: 0.10s; }
.opx-loader__grade span:nth-child(8)  { animation-delay: 0.15s; }
.opx-loader__grade span:nth-child(9)  { animation-delay: 0.20s; }
.opx-loader__grade span:nth-child(10) { animation-delay: 0.25s; }
.opx-loader__grade span:nth-child(11) { animation-delay: 0.10s; }
.opx-loader__grade span:nth-child(12) { animation-delay: 0.15s; }
.opx-loader__grade span:nth-child(13) { animation-delay: 0.20s; }
.opx-loader__grade span:nth-child(14) { animation-delay: 0.25s; }
.opx-loader__grade span:nth-child(15) { animation-delay: 0.30s; }
.opx-loader__grade span:nth-child(16) { animation-delay: 0.15s; }
.opx-loader__grade span:nth-child(17) { animation-delay: 0.20s; }
.opx-loader__grade span:nth-child(18) { animation-delay: 0.25s; }
.opx-loader__grade span:nth-child(19) { animation-delay: 0.30s; }
.opx-loader__grade span:nth-child(20) { animation-delay: 0.35s; }
.opx-loader__grade span:nth-child(21) { animation-delay: 0.20s; }
.opx-loader__grade span:nth-child(22) { animation-delay: 0.25s; }
.opx-loader__grade span:nth-child(23) { animation-delay: 0.30s; }
.opx-loader__grade span:nth-child(24) { animation-delay: 0.35s; }
.opx-loader__grade span:nth-child(25) { animation-delay: 0.40s; }

@keyframes opx-loader-pixel {
  0%, 100% { background: var(--color-borda-forte, #2a2e38); transform: scale(1); }
  35% { background: var(--color-mango, #BF9706); transform: scale(1.15); box-shadow: 0 0 10px rgba(191,151,6,0.6); }
}

/* --- Ícone da marca: desenha o traço + acende os 2 "pixels" --- */
.opx-loader__marca {
  width: 88px;
  height: 88px;
  position: relative;
  z-index: 1;
  color: var(--color-mango, #BF9706);
  filter: drop-shadow(0 0 18px rgba(191, 151, 6, 0.45));
}
.opx-loader__marca-quadro {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-dasharray: 64;
  stroke-dashoffset: 64;
  animation: opx-loader-desenhar-quadro 1.6s cubic-bezier(.65,0,.35,1) infinite;
}
.opx-loader__marca-traco {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 9;
  stroke-dashoffset: 9;
  animation: opx-loader-desenhar-traco 1.6s cubic-bezier(.65,0,.35,1) infinite;
  animation-delay: 0.3s;
}
.opx-loader__marca-ponto {
  fill: currentColor;
  opacity: 0;
  animation: opx-loader-ponto 1.6s ease-in-out infinite;
}
.opx-loader__marca-ponto--1 { animation-delay: 0.9s; }
.opx-loader__marca-ponto--2 { animation-delay: 1.05s; }

@keyframes opx-loader-desenhar-quadro {
  0% { stroke-dashoffset: 64; }
  45%, 65% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes opx-loader-desenhar-traco {
  0% { stroke-dashoffset: 9; }
  45%, 65% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes opx-loader-ponto {
  0%, 55% { opacity: 0; transform: scale(0); }
  70% { opacity: 1; transform: scale(1.4); }
  85%, 100% { opacity: 0; transform: scale(1); }
}

/* --- Nome da marca, letra por letra --- */
.opx-loader__texto {
  display: flex;
  font-family: var(--fonte-titulo, var(--fonte-padrao, sans-serif));
  font-size: var(--fs-lg, 1.1rem);
  font-weight: var(--fw-bold, 700);
  letter-spacing: 0.04em;
  color: var(--text-primary, #f4f4f5);
  margin-top: 96px;
}
.opx-loader__texto span {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  animation: opx-loader-letra 1.8s ease infinite;
}
.opx-loader__espaco { width: 0.4em; }
.opx-loader__texto span:nth-child(1) { animation-delay: 0.05s; }
.opx-loader__texto span:nth-child(2) { animation-delay: 0.10s; }
.opx-loader__texto span:nth-child(3) { animation-delay: 0.15s; }
.opx-loader__texto span:nth-child(4) { animation-delay: 0.20s; }
.opx-loader__texto span:nth-child(5) { animation-delay: 0.25s; }
.opx-loader__texto span:nth-child(7) { animation-delay: 0.35s; }
.opx-loader__texto span:nth-child(8) { animation-delay: 0.40s; }
.opx-loader__texto span:nth-child(9) { animation-delay: 0.45s; }
.opx-loader__texto span:nth-child(10) { animation-delay: 0.50s; }
.opx-loader__texto span:nth-child(11) { animation-delay: 0.55s; }

@keyframes opx-loader-letra {
  0%, 15% { opacity: 0; transform: translateY(6px); }
  30%, 80% { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; transform: translateY(-4px); }
}

/* --- Barra de progresso --- */
.opx-loader__barra {
  width: 160px;
  height: 3px;
  border-radius: 999px;
  background: var(--color-borda, #20232b);
  overflow: hidden;
}
.opx-loader__barra-preenchimento {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--color-mango, #BF9706), transparent);
  animation: opx-loader-varrer 1.3s ease-in-out infinite;
}
@keyframes opx-loader-varrer {
  0% { transform: translateX(-160%); }
  100% { transform: translateX(360%); }
}

@media (prefers-reduced-motion: reduce) {
  .opx-loader__grade span,
  .opx-loader__marca-quadro,
  .opx-loader__marca-traco,
  .opx-loader__marca-ponto,
  .opx-loader__texto span,
  .opx-loader__barra-preenchimento {
    animation: none;
  }
  .opx-loader__marca-quadro, .opx-loader__marca-traco { stroke-dashoffset: 0; }
  .opx-loader__texto span { opacity: 1; transform: none; }
}