/* Gravity — il velo di caricamento.

   È il loader del marchio, lo stesso blocco di loader/gravity-loader.html che diamo ai
   clienti, qui diviso in un foglio e uno script perché segua le regole del sito: un file
   per mestiere e l'impronta ?v= che impedisce ai browser di tenersi la copia vecchia.

   Una differenza dal componente: i colori sono quelli della pagina, nero e il bianco
   caldo del testo, invece del nero su bianco di partenza. La firma «powered by Gravity»
   c'è anche qui.

   Questo foglio sta in testa e blocca il primo disegno: è voluto. Il velo deve esserci
   già alla prima immagine della pagina, altrimenti si vede il sito per un istante, poi
   il velo che lo copre, e il caricamento sembra un errore. */

.gv-loader{
    /* ---- colori e misure: modificabili anche da CSS, senza toccare lo script */
    --gv-loader-color:#121212;      /* il segno                                */
    --gv-loader-bg:#ffffff;         /* il velo dietro                          */
    /* clamp invece di un solo vmin: su un telefono in verticale 20vmin sono
       75 px e il logo sparisce, su un monitor grande diventerebbe enorme */
    --gv-loader-size:clamp(112px, 20vmin, 200px);
    --gv-loader-fade:.5s;           /* dissolvenza finale                      */

    --gv-bar-width:62%;             /* rispetto al lato del logo               */
    --gv-bar-height:2px;            /* spessore della barra                    */

    --gv-pb-width:clamp(78px, 11vmin, 116px);  /* la firma: da qui scala tutto */
    --gv-pb-color:currentColor;     /* lo script lo mette bianco o nero        */
    --gv-pb-opacity:.62;            /* una firma non urla                      */
    --gv-pb-gap:.85em;              /* aria fra "POWERED BY" e il logo         */

    position:fixed; inset:0; z-index:2147483000;
    /* Due righe: il logo prende tutto lo spazio libero e ci sta in mezzo, la
       firma sta sotto. Cosi' non si sovrappongono mai, nemmeno su un telefono
       coricato, e non serve una media query per l'altezza. */
    display:grid; grid-template-rows:1fr auto;
    justify-items:center; align-items:center;
    padding:clamp(16px, 5vmin, 40px);
    padding-bottom:calc(clamp(16px, 5vmin, 40px) + env(safe-area-inset-bottom, 0px));
    box-sizing:border-box;
    background:var(--gv-loader-bg);
    color:var(--gv-loader-color);
    opacity:1;
    transition:opacity var(--gv-loader-fade) cubic-bezier(.4,0,.2,1);
    -webkit-font-smoothing:antialiased;
  }
  .gv-loader *, .gv-loader *::before, .gv-loader *::after{ box-sizing:border-box; }
  .gv-loader[data-state="out"]{ opacity:0; pointer-events:none; }

  /* ---------------------------------------------------------- il simbolo -- */
  .gv-loader .gv-pila{
    display:flex; flex-direction:column; align-items:center;
    width:min(var(--gv-loader-size), 78vw);
    gap:calc(min(var(--gv-loader-size), 78vw) * .11);
  }
  .gv-loader .gv-simbolo{ width:100%; aspect-ratio:845/834; display:block; overflow:visible; }
  .gv-loader .gv-wire{ stroke:currentColor; fill:none; opacity:0; }
  .gv-loader .gv-mark{ fill:currentColor; opacity:1; }

  /* ----------------------------------------------------------- la barra --- */
  /* Squadrata come tutto il resto del sistema: nessun raggio, nessun lucido.
     Il pieno si muove in scaleX, che sta sul compositore e non ridisegna nulla. */
  .gv-loader .gv-bar{
    position:relative; overflow:hidden;
    width:var(--gv-bar-width); height:var(--gv-bar-height);
  }
  .gv-loader .gv-bar i{ position:absolute; inset:0; display:block; background:currentColor; }
  .gv-loader .gv-bar .gv-bar-fondo{ opacity:.14; }
  .gv-loader .gv-bar .gv-bar-pieno{ transform:scaleX(0); transform-origin:left center; }

  /* ------------------------------------------------------------ la firma --
     Rimessa su richiesta: anche sul proprio sito il velo si firma. Carattere e
     spazi presi dal componente footer, senza cambiarli. */
  .gv-loader .gv-pb{
    display:block; width:var(--gv-pb-width);
    color:var(--gv-pb-color); opacity:var(--gv-pb-opacity);
    align-self:end;
  }
  /* "POWERED BY": nessuna crenatura a occhio. Le lettere stanno in una riga
     flessibile e si distribuiscono da un bordo all'altro, quindi la scritta e'
     lunga quanto il logo a qualunque misura e con qualunque carattere. */
  .gv-loader .gv-pb__label{
    display:flex; justify-content:space-between; align-items:baseline;
    font-family:"Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight:500;
    font-size:max(8px, calc(var(--gv-pb-width) * .079));
    line-height:1; text-transform:uppercase; letter-spacing:0;
    margin-bottom:var(--gv-pb-gap);
  }
  .gv-loader .gv-pb__label i{ font-style:normal; }
  .gv-loader .gv-pb__label i[data-sp]{ width:1.1em; }
  /* Il lockup sta nel sistema di coordinate del file ufficiale, 676 x 218. */
  .gv-loader .gv-pb__lockup{ display:block; width:100%; aspect-ratio:676/218; }
  .gv-loader .gv-pb__lockup svg{ display:block; width:100%; height:100%; fill:currentColor; }

  /* html.gv-loading blocca lo scorrimento finche' il velo e' su */
  html.gv-loading, html.gv-loading body{ overflow:hidden; }