/* Hero animata della home (rev. 6, analisi dei rischi) su Kadence. Generato da
   hero animata/porta_su_kadence.py. Scena decorativa (aria-hidden), testi della home invariati. */
body #pcr#pcr .hero.pc-anim{
  --abyss:#041E33;
  --ink:#062944;
  --deep:#00335C;
  --navy:#00457C;
  --orange:#F08228;
  --amber:#FFB300;
  --on:#EDF3F9;
  --rule:rgba(255,255,255,.10);
  --display:"Archivo","Roboto","Helvetica Neue",Arial,sans-serif;
  --body:"Roboto","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(16px,4vw,56px);
  --maxw:1240px;
  --ease:cubic-bezier(.2,.75,.2,1);
  --k-haz:#FF7B5E;
  --k-mis:#8ECBF6;
  --lv-g:rgba(63,145,112,.8);
  --lv-y:rgba(196,161,70,.8);
  --lv-o:rgba(205,121,60,.82);
  --lv-r:rgba(192,72,62,.85);
}
/* hero della home: foto, griglia e luce spente; niente blocco e zoom allo scorrimento */
body #pcr#pcr .hero.pc-anim .hero-photo,body #pcr#pcr .hero.pc-anim .hero-grid,body #pcr#pcr .hero.pc-anim .hero-light{display:none}
body #pcr#pcr .hero-stage.pin{height:auto}
body #pcr#pcr .hero-stage.pin .hero.pc-anim{position:relative;top:auto;height:auto;min-height:clamp(600px,84vh,840px)}
body #pcr#pcr .hero.pc-anim .hero-inner{transform:none!important;opacity:1!important}
@media (max-width:1023px){body #pcr#pcr .hero-stage.pin .hero.pc-anim{min-height:0}}
body #pcr#pcr .hero.pc-anim .pch-bar{display:none!important}
/* hero */
body #pcr#pcr .hero.pc-anim{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,var(--ink) 0%,var(--abyss) 100%);min-height:clamp(600px,84vh,840px);display:flex;align-items:center}
body #pcr#pcr .hero.pc-anim #stage{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block}
body #pcr#pcr .hero.pc-anim .fallback{position:absolute;right:3%;top:50%;transform:translateY(-50%);width:min(46%,640px);z-index:0}
body #pcr#pcr .hero.pc-anim .fallback img{width:100%;height:auto;display:block}
body #pcr#pcr .hero.pc-anim .hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(4,30,51,.9) 0%,rgba(4,30,51,.7) 30%,rgba(4,30,51,.16) 50%,rgba(4,30,51,0) 60%)}
body #pcr#pcr .hero.pc-anim .hero-inner{position:relative;z-index:2;width:100%;padding-block:clamp(56px,9vh,110px) clamp(84px,12vh,130px);pointer-events:none}
/* simboli ancorati alla scena, senza testo: sopra la tela, sotto i testi.
   Codice visivo: pittogramma corallo in tasto rotondo con punto che pulsa = pericolo;
   pittogramma azzurro in tasto quadrato fermo = misura e prova; quadrante senza cornice nella matrice = livello di rischio.
   Bordo dei tasti neutro (come la matrice): il colore sta nel pittogramma e nell'alone.
   --tg segue la scala della scena (impostata dallo script) */
body #pcr#pcr .hero.pc-anim .tags{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;--tg:1}
body #pcr#pcr .hero.pc-anim .lbl{position:absolute;left:0;top:0;width:0;height:0;visibility:hidden;--kc:var(--k-haz)}
body #pcr#pcr .hero.pc-anim .lbl[data-k="mis"]{--kc:var(--k-mis)}
body #pcr#pcr .hero.pc-anim .lb-line{position:absolute;left:0;top:-.5px;width:100px;height:1px;transform-origin:0 50%;background:linear-gradient(90deg,var(--kc),rgba(255,255,255,.45));will-change:transform}
body #pcr#pcr .hero.pc-anim .lb-dot{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--kc);box-shadow:0 0 0 3px rgba(4,30,51,.55),0 0 14px 2px var(--kc);will-change:transform}
body #pcr#pcr .hero.pc-anim .lb-dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--kc);opacity:0;animation:pchlbp 2.2s cubic-bezier(.2,.7,.3,1) infinite}
body #pcr#pcr .hero.pc-anim .lbl[data-k="mis"] .lb-dot::after{animation:none}
@keyframes pchlbp{0%{transform:scale(.35);opacity:.85}100%{transform:scale(1.5);opacity:0}}
body #pcr#pcr .hero.pc-anim .lb-tag{position:absolute;left:0;top:0;width:calc(38px * var(--tg));height:calc(38px * var(--tg));padding:0;display:grid;place-items:center;border-radius:50%;color:var(--kc);background:rgba(4,30,51,.72);border:1.5px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(8px) saturate(130%);backdrop-filter:blur(8px) saturate(130%);box-shadow:0 0 16px -4px var(--kc),0 14px 30px -16px rgba(0,0,0,.75);opacity:0;will-change:transform,opacity}
body #pcr#pcr .hero.pc-anim .lbl[data-k="mis"] .lb-tag{border-radius:calc(10px * var(--tg))}
body #pcr#pcr .hero.pc-anim .lb-tag svg{display:block;width:calc(22px * var(--tg));height:calc(22px * var(--tg))}

/* matrice qualitativa gravità per probabilità (illustrativa, senza valori) */
body #pcr#pcr .hero.pc-anim .mx{position:absolute;left:0;top:0;visibility:hidden;transform-origin:0 0;will-change:transform,opacity;padding:13px 15px 13px 40px;border-radius:12px;background:rgba(4,30,51,.72);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px) saturate(130%);backdrop-filter:blur(10px) saturate(130%);box-shadow:0 22px 46px -22px rgba(0,0,0,.8);--c:22px;--gp:3px;--tw:46px;--ax:22px;--lvt:#F2877D}
body #pcr#pcr .hero.pc-anim .mx-grid{position:relative;display:grid;grid-template-columns:repeat(5,var(--c));grid-auto-rows:var(--c);gap:var(--gp);margin-right:var(--tw)}
/* ordine di sovrapposizione: la linea verso il quadrante passa sotto le celle (z 1), indicatore e segni sopra */
body #pcr#pcr .hero.pc-anim .mx-ghost,body #pcr#pcr .hero.pc-anim .mx-trail,body #pcr#pcr .hero.pc-anim .mx-mk,body #pcr#pcr .hero.pc-anim .mx-tag{z-index:2}
body #pcr#pcr .hero.pc-anim .mx-lead{z-index:0}
body #pcr#pcr .hero.pc-anim .mx-grid .c{position:relative;z-index:1;display:block;border-radius:4px;background:var(--cc);background-image:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,0) 62%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);opacity:0;will-change:transform,opacity}
body #pcr#pcr .hero.pc-anim .mx-grid .c::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.82),0 0 18px -3px var(--cc);opacity:var(--h,0)}
body #pcr#pcr .hero.pc-anim .mx-grid .c.g{--cc:var(--lv-g)}
body #pcr#pcr .hero.pc-anim .mx-grid .c.y{--cc:var(--lv-y)}
body #pcr#pcr .hero.pc-anim .mx-grid .c.o{--cc:var(--lv-o)}
body #pcr#pcr .hero.pc-anim .mx-grid .c.r{--cc:var(--lv-r)}
/* assi senza parole: dado (probabilità) che sale, cerotto (gravità) che va a destra;
   ciascun simbolo è centrato sulla prima riga o colonna */
body #pcr#pcr .hero.pc-anim .mx-ay,body #pcr#pcr .hero.pc-anim .mx-ax{color:var(--on);opacity:0}
body #pcr#pcr .hero.pc-anim .mx-ay{position:absolute;left:-20px;top:0;bottom:0;width:var(--ax);transform:translateX(-50%);display:flex;flex-direction:column-reverse;align-items:center;gap:4px}
body #pcr#pcr .hero.pc-anim .mx-ax{display:flex;align-items:center;gap:4px;width:calc(5*var(--c) + 4*var(--gp));margin-top:7px}
body #pcr#pcr .hero.pc-anim .mx-ay svg,body #pcr#pcr .hero.pc-anim .mx-ax svg{display:block;flex:none;width:var(--ax);height:var(--ax)}
body #pcr#pcr .hero.pc-anim .mx-ay svg{margin-bottom:calc((var(--c) - var(--ax)) / 2)}
body #pcr#pcr .hero.pc-anim .mx-ax svg{margin-left:calc((var(--c) - var(--ax)) / 2)}
body #pcr#pcr .hero.pc-anim .mx-ay i,body #pcr#pcr .hero.pc-anim .mx-ax i{position:relative;flex:1}
body #pcr#pcr .hero.pc-anim .mx-ay i{width:1.2px;background:linear-gradient(0deg,rgba(175,195,216,.12),rgba(175,195,216,.85))}
body #pcr#pcr .hero.pc-anim .mx-ax i{height:1.2px;background:linear-gradient(90deg,rgba(175,195,216,.12),rgba(175,195,216,.85))}
body #pcr#pcr .hero.pc-anim .mx-ay i::before,body #pcr#pcr .hero.pc-anim .mx-ax i::before{content:"";position:absolute;width:5px;height:5px;border:0 solid rgba(175,195,216,.85)}
body #pcr#pcr .hero.pc-anim .mx-ay i::before{left:50%;top:0;border-left-width:1.2px;border-top-width:1.2px;transform:translate(-50%,0) rotate(45deg)}
body #pcr#pcr .hero.pc-anim .mx-ax i::before{right:0;top:50%;border-right-width:1.2px;border-top-width:1.2px;transform:translate(0,-50%) rotate(45deg)}
body #pcr#pcr .hero.pc-anim .mx-mk,body #pcr#pcr .hero.pc-anim .mx-ghost{position:absolute;left:-11px;top:-11px;width:22px;height:22px;opacity:0;will-change:transform,opacity}
body #pcr#pcr .hero.pc-anim .mx-mk i{position:absolute;border-radius:50%}
body #pcr#pcr .hero.pc-anim .mk-ring{inset:0;border:1.5px solid var(--lvt);background:rgba(4,30,51,.3)}
body #pcr#pcr .hero.pc-anim .mk-pulse{inset:0;border:1.5px solid var(--lvt);opacity:0}
body #pcr#pcr .hero.pc-anim .mk-dot{left:7px;top:7px;width:8px;height:8px;background:#fff;box-shadow:0 0 10px 2px var(--lvt)}
/* anello fantasma sulla cella di partenza (quasi bianco, leggibile sul rosso) e scia di riduzione (colore delle misure) */
body #pcr#pcr .hero.pc-anim .mx-ghost{border-radius:50%;border:1.5px dashed rgba(255,255,255,.78)}
body #pcr#pcr .hero.pc-anim .mx-trail{position:absolute;left:0;top:0;overflow:visible;opacity:0;fill:none;stroke:var(--k-mis);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body #pcr#pcr .hero.pc-anim .mx-trail .tr-l{stroke-dasharray:2.5 3.5}
body #pcr#pcr .hero.pc-anim .mx-lead{position:absolute;left:0;top:-.5px;width:100px;height:1px;transform-origin:0 50%;background:var(--lvt);opacity:0}
/* quadrante al posto della parola, senza cornice (forma diversa dai tasti di pericolo e di misura):
   la lancetta ruota da alta (rischio iniziale) a bassa (rischio residuo) */
body #pcr#pcr .hero.pc-anim .mx-tag{position:absolute;left:0;top:0;width:30px;height:30px;display:grid;place-items:center;color:var(--lvt);opacity:0}
body #pcr#pcr .hero.pc-anim .mx-tag svg{display:block;width:28px;height:28px;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--lvt) 55%,transparent))}
@media (prefers-reduced-motion: reduce){body #pcr#pcr .hero.pc-anim .lb-dot::after{animation:none}}

@media (max-width:1023px){
  body #pcr#pcr .hero.pc-anim{min-height:0;align-items:flex-start}
  body #pcr#pcr .hero.pc-anim .hero-veil{background:linear-gradient(180deg,rgba(4,30,51,.92) 0%,rgba(4,30,51,.84) 45%,rgba(4,30,51,.12) 62%,rgba(4,30,51,0) 72%)}
  body #pcr#pcr .hero.pc-anim .hero-inner{padding-block:40px clamp(360px,86vw,560px)}
  /* con l'animazione attiva: prodotto e matrice nello stesso riquadro, alto al massimo una schermata sotto la testata */
  body #pcr#pcr .hero.pc-anim.fx .hero-inner{padding-bottom:min(clamp(380px,118vw,480px),calc(100vh - 116px));padding-bottom:min(clamp(380px,118vw,480px),calc(100svh - 116px))}
  /* quando basta ridurre la scena al massimo del 20% (tablet), lo script la fa stare tutta nella prima schermata (--pb) */
  body #pcr#pcr .hero.pc-anim.fx.fit .hero-inner{padding-bottom:var(--pb)}
  /* il velo protegge i testi e si esaurisce dove comincia la scena (--st, impostata dallo script) */
  body #pcr#pcr .hero.pc-anim.fx .hero-veil{background:linear-gradient(180deg,rgba(4,30,51,.92) 0,rgba(4,30,51,.84) calc(var(--st,60%) - 150px),rgba(4,30,51,.12) calc(var(--st,60%) - 24px),rgba(4,30,51,0) var(--st,60%))}
  body #pcr#pcr .hero.pc-anim .fallback{right:auto;left:50%;top:auto;bottom:20px;transform:translateX(-50%);width:min(88%,520px)}
  body #pcr#pcr .hero.pc-anim .lb-tag{width:calc(30px * var(--tg));height:calc(30px * var(--tg))}
  body #pcr#pcr .hero.pc-anim .lbl[data-k="mis"] .lb-tag{border-radius:calc(8px * var(--tg))}
  body #pcr#pcr .hero.pc-anim .lb-tag svg{width:calc(18px * var(--tg));height:calc(18px * var(--tg))}
}
/* matrice compatta solo sugli smartphone; sui tablet resta la misura del computer */
@media (max-width:599px){
  body #pcr#pcr .hero.pc-anim .mx{padding:10px 12px 11px 31px;border-radius:10px;--c:15px;--gp:2px;--tw:36px;--ax:18px}
  body #pcr#pcr .hero.pc-anim .mx-ay{left:-15px}
  body #pcr#pcr .hero.pc-anim .mx-ax{margin-top:5px}
  body #pcr#pcr .hero.pc-anim .mx-mk,body #pcr#pcr .hero.pc-anim .mx-ghost{left:-8px;top:-8px;width:16px;height:16px}
  body #pcr#pcr .hero.pc-anim .mk-dot{left:5px;top:5px;width:6px;height:6px}
  body #pcr#pcr .hero.pc-anim .mx-trail{stroke-width:1.6}
  body #pcr#pcr .hero.pc-anim .mx-trail .tr-l{stroke-dasharray:2 3}
  body #pcr#pcr .hero.pc-anim .mx-tag{width:24px;height:24px}
  body #pcr#pcr .hero.pc-anim .mx-tag svg{width:22px;height:22px}
}