/* F3TV — CSS degli stampi per i riquadri home: banda (+ foglio CAD) e sfilata.
   Staccato da player.css; si carica subito dopo (dipende da f3tv-player). */

/* --------------------------- banda (riquadri home) ---------------------------
   Lo schermo qui è basso e largo (circa 4:1): misure in cqw, foto limitata in
   altezza al 72% e in larghezza al 34%. Sotto 560px (quadrati, telefono) la
   scritta cresce. */
.f3tv-banda { display: flex; align-items: center; justify-content: space-between; gap: 4cqw; padding: 0 3.8cqw 0 4.3cqw; }
/* la scena banda non sfuma in entrata (fondo trasparente, il fondo è dello schermo):
   esce solo la vecchia, così il titolo fisso non lampeggia */
.f3tv-schermo:has(> .f3tv-banda) { background: #ece8e1; }
.f3tv-scena.f3tv-banda { background: transparent; opacity: 1; transform: none; transition: none; }
.f3tv-scena.f3tv-banda.f3tv-esce { opacity: 0; transition: opacity .45s ease; }
.f3tv-banda-fisso { font-weight: 800; font-size: 3.9cqw; line-height: 1; letter-spacing: .02cqw; text-transform: uppercase; color: #1d1915; }
.f3tv-banda-testi { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1.2cqw; }
.f3tv-banda .f3tv-vetrina-titolo { font-size: 3.7cqw; }
.f3tv-banda .f3tv-banda-fisso + .f3tv-vetrina-titolo { font-size: 2.5cqw; font-weight: 600; color: #2b6cb0; }
.f3tv-banda .f3tv-vetrina-sotto { font-size: 1.75cqw; padding: 0; }
.f3tv-banda-foto { flex: 0 0 auto; max-width: 34%; max-height: 72%; width: auto; height: auto; object-fit: contain;
  filter: drop-shadow(0 .8cqw 1.2cqw rgba(60,40,20,.16)); }
@container f3tv (max-width: 560px) {
  .f3tv-banda { gap: 3cqw; padding: 0 5cqw; }
  .f3tv-banda .f3tv-vetrina-titolo { font-size: 7cqw; }
  .f3tv-banda-fisso { font-size: 7cqw; }
  .f3tv-banda .f3tv-banda-fisso + .f3tv-vetrina-titolo { font-size: 4.8cqw; }
  .f3tv-banda .f3tv-vetrina-sotto { font-size: 3.4cqw; }
  .f3tv-banda-foto { max-width: 42%; }
}


/* ---------------------- banda con foglio CAD (foglio:"cad") ----------------------
   Carta chiara, griglia blu numerata (canvas, 05_vetrina-cad.js), cubo delle
   viste in alto a destra, cartiglio in basso a sinistra. Testi in alto a
   sinistra, foto a destra un po' più in basso, quota sotto la foto. */
.f3tv-schermo:has(> .f3tv-cad) { background: #f7f9fc; }
.f3tv-cad-foglio { position: absolute; inset: 0; pointer-events: none; }
.f3tv-cad-griglia { position: absolute; inset: 0; width: 100%; height: 100%; }
.f3tv-cad-cubo { position: absolute; right: 2%; top: calc(18px + 4%); width: 46px; height: 46px; }
.f3tv-cad-cartiglio { position: absolute; left: calc(18px + 2.4%); bottom: 6%; display: grid; grid-template-columns: auto auto auto;
  border: 1px solid #1f4f86; background: #f7f9fc; color: #1f4f86; text-transform: uppercase; letter-spacing: .05em;
  font: 500 9.5px/1.25 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; }
.f3tv-cad-cartiglio div { padding: 3px 7px; border-left: 1px solid rgba(43,108,176,.24); white-space: nowrap; }
.f3tv-cad-cartiglio div:first-child { border-left: 0; }
.f3tv-cad-cartiglio b { display: block; font-weight: 400; font-size: 7.5px; opacity: .65; }
.f3tv-banda.f3tv-cad { display: block; padding: 0; }
.f3tv-banda.f3tv-cad .f3tv-banda-testi { position: absolute; left: 9%; top: 19%; max-width: 42%; gap: .9cqw; }
.f3tv-banda.f3tv-cad .f3tv-banda-fisso { font: 500 max(10px, 1.6cqw) ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  letter-spacing: .14em; color: #1f4f86; }
.f3tv-banda.f3tv-cad .f3tv-vetrina-titolo,
.f3tv-banda.f3tv-cad .f3tv-banda-fisso + .f3tv-vetrina-titolo { font-size: 4.2cqw; font-weight: 800; line-height: 1.08; color: #17202b; text-wrap: balance; }
.f3tv-banda.f3tv-cad .f3tv-banda-foto { position: absolute; right: 9%; top: 28%; height: 54%; width: auto; max-width: 46%; max-height: none; }
@container f3tv (max-width: 560px) {
  .f3tv-banda.f3tv-cad .f3tv-banda-fisso + .f3tv-vetrina-titolo { font-size: 6cqw; }
  .f3tv-cad-cartiglio { display: none; }
}

/* -------------------------- sfilata (riquadri home) --------------------------
   Misure in --u = min(altezza, 69% larghezza): il riquadro è 3:2 sul sito,
   quadrato sul telefono, e la scritta deve stare dentro in tutti e due. Personaggi alti il 76%,
   appoggiati sullo stesso pavimento; ombra ai piedi che viaggia con loro. */
@font-face { font-family: "F3TV Luckiest"; src: url("fonts/luckiest-guy.woff2") format("woff2"); font-display: swap; }
.f3tv-schermo:has(> .f3tv-sfilata) { background: #f6d69d; container-type: size; --u: min(1cqh, .69cqw); }
.f3tv-sf-scuoti { position: absolute; inset: 0; animation: f3tv-sf-scossa .45s linear var(--t-boom, 2.2s); }
.f3tv-sf-uno { position: absolute; left: 50%; bottom: 9%; height: 76%; width: auto; max-width: 60%; object-fit: contain;
  opacity: 0; transform: translateX(-50%); filter: drop-shadow(0 .8cqw 1.2cqw rgba(60,40,20,.18));
  animation: f3tv-sf-passa var(--sf-dur, 3s) var(--sf-delay, 0s) both; }
.f3tv-sf-ombra { position: absolute; left: 50%; bottom: 7%; width: 30%; height: 5%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(120,80,20,.32), transparent); opacity: 0;
  animation: f3tv-sf-passa var(--sf-dur, 3s) var(--sf-delay, 0s) both; }
@keyframes f3tv-sf-passa {
  0%   { opacity: 0; transform: translateX(60cqw); animation-timing-function: cubic-bezier(.15,.7,.25,1); }
  6%   { opacity: 1; }
  27%  { transform: translateX(-50%); animation-timing-function: linear; }
  73%  { opacity: 1; transform: translateX(-50%); animation-timing-function: cubic-bezier(.6,0,.85,.3); }
  94%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-160cqw); }
}
.f3tv-sf-titolo { position: absolute; left: 4cqw; top: 3.5cqw; font-size: 3.6cqw; font-weight: 800; text-transform: uppercase; color: #1d1915; z-index: 1; }

/* scritta cartoon: lettere bianche col contorno, che saltano dentro una a una */
.f3tv-sf-cartoon { position: absolute; inset: 0; padding: calc(5 * var(--u)) 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(7 * var(--u));
  font-family: "F3TV Luckiest", "Arial Black", Impact, sans-serif; text-align: center; line-height: 1; z-index: 2;
  animation: f3tv-sf-sgonfia .35s ease-in var(--t-via, 5s) forwards; }
.f3tv-sf-blocco { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: calc(.6 * var(--u)); transform: rotate(-4deg); }
.f3tv-sf-r { display: block; white-space: nowrap; }
.f3tv-sf-sopra { z-index: 4; }
.f3tv-sf-r.r1 { font-size: calc(13.1 * var(--u)); }
.f3tv-sf-r.r2 { font-size: calc(16.7 * var(--u)); }
.f3tv-sf-r.r3 { font-size: calc(11.6 * var(--u)); }
.f3tv-sf-r.r4 { font-size: calc(18.9 * var(--u)); letter-spacing: .02em; }
.f3tv-sf-r span { display: inline-block; color: #fff; opacity: 0; transform: scale(0) translateY(calc(8.7 * var(--u)));
  -webkit-text-stroke: .13em #1c2a33; paint-order: stroke fill; text-shadow: .07em .07em 0 #d63b2f, .12em .12em 0 #1c2a33;
  animation: f3tv-sf-lettera .5s cubic-bezier(.3,1.6,.5,1) forwards, f3tv-sf-saltella .9s ease-in-out 1s infinite alternate; }
.f3tv-sf-botto .f3tv-sf-r span { animation-name: f3tv-sf-botto, f3tv-sf-saltella; animation-duration: .45s, .9s; }
/* fondo: raggi rossi a ventaglio come nel logo, che girano piano, e stelline */
.f3tv-sf-raggi { position: absolute; left: 50%; top: 62%; width: calc(232 * var(--u)); height: calc(232 * var(--u)); margin: calc(-116 * var(--u)) 0 0 calc(-116 * var(--u)); border-radius: 50%; opacity: 0;
  background: repeating-conic-gradient(rgba(214,59,47,.16) 0 9deg, transparent 9deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 55%, transparent); mask: radial-gradient(closest-side, #000 55%, transparent);
  animation: f3tv-sf-compari .5s ease-out var(--t-fondo, 1.3s) forwards, f3tv-sf-gira 14s linear var(--t-fondo, 1.3s) infinite; }
.f3tv-sf-stellina { position: absolute; width: calc(8.7 * var(--u)); height: calc(8.7 * var(--u)); margin: calc(-4.35 * var(--u)); background: #fff; opacity: 0; transform: scale(0);
  animation: f3tv-sf-lettera .4s cubic-bezier(.3,1.6,.5,1) forwards, f3tv-sf-brilla 1.1s ease-in-out infinite alternate; }
.f3tv-sf-stellina:nth-of-type(2n) { background: #ffd23f; width: calc(6.5 * var(--u)); height: calc(6.5 * var(--u)); }
/* BOOM: nuvola a punte rossa e gialla dietro «I PERSONAGGI», con lampo e scossa */
.f3tv-sf-boom { position: absolute; left: 50%; top: 50%; width: calc(116 * var(--u)); height: calc(66.7 * var(--u)); margin: calc(-33.4 * var(--u)) 0 0 calc(-58 * var(--u)); z-index: -1;
  opacity: 0; transform: scale(0) rotate(-20deg); animation: f3tv-sf-esplodi .55s cubic-bezier(.2,1.8,.4,1) var(--t-boom, 2.2s) forwards; }
.f3tv-sf-boom i { position: absolute; inset: 0; }
.f3tv-sf-boom .b1 { background: #d63b2f; }
.f3tv-sf-boom .b2 { background: #ffd23f; }
.f3tv-sf-lampo { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 4; pointer-events: none; animation: f3tv-sf-lampo .35s ease-out var(--t-boom, 2.2s); }
@keyframes f3tv-sf-lettera { to { opacity: 1; transform: none; } }
@keyframes f3tv-sf-botto { 0% { opacity: 0; transform: scale(2.6); } 60% { opacity: 1; transform: scale(.85); } 100% { opacity: 1; transform: none; } }
@keyframes f3tv-sf-saltella { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(calc(-1.2 * var(--u))) rotate(-3deg); } }
@keyframes f3tv-sf-compari { to { opacity: 1; } }
@keyframes f3tv-sf-gira { to { transform: rotate(360deg); } }
@keyframes f3tv-sf-brilla { to { transform: scale(.7) rotate(25deg); } }
@keyframes f3tv-sf-esplodi { 0% { opacity: 1; transform: scale(0) rotate(-20deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes f3tv-sf-lampo { 0% { opacity: .9; } 100% { opacity: 0; } }
@keyframes f3tv-sf-sgonfia { 30% { transform: scale(1.08); } 100% { transform: scale(0); opacity: 0; } }
@keyframes f3tv-sf-scossa { 0%, 100% { transform: none; } 15% { transform: translate(-2%, 1%) rotate(-1deg); } 35% { transform: translate(2%, -1%) rotate(1deg); }
  55% { transform: translate(-1.5%, -.5%); } 75% { transform: translate(1%, .5%); } }

/* cornice stampata a strati (righe dei layer) e adesivo col logo che ogni tanto trema */
.f3tv-sf-cornice { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.f3tv-sf-cornice .strati { position: absolute; inset: 0; padding: calc(8 * var(--u));
  background: repeating-linear-gradient(0deg, #e8bf74 0 1.5px, #edc985 1.5px 3px);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
.f3tv-sf-cornice .filo { position: absolute; inset: calc(8 * var(--u)); border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px #c9984a, inset 0 6px 12px -6px rgba(110,70,10,.35); }
.f3tv-sf-adesivo { position: absolute; top: calc(2.3 * var(--u)); right: calc(2.3 * var(--u)); width: calc(24.7 * var(--u)); height: auto; transform: rotate(8deg); transform-origin: 60% 40%;
  filter: drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(0 2px 3px rgba(60,35,0,.35));
  animation: f3tv-sf-trema 5s ease-in-out infinite; }
@keyframes f3tv-sf-trema {
  0%, 82%, 100% { transform: rotate(8deg); }
  85% { transform: rotate(4deg) scale(1.03); } 88% { transform: rotate(11deg); } 91% { transform: rotate(6deg); } 94% { transform: rotate(9deg); } 97% { transform: rotate(7.5deg); } }

/* movimento ridotto: scritta completa ferma, niente sfilata */
.f3tv-sfilata.f3tv-ridotto .f3tv-sf-r span,
.f3tv-sfilata.f3tv-ridotto .f3tv-sf-stellina,
.f3tv-sfilata.f3tv-ridotto .f3tv-sf-boom,
.f3tv-sfilata.f3tv-ridotto .f3tv-sf-raggi { opacity: 1; transform: none; }
.f3tv-sfilata.f3tv-ridotto .f3tv-sf-uno, .f3tv-sfilata.f3tv-ridotto .f3tv-sf-ombra, .f3tv-sfilata.f3tv-ridotto .f3tv-sf-lampo { display: none; }
@media (prefers-reduced-motion: reduce) {
  .f3tv-sf-r span, .f3tv-sf-stellina, .f3tv-sf-boom, .f3tv-sf-raggi { opacity: 1; transform: none; }
  .f3tv-sf-uno, .f3tv-sf-ombra, .f3tv-sf-lampo { display: none; }
  .f3tv-sf-adesivo { animation: none; }
}

/* ---------- tavola «I Personaggi»: sipario (06_tavole.js, vanoSipario) ----------
   Niente cerchio né bianco: il personaggio esce dal nero, due tende scure si
   aprono dal centro; a ogni giro si richiudono e si riaprono su un altro. */
.f3tv-tav-personaggi .f3tv-tav-luce { animation: f3tv-sip-buio 1.7s var(--in) ease-out both; }
.f3tv-tav-sip { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.f3tv-tav-sip::before, .f3tv-tav-sip::after { content: ""; position: absolute; top: 0; bottom: 0; width: 51%; translate: var(--v) 0;
  background: repeating-linear-gradient(90deg, #2b0a0e 0, #4a1219 6%, #2b0a0e 12%), #2b0a0e; box-shadow: 0 0 2cqw rgba(0, 0, 0, .6); }
.f3tv-tav-sip::before { left: 0; --v: -102%; }
.f3tv-tav-sip::after { right: 0; --v: 102%; }
.f3tv-tav-sip-apri::before, .f3tv-tav-sip-apri::after { animation: f3tv-sip-apri 1.3s var(--sd) cubic-bezier(.65, 0, .35, 1) both; }
.f3tv-tav-sip-cambio::before, .f3tv-tav-sip-cambio::after { animation: f3tv-sip-cambio var(--sl) var(--sd) ease-in-out; }
@keyframes f3tv-sip-buio { from { filter: brightness(0); } }
@keyframes f3tv-sip-apri { from { translate: 0 0; } }
@keyframes f3tv-sip-cambio { 0%, 100% { translate: var(--v) 0; } 42%, 54% { translate: 0 0; } }
@keyframes f3tv-tav-arriva { from, to { opacity: 1; } }
@keyframes f3tv-tav-via { to { opacity: 0; } }
.f3tv-tav.f3tv-ridotto .f3tv-tav-sip::before, .f3tv-tav.f3tv-ridotto .f3tv-tav-sip::after { animation: none !important; }