/* ── Abertura ─────────────────────────────────────────────────────────────
   Véu branco com o símbolo da marca girando devagar, enquanto a primeira
   foto do slideshow carrega. Sai sozinho e nunca prende o visitante:

   - Se o JavaScript falhar, a regra .js abaixo nunca é aplicada e a abertura
     simplesmente não aparece — o site entra direto, como antes.
   - Dura 3s na primeira visita da sessão e 700ms nas seguintes (ver o JS).
   - Sob prefers-reduced-motion não há giro nem espera: some de imediato.
   - aria-hidden e inert: leitor de tela e teclado ignoram por completo. */

.abertura {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: #fff;
  opacity: 1;
  transition: opacity 900ms ease-in-out;
}
.abertura[hidden] { display: none; }

/* Só existe quando o JS assume o controle. Sem JS, nunca aparece. */
html:not(.js) .abertura { display: none; }

.abertura__simbolo {
  width: clamp(26px, 3.2vw, 40px);
  height: auto;
  color: var(--marca-marrom, #3e1e12);
  opacity: .85;
  animation: abertura-gira 3000ms cubic-bezier(.45,.05,.35,1) infinite;
  transform-origin: 50% 50%;
}

@keyframes abertura-gira {
  0%   { transform: rotate(0deg);   opacity: .30; }
  50%  { transform: rotate(180deg); opacity: .90; }
  100% { transform: rotate(360deg); opacity: .30; }
}

/* Estado de saída: o véu desaparece, o símbolo não "salta" junto. */
.abertura.sai { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .abertura { transition: none; }
  .abertura__simbolo { animation: none; opacity: .85; }
}