/* =============================================================================
   tv.css — i componenti della Web TV, condivisi dalle pagine del registro
   notturno (tv/, lazio/, paesaggi/, trentino-alto-adige/).

   Qui vive ciò che prima sarebbe stato ricopiato pagina per pagina:
   il player con la scritta in testa al filmato, la didascalia da museo sotto
   la cornice, il binario fotografico e il visore a schermo intero.
   I token vengono da base.css (registro notturno via data-theme="tv").
   Percorso RELATIVO come base.css: "../css/tv.css" dalle sottocartelle.
   ============================================================================= */

/* ----------  L'ingresso del registro notturno  ----------
   Ogni pagina della TV si accende come un proiettore che si scalda: la testata
   fiorisce dal buio. Un colpo solo, al load; con reduced-motion non esiste. */
@media (prefers-reduced-motion: no-preference){
  .area-head h1{ animation:proiettore .95s var(--ease) both; }
  .area-head__lead{ animation:proiettore .9s var(--ease) .14s both; }
  .area-head__state{ animation:proiettore .9s var(--ease) .28s both; }
  @keyframes proiettore{
    from{ opacity:0; transform:translateY(12px); filter:blur(7px) brightness(2.2); }
    to  { opacity:1; transform:none; filter:none; }
  }
}

/* ----------  Player · il filmato nella cornice da 1px  ---------- */
.player{
  position:relative; display:block; border:1px solid var(--line); background:oklch(0.10 0.012 65);
  aspect-ratio:16/9; overflow:hidden;
}
.player video{ display:block; width:100%; height:100%; object-fit:cover; background:oklch(0.10 0.012 65); }
.player:focus-within{ outline:2px solid var(--red); outline-offset:3px; }

/* il filmato verticale (girato per il telefono, come quello di Fossanova) sta intero
   nella stessa cornice 16:9 di tutti gli altri: dietro, la sua stessa immagine sfocata
   e abbassata di luce riempie la cornice, così non compaiono bande nere. Il fondo è un
   <img> e non un background CSS perché il build delle lingue riscrive solo gli attributi. */
.player--verticale .player__fondo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(.5) saturate(.8); pointer-events:none;
}
.player--verticale video{ position:relative; z-index:1; object-fit:contain; background:transparent; }

/* la durata dichiarata: chi valuta il sito vuole sapere quanto dura prima di premere */
.player__meta{
  margin-top:.7rem; display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; align-items:baseline;
  font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; color:var(--ink-mute);
}
.player__meta .dur{ font-variant-numeric:tabular-nums; letter-spacing:.12em; }

/* la scritta in testa al filmato, in trasparenza (Aldo, 2026-08): compare sul
   poster, sparisce quando parte il video, torna alla fine. Sta in alto per non
   coprire i comandi nativi. */
.player__slate{
  position:absolute; top:0; left:0; right:0; z-index:2; pointer-events:none;
  padding:clamp(.8rem,1.8vw,1.2rem) clamp(.9rem,2vw,1.3rem) clamp(1.6rem,3vw,2.2rem);
  background:linear-gradient(to bottom, oklch(0.05 0.02 60 / .68), transparent);
  transition:opacity .6s var(--ease);
}
.player.playing .player__slate{ opacity:0; }
.player__slate b{
  display:block; font-family:var(--serif); font-weight:500;
  font-size:clamp(1.1rem,2.4vw,1.7rem); line-height:1.1; color:oklch(0.98 0.01 85);
  text-shadow:0 1px 12px oklch(0.05 0.02 60 / .6);
}
.player__slate i{
  display:block; margin-top:.3rem; font-style:normal;
  font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; color:oklch(0.98 0.01 85 / .72);
}

/* il credito obbligatorio (IDM): condizione d'uso, non didascalia decorativa */
.credito{
  margin-top:.55rem; font-size:var(--t-label); letter-spacing:.12em;
  text-transform:uppercase; font-weight:600; color:var(--ink-mute);
}
.credito b{ color:var(--ink-soft); font-weight:600; }

/* la didascalia da museo sotto la cornice */
.canale__cap{ margin-top:.7rem; }
.canale__cap .t{ display:block; font-family:var(--serif); font-weight:500; font-size:var(--t-body); line-height:1.3; color:var(--ink); }
.canale__cap .m{
  display:block; margin-top:.3rem;
  font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; color:var(--ink-mute); font-variant-numeric:tabular-nums;
}

/* ----------  Il binario fotografico  ---------- */
.fotoit__scroll{
  display:grid; grid-auto-flow:column; grid-auto-columns:clamp(15rem,32vw,20rem);
  gap:clamp(1rem,2.2vw,1.6rem);
  overflow-x:auto; padding-bottom:1rem;
  scroll-snap-type:x proximity; scrollbar-width:none;
}
.fotoit__scroll::-webkit-scrollbar{ display:none; }
.lastra{ scroll-snap-align:start; }
/* la lastra tiene le proporzioni della SUA fotografia: niente ritagli uniformi */
.lastra__frame{
  display:block; width:100%; border:1px solid var(--line); background:var(--surface);
  padding:0; cursor:zoom-in; overflow:hidden; aspect-ratio:var(--ar,4/3);
  transition:border-color .45s var(--ease);
}
.lastra__frame img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
@media (hover:hover){ .lastra__frame:hover img{ transform:scale(1.05); } }
.lastra__frame:hover{ border-color:var(--red); }
.lastra__frame:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }
.lastra__t{ display:block; margin-top:.7rem; font-family:var(--serif); font-weight:500; font-size:var(--t-body); line-height:1.3; color:var(--ink); }
.lastra__m{ display:block; margin-top:.25rem; font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--ink-mute); }

/* ----------  Visore a schermo intero — stesso linguaggio del player  ---------- */
.lb{ width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; border:0; padding:0; background:oklch(0.13 0.018 60 / .97); color:oklch(0.97 0.01 85); overflow:hidden; }
.lb::backdrop{ background:oklch(0.09 0.015 60 / .86); }
.lb__stage{ position:absolute; inset:0; display:grid; grid-template-rows:minmax(0,1fr) auto; }
.lb__img{ position:relative; min-height:0; margin:clamp(3.6rem,7vw,5rem) clamp(1rem,7vw,6rem) .75rem; }
.lb__img img{ position:absolute; top:0; left:0; width:100%; height:100%; max-width:none; object-fit:contain; opacity:0; transition:opacity .4s var(--ease); }
.lb__img img.ready{ opacity:1; }
.lb__cap{ padding:1rem clamp(1rem,7vw,6rem) clamp(1.4rem,4vw,2.2rem); display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1.1rem; }
.lb__t{ font-family:var(--serif); font-weight:500; font-size:clamp(1.05rem,2.4vw,1.5rem); line-height:1.25; }
.lb__m{ font-size:var(--t-label); letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:oklch(0.98 0.01 85 / .58); }
.lb__n{ margin-left:auto; font-size:var(--t-label); letter-spacing:.18em; font-variant-numeric:tabular-nums; color:oklch(0.98 0.01 85 / .58); }
.lb__btn{ position:absolute; z-index:2; width:2.9rem; height:2.9rem; border-radius:50%; display:grid; place-items:center; background:oklch(1 0 0 / .08); border:1px solid oklch(1 0 0 / .18); color:oklch(0.98 0.01 85); cursor:pointer; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:background .3s var(--ease); }
.lb__btn:hover{ background:oklch(1 0 0 / .2); }
.lb__btn:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.lb__btn svg{ width:1.15rem; height:1.15rem; }
.lb__close{ top:clamp(.8rem,2vw,1.4rem); right:clamp(.8rem,2vw,1.4rem); }
.lb__prev{ left:clamp(.5rem,2vw,1.4rem); top:50%; transform:translateY(-50%); }
.lb__next{ right:clamp(.5rem,2vw,1.4rem); top:50%; transform:translateY(-50%); }