/* pellicola — video che avanza con lo scroll (vedi pellicola.js) */
[data-pellicola] { position: relative; }
[data-pellicola] .pellicola-fermo {
  position: sticky; top: 0; height: 100svh; overflow: hidden; background: #2E1C14;
}
[data-pellicola] canvas, [data-pellicola] .pellicola-fermo > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
[data-pellicola] canvas { opacity: 0; transition: opacity .4s ease; }
[data-pellicola] canvas.pronta { opacity: 1; }
[data-pellicola] .pellicola-didascalia {
  position: absolute; left: var(--margine, 1.5rem); bottom: clamp(1.5rem, 7vh, 3.5rem); z-index: 2;
  color: #F7EFE4; font-size: .85rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
/* Senza JS o con «riduci il movimento»: resta il primo fotogramma, alto quanto serve */
@media (min-width: 781px) {
  [data-pellicola] .pellicola-fermo > img { object-fit: contain; }
}
html:not(.muove) [data-pellicola] { height: auto !important; }
html:not(.muove) [data-pellicola] .pellicola-fermo { position: relative; height: auto; aspect-ratio: 3 / 4; max-height: 90svh; }
html:not(.muove) [data-pellicola] canvas { display: none; }