/* INSEGNE BRESCIA - v67 - fable.css (idee della prova del 2026-11-14 scelte dal titolare, portate nel sito il 2026-11-14)
   Un blocco per idea, marcato «Fxx inizio / Fxx fine»: F03 testimonianze a schede sul telefono, F04 passaggio fluido,
   F05 fasce a sipario, F09 accessibilità, F10 foto della vetrina, F11 frasi che si illuminano. Nel sito non ci sono
   interruttori: i selettori «html:root» hanno la stessa specificità che avevano con la classe f-Fxx della prova.
   Sorgente: LANDING v67/strumenti/sorgenti/fable.css (la build la copia). */

/* ======================================================================================================
   F03 inizio — Le testimonianze complete anche sul telefono (oggi sono nascoste): schede da sfogliare col dito
   ====================================================================================================== */
.fb-testi-nav, .fb-leggi{ display:none; }
@media (max-width:760px){
  html:root #testimonianze{ display:block!important; }
  html:root #testimonianze .testimonials-section{ padding:54px 0 40px!important; }
  html:root #testimonianze .testi-title{ font-size:clamp(24px, 7vw, 32px)!important; line-height:1.15!important; }
  html:root #testimonianze .testi-subtitle{ margin:14px 0 0!important; font-size:15px!important; line-height:1.5!important; }
  html:root #testimonianze .testi-grid{
    display:flex!important; align-items:flex-start; gap:12px; columns:auto!important; column-count:auto!important;
    width:100vw; max-width:none!important; margin:24px 0 0 calc(50% - 50vw)!important; padding:6px 7vw 14px!important; box-sizing:border-box;
    overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; overscroll-behavior-x:contain;
  }
  html:root #testimonianze .testi-grid::-webkit-scrollbar{ display:none; }
  html:root #testimonianze .testi-card{
    flex:0 0 86vw; width:86vw; max-width:86vw; box-sizing:border-box; margin:0!important; scroll-snap-align:center; scroll-snap-stop:always;
    opacity:1!important; transform:none!important; transition:none!important; break-inside:auto;
  }
  /* testo chiuso su una decina di righe; «Leggi tutta» lo apre, parola per parola com'è */
  html:root #testimonianze .testi-card:not(.fb-aperta) .testi-body{
    max-height:16.5em; overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg, #000 72%, transparent 100%); mask-image:linear-gradient(180deg, #000 72%, transparent 100%);
  }
  html:root #testimonianze .testi-card.fb-corta .testi-body{ max-height:none; -webkit-mask-image:none; mask-image:none; }
  /* «⌄ CONTINUA A LEGGERE ⌄» come i «continua a leggere» del sito, in arancio e senza grassetto (titolare, 14/11) */
  html:root #testimonianze .fb-leggi{
    display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin:10px 0 4px; padding:10px 0; border:0; background:none; cursor:pointer;
    font:500 12.5px/1 'Montserrat', system-ui, sans-serif; color:#ff8a00; letter-spacing:.16em; text-transform:uppercase;
  }
  html:root #testimonianze .fb-leggi svg{ width:12px; height:12px; flex:0 0 auto; }
  html:root #testimonianze .testi-card.fb-corta .fb-leggi{ display:none; }
  html:root #testimonianze .fb-testi-nav{
    display:flex; flex-direction:column; align-items:center; gap:10px; margin:4px 0 0; color:rgba(255,255,255,.8); font:600 13px/1 'Montserrat', system-ui, sans-serif;
  }
  /* «< SFOGLIA le TESTIMONIANZE >», sottile e in arancio, sopra le frecce (titolare, 14/11) */
  html:root #testimonianze .fb-testi-label{ display:flex; align-items:center; gap:10px; margin:0; font:300 15px/1.2 'Montserrat', system-ui, sans-serif; color:#ff8a00; letter-spacing:.06em; }
  html:root #testimonianze .fb-testi-label svg{ width:12px; height:12px; flex:0 0 auto; }
  html:root #testimonianze .fb-testi-riga{ display:flex; align-items:center; justify-content:center; gap:16px; }

  /* Per far capire che ci sono altre schede ai lati (titolare, 14/11: V1, V2 e V3 sì; V4, frecce ai lati, no). Classi fb-v1…fb-v3, messe da fable.js. */
  /* V1 — le schede vicine si intravedono, più piccole e attenuate */
  html:root #testimonianze.fb-v1 .testi-grid{ padding-left:11vw!important; padding-right:11vw!important; }
  html:root #testimonianze.fb-v1 .testi-card{ flex-basis:78vw!important; width:78vw!important; max-width:78vw!important; }
  html:root #testimonianze.fb-v1 .testi-card:not(.fb-attiva){ opacity:.42!important; transform:scale(.93)!important; }
  html:root #testimonianze.fb-v1 .testi-card{ transition:opacity .35s ease, transform .35s ease!important; }
  /* V2 — la prima volta che la sezione arriva sullo schermo la striscia accenna uno spostamento, come un invito a scorrere */
  @keyframes fbSpinta{ 0%,100%{ transform:none; } 28%{ transform:translate3d(-56px,0,0); } 52%{ transform:none; } 72%{ transform:translate3d(-22px,0,0); } }
  html:root #testimonianze.fb-v2 .testi-grid.fb-spinta{ animation:fbSpinta 1.5s cubic-bezier(.45,0,.25,1) .2s 1 both; }
  /* V3 — sotto le schede, una barra a 20 tacche che dice quante sono e dove sei */
  html:root #testimonianze .fb-tacche{ display:none; }
  /* titolare, 14/11: «i trattini falli diventare pallini» */
  html:root #testimonianze.fb-v3 .fb-tacche{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:7px; max-width:calc(100vw - 40px); margin:4px auto 0; }
  html:root #testimonianze.fb-v3 .fb-tacche i{ flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.25); transition:background .25s, transform .25s; }
  html:root #testimonianze.fb-v3 .fb-tacche i.on{ background:#ff8a00; transform:scale(1.35); }
  html:root #testimonianze .fb-testi-nav button{
    width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.06); color:#fff; font-size:20px; line-height:1; cursor:pointer;
  }
  html:root #testimonianze .fb-testi-nav button:disabled{ opacity:.3; }
  html:root #testimonianze .fb-testi-nav b{ color:#ff8a00; font-weight:800; }
  html:root #testimonianze .testi-cta-band{ display:block!important; opacity:1!important; transform:none!important; margin-top:30px!important; }
}
/* F03 fine */

/* ======================================================================================================
   F04 inizio — Passaggio fluido tra pagina e galleria (View Transitions). Lo stesso blocco sta anche in galleria.html.
   ====================================================================================================== */
@view-transition{ navigation:auto; }
@keyframes fbEsce{ to{ opacity:0; transform:scale(.985); } }
@keyframes fbEntra{ from{ opacity:0; transform:translate3d(0,26px,0); } }
html:root::view-transition-old(root){ animation:.28s cubic-bezier(.4,0,1,1) both fbEsce; }
html:root::view-transition-new(root){ animation:.5s cubic-bezier(.16,1,.3,1) .08s both fbEntra; }
html:root::view-transition-group(fb-galleria){ animation-duration:.6s; animation-timing-function:cubic-bezier(.16,1,.3,1); }
@media (prefers-reduced-motion:reduce){
  html:root::view-transition-group(*), html:root::view-transition-old(*), html:root::view-transition-new(*){ animation:none!important; }
}
/* F04 fine */

/* ======================================================================================================
   F05 inizio — Fasce «a sipario»: la fascia fotografica resta ferma e la sezione dopo le sale sopra
   ====================================================================================================== */
html:root{ --fb-r:clamp(20px, 2.6vw, 38px); }
/* correzione del 14/11 (titolare: agli angoli stondati si vedeva il fondo bianco all'inizio della salita):
   la sezione dopo parte già sovrapposta alla fascia per quanto è grande la stondatura, così dietro gli angoli c'è la foto */
html:root .ib-sep:not(.v66-sep-inline){ position:sticky; top:0; z-index:0; margin-bottom:calc(-1 * var(--fb-r)); }
/* tutto ciò che viene dopo una fascia deve stare sopra di lei (le finestre fisse restano fuori) */
html:root .ib-sep ~ section, html:root .ib-sep ~ footer, html:root .ib-sep ~ a.ib-strip,
html:root .ib-sep ~ div[id]:not(.simulazione-modal):not(.contatti-overlay){ position:relative; z-index:1; }
html:root .ib-sep:not(.v66-sep-inline) + *{
  border-radius:var(--fb-r) var(--fb-r) 0 0; overflow:clip;
  box-shadow:0 -22px 60px rgba(0,0,0,.5);
}
html:root .ib-sep.fb-coperta{ visibility:hidden; }
/* sul telefono il vecchio foglio mette overflow-x:hidden su <body>, che impedisce a qualsiasi elemento di restare fermo:
   «clip» taglia allo stesso modo ma non blocca. Dove «clip» non è capito resta «hidden» e la fascia scorre come oggi. */
html:root body{ overflow-x:clip!important; }
/* F05 fine */

/* ======================================================================================================
   F09 inizio — Accessibilità: «salta al contenuto», contorno ben visibile con la tastiera, pausa del video
   ====================================================================================================== */
.fb-salta, .fb-pausa{ display:none; }
html:root .fb-salta{
  display:block; position:fixed; left:12px; top:12px; z-index:2147483001; padding:12px 18px; border-radius:10px; background:#ff8a00; color:#111; text-decoration:none;
  font:800 14px/1 'Montserrat', system-ui, sans-serif; transform:translate3d(0,-200%,0); transition:transform .2s;
}
html:root .fb-salta:focus{ transform:none; outline:3px solid #fff; outline-offset:2px; }
html:root a:focus-visible, html:root button:focus-visible, html:root summary:focus-visible, html:root [tabindex]:focus-visible,
html:root input:focus-visible, html:root textarea:focus-visible, html:root select:focus-visible{ outline:3px solid #ff8a00; outline-offset:3px; }
html:root .fb-pausa{
  display:grid; place-items:center; position:absolute; right:clamp(12px, 2vw, 26px); bottom:clamp(12px, 2vw, 24px); z-index:6; width:44px; height:44px; padding:0; border-radius:50%;
  background:rgba(7,10,25,.5); border:1px solid rgba(255,255,255,.35); color:#fff; cursor:pointer; opacity:.6; transition:opacity .2s, background .2s;
}
html:root .fb-pausa:hover, html:root .fb-pausa:focus-visible{ opacity:1; background:rgba(7,10,25,.8); }
html:root .fb-pausa svg{ width:16px; height:16px; fill:currentColor; }
html:root .fb-pausa .fb-i-play, html:root .fb-pausa[aria-pressed="true"] .fb-i-pausa{ display:none; }
html:root .fb-pausa[aria-pressed="true"] .fb-i-play{ display:block; }
/* F09 fine */

/* ======================================================================================================
   F10 inizio — Le foto della vetrina si svelano come una serranda che si alza
   ====================================================================================================== */
/* si taglia la foto e non il riquadro: un riquadro tagliato del tutto non risulterebbe mai «in vista» */
html.ib-motion:root .ib-tile{ opacity:1; transform:none; }
html.ib-motion:root .ib-tile:not(.is-in){ background:transparent; box-shadow:none; }
html.ib-motion:root .ib-tile::after{ opacity:0; transition:opacity .6s ease .5s; }
html.ib-motion:root .ib-tile.is-in::after{ opacity:1; }
html.ib-motion:root .ib-tile img{ clip-path:inset(100% 0 0 0); scale:1.22; }
html.ib-motion:root .ib-tile.is-in{ transition:box-shadow .3s ease; }
html.ib-motion:root .ib-tile.is-in img{
  clip-path:inset(0 0 0 0); scale:1;
  transition:clip-path 1.15s cubic-bezier(.16,1,.3,1) var(--d,0ms), scale 1.6s cubic-bezier(.16,1,.3,1) var(--d,0ms), transform .6s cubic-bezier(.16,1,.3,1);
}
/* F10 fine */

/* ======================================================================================================
   F11 inizio — Frasi chiave che si illuminano parola per parola mentre si scorre
   ====================================================================================================== */
html:root .fb-parole .fb-w{ opacity:var(--fb-o, 1); transition:opacity .25s linear; }
/* F11 fine */