/* ==========================================================================
   granello-buy.css — il plugin "il granello" renderizzato, fermo, con il video
   del display in loop. Tutto e' dentro .granello-buy: non tocca il resto del sito.

   POSIZIONE, in HTML: data-lato=
     "destra-grande"   plugin grande a destra, tagliato dal bordo destro (predefinito)
     "sinistra-grande" plugin grande a sinistra, tagliato dal bordo sinistro
     "destra" | "sinistra" | "centro"   plugin intero, tutto dentro il blocco

   OPZIONI (sul contenitore .granello-buy, o in un CSS del sito):
     --granello-buy-altezza        altezza del blocco                (100svh)
     --granello-buy-grande-larghezza  (solo "-grande") larghezza del plugin,
                                   in frazione di un riquadro 16:9 centrato (0.877)
     --granello-buy-grande-bordo   (solo "-grande") dove comincia il plugin,
                                   in frazione dello stesso riquadro   (0.492)
     --granello-buy-larghezza      larghezza del PLUGIN, in frazione
                                   della larghezza del blocco         (0.52)
     --granello-buy-larghezza-max  larghezza massima del plugin       (1100px)
     --granello-buy-margine        distanza dal bordo quando e' a
                                   destra o a sinistra, in frazione   (0.06)
     --granello-buy-altezza-max    il plugin non supera questa frazione
                                   dell'altezza del blocco            (0.82)
   ========================================================================== */
.granello-buy{
  --granello-buy-altezza:100vh;
  --granello-buy-larghezza:0.52;
  --granello-buy-larghezza-max:1100px;
  --granello-buy-margine:0.06;
  --granello-buy-altezza-max:0.82;
  --granello-buy-grande-larghezza:0.877;
  --granello-buy-grande-bordo:0.492;
  position:relative; width:100%; height:var(--granello-buy-altezza); overflow:hidden;
}
@supports (height:100svh){ .granello-buy{ --granello-buy-altezza:100svh; } }

.granello-buy__oggetto{
  position:absolute; left:0; top:0; isolation:isolate;
  opacity:0; transition:opacity .6s cubic-bezier(.22,1,.36,1);
}
.granello-buy.is-pronto .granello-buy__oggetto{ opacity:1; }

/* l'immagine renderizzata (trasparente: plugin + ombra) */
.granello-buy__render{
  position:absolute; inset:0; width:100%; height:100%; display:block; max-width:none;
  user-select:none; -webkit-user-drag:none; pointer-events:none;
}

/* il video sullo schermo: ritagliato dalla sagoma dello schermo (maschera PNG,
   la mette il JS) e sommato alla luce dell'immagine, cosi' il riflesso del vetro
   renderizzato resta sopra il video */
.granello-buy__schermo{
  position:absolute; inset:0; overflow:hidden; mix-blend-mode:screen; pointer-events:none;
  -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.granello-buy__video{
  position:absolute; left:0; top:0; transform-origin:0 0; display:block; max-width:none;
  width:1074px; height:552px; object-fit:fill;
}