/* ==========================================================================
   VELINA — carta da lucido a "gatefold" sopra la partecipazione.
   Tutto è in unità del contenitore .pila (container-type:inline-size):
   100cqw = larghezza della pila, altezza pila = 153.157cqw (982 x 1504).
   È UN SOLO FOGLIO avvolto attorno alla carta: il dorso sta dietro la partecipazione
   (.velina-dorso, fuori da .velina perché deve stare SOTTO la carta) e sui bordi sinistro e
   destro della carta si piega sul davanti nelle due ante. Le cerniere delle ante sono quindi
   i bordi della carta (0 e 100cqw). In alto e in basso la velina è più bassa della carta di
   1.6cqw, così si vede
   il bordo strappato della partecipazione sotto.
   Ogni anta è UN SOLO piano piatto con trasformazione 3D (niente
   preserve-3d, niente backface-visibility): il lato visibile (fronte/retro)
   lo decide velina.js in base all'angolo. Così su Safari/iOS non ci sono
   z-fighting né sfarfallii.
   ========================================================================== */

.velina{
  position:absolute; inset:0; z-index:2;
  pointer-events:none;                 /* è decorativa: i tocchi passano alla pila */
  perspective:320cqw;                  /* "camera" a ~3 larghezze carta */
  perspective-origin:50% 50%;
  --velina-top:1.6cqw;
  --velina-h:calc(153.157cqw - 3.2cqw);
}

/* ---------- ombre sulla carta / sul tavolo (2D, sotto le ante) ---------- */
.velina__ombra-contatto,
.velina__proiezione{
  position:absolute; top:var(--velina-top); height:var(--velina-h);
  will-change:opacity;
}
.velina__proiezione{ will-change:opacity, transform; }
/* ombra sottilissima dei bordi della velina appoggiata */
.velina__ombra-contatto{
  box-shadow:
    0 .12cqw .35cqw rgba(74,58,44,.16),
    0 0 .12cqw rgba(74,58,44,.18);
}
.velina__ombra-contatto--sx{ left:0;       width:50cqw; }
.velina__ombra-contatto--dx{ left:48.6cqw; width:51.4cqw; }

/* ombra portata dell'anta sollevata: parte dalla cerniera; velina.js la scala e la inclina */
.velina__proiezione{
  opacity:0;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.velina__proiezione--sx{
  left:0; width:50cqw; transform-origin:0 50%;
  background:linear-gradient(to right, rgba(74,58,44,.26) 0, rgba(74,58,44,.21) 66%, rgba(74,58,44,.15) 87%, rgba(74,58,44,0) 100%);
}
.velina__proiezione--dx{
  left:48.6cqw; width:51.4cqw; transform-origin:100% 50%;
  background:linear-gradient(to left, rgba(74,58,44,.26) 0, rgba(74,58,44,.21) 66%, rgba(74,58,44,.15) 87%, rgba(74,58,44,0) 100%);
}

/* ---------- ante ---------- */
.velina__anta{
  position:absolute; top:var(--velina-top); height:var(--velina-h);
  overflow:hidden;
  will-change:transform;
  transform:rotateY(0deg);
  -webkit-backface-visibility:visible; backface-visibility:visible;
}
/* l'anta di SINISTRA sta sopra (porta la ceralacca) e sormonta la destra di 1.4cqw:
   la giunzione visibile è a 50% */
.velina__anta--sx{ left:0;       width:50cqw;   transform-origin:0 50%;    z-index:2; }
.velina__anta--dx{ left:48.6cqw; width:51.4cqw; transform-origin:100% 50%; z-index:1; }

.velina__anta > *{ position:absolute; inset:0; }

/* "tela": riquadro grande quanto la pila, allineato alla pila, dentro l'anta */
.velina__tela{ position:absolute; top:-1.6cqw; width:100cqw; height:153.157cqw; }
.velina__anta--sx .velina__tela{ left:0; }
.velina__anta--dx .velina__tela{ left:-48.6cqw; }

/* velo latteo quando l'anta è staccata dalla carta (fronte: sopra la carta; retro: sopra il tavolo) */
.velina__velo{ background:rgba(247,247,244,.86); }
.velina__velo--retro{ background:rgba(248,247,243,.58); opacity:0; }
/* vista da dietro, aperta: vicino alla piega la carta curva e prende meno luce */
.velina__anta--sx .velina__velo--retro{
  background:linear-gradient(to right, rgba(228,224,216,.7) 0, rgba(242,240,235,.62) 3.5cqw, rgba(248,247,243,.57) 12cqw, rgba(251,250,247,.6) 100%);
}
.velina__anta--dx .velina__velo--retro{
  background:linear-gradient(to left, rgba(228,224,216,.7) 0, rgba(242,240,235,.62) 3.5cqw, rgba(248,247,243,.57) 12cqw, rgba(251,250,247,.6) 100%);
}

/* appoggiata: la partecipazione si intravede sfocata e schiarita
   (sfocata + un velo di quella nitida = l'alone tipico della carta da lucido a contatto) */
.velina__contatto,
.velina__lontano{ will-change:opacity; }
.velina__fondo{
  position:absolute; inset:0;
  background:url("../img/partecipazione-sfocata.webp") 0 0 / 100% 100% no-repeat;
}
.velina__fondo::after{
  content:""; position:absolute; inset:0;
  background:url("../img/partecipazione.webp") 0 0 / 100% 100% no-repeat;
  opacity:.24;
}
.velina__latte{ position:absolute; inset:0; background:rgba(248,247,244,.53); }
/* appena sollevata: niente dettagli, solo colore diffuso sotto un velo più fitto */
.velina__lontano .velina__fondo::after{ display:none; }
.velina__lontano .velina__latte{ background:rgba(248,247,244,.82); }
/* doppio strato dove l'anta sinistra sormonta la destra: un filo più bianco */
.velina__anta--sx .velina__contatto .velina__latte{
  background:
    linear-gradient(to left, rgba(252,251,248,.42) 0, rgba(252,251,248,.30) 1.25cqw, rgba(252,251,248,0) 1.5cqw),
    rgba(248,247,244,.53);
}
/* sotto la giunzione, la destra riceve l'ombra sottile del bordo dell'anta sinistra */
.velina__sottoombra{
  right:auto !important; width:3cqw;
  background:linear-gradient(to right, rgba(74,58,44,0) 0, rgba(74,58,44,0) 1.4cqw, rgba(74,58,44,.13) 1.42cqw, rgba(74,58,44,.04) 2.1cqw, rgba(74,58,44,0) 3cqw);
  will-change:opacity;
}

/* nuvolosità della carta da lucido */
.velina__trama{
  background:url("../img/velina-trama.webp") 0 0 / 52cqw 52cqw repeat;
  opacity:.85;
}
.velina__anta--dx .velina__trama{ background-position:18.4cqw 31cqw; }

/* stampe: inchiostro leggero, sul retro si vedono specchiate (è il piano visto da dietro) e più tenui */
.velina__stampa{ opacity:.8; }
/* la striscia della destra che sta sotto la sinistra non è stampata (come sul foglio vero) */
.velina__anta--dx .velina__stampa{ left:1.4cqw; overflow:hidden; }
.velina__anta--dx .velina__stampa .velina__tela{ left:-50cqw; }
.velina__stampa .velina__tela > i{ position:absolute; display:block; background-size:100% 100%; background-repeat:no-repeat; }
.velina__monogramma{ left:38.314cqw; top:9.717cqw; width:21.706cqw; aspect-ratio:691 / 796; background-image:url("../img/velina-stampa-monogramma.webp"); }  /* allineato al monogramma stampato sulla partecipazione */
.velina__ramo--sx{ left:17.2cqw;  top:13.6cqw; width:26.6cqw; aspect-ratio:994 / 4355; background-image:url("../img/velina-stampa-ramo-sx.webp"); }
.velina__ramo--dx{ right:17.2cqw; top:13.9cqw; width:26.7cqw; aspect-ratio:999 / 4356; background-image:url("../img/velina-stampa-ramo-dx.webp"); }

/* ombreggiatura e lucentezza (pilotate da velina.js) */
.velina__luce{ background:rgb(66,58,50); opacity:0; will-change:opacity; }
.velina__riflesso{ opacity:0; will-change:opacity; overflow:hidden; }
.velina__riflesso > i{
  position:absolute; top:0; bottom:0; left:-50%; width:200%;
  background:linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 47%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 68%);
  will-change:transform;
}

/* bordi netti con un filo di luce + piega/cerniera sul bordo esterno */
.velina__bordo{
  box-shadow:
    inset 0 0 0 .1cqw rgba(255,255,255,.6),
    inset 0 0 .35cqw rgba(255,255,255,.35);
}
.velina__anta--sx .velina__bordo{
  background:linear-gradient(to right, rgba(130,118,104,.22) 0, rgba(255,255,255,.6) .3cqw, rgba(255,255,255,.18) 1cqw, rgba(255,255,255,0) 2.2cqw);
}
.velina__anta--dx .velina__bordo{
  background:linear-gradient(to left, rgba(130,118,104,.22) 0, rgba(255,255,255,.6) .3cqw, rgba(255,255,255,.18) 1cqw, rgba(255,255,255,0) 2.2cqw);
}

/* lato visibile = retro (classe messa da velina.js quando il piano supera il taglio) */
.velina__anta.is-retro .velina__velo--fronte,
.velina__anta.is-retro .velina__contatto,
.velina__anta.is-retro .velina__lontano,
.velina__anta.is-retro .velina__sottoombra{ visibility:hidden; }
.velina__anta.is-retro .velina__velo--retro{ opacity:1; }
.velina__anta.is-retro .velina__stampa{ opacity:.36; }

/* ---------- nastro di organza e ceralacca, su piani gemelli delle ante ----------
   Ogni piano ha la stessa geometria e la stessa rotazione della sua anta (velina.js copia la
   trasformazione), ma non taglia ciò che esce dai bordi: il nastro arriva fino al bordo della
   carta (copre il bordo strappato e si piega sul retro), la ceralacca sporge sulla giunzione. */
.velina__piano{
  position:absolute; top:var(--velina-top); height:var(--velina-h);
  pointer-events:none;
  will-change:transform;
  transform:rotateY(0deg);
  -webkit-backface-visibility:visible; backface-visibility:visible;
}
.velina__piano--sx{ left:0;       width:50cqw;   transform-origin:0 50%;    z-index:4; }
.velina__piano--dx{ left:48.6cqw; width:51.4cqw; transform-origin:100% 50%; z-index:2; }
/* l'anta sinistra (sopra) copre il nastro destro; la destra resta sotto a tutto */
.velina__anta--sx{ z-index:3; }

/* Nastro: ritagliato dalla foto dei nastri su bianco, la trasparenza (60–80%) è quella vera
   dell'organza. Ogni metà va dalla giunzione (sotto la ceralacca) al bordo della carta. */
.velina__nastro{
  position:absolute;
  top:calc(76.578cqw - 1.6cqw - 21.743cqw);      /* centro del nastro a metà carta */
  height:46.68cqw;
  width:50cqw;
}
.velina__nastro--sx{ left:0; }                   /* da 0 (bordo carta) a 50cqw (giunzione) */
.velina__nastro--dx{ left:1.4cqw; }              /* da 50cqw a 100cqw (bordo carta) */
.velina__nastro > i{ position:absolute; inset:0; display:block; }
.velina__nastro-tela{ background:var(--nastro-img) 0 0 / 100% 100% no-repeat; }
.velina__nastro--sx{ --nastro-img:url("../img/nastro-sx.webp"); --nastro-forma:url("../img/nastro-sx-forma.webp"); }
.velina__nastro--dx{ --nastro-img:url("../img/nastro-dx.webp"); --nastro-forma:url("../img/nastro-dx-forma.webp"); }

/* Dove il nastro passa sul bordo della carta (gli ultimi 1.6cqw, fuori dalla velina) è teso
   sopra la carta e si piega sul retro: lo strappo lì sotto non si vede. Uno strato color carta,
   con la forma piena del nastro, riempie le frange del bordo; sopra c'è il nastro vero. */
.velina__nastro-fondo{
  background:#f1eee8;                            /* carta vista attraverso la velina */
  -webkit-mask:var(--nastro-forma) 0 0 / 100% 100% no-repeat;
          mask:var(--nastro-forma) 0 0 / 100% 100% no-repeat;
}
.velina__nastro--sx .velina__nastro-fondo{ clip-path:inset(0 calc(100% - 1.75cqw) 0 0); }
.velina__nastro--dx .velina__nastro-fondo{ clip-path:inset(0 0 0 calc(100% - 1.75cqw)); }

/* la piega: dove il nastro gira dietro la carta il tessuto è doppio, quindi un filo più
   intenso e con un orlo appena più scuro; niente sfumatura, il bordo è netto */
.velina__nastro-piega{
  background:
    linear-gradient(var(--piega-verso), rgba(82,100,128,.30) 0, rgba(82,100,128,.30) .18cqw, rgba(82,100,128,0) .5cqw),
    var(--nastro-img) 0 0 / 100% 100% no-repeat;
  -webkit-mask:var(--nastro-img) 0 0 / 100% 100% no-repeat;
          mask:var(--nastro-img) 0 0 / 100% 100% no-repeat;
}
.velina__nastro--sx .velina__nastro-piega{ --piega-verso:to right; clip-path:inset(0 calc(100% - 1.25cqw) 0 0); }
.velina__nastro--dx .velina__nastro-piega{ --piega-verso:to left;  clip-path:inset(0 0 0 calc(100% - 1.25cqw)); }

/* ombreggiatura quando l'anta gira (pilotata da velina.js), solo dove c'è tessuto */
.velina__nastro-luce{
  background:rgb(50,56,70);
  -webkit-mask:var(--nastro-img) 0 0 / 100% 100% no-repeat;
          mask:var(--nastro-img) 0 0 / 100% 100% no-repeat;
  opacity:0; will-change:opacity;
}
/* visto da dietro attraverso la velina: più tenue */
.velina__piano.is-retro .velina__nastro{ opacity:.5; }

/* ---------- ceralacca (sul piano dell'anta sinistra) ---------- */
.velina__sigillo{
  position:absolute;
  left:calc(50cqw - 14.6cqw); top:calc(76.578cqw - 1.6cqw - 14.6cqw);
  width:29.2cqw; height:29.2cqw;
}
.velina__sigillo > i{ position:absolute; inset:0; display:block; background:url("../img/ceralacca.webp") 50% 50% / contain no-repeat; }
.velina__sigillo-cera{
  filter:
    drop-shadow(0 .15cqw .2cqw rgba(70,40,40,.35))
    drop-shadow(.3cqw .8cqw 1.2cqw rgba(70,48,40,.22));
}
/* ombreggiatura quando l'anta gira (pilotata da velina.js), ritagliata sulla forma della cera */
.velina__sigillo-luce{
  background:rgb(58,40,40) !important;
  -webkit-mask:url("../img/ceralacca.webp") 50% 50% / contain no-repeat;
          mask:url("../img/ceralacca.webp") 50% 50% / contain no-repeat;
  opacity:0; will-change:opacity;
}
/* da dietro la cera si intravede appena attraverso la velina, come una macchia rosata */
.velina__piano.is-retro .velina__sigillo{ opacity:.3; }
.velina__piano.is-retro .velina__sigillo-luce{ visibility:hidden; }

/* ---------- il dorso della velina, dietro la partecipazione ----------
   Si vede solo attraverso le frange del bordo strappato sui lati (dove la velina gira attorno
   alla carta) e quando, a carta aperta, la velina sfila via verso l'alto da sotto la carta. */
.velina-dorso{
  position:absolute; z-index:0;
  top:1.6cqw; height:calc(153.157cqw - 3.2cqw);
  left:-.25cqw; right:-.25cqw;                   /* la piega gira appena oltre il bordo della carta */
  border-radius:.5cqw;
  background:
    url("../img/velina-trama.webp") 0 0 / 52cqw 52cqw repeat,
    rgba(247,246,242,.9);
  box-shadow:0 .2cqw .6cqw rgba(60,50,40,.12);
  pointer-events:none;
  will-change:transform;
}
/* il nastro continua dietro la carta: disteso e teso, visto attraverso la velina del dorso */
.velina-dorso__nastro{
  position:absolute; display:block;
  left:-.5cqw; right:-.5cqw;
  top:calc(76.578cqw - 1.6cqw - 21.743cqw); height:46.68cqw;
  background:url("../img/nastro-dorso.webp") 0 0 / 100% 100% no-repeat;
  opacity:.6;
}