/* Carregamento com a marca do Juá: as letras da logo se desenham traço a traço em tons de madeira.
   Usado no cardápio, no acompanhamento do pedido e na gestão. */
.jua-carregando {
    position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; align-content: center; gap: 14px;
    background: radial-gradient(110% 80% at 50% 38%, #27190f 0%, #130d09 68%);
    color: #f3e7d6; transition: opacity .6s ease, visibility .6s ease;
}
.jua-carregando.sumir { opacity: 0; visibility: hidden; }
.jua-carregando.inline { position: relative; inset: auto; z-index: auto; background: none; padding: 40px 0; }

.jua-palco { position: relative; width: 230px; height: 150px; display: grid; place-items: center; }
.jua-carregando.inline .jua-palco { width: 150px; height: 96px; }
.jua-halo { position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 143, 86, .28), transparent 62%); animation: jua-respira 2.4s ease-in-out infinite; }
@keyframes jua-respira { 50% { transform: scale(1.18); opacity: .55; } }

.jua-logo-anim { width: 190px; height: auto; overflow: visible; filter: drop-shadow(0 6px 26px rgba(201, 143, 86, .35)); }
.jua-carregando.inline .jua-logo-anim { width: 124px; }
.jua-logo-anim g > * { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: jua-traco 2.8s cubic-bezier(.65, 0, .35, 1) infinite; animation-delay: calc(var(--i) * .1s); }
.jua-logo-anim .ponto { transform-box: fill-box; transform-origin: center; animation: jua-ponto 2.8s cubic-bezier(.3, 1.6, .5, 1) infinite .08s; }
@keyframes jua-traco { 0% { stroke-dashoffset: 1; } 42%, 78% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes jua-ponto { 0%, 8% { transform: scale(0); } 24%, 80% { transform: scale(1); } 96%, 100% { transform: scale(0); } }

.jua-sub { font: 600 10px/1 "Manrope", system-ui, sans-serif; letter-spacing: .5em; text-transform: uppercase; color: rgba(243, 231, 214, .5); margin-top: 2px; }
.jua-frase { font: 400 13px/1.4 "Manrope", system-ui, sans-serif; color: rgba(243, 231, 214, .55); min-height: 1.4em; }

/* Ripado de madeira ao fundo, como a coberta do restaurante */
.jua-carregando:not(.inline)::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background: repeating-linear-gradient(90deg, rgba(201, 143, 86, .05) 0 26px, rgba(0, 0, 0, .25) 26px 30px);
    -webkit-mask: radial-gradient(70% 60% at 50% 40%, #000, transparent 75%); mask: radial-gradient(70% 60% at 50% 40%, #000, transparent 75%); }
.jua-carregando > * { position: relative; }

@media (prefers-reduced-motion: reduce) {
    .jua-halo, .jua-logo-anim .ponto { animation: none; }
    .jua-logo-anim g > * { animation: none; stroke-dashoffset: 0; }
}