/* Overlay chiaro con dissolvenza */
#app-loader{
  position:fixed;inset:0;
  background:#f7f7f8;
  display:flex;align-items:center;justify-content:center;
  z-index:9999;
  transition:opacity .3s ease;
}
#app-loader.hidden{opacity:0;pointer-events:none}

/* Wrapper */
.loader-wrap{position:relative;width:160px;height:160px}

/* 1 SOLO peperoncino: un unico elemento, nessun ::before/::after */
.loader-chili{
  position:absolute;inset:0;
  width:140px;height:140px;margin:auto;
  background:url('/img/chili.webp') center/contain no-repeat;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.18));
  animation:pulse 1.8s ease-in-out infinite;
}

/* Orbita e puntini (stile chiaro) */
.loader-orbit{
  position:absolute;inset:0;border-radius:50%;
  border:2px dashed rgba(0,0,0,.08);
  animation:spin 3s linear infinite;
}
.loader-dot{
  position:absolute;top:50%;left:50%;
  width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:#e53935;
  transform-origin:-60px 0;
  animation:orbit 1.8s linear infinite;
}
/* variazioni raggio/ritardo per i 3 puntini extra */
.loader-dot:nth-child(3){background:#fb8c00;animation-delay:.3s;transform-origin:-42px 0}
.loader-dot:nth-child(4){background:#43a047;animation-delay:.6s;transform-origin:-75px 0}
.loader-dot:nth-child(5){background:#1e88e5;animation-delay:.9s;transform-origin:-52px 0}

/* animazioni */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* niente loader in stampa */
@media print{#app-loader{display:none!important}}