/* ---------- Tela de carregamento da Astra (monocromática, vidro, personagem desfocada) ---------- */
@font-face {
  font-family: "Astra Marca";
  src: url("astra-marca.woff2") format("woff2");   /* Playfair Display Italic 500 (OFL), só as letras de "Astra" */
  font-style: italic; font-weight: 500; font-display: block;
}

.abertura {
  position: fixed; inset: 0; z-index: 100; overflow: hidden;
  display: grid; place-items: center; padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  background: radial-gradient(120% 90% at 50% 40%, #1a1b1e 0%, #0b0b0d 55%, #050506 100%);
  color: #fff; font-family: inherit; text-align: center;
  opacity: 1; visibility: visible;
  transition: opacity .7s cubic-bezier(.4, 0, .2, 1), visibility .7s, filter .7s;
  animation: ab2-entra .6s ease-out both;
}
.abertura.saindo { opacity: 0; visibility: hidden; pointer-events: none; filter: blur(6px); }
.abertura.saindo .ab-centro { transform: scale(1.02); }

/* fundo: a personagem bem desfocada, com respiração lenta */
.ab-fundo { position: absolute; inset: -6%; pointer-events: none; }
.ab-fundo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  filter: grayscale(1) blur(5px) brightness(.8) contrast(1.06);
  opacity: 0; transition: opacity 1.2s ease;
  animation: ab2-respira 24s ease-in-out infinite alternate;
}
.ab-fundo.pronto img { opacity: .62; }
.ab-fundo::after {   /* vinheta: o centro fica legível e as bordas escurecem */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(75% 65% at 50% 55%, rgba(8, 8, 10, .32) 0%, rgba(8, 8, 10, .55) 65%, rgba(5, 5, 6, .88) 100%);
}

/* fios de luz prateados nos cantos */
.ab-luzes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .9; mix-blend-mode: screen; }
.ab-fios { animation: ab2-fio 9s ease-in-out infinite alternate; transform-box: fill-box; }
.ab-fios-b { animation-delay: -4.5s; }

.ab-centro {
  position: relative; display: flex; flex-direction: column; align-items: center;
  width: min(800px, calc(100vw - 32px)); gap: 0; transition: transform .7s cubic-bezier(.4, 0, .2, 1);
}

/* marca: "Astra" serifado + órbita com estrela */
.ab-marca { position: relative; margin: 0 0 10px; padding: 18px 40px 10px; font: inherit; line-height: 1; animation: ab2-sobe .8s .1s cubic-bezier(.2, .8, .2, 1) both; }
.ab-nome {
  position: relative; display: block;
  font-family: "Astra Marca", "Playfair Display", "Didot", "Bodoni MT", Georgia, serif;
  font-style: italic; font-weight: 500; letter-spacing: -.01em;
  font-size: clamp(76px, 13vw, 200px);
  background: linear-gradient(180deg, #ffffff 0%, #e9e9ec 38%, #a9abb2 62%, #f4f4f6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, .22)) drop-shadow(0 2px 1px rgba(0, 0, 0, .4));
}
.ab-orbita { position: absolute; left: -2%; top: -4%; width: 104%; height: 116%; overflow: visible; pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .45)); }
.ab-orbita ellipse { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: ab2-orbita 1.6s .25s cubic-bezier(.6, 0, .2, 1) forwards; }
.ab-estrela { transform-box: fill-box; transform-origin: center; animation: ab2-estrela 3.2s 1.2s ease-in-out infinite; opacity: 0;
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px rgba(255, 255, 255, .7)); }

.ab-autor { display: flex; align-items: center; gap: 18px; margin: 0 0 clamp(26px, 5vh, 52px); color: rgba(255, 255, 255, .8); font-size: clamp(14px, 1.3vw, 20px); letter-spacing: .01em;
  animation: ab2-sobe .7s .35s ease-out both; }
.ab-autor b { color: #fff; font-weight: 800; font-style: italic; margin-left: 2px; }
.ab-autor i { display: block; width: clamp(36px, 4vw, 64px); height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45)); }
.ab-autor i:last-child { background: linear-gradient(90deg, rgba(255, 255, 255, .45), transparent); }

/* barra de progresso de vidro */
.ab-carga {
  width: 100%; box-sizing: border-box; padding: clamp(16px, 2.2vw, 28px) clamp(16px, 3vw, 46px) clamp(18px, 2.4vw, 30px); border-radius: clamp(22px, 3vw, 40px); text-align: left;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .22), 0 18px 50px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
  animation: ab2-sobe .7s .5s ease-out both;
}
.ab-carga-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
#ab-etapa { font-size: clamp(15px, 1.35vw, 21px); color: rgba(255, 255, 255, .9); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-pct { font-size: clamp(16px, 1.4vw, 22px); font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; flex: none; }
.ab-trilha { position: relative; height: clamp(7px, .75vw, 11px); border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
.ab-enche { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, #d9dade, #ffffff);
  box-shadow: 0 0 12px rgba(255, 255, 255, .65), 0 0 2px #fff; }
.ab-enche::after {   /* brilho que corre por dentro do preenchimento */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .0) 30%, rgba(255, 255, 255, .9) 50%, rgba(255, 255, 255, 0) 70%, transparent 100%);
  background-size: 220% 100%; animation: ab2-brilho 2.2s linear infinite; mix-blend-mode: overlay; }
/* esperando uma etapa sem progresso exato: luz indeterminada na parte vazia (sem inventar %) */
.abertura.esperando .ab-trilha::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--ab-cheio, 0%); right: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
  background-size: 40% 100%; background-repeat: no-repeat; animation: ab2-espera 1.4s ease-in-out infinite; }

.ab-erro { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 13.5px; color: rgba(255, 255, 255, .82); }
.ab-erro[hidden] { display: none; }
.ab-erro button { flex: none; padding: 7px 14px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 13px;
  color: #0b0b0d; background: #fff; box-shadow: 0 0 16px rgba(255, 255, 255, .25); transition: transform .15s, box-shadow .15s; }
.ab-erro button:hover { transform: translateY(-1px); box-shadow: 0 0 22px rgba(255, 255, 255, .4); }
.ab-erro button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.abertura.com-erro .ab-enche { background: linear-gradient(90deg, #8d8f96, #c9cbd0); box-shadow: none; }
.abertura.com-erro .ab-enche::after { animation: none; display: none; }

/* estatísticas reais */
.ab-stats {
  display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 34px); margin-top: clamp(16px, 2.6vh, 34px); padding: clamp(10px, 1.3vw, 18px) clamp(18px, 2.6vw, 40px);
  border-radius: 999px; background: rgba(255, 255, 255, .045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: clamp(14px, 1.3vw, 20px); color: rgba(255, 255, 255, .8); animation: ab2-sobe .7s .65s ease-out both; max-width: 100%; box-sizing: border-box;
}
.ab-stat { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ab-stat svg { width: clamp(17px, 1.5vw, 24px); height: clamp(17px, 1.5vw, 24px); flex: none; fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ab-num { color: #fff; font-size: clamp(17px, 1.6vw, 25px); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 1ch; }
.ab-num.vazio { display: inline-block; width: 28px; height: 14px; border-radius: 6px; background: rgba(255, 255, 255, .14); animation: ab2-pisca 1.3s ease-in-out infinite; }
.ab-num.falhou { color: rgba(255, 255, 255, .45); }
.ab-sep { width: 1px; height: clamp(22px, 2.2vw, 30px); background: rgba(255, 255, 255, .2); flex: none; }

@keyframes ab2-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes ab2-sobe { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ab2-respira { from { transform: scale(1.04) translate3d(-.6%, 0, 0); } to { transform: scale(1.09) translate3d(.6%, -.8%, 0); } }
@keyframes ab2-fio { from { opacity: .55; transform: translate3d(0, 0, 0); } to { opacity: 1; transform: translate3d(14px, -10px, 0); } }
@keyframes ab2-orbita { to { stroke-dashoffset: 0; } }
@keyframes ab2-estrela { 0%, 100% { opacity: .85; transform: scale(.8) rotate(0deg); } 50% { opacity: 1; transform: scale(1.12) rotate(18deg); } }
@keyframes ab2-brilho { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes ab2-espera { from { background-position: -60% 0; } to { background-position: 160% 0; } }
@keyframes ab2-pisca { 50% { opacity: .45; } }

/* tablet e celular */
@media (max-width: 600px) {
  .ab-marca { padding: 14px 22px 8px; }
  .ab-autor { margin-bottom: 26px; font-size: 14px; gap: 12px; }
  .ab-autor i { width: 36px; }
  .ab-carga { padding: 15px 16px 17px; border-radius: 22px; }
  #ab-etapa { font-size: 15px; }
  .ab-stats { gap: 12px; padding: 10px 16px; font-size: 13.5px; }
  .ab-num { font-size: 17px; }
  .ab-stat svg { width: 17px; height: 17px; }
}
@media (max-width: 380px) {
  .ab-stats { flex-direction: column; gap: 6px; border-radius: 20px; }
  .ab-sep { width: 48px; height: 1px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .ab-nome { font-size: clamp(52px, 10vh + 20px, 96px); }
  .ab-autor { margin-bottom: 16px; }
  .ab-stats { margin-top: 12px; }
}

/* movimento reduzido: sem respiração, sem fios andando, sem brilho correndo; só troca de opacidade */
@media (prefers-reduced-motion: reduce) {
  .abertura, .abertura *, .abertura *::after { animation: none !important; }
  .ab-orbita ellipse { stroke-dashoffset: 0; }
  .ab-estrela { opacity: .9; }
  .abertura.saindo { filter: none; }
  .abertura.saindo .ab-centro { transform: none; }
}