/* =====================================================================
   FF Theme · anteprime disegnate dei design (mockup): struttura comune
   Usata dalla pagina Design e mockup e dal blocco «Design pronti» degli articoli.
   Ogni design aggiunge le sue regole .ff-art--{slug} dal campo «Anteprima CSS» del mockup (FF Core),
   stampate nell'<head> solo per i design mostrati; qui la finestra del browser, gli strati e l'anteprima generica.
   ===================================================================== */
/* ===== Anteprima: una finestra del browser con il design disegnato in CSS (strati .l1 .l2 .l3 e la scritta .w) ===== */
.ff-art{--mx:0;--my:0;position:relative;container-type:inline-size;display:block;aspect-ratio:16/10;overflow:hidden;text-decoration:none;border-bottom:1px solid var(--line);isolation:isolate;-webkit-user-drag:none;background:#1b1917;color:inherit}
.ff-art-bar{position:absolute;inset:0 0 auto;height:max(26px,4.4cqi);z-index:3;display:flex;align-items:center;gap:5px;padding:0 10px;background:rgba(0,0,0,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ff-art-bar i{width:max(7px,1.1cqi);height:max(7px,1.1cqi);border-radius:50%;background:rgba(255,255,255,.35)}
.ff-art-bar em{margin-left:10px;font:400 max(.62rem,1.5cqi)/1 var(--ff-mono);font-style:normal;letter-spacing:.04em;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ff-art-in{position:absolute;inset:0;transition:transform 900ms var(--ff-ease-out)}
.ff-art-in .l,.ff-art-in .w{position:absolute;transition:transform 600ms var(--ff-ease-out)}
.ff-art-in .w{font-style:normal;white-space:nowrap}
.ff-art-in .l1{transform:translate(calc(var(--mx) * -10px),calc(var(--my) * -10px))}
.ff-art-in .l2{transform:translate(calc(var(--mx) * 16px),calc(var(--my) * 16px))}
.ff-art-in .l3{transform:translate(calc(var(--mx) * 26px),calc(var(--my) * 26px))}
.ff-art-in .w{transform:translate(calc(var(--mx) * 8px),calc(var(--my) * 8px))}
.ff-art:hover .ff-art-in{transform:scale(1.04)}
.ff-art-go{position:absolute;right:12px;bottom:12px;z-index:3;padding:8px 11px;background:var(--ff-paper);color:var(--ff-char);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:opacity var(--ff-t-mid),transform var(--ff-t-mid) var(--ff-ease-out)}
.ff-art:hover .ff-art-go,.ff-art:focus-visible .ff-art-go{opacity:1;transform:none}
.ff-art:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* anteprima generica: per i design senza «Anteprima CSS» (finestra scura, un alone magenta, il nome) */
.ff-art--auto{background:linear-gradient(150deg,#26221f,#141312)}
.ff-art--auto .l1{right:-8%;top:-12%;width:52%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(229,51,122,.5),transparent 66%);filter:blur(8px)}
.ff-art--auto .l2{left:7%;top:28%;width:40%;height:1px;background:rgba(236,231,224,.4);box-shadow:0 12px 0 rgba(236,231,224,.2),0 24px 0 rgba(236,231,224,.12)}
.ff-art--auto .l3{right:8%;bottom:14%;width:26%;height:30%;border:1px solid rgba(236,231,224,.25)}
.ff-art--auto .w{left:7%;bottom:9%;font:600 6.4cqi/1 var(--ff-sans);letter-spacing:-.03em;color:#ece7e0}
@media (prefers-reduced-motion:reduce){
  .ff-art-in,.ff-art-in .l,.ff-art-in .w{transition:none}
  .ff-art:hover .ff-art-in{transform:none}
}