/* Base comum das páginas imersivas: revelações, acessibilidade e animações da demonstração do celular.
   (O antigo checkout em <dialog> foi removido: a compra agora é em /checkout.html e /en/checkout.) */

[hidden] { display: none !important; }

/* ---------- Revelação ao rolar ---------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--delay, 0s);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Barra de leitura */
.read-bar {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60;
  transform-origin: 0 50%; transform: scaleX(var(--read, 0));
  background: linear-gradient(90deg, #7c5cff, #32bcad);
}

/* Animações usadas pela demonstração do celular (hiper.css: .m-wait, .m-done-shield) */
@keyframes m-pulse { 50% { opacity: 0.3; transform: scale(0.7); } }
@keyframes m-pop { from { transform: scale(0.3); opacity: 0; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}