/* Le demo per la TV (static/js/demo.js, demo/storie.py). Sopra tokens/schermo/mascotte/blueprint (riusati).
   Regola di costo (docs/animazioni.md): solo transform/opacity/filter; con prefers-reduced-motion resta la dissolvenza.
   Il documento della storia 3 è l'unica superficie chiara: è carta, dentro il buio del negozio. */
.demo-palco .demo-scene { position: absolute; inset: 0; }
html.demo .scena { padding: 6.5rem 6rem 4rem; }
.demo-marca { position: absolute; right: 6rem; top: 2.6rem; z-index: 5; display: inline-flex; align-items: center; gap: 1rem; border: .15rem solid var(--ambra); border-radius: 999px; padding: .5rem 1.3rem .5rem .9rem; color: var(--ambra); font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; background: rgba(14, 11, 20, .75); }
.demo-marca b { background: var(--ambra); color: #2a1a00; border-radius: 999px; padding: .2rem .8rem; letter-spacing: .22em; font-weight: 800; }
.demo-marca span { color: var(--testo-2); letter-spacing: .04em; text-transform: none; }
.demo-storia { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; height: 100%; min-height: 0; position: relative; z-index: 1; gap: 1.2rem; }
.demo-intesta { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; }
.demo-intesta .occhiello { margin-bottom: .5rem; }
.demo-titolo { font-size: 2.6rem; font-weight: var(--peso-titolo); letter-spacing: -.025em; line-height: 1.08; margin: 0; max-width: 70rem; text-transform: none; color: var(--testo); text-wrap: balance; }
.demo-mascotte { width: 7rem; flex: none; filter: drop-shadow(0 0 1.8rem rgba(139, 92, 246, .4)); }
.demo-corpo { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; min-height: 0; align-items: start; grid-template-rows: minmax(0, 1fr); }
.demo-sx, .demo-dx { display: flex; flex-direction: column; gap: 1.2rem; min-height: 0; min-width: 0; overflow: hidden; }
.demo-storia .carta { padding: 1.6rem 2rem; }
.subito, .subito * { animation-duration: 0s !important; transition-duration: 0s !important; }

/* bolle (trascrizione e chat) */
.demo-trascrizione { display: flex; flex-direction: column; justify-content: flex-end; gap: .8rem; min-height: 0; flex: 1; overflow: hidden; }
.demo-bolla { display: flex; flex-direction: column; gap: .3rem; max-width: 46rem; padding: .9rem 1.3rem; border-radius: 1.2rem; background: rgba(27, 22, 38, .8); border: 1px solid var(--bordo); font-size: 1.4rem; line-height: 1.35; animation: entra 520ms cubic-bezier(.2, .7, .2, 1) both; flex: none; }
.demo-bolla.ai { border-color: rgba(139, 92, 246, .45); background: rgba(139, 92, 246, .14); align-self: flex-end; border-bottom-right-radius: .3rem; }
.demo-bolla.cliente { align-self: flex-start; border-bottom-left-radius: .3rem; }
.demo-bolla.sistema { align-self: center; font-size: 1.1rem; color: var(--grigio); background: transparent; border: 0; }
.demo-chi { font-size: .9rem; letter-spacing: .18em; text-transform: uppercase; color: var(--grigio); font-weight: 700; }
.demo-bolla.ai .demo-chi { color: var(--viola); }
.demo-bolla.chat.ai { background: rgba(52, 211, 153, .14); border-color: rgba(52, 211, 153, .4); }
.demo-bolla.chat.ai .demo-chi { color: var(--ok); }

/* 1. receptionist */
.demo-telefono { display: flex; flex-direction: column; gap: .8rem; opacity: 0; transform: translateY(1rem); transition: opacity 500ms ease, transform 600ms cubic-bezier(.2, .7, .2, 1); }
.demo-telefono.visibile { opacity: 1; transform: none; }
.demo-tel-intesta { display: flex; align-items: center; gap: 1.2rem; }
.demo-tel-intesta .demo-icona { width: 2.6rem; height: 2.6rem; color: var(--ambra); flex: none; }
.demo-tel-chi { display: block; font-size: 1.6rem; }
.demo-tel-num { color: var(--grigio); font-size: 1.1rem; }
.demo-onda { height: 3.2rem; margin: 0; }
.demo-onda span { height: 3.2rem; width: .4rem; }
.demo-agenda { opacity: 0; transform: translateY(1rem); transition: opacity 600ms ease, transform 700ms cubic-bezier(.2, .7, .2, 1); }
.demo-agenda.visibile { opacity: 1; transform: none; }
.demo-griglia { display: grid; grid-template-columns: 5rem repeat(5, 1fr); gap: .4rem; font-size: 1rem; }
.demo-giorno { text-align: center; color: var(--grigio); letter-spacing: .12em; text-transform: uppercase; font-size: .9rem; padding-bottom: .3rem; }
.demo-ora { color: var(--grigio); font-variant-numeric: tabular-nums; font-size: .95rem; display: flex; align-items: center; }
.demo-slot { height: 3.6rem; border-radius: .6rem; border: 1px solid var(--bordo); display: flex; align-items: center; justify-content: center; font-size: .9rem; color: var(--grigio); text-align: center; padding: 0 .3rem; position: relative; transition: background 400ms ease, border-color 400ms ease, color 400ms ease; }
.demo-slot.occupato { background: rgba(201, 195, 214, .08); color: rgba(154, 148, 171, .7); }
.demo-slot.libero { border-color: var(--ambra); color: var(--ambra); animation: demo-pulsa 1.4s ease-in-out infinite; }
.demo-slot.prenotato { background: var(--ambra); color: #2a1a00; border-color: var(--ambra); font-weight: 700; font-size: .95rem; }
.demo-slot.prenotato::after { content: ""; position: absolute; inset: -.3rem; border-radius: .8rem; box-shadow: 0 0 2.4rem rgba(245, 165, 36, .7); opacity: 0; animation: accendi 1600ms ease-out both; }
@keyframes demo-pulsa { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* 2. whatsapp */
.demo-chat-cornice { display: flex; flex-direction: column; gap: 1rem; }
.demo-chat-intesta { display: flex; align-items: center; gap: .9rem; color: var(--ok); font-size: 1.3rem; border-bottom: 1px solid var(--bordo); padding-bottom: .8rem; }
.demo-chat-intesta .demo-icona { width: 2.2rem; height: 2.2rem; }
.demo-scheda { opacity: 0; transform: translateY(1rem); transition: opacity 600ms ease, transform 700ms cubic-bezier(.2, .7, .2, 1); }
.demo-scheda.visibile { opacity: 1; transform: none; }
.demo-scheda dl { margin: .6rem 0 0; display: grid; grid-template-columns: 8rem 1fr; gap: .7rem 1rem; font-size: 1.35rem; }
.demo-scheda dt { color: var(--grigio); font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; padding-top: .3rem; }
.demo-scheda dd { margin: 0; min-height: 1.8rem; border-bottom: 1px dashed var(--bordo); padding-bottom: .3rem; opacity: .35; transition: opacity 400ms ease; }
.demo-scheda dd.piena { opacity: 1; animation: entra 500ms both; }
.demo-passaggio { display: flex; align-items: center; gap: 1rem; margin-top: 1.4rem; padding: .9rem 1.2rem; border-radius: 1rem; background: rgba(245, 165, 36, .12); border: 1px solid rgba(245, 165, 36, .5); color: var(--ambra); font-size: 1.3rem; font-weight: 700; opacity: 0; transform: translateX(-1rem); transition: opacity 500ms ease, transform 600ms cubic-bezier(.2, .7, .2, 1); }
.demo-passaggio.visibile { opacity: 1; transform: none; }
.demo-passaggio .demo-icona { width: 2.2rem; height: 2.2rem; flex: none; }

/* 3. documenti: la carta chiara e il gestionale */
.demo-documento { position: relative; background: #fff; color: #1b1626; border-radius: 1rem; padding: 2rem 2.4rem; font-size: 1.25rem; line-height: 1.45; overflow: hidden; opacity: 0; transform: translateY(1rem) rotate(-.6deg); transition: opacity 600ms ease, transform 800ms cubic-bezier(.2, .7, .2, 1); box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .45); max-width: 52rem; }
.demo-documento.visibile { opacity: 1; transform: rotate(-.6deg); }
.demo-doc-intesta { font-weight: 800; font-size: 1.7rem; letter-spacing: -.02em; }
.demo-doc-mittente { color: #6D3BE0; font-weight: 700; margin: .4rem 0 1rem; }
.demo-doc-righe { margin: 0; padding: 0; list-style: none; border-top: 1px solid #e6e1f0; }
.demo-doc-righe li { padding: .6rem 0; border-bottom: 1px solid #efeaf7; }
.demo-doc-data { color: #6f6880; font-size: 1.05rem; margin-top: 1rem; }
.demo-documento [data-parte] { transition: background 300ms ease; border-radius: .3rem; }
.demo-documento .evidenziata { background: rgba(245, 165, 36, .35); }
.demo-raggio { position: absolute; left: 0; right: 0; top: 0; height: .35rem; background: linear-gradient(90deg, rgba(139, 92, 246, 0), var(--viola), rgba(139, 92, 246, 0)); opacity: 0; transform: translateY(0); pointer-events: none; }
.demo-documento.scansione .demo-raggio { opacity: .9; animation: demo-raggio 2.6s ease-in-out infinite alternate; }
@keyframes demo-raggio { from { transform: translateY(0); } to { transform: translateY(22rem); } }
.demo-gestionale { opacity: 0; transform: translateY(1rem); transition: opacity 600ms ease, transform 700ms cubic-bezier(.2, .7, .2, 1); display: flex; flex-direction: column; gap: .6rem; padding: 1.2rem 1.6rem !important; }
.demo-gestionale.visibile { opacity: 1; transform: none; }
.demo-campi { display: flex; flex-direction: column; gap: .55rem; }
.demo-campo { display: grid; grid-template-columns: 12.5rem 1fr; gap: 1rem; align-items: baseline; font-size: 1.05rem; padding: .22rem 0; border-bottom: 1px solid var(--bordo); animation: entra 500ms both; }
.demo-campo-etichetta { color: var(--grigio); font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.demo-campo-valore { color: var(--testo); font-weight: 600; }
.demo-controllo { display: none; align-items: flex-start; gap: 1rem; padding: .6rem 1rem; border-radius: 1rem; border: 1px solid rgba(245, 165, 36, .5); background: rgba(245, 165, 36, .1); font-size: 1.1rem; line-height: 1.35; }
.demo-controllo.visibile { display: flex; animation: entra 500ms both; }
.demo-controllo .demo-icona { width: 2rem; height: 2rem; color: var(--ambra); flex: none; margin-top: .2rem; }
.demo-controllo p { margin: 0; }
.demo-conferma { display: none; align-items: center; gap: 1.2rem; font-size: 1.2rem; color: var(--testo-2); }
.demo-conferma.visibile { display: flex; animation: entra 400ms both; }
.demo-conferma button { font-size: 1.2rem; padding: .7rem 1.6rem; border-radius: .8rem; transition: transform 160ms ease, filter 160ms ease; pointer-events: none; }
.demo-conferma.fatta button { transform: scale(.94); filter: brightness(.85); }
.demo-conferma .spunta { width: 2.4rem; height: 2.4rem; }

/* 4. araldo: narrazione + telefono */
.demo-narrazione { display: flex; flex-direction: column; gap: 1.2rem; }
.demo-intesta-riga { color: var(--ambra); letter-spacing: .18em; text-transform: uppercase; font-size: 1.05rem; font-weight: 700; }
.demo-intesta-riga.nuova { animation: entra 500ms both; }
.demo-grande { font-size: 2.7rem; font-weight: var(--peso-titolo); letter-spacing: -.03em; line-height: 1.04; margin: 0; text-transform: none; color: var(--testo); }
.demo-casella { display: none; flex-direction: column; gap: .9rem; }
.demo-narrazione.casella-aperta .demo-grande, .demo-narrazione.casella-aperta .demo-araldo-righe { display: none; }  /* il momento del piano è passato: spazio alla Casella */
.demo-casella.visibile { display: flex; animation: entra 500ms both; }
.demo-messaggio-in { background: rgba(27, 22, 38, .8); border: 1px solid var(--bordo); border-radius: 1.2rem; padding: .9rem 1.3rem; font-size: 1.3rem; line-height: 1.35; max-width: 46rem; }
.demo-messaggio-in small { display: block; color: var(--grigio); letter-spacing: .14em; text-transform: uppercase; font-size: .9rem; margin-bottom: .3rem; }
.demo-messaggio-in p { margin: 0; }
.demo-bozza { display: none; flex-direction: column; gap: .3rem; background: rgba(139, 92, 246, .14); border: 1px solid rgba(139, 92, 246, .45); border-radius: 1.2rem; padding: .9rem 1.3rem; font-size: 1.3rem; line-height: 1.35; max-width: 46rem; align-self: flex-end; }
.demo-bozza.visibile { display: flex; animation: entra 500ms both; }
.demo-bozza small { color: var(--viola); letter-spacing: .14em; text-transform: uppercase; font-size: .9rem; }
.demo-bozza p { margin: 0; }
.demo-bozza-stato { display: none; color: var(--ok); font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin-top: .3rem; }
.demo-bozza-stato.visibile { display: block; animation: entra 400ms both; }
.demo-bozza.approvata { border-color: rgba(52, 211, 153, .5); }
.demo-phone { width: 29rem; margin: 0 auto; background: #0b0810; border: .35rem solid #2A2238; border-radius: 2.4rem; padding: 1rem 0 1.4rem; display: flex; flex-direction: column; gap: 1rem; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .5); transition: opacity 600ms ease, transform 700ms ease; }
.demo-phone.in-secondo-piano { opacity: .55; transform: scale(.96); }
.demo-phone-barra { display: flex; justify-content: space-between; padding: 0 1.4rem; font-size: 1rem; color: var(--grigio); letter-spacing: .08em; }
.demo-phone-barra span:first-child { color: var(--ambra); font-weight: 800; letter-spacing: .18em; text-transform: lowercase; }
.demo-feed { display: flex; flex-direction: column; gap: .7rem; padding: 0 1.2rem; }
.demo-post { position: relative; background: rgba(27, 22, 38, .9); border: 1px solid var(--bordo); border-radius: 1rem; padding: .9rem 1.1rem; font-size: 1.1rem; line-height: 1.3; animation: entra 550ms cubic-bezier(.2, .7, .2, 1) both; }
.demo-post p { margin: .4rem 0 .3rem; }
.demo-post-testa { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.demo-canale { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; border-radius: 999px; padding: .2rem .7rem; background: rgba(139, 92, 246, .25); color: #c9b5ff; }
.demo-canale.linkedin, .demo-canale.x { background: rgba(52, 211, 153, .2); color: var(--ok); }
.demo-canale.newsletter { background: rgba(245, 165, 36, .2); color: var(--ambra); }
.demo-post-giorno { color: var(--grigio); font-size: .95rem; }
.demo-post-stato { color: var(--grigio); font-size: .85rem; letter-spacing: .06em; }
.demo-post.approvato { border-color: rgba(52, 211, 153, .45); }
.demo-post .spunta { position: absolute; right: .8rem; bottom: .7rem; width: 2rem; height: 2rem; }
.demo-approva { margin: 0 1.2rem; font-size: 1.15rem; padding: .9rem 1.4rem; border-radius: .9rem; justify-content: center; opacity: 0; transition: opacity 400ms ease, transform 160ms ease, filter 160ms ease; pointer-events: none; background: var(--ambra); color: #2a1a00; }
.demo-approva.visibile { opacity: 1; }
.demo-approva.premuto { transform: scale(.95); filter: brightness(.85); }

/* notifiche ed esito */
.demo-notifiche { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; min-height: 3.1rem; align-items: center; }
.demo-notifica { display: inline-flex; align-items: center; gap: .8rem; background: rgba(27, 22, 38, .95); border: 1px solid rgba(245, 165, 36, .45); border-radius: 999px; padding: .6rem 1.3rem .6rem .9rem; font-size: 1.1rem; animation: demo-notifica 600ms cubic-bezier(.2, .7, .2, 1) both; }
.demo-notifica .demo-icona { width: 1.8rem; height: 1.8rem; color: var(--ambra); flex: none; }
@keyframes demo-notifica { from { opacity: 0; transform: translateX(2rem); } to { opacity: 1; transform: none; } }
.demo-esito { min-height: 6.2rem; display: flex; align-items: center; padding: 1.2rem 2rem; border-radius: 1.2rem; background: rgba(139, 92, 246, .16); border: 1px solid rgba(139, 92, 246, .45); opacity: 0; transform: translateY(1rem); transition: opacity 600ms ease, transform 700ms cubic-bezier(.2, .7, .2, 1); }
.demo-esito.visibile { opacity: 1; transform: none; }
.demo-esito-testo { margin: 0; font-size: 1.8rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; max-width: 90rem; }

/* verticale (vetrina 1080×1920): tutto in colonna */
.demo-storia.verticale .demo-corpo { grid-template-columns: 1fr; gap: 2rem; }
.demo-storia.verticale .demo-titolo { font-size: 3rem; }
.demo-storia.verticale .demo-esito-testo { font-size: 2.1rem; }
.demo-storia.verticale .demo-phone { width: 34rem; }
.demo-storia > .demo-marca { right: 9rem; top: 0; }
.demo-storia.verticale > .demo-marca { right: 0; top: -4.6rem; }
.demo-storia.verticale { grid-template-rows: auto auto auto auto; height: auto; }
.demo-storia.verticale .demo-sx, .demo-storia.verticale .demo-dx { overflow: visible; }
.demo-storia.verticale .demo-bolla, .demo-storia.verticale .demo-messaggio-in, .demo-storia.verticale .demo-bozza { max-width: none; }
html.vetrina .scena.tipo-demo { padding-bottom: 20rem; }
html.vetrina.orizzontale .scena.tipo-demo { padding: 8rem 6rem 8rem; }
html.vetrina .demo-storia { height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .demo-bolla, .demo-campo, .demo-post, .demo-notifica, .demo-controllo.visibile, .demo-conferma.visibile, .demo-casella.visibile, .demo-messaggio-in, .demo-bozza.visibile, .demo-intesta-riga.nuova, .demo-scheda dd.piena { animation: dissolvi 240ms ease both; }
  .demo-slot.libero, .demo-documento.scansione .demo-raggio, .demo-slot.prenotato::after, .demo-onda span { animation: none !important; }
  .demo-telefono, .demo-agenda, .demo-scheda, .demo-passaggio, .demo-documento, .demo-gestionale, .demo-esito, .demo-phone { transition-duration: 200ms; transform: none !important; }
  @keyframes dissolvi { from { opacity: 0; } to { opacity: 1; } }
}