/* films.css — lista "Films" animata (proximity) per le pagine progetto con più video.
   Ogni voce apre il suo video nel lightbox (data-vimeo). L'animazione la pilota
   films.js impostando --effect (0..1) per voce; qui ogni proprietà lo legge.
   Colori/font dal design system del sito (accento Deep Azure). */

.wfilms { margin-top: clamp(28px, 3.2vw, 44px); }

.wfilms-list {
  list-style: none;
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.8vw, 10px);
}
.wfilms-list li { position: relative; }

.wfilms-item {
  --effect: 0;
  --mk: clamp(44px, 6vw, 72px);          /* lunghezza linea marker */
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 18px 13px calc(var(--mk) + 20px);
  border: 0;
  border-radius: 12px;
  text-align: left;
  color: inherit;
  cursor: pointer;
  font: inherit;
  /* box con bordo bianco tenue che appare sulla voce vicina al cursore */
  background: color-mix(in srgb, var(--fg, #f2f2ef) calc(var(--effect) * 4%), transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg, #f2f2ef) calc(var(--effect) * 55%), transparent);
}

/* linea marker a sinistra: cresce e vira all'accento con la vicinanza del cursore */
.wfilms-marker {
  position: absolute;
  left: 18px;
  top: 50%;
  height: 1px;
  width: calc(var(--mk) - 6px);
  transform-origin: left center;
  transform: translateY(-50%) scaleX(calc(0.6 + var(--effect) * 0.55));
  background: color-mix(in srgb, var(--accent) calc(var(--effect) * 100%), rgba(242, 242, 239, 0.2));
}

/* indice 01 / 02 */
.wfilms-i {
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--fg-faint, #8a8a8f);
  opacity: calc(0.5 + var(--effect) * 0.5);
  flex: none;
}

/* titolo del film: scivola verso destra e vira all'accento con la vicinanza */
.wfilms-t {
  font-family: var(--f-disp, "Archivo", sans-serif);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.55rem);
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: color-mix(in srgb, var(--accent-2, #7387f2) calc(var(--effect) * 100%), var(--fg, #f2f2ef));
  transform: translateX(calc(var(--effect) * 20px));
}

/* nota facoltativa sotto il titolo */
.wfilms-note {
  display: block;
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-faint, #8a8a8f);
  margin-top: 5px;
  transform: translateX(calc(var(--effect) * 20px));
}

/* icona play: compare e scivola dentro con la vicinanza */
.wfilms-play {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  color: var(--accent-2, #7387f2);
  opacity: var(--effect);
  transform: translateX(calc(-10px + var(--effect) * 10px));
}
.wfilms-play svg { width: 15px; height: 15px; fill: currentColor; display: block; }

/* focus tastiera visibile */
.wfilms-item:focus-visible { outline: 1px solid var(--accent, #3457e0); outline-offset: 4px; }

/* Touch / reduced-motion: niente proximity → lista statica ma con play sempre
   visibile (l'affordance resta chiara) */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .wfilms-play { opacity: 0.6; transform: none; }
}

/* — Lightbox: variante VERTICALE 9:16 per i reel — */
.lr-lb.portrait .lr-lb-frame {
  aspect-ratio: 9 / 16;
  width: min(100%, calc((100vh - 130px) * 9 / 16));
}