/* RDX · abertura · o resto do estilo (o primeiro quadro está em abertura-critico.css) */

#abertura {
  --ab-estilo: 1;                 /* o módulo espera este sinal antes de mostrar o rodapé */
  --ab-lima: #c8f52a;
  --ab-verde: #4ade80;
  --ab-tinta: #050706;
  --ab-margem: 18px;
  font-family: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
#abertura,
#abertura *,
#abertura *::before,
#abertura *::after { box-sizing: border-box; }

/* ─── CORTINA ────────────────────────────────── */
/* O desenho é criado pelo módulo. Enquanto carrega ela fica parada, cobrindo tudo. */
.ab-cortina {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.ab-cortina-frente { fill: var(--ab-lima); }
.ab-cortina-fundo { fill: var(--ab-verde); }

/* na saída a cor chapada do fundo dá lugar ao desenho da cortina */
#abertura.ab-saindo { background: transparent; pointer-events: none; }

/* ─── MARCA ──────────────────────────────────── */
/* A logo é montada pelo módulo compartilhado (src/marca.js) */
.ab-marca { will-change: transform; }

/* ─── RODAPÉ: status, contador e linha de progresso ─── */
.ab-rodape {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0 var(--ab-margem) max(var(--ab-margem), env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 16px;
  color: var(--ab-tinta);
}

.ab-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0 0 3px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ab-status-janela {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 1.5em;
}
.ab-status-trilho {
  position: relative;
  display: block;
  height: 100%;
  will-change: transform;
}
.ab-status-texto {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  will-change: transform;
}

.ab-cursor {
  flex: 0 0 auto;
  display: block;
  width: 6px;
  height: 11px;
  background: currentColor;
  animation: ab-pisca 1.1s steps(1, end) infinite;
}
@keyframes ab-pisca {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: .12; }
}

.ab-contador {
  margin: 0;
  padding: 0;
  font-size: clamp(64px, 10vw, 148px);
  font-weight: 500;
  line-height: .84;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 0;
  text-align: right;
}
.ab-contador .ab-recorte { padding-right: .055em; }   /* devolve o espaçamento negativo da última casa */
.ab-numero { display: block; will-change: transform; }

.ab-linha {
  grid-column: 1 / -1;
  display: block;
  height: 1px;
  margin: 12px 0 0;
  background: rgba(5, 7, 6, .2);
  transform-origin: 0 50%;
}
.ab-linha-cheia {
  display: block;
  height: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

@media (max-width: 768px) {
  #abertura { --ab-margem: 16px; }
  .ab-status { font-size: 10px; letter-spacing: .14em; gap: 8px; }
  .ab-cursor { width: 5px; height: 10px; }
  .ab-contador { font-size: clamp(56px, 17vw, 96px); }
  .ab-linha { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-cursor { animation: none; }
}