.abertura {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 32px;
  background: radial-gradient(ellipse at 50% 35%, #f0444c, #e5262f 55%, #bb1d28);
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  transition: opacity 380ms ease, visibility 380ms ease, transform 380ms cubic-bezier(0.4, 0, 0.9, 0.4);
}
.abertura-saindo { opacity: 0; visibility: hidden; transform: scale(1.06); }
.abertura-conteudo { width: min(100%, 280px); text-align: center; }
.abertura-marca { animation: abertura-entrada 420ms cubic-bezier(0.22, 0.8, 0.26, 1) both; }
.abertura-marca img { display: block; width: 100%; height: 110px; object-fit: contain; }
.abertura-titulo { margin: 24px 0 40px; font-size: 22px; font-weight: 750; letter-spacing: 5px; }
.abertura-titulo span { font-size: 12px; font-weight: 500; letter-spacing: 3px; }
.abertura-barra { height: 3px; overflow: hidden; border-radius: 99px; background: #ffffff24; }
.abertura-barra span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #fff;
  transform-origin: left center;
  animation: abertura-carregando 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.abertura-legenda { margin: 18px 0 0; font-size: 13px; color: #ffffffe0; }
@keyframes abertura-entrada {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes abertura-carregando {
  0% { transform: scaleX(0); opacity: 1; }
  70% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0.3; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-animacoes="sempre"]) .abertura { transition: opacity 120ms linear; }
  html:not([data-animacoes="sempre"]) .abertura-saindo { transform: none; }
  html:not([data-animacoes="sempre"]) .abertura-marca, html:not([data-animacoes="sempre"]) .abertura-barra span { animation: none; }
  html:not([data-animacoes="sempre"]) .abertura-barra span { width: 100%; opacity: .7; }
}