/* infotime.css: la pagina di InfoTime (PIANO-PAGINE §4.6). Si carica dopo shell.css e film.css (battute, schede, scena fissa).
   La scena non e' 3D: e' un "mondo" di HTML e SVG (.it-world, 1600 x 1000 unita' = px prima della scala) che infotime.js inquadra con
   translate + scale: il foglio della fattura che si compila, i riquadri che gli portano i dati, le edizioni, le schermate, la stampante.
   Carta, inchiostro e i colori dei riquadri come i giocattoli delle altre pagine: forme morbide, ombre piene, il ciano del marchio. */

.it-stage { background:
  radial-gradient(120% 90% at 70% 45%, rgb(255 255 255 / .05), transparent 60%),
  radial-gradient(rgb(245 243 238 / .07) 1px, transparent 1.4px) 0 0 / 22px 22px,
  var(--scene-bg); }
/* sotto le schede del testo (schermo largo) il mondo sfuma nel fondo: si vedeva in trasparenza quello che la camera lascia a sinistra */
.it-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, rgb(20 23 28 / .9) 0, rgb(20 23 28 / .82) calc(var(--it-free-x, 0px) - 220px), rgb(20 23 28 / .4) calc(var(--it-free-x, 0px) - 110px), rgb(20 23 28 / 0) var(--it-free-x, 0px)); }
.it-world { position: absolute; left: 0; top: 0; width: 1600px; height: 1000px; transform-origin: 0 0; opacity: 0; transition: opacity .6s var(--ease); }
.it-on .it-world { opacity: 1; }
/* l'immagine ferma (la fattura finita) e' per chi non ha gli script. Con gli script non si vede nemmeno prima che parta infotime.js, che arriva dopo
   GSAP (defer): sul telefono a volte il primo fotogramma era la fattura finita ingrandita, poi il palco vuoto e il foglio vuoto che arriva (revisione
   n.34; Noah: mai un'immagine ferma che poi viene sostituita). La media query vale gia' al primo disegno, senza aspettare nessuno script.
   Se infotime.js non parte entro 5 s (file non arrivato, errore) l'immagine torna, come con .cs-slow in film.css; senza GSAP la rimette subito
   infotime.js (.it-still) */
@media (scripting: enabled) {
  .it-stage .cs-still { opacity: 0; transition: none; animation: it-still-tardi 0s 5s forwards; }
}
@keyframes it-still-tardi { to { opacity: 1; } }
.it-on .it-stage .cs-still, .it-js .it-stage .cs-still { opacity: 0; transition: none; animation: none; }
.it-still .it-stage .cs-still { opacity: 1; animation: none; }
.it-world * { box-sizing: border-box; }
.it-wrap { position: absolute; pointer-events: none; }
/* i numeri sul foglio e nei riquadri: Hanken con le cifre tabellari (le cifre pixel, piccole, si leggevano male: "2026" sembrava "8086");
   NS Cifre solo per i numeri grandi (gli anni delle edizioni) */
.it-world .pix { font-family: var(--font); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; letter-spacing: 0; }

/* ---------- il foglio ---------- */
.it-sheet { position: absolute; background: #fdfcf8; border-radius: 6px; color: #1a1e24; font: 400 12px/1.35 var(--font);
  box-shadow: 0 2px 0 rgb(0 0 0 / .08), 0 30px 60px -18px rgb(0 0 0 / .65), 0 10px 22px -10px rgb(0 0 0 / .4); }
.it-sheet > * { position: absolute; }
.it-logo-ph { display: grid; place-items: center; border-radius: 10px; background: #e9edf2; border: 1.5px dashed #b8c1cc; color: #6f7a88; font-weight: 650; font-size: 11px; letter-spacing: .02em; }
.it-bar { display: block; height: 7px; border-radius: 4px; background: #dfe4ea; margin-bottom: 9px; margin-left: auto; }
.it-lab { display: block; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a94a3; margin-bottom: 4px; }
.it-to { font-size: 13px; line-height: 1.45; }
.it-to .it-line { display: block; width: fit-content; min-height: 18.85px; white-space: pre; }
.it-to .it-line:first-of-type { font-weight: 700; }
.it-title { font-size: 26px; font-weight: 780; letter-spacing: -.02em; }
.it-meta { font-size: 11px; color: #5d6673; display: flex; gap: 22px; }
.it-meta b { color: #1a1e24; font-weight: 600; }
.it-thead, .it-row { left: 34px; width: 492px; display: grid; grid-template-columns: 1fr 50px 70px 84px; align-items: center; padding: 0 8px; }
.it-thead { height: 24px; border-radius: 6px; background: #eef2f5; font-size: 9px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: #6f7a88; }
.it-row { height: 26px; font-size: 12px; border-bottom: 1px solid #edf0f3; }
.it-row span:nth-child(n+2), .it-thead span:nth-child(n+2) { text-align: right; }
.it-row .pix, .it-tot .pix { font-size: 13px; }
.it-row.hot { background: linear-gradient(90deg, rgb(0 191 174 / .16), rgb(0 191 174 / .04)); border-radius: 6px; }
.it-tot { left: 300px; width: 226px; display: flex; justify-content: space-between; align-items: baseline; padding: 0 8px; font-size: 11px; color: #5d6673; }
.it-tot.big { color: #1a1e24; font-size: 14px; font-weight: 780; border-top: 2px solid #1a1e24; padding-top: 6px; }
.it-tot.big .pix { font-size: 17px; font-weight: 800; }
.it-tot.big::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -6px; height: 3px; border-radius: 2px; background: #00bfae; transform: scaleX(var(--u, 0)); transform-origin: left; }
/* la parte di pagamento: la riga tratteggiata con le forbici, la ricevuta e la sezione pagamento */
.it-perf { left: 0; top: 0; overflow: visible; }
.it-perf line { stroke: #9aa3ad; stroke-width: 1.4; stroke-dasharray: 5 4; }
.it-qrv { width: max-content; }
.it-sciss { font-size: 15px; color: #6f7a88; line-height: 1; }
.it-qrh { font-size: 12px; font-weight: 780; }
.it-qrl { font-size: 8px; font-weight: 750; color: #1a1e24; }
.it-qrv { font-size: 9px; color: #333; white-space: pre; line-height: 1.35; }
.it-qrv.pix { font-size: 10px; }
.it-qr { left: 0; top: 0; }
.it-qr rect.m { transform-box: fill-box; transform-origin: center; }
.it-sheen { overflow: hidden; border-radius: 2px; pointer-events: none; }
.it-sheen::after { content: ''; position: absolute; inset: -20% -60%; background: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / .55) 50%, transparent 60%); transform: translateX(-60%); animation: it-sheen 5.5s var(--ease) infinite 1.5s; }
@keyframes it-sheen { 0%, 70% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
/* i segnaposto del foglio vuoto (spariscono quando arriva il vero) */
.it-ghost { display: block; border-radius: 5px; background: #eef1f4; }
.it-ghost-slip { border: 2px dashed #d5dbe2; border-radius: 10px; display: grid; place-items: center; align-content: center; gap: 8px; color: #a3acb8; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.it-ghost-slip i { width: 64px; height: 64px; border-radius: 8px; border: 2px dashed #c9d0d9; }
/* il cursore che lampeggia dove si sta scrivendo */
.it-caret { position: absolute; width: 2px; height: 15px; background: #00bfae; border-radius: 1px; animation: it-blink 1s steps(1) infinite; }
@keyframes it-blink { 50% { opacity: 0; } }

/* ---------- i riquadri attorno al foglio (i giocattoli della pagina) ---------- */
.it-card { position: absolute; border-radius: 18px; background: #fdfcf8; color: #1a1e24; font: 400 13px/1.35 var(--font); padding: 16px 18px;
  box-shadow: 0 4px 0 rgb(0 0 0 / .1), 0 22px 40px -16px rgb(0 0 0 / .6); border: 3px solid var(--c, #00bfae); opacity: 0; }
.it-card h4 { font-size: 11px; font-weight: 780; letter-spacing: .06em; text-transform: uppercase; color: var(--c, #00bfae); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.it-card h4 svg { width: 18px; height: 18px; }
.it-ava { width: 46px; height: 46px; border-radius: 50%; background: #1a68f4; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 16px; float: left; margin-right: 12px; }
.it-name { font-size: 16px; font-weight: 780; }
.it-addr { color: #5d6673; font-size: 12.5px; }
.it-chips { clear: both; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; }
.it-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #eef2f5; font-size: 11px; font-weight: 650; color: #3a414b; white-space: nowrap; }
.it-chip.ok { background: #dff5ea; color: #1d7a50; }
.it-chip.warn { background: #fdf1d6; color: #9a6400; }
.it-chip.cy { background: #d7f5f1; color: #0b6e64; }
.it-fly { position: absolute; padding: 3px 9px; border-radius: 999px; background: #00bfae; color: #fff; font: 700 12px/1.2 var(--font); white-space: nowrap; opacity: 0; box-shadow: 0 6px 14px -6px rgb(0 0 0 / .5); }
/* il percorso del documento: offerta -> ordine -> bolla */
.it-doc { position: absolute; left: 18px; right: 18px; height: 50px; border-radius: 12px; background: #fff; border: 1.5px solid #dfe4ea; display: flex; align-items: center; gap: 10px; padding: 0 12px; opacity: 0;
  box-shadow: 0 3px 0 rgb(0 0 0 / .05); }
.it-doc b { font-size: 13px; }
.it-doc .pix { margin-left: auto; font-size: 12px; color: #5d6673; }
.it-doc i { width: 26px; height: 32px; border-radius: 4px; background: repeating-linear-gradient(#cfd6de 0 2px, transparent 2px 6px) 5px 7px / 16px 20px no-repeat, #f2f4f7; border: 1.5px solid #c6ced8; flex: none; }
.it-stamp { position: absolute; right: 22px; top: 38px; padding: 3px 10px; border: 2.5px solid #2fb67c; border-radius: 8px; color: #2fb67c; font: 800 12px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-8deg); opacity: 0; background: rgb(255 255 255 / .85); }
.it-arrow { position: absolute; left: 50%; width: 2px; height: 12px; background: #b8c1cc; opacity: 0; }
.it-arrow::after { content: ''; position: absolute; left: -4px; bottom: -4px; border: 5px solid transparent; border-top-color: #b8c1cc; }
/* il magazzino: righe con il contatore */
.it-stock { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; padding: 8px 0; border-top: 1px solid #edf0f3; }
.it-stock:first-of-type { border-top: 0; }
.it-stock b { font-size: 13px; }
.it-stock .pix { font-size: 22px; font-weight: 760; color: #1a1e24; text-align: right; min-width: 3ch; }
.it-stock .it-chip { grid-column: 1 / -1; justify-self: start; opacity: 0; }
.it-stock.low .pix { color: #c47a00; }
/* le ore: la settimana a barre */
.it-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: end; height: 110px; padding-top: 6px; }
.it-week div { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; color: #8a94a3; }
.it-week i { width: 100%; height: 84px; border-radius: 6px 6px 3px 3px; background: linear-gradient(#ffb547, #f2a020); transform-origin: bottom; transform: scaleY(0); }
.it-hsum { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding-top: 8px; border-top: 1px solid #edf0f3; font-weight: 700; }
.it-hsum .pix { font-size: 22px; font-weight: 760; }
/* la fattura del fornitore */
.it-sup { position: absolute; left: 18px; top: 50px; width: 150px; height: 190px; border-radius: 6px; background: #fff7e3; border: 1.5px solid #ecdcb0; padding: 12px; }
.it-sup .it-bar { margin-left: 0; background: #ecdcb0; }
.it-checks { position: absolute; left: 184px; top: 54px; right: 14px; display: grid; gap: 10px; }
.it-check { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 650; color: #3a414b; opacity: .35; }
.it-check i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #c6ced8; display: grid; place-items: center; flex: none; }
.it-check.on { opacity: 1; }
.it-check.on i { background: #2fb67c; border-color: #2fb67c; }
.it-check.on i::after { content: ''; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); }
.it-big-ok { position: absolute; right: -16px; top: -16px; width: 46px; height: 46px; border-radius: 50%; background: #2fb67c; display: grid; place-items: center; opacity: 0; box-shadow: 0 6px 14px -6px rgb(0 0 0 / .5); }
.it-big-ok::after { content: ''; width: 18px; height: 9px; border: solid #fff; border-width: 0 0 4px 4px; transform: translateY(-2px) rotate(-45deg); }

/* ---------- le sei aree (il titolo del capitolo) ---------- */
.it-area { position: absolute; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: #fdfcf8; color: #1a1e24; font: 700 14px/1 var(--font); opacity: 0;
  box-shadow: 0 3px 0 rgb(0 0 0 / .1), 0 14px 26px -12px rgb(0 0 0 / .6); }
.it-area span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; }
.it-area svg { width: 18px; height: 18px; }

/* ---------- le edizioni ---------- */
.it-ed { position: absolute; width: 400px; padding: 26px 26px 22px; border-radius: 26px; background: #fdfcf8; color: #1a1e24; opacity: 0;
  box-shadow: 0 5px 0 rgb(0 0 0 / .12), 0 30px 50px -20px rgb(0 0 0 / .65); font: 400 13px/1.35 var(--font); }
.it-ed.next { background: rgb(253 252 248 / .06); color: #f5f3ee; border: 3px dashed rgb(245 243 238 / .45); box-shadow: none; }
.it-ed .yr { font-family: var(--pixel); font-size: 92px; line-height: .9; letter-spacing: .02em; }
.it-ed .pill { display: inline-flex; align-items: center; gap: 7px; margin: 12px 0 16px; padding: 5px 12px; border-radius: 999px; font: 800 12px/1.2 var(--font); letter-spacing: .07em; text-transform: uppercase; }
.it-ed .pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.it-ed .pill.use { background: #dff5ea; color: #1d7a50; }
.it-ed .pill.dev { background: rgb(242 178 48 / .18); color: #f2b230; }
.it-ed .it-chips { padding-top: 0; }
.it-ed.next .it-chip { background: rgb(245 243 238 / .1); color: #f5f3ee; }
.it-ed .it-chip { opacity: 0; }
/* in sviluppo: la striscia del cantiere che scorre (nessuna percentuale: non c'e' un dato) */
.it-wip { height: 12px; border-radius: 999px; margin: 0 0 16px; background: repeating-linear-gradient(-45deg, #f2b230 0 10px, #1a1e24 10px 20px); background-size: 28.28px 28.28px; animation: it-wip 1.2s linear infinite; opacity: .9; }
@keyframes it-wip { to { background-position: 28.28px 0; } }

/* ---------- le schermate ---------- */
.it-shot { position: absolute; width: 520px; height: 341px; border-radius: 12px; overflow: hidden; background: #fff; opacity: 0;
  box-shadow: 0 4px 0 rgb(0 0 0 / .1), 0 30px 50px -18px rgb(0 0 0 / .7); border: 6px solid #fdfcf8; transform-origin: 50% 100%; }
.it-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
/* nella scheda: la schermata che si vede adesso */
.it-shots { list-style: none; margin-top: var(--s-4); display: grid; gap: .5rem; }
.it-shots li { padding: .6rem .8rem; border-radius: .8rem; border: 1px solid rgb(245 243 238 / .12); color: var(--fg-mute); transition: border-color .25s, background .25s, color .25s; }
.it-shots li b { color: var(--fg); font-weight: 700; }
.it-shots li.is-on { border-color: var(--cyan); background: color-mix(in oklab, var(--cyan) 10%, transparent); color: var(--fg); }

/* ---------- la stampante ---------- */
.it-printer { position: absolute; width: 470px; height: 250px; opacity: 0; }
.it-pr-top { position: absolute; left: 30px; right: 30px; top: 0; height: 70px; border-radius: 22px 22px 8px 8px; background: linear-gradient(#f1f3f6, #dfe3e8); box-shadow: inset 0 -4px 0 rgb(0 0 0 / .08); }
.it-pr-slot { position: absolute; left: 80px; right: 80px; top: 26px; height: 12px; border-radius: 6px; background: #1d232b; }
.it-pr-body { position: absolute; left: 0; right: 0; top: 56px; height: 150px; border-radius: 28px; background: linear-gradient(#f7f8fa, #e4e8ec); box-shadow: 0 5px 0 rgb(0 0 0 / .14), 0 30px 50px -20px rgb(0 0 0 / .7); }
.it-pr-mouth { position: absolute; left: 70px; right: 70px; top: 116px; height: 14px; border-radius: 7px; background: #1d232b; }
.it-pr-led { position: absolute; right: 34px; top: 84px; width: 14px; height: 14px; border-radius: 50%; background: #00e5d0; box-shadow: 0 0 12px #00e5d0; animation: it-led 1.6s ease-in-out infinite; }
@keyframes it-led { 50% { opacity: .35; box-shadow: none; } }
.it-pr-brand { position: absolute; left: 34px; top: 80px; display: flex; gap: 6px; }
.it-pr-brand i { width: 34px; height: 9px; border-radius: 5px; background: #cfd5dc; }
.it-pr-tray { position: absolute; left: 60px; right: 60px; top: 196px; height: 26px; border-radius: 0 0 16px 16px; background: linear-gradient(#d4d9df, #c2c8cf); box-shadow: 0 6px 12px -6px rgb(0 0 0 / .6); }
/* il foglio stampato che esce davanti */
.it-printed { position: absolute; width: 250px; height: 150px; border-radius: 4px; background: #fdfcf8; opacity: 0; overflow: hidden; box-shadow: 0 8px 16px -8px rgb(0 0 0 / .55); padding: 12px 14px; }
.it-printed .it-bar { margin-left: 0; height: 6px; margin-bottom: 7px; }
.it-printed em { position: absolute; left: 14px; right: 14px; bottom: 34px; border-top: 1.5px dashed #b8c1cc; }
.it-printed u { position: absolute; right: 18px; bottom: 6px; width: 24px; height: 24px; background: repeating-conic-gradient(#1a1e24 0 25%, #fff 0 50%) 0 0 / 6px 6px; border: 2px solid #1a1e24; }
.it-done { position: absolute; width: 58px; height: 58px; border-radius: 50%; background: #2fb67c; display: grid; place-items: center; opacity: 0; box-shadow: 0 8px 16px -8px rgb(0 0 0 / .6); }
.it-done::after { content: ''; width: 22px; height: 11px; border: solid #fff; border-width: 0 0 5px 5px; transform: translateY(-3px) rotate(-45deg); }

/* ---------- la scheda della testa: il marchio di InfoTime (il suo logo, su fondo chiaro come nel sito del programma) ---------- */
.it-brand { display: inline-flex; padding: .55rem .9rem; border-radius: .7rem; background: #fdfcf8; margin-bottom: var(--s-3); }
.it-brand img { display: block; width: 140px; height: auto; }

/* ---------- la scena viva anche da ferma: i riquadri e il foglio ondeggiano appena (con translate, che si somma alle trasformazioni di GSAP) ---------- */
.it-card, .it-ed { animation: it-float 4.6s ease-in-out infinite; }
.it-sheet { animation: it-float 6.2s ease-in-out infinite -1.3s; }
.it-area:nth-child(odd) { animation: it-float 3.8s ease-in-out infinite -.7s; }
.it-area:nth-child(even) { animation: it-float 4.3s ease-in-out infinite -2.1s; }
.it-ed.next { animation-delay: -2.3s; }
@keyframes it-float { 50% { translate: 0 -5px; } }
/* ...ma solo dove si vede qualcosa: in pausa i pezzi trasparenti (.it-pausa, da infotime.js: ogni animazione, anche a pagina ferma, costa un
   ricalcolo di stile a ogni fotogramma) e tutta la scena quando se n'e' andata sotto il pie' di pagina (.cs-past). Dopo le regole qui sopra:
   .it-area:nth-child(odd) pesa quanto .it-world .it-pausa */
.it-world .it-pausa, .it-world .it-pausa::after, .it-world .it-pausa .it-wip, .it-world .it-pausa .it-pr-led,
.cs-past .it-world *, .cs-past .it-world *::after { animation-play-state: paused; }

/* ---------- telefono ---------- */
@media (max-width: 59.99rem), (max-aspect-ratio: 999/1000) {
  .it-brand img { width: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .it-caret, .it-sheen::after, .it-wip, .it-pr-led, .it-card, .it-ed, .it-sheet, .it-area { animation: none !important; }
  .it-world { transition: none; }
}