/* Pagina «traduzione» (/traduzione/, /en/translation/): stili propri del gruppo traduzione, con il prefisso .traduzione- .
   Vale il contratto di style.css: nessuna risorsa esterna, animazioni e transizioni solo in @media (prefers-reduced-motion: no-preference),
   stati nascosti solo sotto html.js (qui gli stati che si alternano usano `display`, oppure `visibility` dentro i @keyframes).
   Gli stessi stili servono al blocco «08 — Traduzione» della home, che carica questo file dentro il blocco di struttura della traduzione (README, «Pagina della traduzione»).
   La finestra di lettura (.traduzione-demo) da ferma mostra lo stato finale (testo tradotto, «Mostra l'originale»); col movimento gira in ciclo di 14 s:
   originale -> «Traduci» -> traduzione in corso -> tradotto -> originale. `data-lingua` sul contenitore sceglie l'originale fra gli elementi [data-l];
   effetti/traduzione.js lo cambia dai chip e fa ripartire il ciclo con la classe «riparti» (animation: none per un istante). */

:root { --traduzione-grad-a: #1757D8; --traduzione-grad-b: #0B3D91; --traduzione-alone: rgba(30, 123, 255, .16); --traduzione-casa-bordo: rgba(127, 178, 255, .3); }
@media (prefers-color-scheme: dark) { :root { --traduzione-grad-a: #7FB2FF; --traduzione-grad-b: #BFE0FF; --traduzione-alone: rgba(127, 178, 255, .12); } }

/* ---------- Intro: il testo e la finestra di lettura ---------- */
.traduzione-intro { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, var(--primary-soft), var(--bg) 72%); padding-bottom: clamp(48px, 7vw, 88px); }
.traduzione-alone { position: absolute; z-index: -1; pointer-events: none; width: 70vmax; height: 70vmax; right: -30vmax; top: -42vmax; border-radius: 50%; background: radial-gradient(circle, var(--traduzione-alone) 0%, rgba(30, 123, 255, 0) 62%); will-change: transform; }
.traduzione-intro-grid { display: grid; gap: var(--space-8); align-items: center; }
.traduzione-intro-grid > * { min-width: 0; }
.traduzione-scena { min-width: 0; }
.traduzione-intro h1 { max-width: 18ch; }
.traduzione-grad { background: linear-gradient(90deg, var(--traduzione-grad-a), var(--traduzione-grad-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@supports not (background-clip: text) { .traduzione-grad { color: var(--primary); } }
.traduzione-intro .lead { margin-bottom: var(--space-6); }
.traduzione-intro .actions { margin-bottom: var(--space-6); }
.traduzione-prove { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); color: var(--text-muted); font-size: .9375rem; }
.traduzione-prove li { display: inline-flex; align-items: center; gap: var(--space-2); }
.traduzione-prove .ico { color: var(--success); width: 20px; height: 20px; }
@media (min-width: 1024px) { .traduzione-intro-grid { grid-template-columns: 5fr 6fr; gap: var(--space-16); } }

/* ---------- La finestra di lettura: un'email che cambia lingua ---------- */
.traduzione-demo { font-size: .875rem; line-height: 1.5; }
.traduzione-msg { padding: var(--space-4); display: grid; gap: var(--space-3); }
.traduzione-testa { display: flex; align-items: center; gap: var(--space-2); margin: 0; min-width: 0; }
.traduzione-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-weight: 700; font-size: .75rem; flex: none; }
.traduzione-mitt { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.traduzione-a { color: var(--text-muted); white-space: nowrap; }
.traduzione-testa time { margin-left: auto; color: var(--text-muted); font-variant-numeric: tabular-nums; flex: none; }
.traduzione-oggetto { margin: 0; font-weight: 700; font-size: 1.0625rem; color: var(--text); }
/* la fascia sopra il testo: tre stati nella stessa cella (originale, in corso, tradotto); da ferma si legge solo «tradotto» */
.traduzione-barra { display: grid; }
.traduzione-stato { grid-area: 1 / 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface-alt); color: var(--text); }
.traduzione-stato > .ico { width: 20px; height: 20px; color: var(--primary); }
.traduzione-stato-tr > .ico { color: var(--success); }
.traduzione-stato-testo { flex: 1; min-width: 0; }
.traduzione-stato-orig, .traduzione-stato-corso { display: none; }
.traduzione-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 14px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-weight: 600; white-space: nowrap; }
.traduzione-btn-orig { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.traduzione-btn-orig .ico { width: 16px; height: 16px; }
.traduzione-puntini { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.traduzione-puntini i { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); display: block; }
/* il testo: originale e traduzione nella stessa cella; da ferma si legge la traduzione */
.traduzione-corpo { display: grid; }
.traduzione-orig, .traduzione-tr { grid-area: 1 / 1; margin: 0; color: var(--text); font-size: .9375rem; line-height: 1.6; }
.traduzione-orig { display: none; }
.traduzione-tr { padding-left: var(--space-3); border-left: 3px solid var(--success); }
/* lingua dell'originale: data-lingua sul contenitore sceglie mittente, oggetto e dicitura fra gli [data-l] (il testo originale solo col movimento, sotto) */
.traduzione-demo [data-l] { display: none; }
.traduzione-demo[data-lingua="it"] span[data-l="it"], .traduzione-demo[data-lingua="en"] span[data-l="en"], .traduzione-demo[data-lingua="de"] span[data-l="de"],
.traduzione-demo[data-lingua="fr"] span[data-l="fr"], .traduzione-demo[data-lingua="es"] span[data-l="es"], .traduzione-demo[data-lingua="pt"] span[data-l="pt"],
.traduzione-demo[data-lingua="ru"] span[data-l="ru"], .traduzione-demo[data-lingua="zh-Hans"] span[data-l="zh-Hans"], .traduzione-demo[data-lingua="zh-Hant"] span[data-l="zh-Hant"],
.traduzione-demo[data-lingua="ja"] span[data-l="ja"], .traduzione-demo[data-lingua="ko"] span[data-l="ko"] { display: inline; }
@media (min-width: 640px) { .traduzione-msg { padding: var(--space-6); } }

/* i chip che scelgono la lingua dell'email di esempio (solo con JavaScript) */
.traduzione-scelte { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
.traduzione-scelte-titolo { width: 100%; margin: 0; font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.traduzione-scelte .chip { padding: 0 var(--space-3); font-size: .9375rem; }

/* ---------- 02. La finestra di scrittura: anteprima, conferma, annulla ---------- */
.traduzione-scrivi { font-size: .875rem; line-height: 1.5; }
.traduzione-scrivi .finestra-barra { font-weight: 600; justify-content: space-between; }
.traduzione-scrivi .finestra-barra .ico { color: var(--text-muted); width: 18px; height: 18px; }
.traduzione-campo { display: flex; align-items: center; gap: var(--space-3); padding: 8px 14px; border-bottom: 1px solid var(--border); color: var(--text); min-width: 0; }
.traduzione-campo b { color: var(--text-muted); font-weight: 600; min-width: 56px; }
.traduzione-dest { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 2px; border-radius: 999px; background: var(--primary-soft); font-weight: 600; }
.traduzione-dest i { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; font-style: normal; font-size: .6875rem; font-weight: 700; }
.traduzione-strumenti { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 10px; border-bottom: 1px solid var(--border); color: var(--text-muted); }
.traduzione-strumenti > span { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 6px; font-weight: 700; }
.traduzione-strum-tr { position: relative; margin-left: auto; gap: 6px; background: var(--primary-soft); color: var(--primary); font-weight: 600; padding: 0 10px; }
.traduzione-strum-tr b { font-weight: 700; }
.traduzione-strum-tr .ico { width: 16px; height: 16px; }
.traduzione-scrivi-corpo { padding: var(--space-4); color: var(--text); }
.traduzione-scrivi-corpo p { margin-bottom: var(--space-3); }
.traduzione-citato { margin: 0; padding-left: var(--space-3); border-left: 3px solid var(--border); color: var(--text-muted); }
.traduzione-citato p { margin: 0; }
.traduzione-citato p + p { margin-top: 2px; }
.traduzione-anteprima { margin: 0 var(--space-4) var(--space-4); border: 1px solid var(--primary); border-radius: var(--radius-s); background: var(--primary-soft); padding: var(--space-3) var(--space-4); color: var(--text); }
.traduzione-anteprima-titolo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-weight: 700; color: var(--primary); }
.traduzione-anteprima-titolo .ico { width: 18px; height: 18px; }
.traduzione-anteprima-nota { font-weight: 500; color: var(--text-muted); font-size: .8125rem; }
.traduzione-anteprima-testo { margin: 0 0 var(--space-3); }
.traduzione-anteprima-azioni { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.traduzione-anteprima-azioni .btn { pointer-events: none; min-height: 36px; font-size: .8125rem; }
.traduzione-scrivi-piede { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); background: var(--surface-alt); }
.traduzione-invia { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 14px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-weight: 600; }
.traduzione-invia .ico { width: 16px; height: 16px; }
.traduzione-ricorda { color: var(--text-muted); font-size: .8125rem; }

/* ---------- 03. Le dieci lingue: l'elenco e la ruota ---------- */
.traduzione-lingue { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin-top: var(--space-6); }
.traduzione-lingue li { display: flex; flex-direction: column; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface); }
.traduzione-lingue b { font-weight: 700; color: var(--text); font-size: 1.0625rem; }
.traduzione-lingue span { color: var(--text-muted); font-size: .8125rem; }
@media (min-width: 480px) { .traduzione-lingue { grid-template-columns: repeat(3, 1fr); } }
.traduzione-ruota { margin: 0 auto; width: min(100%, 420px); }
.traduzione-ruota svg { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.traduzione-ruota-fondo { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }
.traduzione-ruota-anello { fill: none; stroke: var(--primary-soft); stroke-width: 40; }
.traduzione-ruota-testo { fill: var(--primary); font-size: 19px; font-weight: 700; letter-spacing: .03em; }
.traduzione-ruota-giro { transform-box: view-box; transform-origin: 200px 200px; }
.traduzione-ruota-centro circle { fill: var(--primary); }
.traduzione-ruota-centro .traduzione-ruota-alone { fill: var(--primary); opacity: .18; transform-box: fill-box; transform-origin: center; }
.traduzione-ruota-centro use { color: var(--on-primary); }
.traduzione-ruota-centro text { fill: var(--on-primary); font-weight: 800; text-anchor: middle; font-size: 26px; }

/* ---------- 04. Dove avviene: dentro i nostri server, fuori niente ---------- */
.traduzione-casa { display: grid; gap: var(--space-4); }
.traduzione-casa-dentro { background: var(--hero-bg); color: var(--hero-text); border: 1px solid var(--traduzione-casa-bordo); border-radius: var(--radius); box-shadow: var(--ombra-forte); padding: var(--space-6); }
.traduzione-casa-titolo { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; margin: 0 0 var(--space-4); font-size: .9375rem; text-transform: uppercase; letter-spacing: .06em; }
.traduzione-casa-titolo .ico { width: 20px; height: 20px; }
.traduzione-casa-dentro .traduzione-casa-titolo { color: var(--hero-accent); }
.traduzione-casa-passi { display: grid; gap: var(--space-3); }
.traduzione-casa-passi li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-s); background: var(--hero-surface); font-weight: 600; }
.traduzione-casa-passi .ico { color: var(--chip-ok); }
.traduzione-casa-fuori { border: 1px dashed var(--border); border-radius: var(--radius); padding: var(--space-6); }
.traduzione-casa-fuori .traduzione-casa-titolo { color: var(--text-muted); }
.traduzione-casa-fuori li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--border); color: var(--text); }
@media (min-width: 900px) { .traduzione-casa { grid-template-columns: 3fr 2fr; gap: var(--space-6); align-items: start; } }

/* ---------- Movimento (solo chi non chiede di ridurlo) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .traduzione-alone { animation: traduzione-deriva 26s ease-in-out infinite alternate; }
  .traduzione-scelte .chip { transition: border-color .15s ease, background-color .15s ease; }
  /* lettura, ciclo di 14 s: 0-30% originale con «Traduci», 30-38% in corso, 38-93% tradotto con «Mostra l'originale», poi di nuovo l'originale.
     Gli stati si alternano con visibility (a scatto: a meta' dissolvenza il contrasto non reggerebbe) */
  .traduzione-stato-orig, .traduzione-stato-corso { display: flex; }
  .traduzione-demo[data-lingua="it"] .traduzione-orig[data-l="it"], .traduzione-demo[data-lingua="en"] .traduzione-orig[data-l="en"], .traduzione-demo[data-lingua="de"] .traduzione-orig[data-l="de"],
  .traduzione-demo[data-lingua="fr"] .traduzione-orig[data-l="fr"], .traduzione-demo[data-lingua="es"] .traduzione-orig[data-l="es"], .traduzione-demo[data-lingua="pt"] .traduzione-orig[data-l="pt"],
  .traduzione-demo[data-lingua="ru"] .traduzione-orig[data-l="ru"], .traduzione-demo[data-lingua="zh-Hans"] .traduzione-orig[data-l="zh-Hans"], .traduzione-demo[data-lingua="zh-Hant"] .traduzione-orig[data-l="zh-Hant"],
  .traduzione-demo[data-lingua="ja"] .traduzione-orig[data-l="ja"], .traduzione-demo[data-lingua="ko"] .traduzione-orig[data-l="ko"] { display: block; }
  .traduzione-orig { animation: traduzione-orig 14s step-end infinite; }
  .traduzione-tr { animation: traduzione-tr 14s step-end infinite, traduzione-entra 14s cubic-bezier(.2, .7, .2, 1) infinite; }
  .traduzione-stato-orig { animation: traduzione-stato-orig 14s step-end infinite; }
  .traduzione-stato-corso { animation: traduzione-stato-corso 14s step-end infinite; }
  .traduzione-stato-tr { animation: traduzione-tr 14s step-end infinite; }
  /* l'anello del clic su «Traduci» (esiste solo col movimento: la sua visibilita' sta nei keyframes) */
  .traduzione-btn::after { content: ""; position: absolute; inset: -6px; border-radius: 999px; border: 2px solid var(--primary); animation: traduzione-anello 14s ease-out infinite; }
  .traduzione-puntini i { animation: traduzione-punto .9s ease-in-out infinite; }
  .traduzione-puntini i:nth-child(2) { animation-delay: .15s; }
  .traduzione-puntini i:nth-child(3) { animation-delay: .3s; }
  /* un chip cambia lingua e fa ripartire il ciclo: effetti/traduzione.js mette «riparti» per un istante */
  .traduzione-demo.riparti, .traduzione-demo.riparti *, .traduzione-demo.riparti ::after { animation: none; }
  /* scrittura: con JavaScript l'anteprima compare dopo il clic sul pulsante (al passaggio, o con «Rivedi la scena») */
  html.js .traduzione-scrivi:not(.vista):not(.gioca) .traduzione-anteprima { visibility: hidden; }
  html.js .traduzione-scrivi:is(.vista, .gioca) .traduzione-anteprima { animation: traduzione-anteprima .6s cubic-bezier(.2, .7, .2, 1) 1.3s both; }
  html.js .traduzione-scrivi:is(.vista, .gioca) .traduzione-strum-tr::after { content: ""; position: absolute; inset: -5px; border-radius: 9px; border: 2px solid var(--primary); animation: traduzione-anello-clic 1.1s ease-out .3s both; }
  /* la ruota delle lingue gira piano; il centro respira */
  .traduzione-ruota-giro { animation: traduzione-gira 80s linear infinite; }
  .traduzione-ruota-alone { animation: traduzione-pulsa 3s ease-out infinite; }
  html.js .traduzione-lingue > li { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
}
@keyframes traduzione-deriva { to { transform: translate3d(-8vmax, 7vmax, 0) scale(1.08); } }
@keyframes traduzione-orig { 0%, 37.9% { visibility: visible; } 38%, 92.9% { visibility: hidden; } 93%, 100% { visibility: visible; } }
@keyframes traduzione-tr { 0%, 37.9% { visibility: hidden; } 38%, 92.9% { visibility: visible; } 93%, 100% { visibility: hidden; } }
@keyframes traduzione-entra { 0%, 37.9% { transform: translateY(10px); } 41%, 100% { transform: none; } }
@keyframes traduzione-stato-orig { 0%, 29.9% { visibility: visible; } 30%, 92.9% { visibility: hidden; } 93%, 100% { visibility: visible; } }
@keyframes traduzione-stato-corso { 0%, 29.9% { visibility: hidden; } 30%, 37.9% { visibility: visible; } 38%, 100% { visibility: hidden; } }
@keyframes traduzione-anello { 0%, 26% { visibility: hidden; opacity: .9; transform: scale(.85); } 26.5% { visibility: visible; opacity: .9; transform: scale(.85); } 30.5%, 100% { visibility: hidden; opacity: 0; transform: scale(1.3); } }
@keyframes traduzione-punto { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes traduzione-anteprima { from { visibility: hidden; transform: translateY(10px) scale(.98); } to { visibility: visible; transform: none; } }
@keyframes traduzione-anello-clic { 0% { visibility: visible; opacity: .9; transform: scale(.9); } 100% { visibility: hidden; opacity: 0; transform: scale(1.25); } }
@keyframes traduzione-gira { to { transform: rotate(360deg); } }
@keyframes traduzione-pulsa { from { transform: scale(.7); opacity: .4; } to { transform: scale(1.5); opacity: 0; } }