/* ==========================================================================
   VolantiniExpress · Loader
   Il volantino si stampa, poi parte in consegna.
   Marchio vettorizzato dall'artwork originale (fedeltà 98,1%).
   Nessuna dipendenza. Nessun font esterno.

   NOTA TECNICA — il sistema di riferimento del foglio
   Il volantino è un parallelogramma inclinato. Per far scorrere la testina
   *lungo* il foglio (e non in verticale) si passa nel suo sistema locale:
       matrix(.99902,-.04409,-.24468,.96961,682.1,78.3)
   asse X = bordo superiore del foglio, asse Y = bordo sinistro,
   origine = angolo in alto a sinistra. Dopo la matrice, translateX() scorre
   lungo il foglio: da 40 (bordo sinistro) a 660 (oltre l'ultimo inchiostro).

   La matrice sta nel CSS e non in un elemento g dentro clipPath: g non è un
   figlio ammesso di clipPath, i browser lo ignorano insieme al contenuto e
   la maschera resta vuota — cioè l'inchiostro verde non compare mai.
   ========================================================================== */

.vx-loader {
  /* --- inchiostri --- */
  --vx-red: #D23B2E;
  --vx-green: #1B7A5C;
  --vx-paper: #FAF8F4;
  --vx-graphite: #16150F;
  --vx-pencil: #8C877C;
  --vx-rule: #E2DCD1;

  /* --- misure --- */
  --vx-size: 200px;        /* larghezza del marchio */
  --vx-t: .9s;             /* durata della stampa (entrata) */
  --vx-loop: 1.5s;         /* ciclo delle scie di velocità */
  --vx-head: 40px;         /* posizione testina, unità foglio (40 → 660) */

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15em;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--vx-graphite);
}

/* --------------------------------------------------------------- il marchio */

.vx-mark {
  display: block;
  width: var(--vx-size);
  height: auto;
  overflow: visible;              /* serve all'uscita del volantino */
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vx-speed path,
.vx-sheet { stroke: var(--vx-red); }
.vx-ink   { stroke: var(--vx-green); }
.vx-head  { stroke: var(--vx-graphite); stroke-width: 6; opacity: 0; }

/* variante monocromatica: erede il colore del testo (bottoni, footer, dark) */
.vx-loader--mono .vx-speed path,
.vx-loader--mono .vx-sheet,
.vx-loader--mono .vx-ink { stroke: currentColor; }
.vx-loader--mono .vx-ink { opacity: .68; }

/* Testina e maschera vivono nel sistema del foglio.
   transform-origin 0 0 su view-box = origine dello spazio utente: così la
   matrice CSS equivale esattamente all'attributo transform dell'SVG. */
.vx-wipe,
.vx-head {
  transform-box: view-box;
  transform-origin: 0 0;
}

/* Le scie si allungano dal proprio capo sinistro. Origine esplicita: il bbox
   di una linea orizzontale ha altezza zero, quindi fill-box è inaffidabile. */
.vx-s1 { transform-origin: 128px 314.5px }
.vx-s2 { transform-origin: 203.5px 466px }
.vx-s3 { transform-origin: 48px 611.5px }

/* ------------------------------------------- stato di riposo = logo stampato
   Se JS non parte, o le animazioni sono disattivate, resta il logo integro. */

.vx-sheet      { stroke-dasharray: none; stroke-dashoffset: 0; }
.vx-wipe       { transform: matrix(.99902,-.04409,-.24468,.96961,682.1,78.3) translateX(660px); }
.vx-speed path { opacity: 1; transform: none; }

/* ------------------------------------------------------------ 1. LA STAMPA
   Il foglio si disegna, poi la testina attraversa il volantino
   seguendone l'inclinazione e depositando l'inchiostro verde. */

.vx-play .vx-sheet {
  stroke-dasharray: 3300;
  animation: vx-draw calc(var(--vx-t) * .72) cubic-bezier(.62,.02,.31,1) both;
}
@keyframes vx-draw { from { stroke-dashoffset: 3300 } to { stroke-dashoffset: 0 } }

.vx-play .vx-wipe,
.vx-play .vx-head {
  animation: vx-print calc(var(--vx-t) * .8) calc(var(--vx-t) * .2)
             cubic-bezier(.4,.05,.6,.95) both;   /* moto quasi costante: è una testina */
}
@keyframes vx-print {
  from { transform: matrix(.99902,-.04409,-.24468,.96961,682.1,78.3) translateX(40px) }
  to   { transform: matrix(.99902,-.04409,-.24468,.96961,682.1,78.3) translateX(660px) }
}

.vx-play .vx-head {
  animation-name: vx-print, vx-head-ink;
  animation-duration: calc(var(--vx-t) * .8), var(--vx-t);
  animation-delay: calc(var(--vx-t) * .2), 0s;
}
@keyframes vx-head-ink {
  0%, 18% { opacity: 0 }
  30%     { opacity: .5 }
  72%     { opacity: .5 }
  100%    { opacity: 0 }
}

/* ------------------------------------------------------- 2. LA DISTRIBUZIONE
   Ciclo continuo: tre scie che partono da sinistra e sfilano oltre il foglio,
   sfalsate, mentre il volantino avanza appena. Loop senza cuciture. */

.vx-play .vx-speed path { animation: vx-whoosh var(--vx-loop) cubic-bezier(.36,0,.2,1) infinite both; }
.vx-play .vx-s1 { animation-delay: var(--vx-t) }
.vx-play .vx-s2 { animation-delay: calc(var(--vx-t) + .09s) }
.vx-play .vx-s3 { animation-delay: calc(var(--vx-t) + .17s) }

@keyframes vx-whoosh {
  0%   { opacity: 0; transform: translateX(-160px) scaleX(.5) }
  20%  { opacity: 1; transform: translateX(0)      scaleX(1) }
  58%  { opacity: 1; transform: translateX(0)      scaleX(1) }
  84%  { opacity: 0; transform: translateX(120px)  scaleX(1.3) }
  100% { opacity: 0; transform: translateX(-160px) scaleX(.5) }
}

.vx-play .vx-mark { animation: vx-transit calc(var(--vx-loop) * 2.4) var(--vx-t) ease-in-out infinite both; }
@keyframes vx-transit {
  0%, 100% { transform: translateX(0)    rotate(0) }
  50%      { transform: translateX(1.4%) rotate(.45deg) }
}

/* ------------------------------------------------- 3. AVANZAMENTO REALE (%)
   La stampa non gira in loop: la guida la percentuale di caricamento. */

.vx-loader--progress .vx-wipe,
.vx-loader--progress .vx-head {
  animation: none;
  transform: matrix(.99902,-.04409,-.24468,.96961,682.1,78.3) translateX(var(--vx-head));
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.vx-loader--progress .vx-head { opacity: .45; }

.vx-loader.vx-snap .vx-wipe,
.vx-loader.vx-snap .vx-head { transition: none !important; }

/* --------------------------------------------------------------- 4. L'USCITA
   A caricamento finito il volantino accelera e sparisce a destra. */

.vx-loader.is-done .vx-mark {
  animation: vx-depart .78s cubic-bezier(.5,0,.72,.05) both;
}
@keyframes vx-depart {
  0%   { transform: translateX(0)   rotate(0)      scale(1);    opacity: 1 }
  22%  { transform: translateX(-2%) rotate(-.6deg) scale(.985); opacity: 1 }
  100% { transform: translateX(62%) rotate(2.4deg) scale(1.05); opacity: 0 }
}
.vx-loader.is-done .vx-speed path { animation: vx-whoosh-out .56s cubic-bezier(.4,0,.7,0) both; }
.vx-loader.is-done .vx-s2 { animation-delay: .05s }
.vx-loader.is-done .vx-s3 { animation-delay: .1s }
@keyframes vx-whoosh-out {
  0%   { opacity: 1; transform: translateX(0)     scaleX(1) }
  100% { opacity: 0; transform: translateX(200px) scaleX(2.4) }
}
.vx-loader.is-done .vx-head { opacity: 0; transition: opacity .2s; }

/* ------------------------------------------------------ testo di servizio */

.vx-loader__word {
  font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: calc(var(--vx-size) * .108);
  letter-spacing: .19em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
  padding-left: .19em;            /* compensa il tracking a destra */
}

.vx-loader__status {
  display: flex;
  align-items: baseline;
  gap: .8em;
  font-size: calc(var(--vx-size) * .052);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vx-pencil);
  margin: 0;
}
.vx-loader__pct { color: var(--vx-red); font-variant-numeric: tabular-nums; }

.vx-loader.is-done .vx-loader__word,
.vx-loader.is-done .vx-loader__status { animation: vx-fade .34s ease both; }
@keyframes vx-fade { to { opacity: 0; transform: translateY(-4px) } }

/* --------------------------------------------------------- 5. LE MISURE
   Un'unica variabile per taglia. Sotto i 60px la testina scompare. */

.vx-loader--block   { --vx-size: 132px; --vx-t: .78s; }
.vx-loader--compact { --vx-size: 46px;  --vx-t: .52s; --vx-loop: 1.25s; }
.vx-loader--inline  { --vx-size: 22px;  --vx-t: .42s; --vx-loop: 1.1s;
                      display: inline-block; vertical-align: -.22em; }

.vx-loader--compact .vx-head,
.vx-loader--inline  .vx-head { display: none; }
.vx-loader--inline  .vx-mark { animation: none; }   /* niente deriva a 22px */

/* --------------------------------------------------- 6. SCHERMATA INTERA */

.vx-overlay {
  --vx-paper: #FAF8F4;
  --vx-rule: #E2DCD1;
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;              /* il volantino esce di scena, non di pagina */
  display: grid;
  place-items: center;
  background: var(--vx-paper);
}
.vx-overlay.is-hidden { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s .4s; }

/* segni di registro: il fondale è un foglio di stampa, non un box */
.vx-overlay__crops { position: absolute; inset: clamp(14px, 3vw, 40px); pointer-events: none; }
.vx-overlay__crops::before,
.vx-overlay__crops::after,
.vx-overlay__crops i::before,
.vx-overlay__crops i::after {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  background:
    linear-gradient(#E2DCD1, #E2DCD1) center/100% 1px no-repeat,
    linear-gradient(#E2DCD1, #E2DCD1) center/1px 100% no-repeat;
}
.vx-overlay__crops::before      { top: -10px;    left: -10px }
.vx-overlay__crops::after       { top: -10px;    right: -10px }
.vx-overlay__crops i::before    { bottom: -10px; left: -10px }
.vx-overlay__crops i::after     { bottom: -10px; right: -10px }

/* barra inchiostri: i due colori del marchio + il nero della testina */
.vx-overlay__inks {
  position: absolute;
  bottom: clamp(14px, 3vw, 40px);
  left: 50%; transform: translateX(-50%);
  display: flex; gap: 3px;
}
.vx-overlay__inks span { width: 22px; height: 5px; }
.vx-overlay__inks span:nth-child(1) { background: #D23B2E }
.vx-overlay__inks span:nth-child(2) { background: #1B7A5C }
.vx-overlay__inks span:nth-child(3) { background: #16150F }

/* ------------------------------------------------------- 7. ACCESSIBILITÀ */

@media (prefers-reduced-motion: reduce) {
  .vx-loader .vx-mark,
  .vx-loader .vx-mark * {
    animation: none !important;
    transition: none !important;
  }
  .vx-loader .vx-mark       { transform: none }
  .vx-loader .vx-speed path { opacity: 1; transform: none }
  /* la maschera deve restare nel sistema del foglio, o taglia via tutto */
  .vx-loader .vx-wipe       { transform: matrix(.99902,-.04409,-.24468,.96961,682.1,78.3) translateX(660px) }
  .vx-loader .vx-head       { opacity: 0 }
  .vx-loader.is-done .vx-mark { opacity: 0; transition: opacity .3s !important }
}