/* ==========================================================================
   Marana Tech — progetti.html («I lavori si mostrano di persona»)
   Oggetto dell'hero: uno spessimetro di fascicoli d'acciaio aperto a ventaglio intorno a un perno.
   Il collaudo sigilla i fascicoli (fascetta e piombino), accende le due lamine aperte (un lavoro
   pubblico e una demo), le porta in fondo e chiude con un timbro. I fascicoli sono decorativi:
   nessuno corrisponde a un lavoro.
   Sotto: cosa si vede in una chiamata (tre targhe ferme) e le regole comuni su alluminio.
   Stato base = stato finale: gli stati di partenza esistono solo sotto html.js-motion.
   ========================================================================== */

/* ---------- Hero ---------- */
.pro-hero__aside { max-width: 34em; color: var(--fg-3); font-size: var(--fs-small); }
.pro-hero__object { display: grid; gap: 6px; align-content: center; }

/* Lo spessimetro: palco in unità (600 x 548), scala con la colonna */
.pro-fan { position: relative; container-type: inline-size; }
.pro-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.pro-fan__stage {
  --u: calc(100cqw / 600);
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 600 / 548;
}
/* lampada da banco: un alone già disegnato che il core sposta in transform verso il puntatore */
.pro-fan__stage > .light-spot {
  z-index: 40;
  --spot-w: .49;
  --spot-h: .43;
  --spot-color: rgba(255, 255, 255, .085);
  --lx: .64;
  --ly: .26;
}
.pro-fan__stage svg { display: block; overflow: visible; }

.pro-fan__arc { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.pro-arc__minor { fill: none; stroke: rgba(195, 202, 208, .2); stroke-width: 5; stroke-dasharray: .05 .95; }
.pro-arc__base { fill: none; stroke: rgba(195, 202, 208, .26); stroke-width: 1; }
.pro-arc__done { fill: none; stroke: var(--blu); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .75; }
.pro-arc__ticks line { stroke: rgba(195, 202, 208, .5); stroke-width: 1.2; }
.pro-arc__spark { opacity: 0; }
.pro-arc__halo { fill: url(#pro-glow-ambra); }
.pro-arc__dot { fill: #FFEBCC; }

.pro-fan__case,
.pro-blade,
.pro-fan__cap { position: absolute; }
.pro-fan__case svg,
.pro-blade svg,
.pro-fan__cap svg { width: 100%; height: 100%; }

/* custodia (guancia inferiore): origine sul perno (96, 470) */
.pro-fan__case {
  left: calc(70 * var(--u));
  top: calc(444 * var(--u));
  width: calc(450 * var(--u));
  height: calc(52 * var(--u));
  transform-origin: calc(26 * var(--u)) calc(26 * var(--u));
  transform: rotate(var(--a));
  z-index: 1;
}
.pro-case__label { font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .24em; fill: #EEF1F3; fill-opacity: .55; }

/* lamine: origine locale sul perno, ruotano intorno a (22, 22).
   Le ombre sono già sfumate nel disegno (nessun filtro): restano uguali anche in modalità leggera. */
.pro-blade {
  left: calc(74 * var(--u));
  top: calc(448 * var(--u));
  width: calc(438 * var(--u));
  height: calc(44 * var(--u));
  transform-origin: calc(22 * var(--u)) calc(22 * var(--u));
  transform: rotate(var(--a));
  z-index: calc(var(--z) + 1);
}
.pro-blade__code { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .18em; fill: #2B3237; }
.pro-blade__code--lip { fill: #FFFFFF; fill-opacity: .6; }
/* lamina della demo: bordo inciso a tratti, LED ad anello */
.pro-blade__dash { fill: none; stroke: #2B3237; stroke-opacity: .5; stroke-width: 1.1; stroke-dasharray: 5 3.5; }
.pro-led__glow { fill: url(#pro-glow-blu); }
.pro-led__core { fill: #D8EDFB; }
.pro-led__ring { fill: none; stroke: #B4BCC2; stroke-width: 1.2; stroke-dasharray: 1.7 1.5; }
/* fascicoli sigillati: fascetta d'acciaio con la scritta in rilievo, piombino */
.pro-band__txt { font-family: var(--font-mono); font-size: 8.6px; font-weight: 600; letter-spacing: .26em; text-anchor: middle; fill: #DDE2E5; fill-opacity: .82; }
.pro-band__txt--lip { fill: #000000; fill-opacity: .55; }

/* cappello con vite zigrinata, sopra tutte le lamine */
.pro-fan__cap {
  left: calc(56 * var(--u));
  top: calc(430 * var(--u));
  width: calc(80 * var(--u));
  height: calc(80 * var(--u));
  z-index: 30;
}

/* il timbro: inchiostro ambra, doppia cornice, grana dell'inchiostro */
.pro-stamp {
  position: absolute;
  left: calc(214 * var(--u));
  top: calc(166 * var(--u));
  z-index: 36;
  pointer-events: none;
}
.pro-stamp__ink {
  position: relative;
  display: grid;
  justify-items: center;
  gap: calc(5 * var(--u));
  padding: max(7px, calc(13 * var(--u))) max(12px, calc(21 * var(--u))) max(6px, calc(12 * var(--u)));
  border: max(1.5px, calc(3 * var(--u))) solid currentColor;
  border-radius: max(4px, calc(7 * var(--u)));
  color: #E0A050;
  background: rgba(14, 17, 19, .76);
  transform: rotate(-9deg);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='90'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='11'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.1 1.9'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>") center / 100% 100%;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='90'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='11'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.1 1.9'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>") center / 100% 100%;
}
.pro-stamp__ink::before {
  content: "";
  position: absolute;
  inset: max(2px, calc(4 * var(--u)));
  border: max(1px, calc(1.4 * var(--u))) solid currentColor;
  border-radius: max(2px, calc(4 * var(--u)));
  pointer-events: none;
}
.pro-stamp__ink b {
  font-family: var(--font-display);
  font-stretch: 118%;
  font-weight: 800;
  font-size: max(11px, calc(21 * var(--u)));
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Partenza (solo con movimento): chiuso nella custodia, fascicoli senza sigillo, LED spenti, arco da misurare.
   Se lo script non parte, dopo 3 s il ventaglio si apre comunque e arriva allo stato finale. */
.js-motion .pro-fan[data-intro="pending"] .pro-blade {
  transform: rotate(7deg);
  animation: pro-fan-open .9s var(--ease-out) 3.2s forwards;
}
.js-motion .pro-fan[data-intro="pending"] :is(.pro-led__core, .pro-led__glow, .pro-led__ring, .pro-band, .pro-seal) {
  opacity: 0;
  animation: pro-show .4s ease 4.1s forwards;
}
.js-motion .pro-fan[data-intro="pending"] .pro-stamp {
  opacity: 0;
  animation: pro-show .3s ease 4.5s forwards;
}
.js-motion .pro-fan[data-intro="pending"] .pro-arc__done {
  stroke-dashoffset: 1;
  animation: pro-draw .8s var(--ease-out) 3.6s forwards;
}
/* durante il collaudo lamine e timbro stanno su un livello proprio; a fine sequenza lo lasciano */
.pro-fan[data-intro="running"] .pro-blade { will-change: transform; }
.pro-fan[data-intro="running"] .pro-stamp { will-change: transform, opacity; }
@keyframes pro-fan-open { to { transform: rotate(var(--a)); } }
@keyframes pro-show { to { opacity: 1; } }
@keyframes pro-draw { to { stroke-dashoffset: 0; } }

/* chiave di lettura sotto l'oggetto */
.pro-fan__key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.pro-fan__note { max-width: 30em; font-size: var(--fs-small); color: var(--fg-3); }
.pro-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; }
.pro-legend li,
.pro-card__state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--fg-2);
  white-space: nowrap;
}

/* grammatica degli stati: in funzione = LED blu acceso (.led del core), demo = LED vuoto a tratti
   (.led--todo del core, come l'anello sulla lamina), riservato = fascetta d'acciaio con il piombino */
.pro-dot { display: inline-block; flex: none; }
/* accanto alle scritte piccole il tratteggio del LED vuoto va un po' più marcato */
.pro-legend, .pro-card__state { --led-todo: var(--acciaio-testo); }
.pro-dot--seal {
  position: relative;
  width: 15px;
  height: 7px;
  margin-right: 4px;
  border-radius: 1.5px;
  background: linear-gradient(180deg, #7A848B 0%, #3C444A 45%, #262C30 60%, #4A535A 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(0, 0, 0, .35);
}
.pro-dot--seal::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #E6EAEC 0%, #9AA2A7 50%, #555C61 100%);
  box-shadow: 0 0 0 1px rgba(14, 17, 19, .55);
}

/* ---------- Di persona: cosa vedete in una chiamata ---------- */
.pro-show__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
}
.pro-show__card { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 22px; }
.pro-show__body { display: grid; gap: 14px; align-content: start; }
.pro-show__body > .plate__text { margin-top: 0; }
.pro-show__foot { margin-top: 2px; }

/* l'oggetto di ogni targa sta in un pozzetto incassato */
.pro-show__obj {
  position: relative;
  padding: clamp(12px, 1.4vw, 16px);
  border-radius: 8px;
  background: rgba(0, 0, 0, .26);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .05);
}
/* l'etichetta dell'esempio sta a cavallo del bordo, come un cartellino */
.pro-show__obj > .example-tag { position: absolute; left: 14px; top: 0; z-index: 1; transform: translateY(-50%); background: #1C2124; }

/* altezza minima = quella dei codici: i titoli delle tre targhe restano allineati anche senza codici */
.pro-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; min-height: 23px; }
.pro-card__codes { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.pro-card__codes li {
  padding: 5px 8px 4px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1.2;
  color: var(--fg-2);
  background: rgba(0, 0, 0, .3);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .65), 0 1px 0 rgba(255, 255, 255, .06);
}
.pro-card__title { font-size: clamp(1.22rem, 1.5vw, 1.42rem); line-height: 1.16; text-wrap: balance; }

/* oggetti delle targhe (SVG 300 x 140) */
.pro-obj { display: block; width: 100%; height: auto; overflow: visible; }
.pro-obj__frame { fill: #121618; stroke: rgba(255, 255, 255, .1); stroke-width: 1; }
.pro-obj__frame--dash { fill: none; stroke: rgba(195, 202, 208, .3); stroke-dasharray: 5 4; }
.pro-obj__rule { stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.pro-obj__dot { fill: #3A4247; }
.pro-obj__bar { fill: #0B0D0F; stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.pro-obj__mono { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: .06em; fill: #A3ACB2; }
.pro-obj__mono--dim { font-size: 8px; letter-spacing: .16em; fill: #858E95; }
.pro-obj__tab { fill: #1E2327; stroke: rgba(255, 255, 255, .1); stroke-width: 1; }
.pro-obj__tab.is-on { fill: rgba(140, 192, 230, .14); stroke: #8CC0E6; }
.pro-obj__tab-t { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-anchor: middle; fill: #858E95; }
.pro-obj__tab-t.is-on { fill: #D8EDFB; }
.pro-obj__line { fill: #3A4247; }
.pro-obj__line--2 { fill: #2B3237; }
.pro-obj__line--ghost { fill: #4A535A; fill-opacity: .55; }
.pro-obj__btn { fill: #8CC0E6; fill-opacity: .85; }
.pro-obj__dev { fill: #23292D; stroke: rgba(255, 255, 255, .14); stroke-width: 1; }
.pro-obj__screen { fill: #0E1113; }
.pro-obj__beach circle { fill: #3A4247; }
.pro-obj__beach circle.is-on { fill: #8CC0E6; }
.pro-obj__key { fill: none; stroke: #8CC0E6; stroke-width: 1.4; }
.pro-obj__link { fill: none; stroke: rgba(140, 192, 230, .55); stroke-width: 1.4; stroke-dasharray: 3 3; }
.pro-obj__node { fill: #8CC0E6; }
.pro-obj__folder-back { fill: #2B3237; stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.pro-obj__folder { fill: #3A4247; stroke: rgba(255, 255, 255, .12); stroke-width: 1; }
.pro-obj__band-b { fill: url(#pro-band-steel); stroke: rgba(14, 17, 19, .6); stroke-width: 1; }
.pro-obj__band-hi { fill: none; stroke: rgba(255, 255, 255, .32); stroke-width: .8; }
.pro-obj__band-t { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .3em; fill: #DDE2E5; fill-opacity: .85; }
.pro-obj__band-t--lip { fill: #000000; fill-opacity: .55; }
.pro-obj__wire { fill: none; stroke: #A9B2B8; stroke-width: 1.3; stroke-linecap: round; }
.pro-obj__lead { fill: url(#pro-lead); stroke: rgba(14, 17, 19, .55); stroke-width: .8; }
.pro-obj__lead-ring { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: .8; }
.pro-obj__lead-m { fill: none; stroke: #3E454A; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }

/* ---------- In comune: regole d'officina (alluminio) ---------- */
.pro-rules__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.pro-rule { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 22px; row-gap: 10px; align-content: start; }
.pro-rule__glyph { grid-row: 1 / span 2; width: 64px; height: 64px; }
.pro-rule > :not(.pro-rule__glyph) { grid-column: 2; }
.pro-rule .plate__text { margin-top: 0; }
.pro-glyph__line { fill: none; stroke: #434C52; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pro-glyph__fill { fill: #D5DADD; stroke: #434C52; stroke-width: 2; }
.pro-glyph__led { fill: var(--blu-scuro); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .pro-hero__object { max-width: 620px; }
  /* le targhe in colonna: oggetto a sinistra, testo a destra */
  .pro-show__grid { grid-template-columns: minmax(0, 1fr); }
  .pro-show__card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); column-gap: clamp(22px, 3.4vw, 36px); align-items: center; }
}
@media (max-width: 760px) {
  .pro-rules__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .pro-show__card { grid-template-columns: minmax(0, 1fr); }
  .pro-fan__key { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .pro-rule { grid-template-columns: minmax(0, 1fr); }
  .pro-rule__glyph { grid-row: auto; width: 52px; height: 52px; }
  .pro-rule > :not(.pro-rule__glyph) { grid-column: 1; }
}
/* sui palchi stretti le incisioni crescono per restare leggibili */
@container (max-width: 460px) {
  .pro-blade__code { font-size: 15px; letter-spacing: .12em; }
  .pro-case__label { font-size: 12px; letter-spacing: .18em; }
  .pro-band__txt { font-size: 13px; letter-spacing: .16em; }
}

/* ---------- Stampa ---------- */
@media print {
  .pro-fan__stage > .light-spot { display: none !important; }
  /* stato finale anche se l'ingresso non è partito (lo script lo completa anche su beforeprint) */
  .pro-blade { transform: rotate(var(--a)) !important; animation: none !important; }
  .pro-fan :is(.pro-led__core, .pro-led__glow, .pro-led__ring, .pro-band, .pro-seal, .pro-stamp) { opacity: 1 !important; animation: none !important; }
  .pro-arc__done { stroke-dashoffset: 0 !important; animation: none !important; }
  .pro-arc__spark { opacity: 0 !important; }
  .pro-show__obj { background: none !important; box-shadow: none !important; border: 1px solid #bbb; }
  .pro-card__codes li { color: #333 !important; background: none !important; border: 1px solid #bbb; }
}

/* ---------- WebKit (Safari e iOS): ventaglio su livelli fissi ----------
   WebKit rasterizza la pittura in gran parte col processore. Qui:
   - le lamine e il timbro tengono il loro livello sempre, non solo durante il collaudo: si
     disegnano una volta al primo disegno della pagina, prima che l'intro parta, e a fine
     sequenza non tornano nella pagina (il ritorno farebbe ridipingere tutto il palco);
   - il goniometro ha un livello suo: l'arco che si misura e la scintilla che corre lo
     ridipingono a ogni fotogramma, così si ridipinge solo il suo disegno e non lo sfondo
     della pagina che gli sta sotto. */
html.is-webkit .pro-fan .pro-blade,
html.is-webkit .pro-fan .pro-fan__arc { will-change: transform; }
html.is-webkit .pro-fan .pro-stamp { will-change: transform, opacity; }
@media print { html.is-webkit .pro-fan :is(.pro-blade, .pro-fan__arc, .pro-stamp) { will-change: auto; } }