/* juno · abertura do sistema — AON tecnologia
   Tempo total ≈ 2,65 s. Sem a classe .juno-play (ou com menos movimento) mostra o quadro final. */
.juno-splash{
  --bg:#F3EEE6; --ink:#1A1814; --acc:#B8471F; --muted:#6E665C; --track:#DDD3C4;
  position:fixed; inset:0; z-index:9999; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(12px,2.4vmin,28px);
  transition:opacity .3s ease, visibility 0s linear .3s;
}
.juno-splash.juno-escuro{ --bg:#1A1814; --ink:#F3EEE6; --acc:#D9643A; --muted:#B5AB9C; --track:#3A342C }
@media (prefers-color-scheme: dark){ .juno-splash.juno-auto{ --bg:#1A1814; --ink:#F3EEE6; --acc:#D9643A; --muted:#B5AB9C; --track:#3A342C } }
.juno-splash.juno-saindo{ opacity:0; visibility:hidden }
.juno-splash svg{ display:block; overflow:visible }
.juno-simbolo{ width:clamp(120px,26vmin,240px); height:auto }
.juno-nome{ width:clamp(130px,28vmin,260px); height:auto }
.juno-endosso{ width:clamp(180px,32vmin,300px); height:auto }
.juno-ink{ fill:var(--ink) } .juno-acc{ fill:var(--acc) } .juno-muted{ fill:var(--muted) }
.juno-loader{ position:absolute; left:50%; bottom:10vh; width:clamp(120px,22vmin,200px); height:3px; margin-left:calc(clamp(120px,22vmin,200px) / -2);
  background:var(--track); border-radius:9px; overflow:hidden }
.juno-loader i{ display:block; height:100%; width:100%; background:var(--acc); transform-origin:left center }

/* gomos giram em torno do pino do leque (100,132 no viewBox) */
.juno-gomo{ transform-box:view-box; transform-origin:100px 132px }
.juno-g1{ transform:rotate(-72deg) } .juno-g2{ transform:rotate(-36deg) } .juno-g4{ transform:rotate(36deg) } .juno-g5{ transform:rotate(72deg) }

.juno-play .juno-a{ animation-fill-mode:both; animation-timing-function:cubic-bezier(.2,.8,.2,1) }
.juno-play .juno-cabo  { animation-name:juno-cabo;  animation-duration:.4s;  animation-delay:.05s }
.juno-play .juno-leque { animation-name:juno-fade;  animation-duration:.2s;  animation-delay:.3s }
.juno-play .juno-g2    { animation-name:juno-g2;    animation-duration:.75s; animation-delay:.4s }
.juno-play .juno-g4    { animation-name:juno-g4;    animation-duration:.75s; animation-delay:.4s }
.juno-play .juno-g1    { animation-name:juno-g1;    animation-duration:.8s;  animation-delay:.45s }
.juno-play .juno-g5    { animation-name:juno-g5;    animation-duration:.8s;  animation-delay:.45s }
.juno-play .juno-nome  { animation-name:juno-sobe;  animation-duration:.5s;  animation-delay:1.4s }
.juno-play .juno-endosso{animation-name:juno-fade;  animation-duration:.5s;  animation-delay:1.75s }
.juno-play .juno-loader i{animation-name:juno-carga;animation-duration:1.1s; animation-delay:1.55s }
/* se o sistema ainda não carregou ao fim da barra, ela passa a correr em loop */
.juno-esperando .juno-loader i{ animation:juno-espera 1.2s cubic-bezier(.4,0,.2,1) infinite; transform-origin:left center }

@keyframes juno-cabo{ from{opacity:0;transform:translateY(15%)} to{opacity:1;transform:none} }
@keyframes juno-fade{ from{opacity:0} to{opacity:1} }
@keyframes juno-sobe{ from{opacity:0;transform:translateY(18%)} to{opacity:1;transform:none} }
@keyframes juno-carga{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes juno-espera{ 0%{transform:translateX(-100%) scaleX(.4)} 100%{transform:translateX(100%) scaleX(.4)} }
@keyframes juno-g1{ 0%{transform:rotate(0)} 75%{transform:rotate(-76deg)} 100%{transform:rotate(-72deg)} }
@keyframes juno-g2{ 0%{transform:rotate(0)} 75%{transform:rotate(-39deg)} 100%{transform:rotate(-36deg)} }
@keyframes juno-g4{ 0%{transform:rotate(0)} 75%{transform:rotate(39deg)}  100%{transform:rotate(36deg)} }
@keyframes juno-g5{ 0%{transform:rotate(0)} 75%{transform:rotate(76deg)}  100%{transform:rotate(72deg)} }

@media (prefers-reduced-motion: reduce){
  .juno-play .juno-a, .juno-play .juno-loader i{ animation:none }
  .juno-esperando .juno-loader i{ animation:juno-fade 1.2s ease-in-out infinite alternate }
}