/*
 * Slogan Video - il video sul sito.
 *
 * Poche righe, e nessuna decisione di grafica: dove sta il video, quanto e'
 * grande e cosa gli va sopra lo decide il blocco che lo ospita. Qui c'e' solo
 * quello che vale sempre - riempire il contenitore senza deformarsi, e tenere
 * il punto dell'inquadratura che ha scelto chi ha montato.
 */

.slgn-vd {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: #0b0b0c;
}

/* Lo sfondo di una sezione: si prende tutto il contenitore e sta sotto. */
.slgn-vd--fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.slgn-vd__el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /*
   * Il fermo immagine e' l'attributo poster del <video>, quindi vive dentro
   * questo stesso elemento: ritagliarlo come si ritaglia il video - stesso
   * object-fit, stesso object-position - e' l'unico modo perche' il passaggio
   * dall'uno all'altro non si veda. Con valori diversi l'immagine "salta" nel
   * momento esatto in cui parte la riproduzione.
   */
  object-position: var(--slgn-vd-fuoco, 50% 50%);
}

@media (max-width: 780px) {
  .slgn-vd__el {
    object-position: var(--slgn-vd-fuoco-mobile, var(--slgn-vd-fuoco, 50% 50%));
  }
}

/*
 * Chi ha chiesto meno animazioni al sistema operativo non riceve mai il file:
 * lo script non gli mette nemmeno la sorgente. Resta il fermo immagine, che e'
 * un fotogramma dello stesso video - la pagina ha ancora l'immagine giusta al
 * posto giusto, semplicemente sta ferma.
 *
 * Questa regola non serve a fermare niente, quindi: non c'e'. E' scritta qui
 * solo perche' chi legge il CSS cercando "reduced-motion" trovi la spiegazione
 * invece del silenzio.
 */


/* ------------------------------------------------------------------ *
 * IL GIRELLO D'ATTESA
 *
 * Lo mette e lo toglie buffer.js sulla cornice del video, e vale per tutti i
 * video della pagina - quelli di questo plugin e quelli che i due builder si
 * disegnano da se'. Compare in due momenti, e sono due cose diverse:
 *
 *   prima della partenza, mentre il video prende i secondi di anticipo che
 *   gli servono per non fermarsi. Sotto, intanto, si vede gia' il primo
 *   fotogramma: il girello dice "sta arrivando", non copre un rettangolo
 *   nero;
 *
 *   durante, se il video si ferma davvero ('waiting'). Senza segnale, un
 *   video che si e' fermato per la rete e un video in pausa sono la stessa
 *   immagine ferma.
 *
 * E' piccolo e chiaro apposta: e' un'informazione, non un'attrazione. Il
 * fondo scuro sotto l'anello serve ai video chiari, dove un anello bianco su
 * un fotogramma bianco non si vedrebbe.
 * ------------------------------------------------------------------ */

.slgn-vd-girello {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 2px solid rgba(255, 255, 255, .3);
  border-top-color: rgba(255, 255, 255, .92);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, .18);
  pointer-events: none;
  animation: slgn-vd-gira .82s linear infinite;
}

@keyframes slgn-vd-gira {
  to { transform: rotate(360deg); }
}

/*
 * Meno animazioni: l'anello resta, e resta fermo. Toglierlo del tutto
 * vorrebbe dire togliere l'unica cosa che spiega perche' non si vede ancora
 * niente; farlo girare vorrebbe dire ignorare quello che e' stato chiesto.
 * Fermo e a mezza forza fa il suo mestiere senza muoversi.
 */
@media (prefers-reduced-motion: reduce) {
  .slgn-vd-girello {
    animation: none;
    border-color: rgba(255, 255, 255, .45);
    border-top-color: rgba(255, 255, 255, .45);
  }
}