/* it.simonerenzi.com · effetti "pro" (cinema-it-pro.js, github3d.js e le parti nuove di cinema-it-sections.js).
   Tutto sotto html.cx: senza JS o con "riduci movimento" non cambia nulla. */
@property --cx-a{syntax:"<angle>";initial-value:0deg;inherits:false}

/* ---------- titoli: lettere in 3D ---------- */
html.cx .cx-big .cx-ch{display:inline-block;will-change:transform}
/* lettere separate perdono la crenatura: il titolo del curriculum un filo più piccolo per stare nella sua colonna */
html.cx .cx-cv-main .cx-big{font-size:clamp(48px,7.8vw,150px)}
@media (max-width:1023px){html.cx .cx-cv-main .cx-big{font-size:8.6vw}}
@media (max-width:768px){html.cx .cx-cv-main .cx-big{font-size:clamp(38px,11.5vw,80px)}}
html.cx .cx-outline{font-style:normal;color:transparent;-webkit-text-stroke:2px #f5f5f7}
html.cx .cx-outline .cx-ch{-webkit-text-stroke:2px #f5f5f7}
@media (max-width:768px){html.cx .cx-outline,html.cx .cx-outline .cx-ch{-webkit-text-stroke-width:1.5px}}

/* ---------- pulsanti magnetici: la trasformazione la guida il JS ---------- */
html.cx .cx-mag{transition-property:background,background-color,color,box-shadow,opacity,border-color!important}

/* ---------- riflesso di luce sulle schede ---------- */
html.cx .product-card,html.cx .collab-card{position:relative}
.cx-glare{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .5s;
  background:radial-gradient(520px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.32),rgba(255,255,255,0) 55%);mix-blend-mode:soft-light}
html.cx .product-card-content{will-change:transform}

/* ---------- curriculum ---------- */
html.cx .cx-cat-n{margin-left:.35em;font-size:.5em;font-weight:600;letter-spacing:0;color:var(--ink3);vertical-align:super;font-variant-numeric:tabular-nums}
html.cx .cx-cat.cx-draw{position:relative;border-bottom-color:transparent}
html.cx .cx-cat.cx-draw::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:rgba(0,0,0,.14);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.6s var(--expo)}
html.cx .cx-cat.cx-draw.is-in::after{transform:scaleX(1)}
html.cx .cx-ribbons{transform-origin:50% 50%}

/* bordo luminoso che gira (scheda "Interroga il mio CV" e modulo contatti) */
html.cx .cx-aura{position:relative;isolation:isolate}
html.cx .cx-aura::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--cx-a),rgba(0,113,227,0) 0deg,rgba(0,113,227,0) 200deg,#0071e3 260deg,#bf5af2 300deg,#ff375f 330deg,rgba(255,55,95,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:cxAura 6s linear infinite}
html.cx .cx-aura::after{content:"";position:absolute;inset:8%;border-radius:inherit;z-index:-1;pointer-events:none;opacity:.45;filter:blur(60px);
  background:conic-gradient(from var(--cx-a),transparent 0deg,transparent 200deg,#0071e3 260deg,#bf5af2 300deg,#ff375f 330deg,transparent 360deg);animation:cxAura 6s linear infinite}
html.cx .cx-aura-light::after{display:none}
@keyframes cxAura{to{--cx-a:360deg}}

/* ---------- prodotti: contatore e barra durante la galleria ---------- */
html.cx .cx-prod-pin{position:relative}
.cx-prod-hud{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(20px,4.5vh,48px);display:flex;align-items:center;gap:22px;pointer-events:none;color:var(--ink)}
.cx-prod-n{font-family:var(--mono);font-size:14px;letter-spacing:.04em;color:var(--ink3);white-space:nowrap}
.cx-prod-n b{color:var(--ink);font-weight:500}
.cx-prod-name{min-width:9em;font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.cx-prod-track{flex:1;height:2px;border-radius:2px;background:rgba(0,0,0,.08);overflow:hidden}
.cx-prod-track i{display:block;height:100%;background:var(--ink);transform:scaleX(0);transform-origin:0 50%}

/* ---------- prototipazione: cornice da disegno tecnico e scansione laser ---------- */
html.cx .cx-vwrap{order:1;position:relative;width:100%;border-radius:32px;overflow:hidden;background:#050608}
html.cx .cx-vwrap #stl-viewer{position:relative;z-index:1}
.cx-blueprint{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(100,210,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(100,210,255,.16) 1px,transparent 1px),
    linear-gradient(rgba(100,210,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(100,210,255,.07) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:-1px -1px}
.cx-scan{position:absolute;left:0;right:0;top:0;height:2px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,rgba(100,210,255,0),#64d2ff 18%,#fff 50%,#64d2ff 82%,rgba(100,210,255,0));box-shadow:0 0 18px 2px rgba(100,210,255,.75)}
.cx-scan i{position:absolute;left:0;right:0;bottom:2px;height:140px;background:linear-gradient(180deg,rgba(100,210,255,0),rgba(100,210,255,.16))}
.cx-cad{position:absolute;z-index:4;width:28px;height:28px;pointer-events:none;border:0 solid rgba(245,245,247,.55)}
.cx-cad-tl{left:20px;top:20px;border-left-width:1.5px;border-top-width:1.5px}
.cx-cad-tr{right:20px;top:20px;border-right-width:1.5px;border-top-width:1.5px}
.cx-cad-bl{left:20px;bottom:20px;border-left-width:1.5px;border-bottom-width:1.5px}
.cx-cad-br{right:20px;bottom:20px;border-right-width:1.5px;border-bottom-width:1.5px}
.cx-cad-tag{position:absolute;z-index:4;left:60px;top:22px;display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:#a1a1a6;pointer-events:none}
.cx-cad-tag b{font-weight:500;color:#64d2ff;padding:3px 8px;border:1px solid rgba(100,210,255,.4);border-radius:6px}
.cx-cad-tag span{color:#f5f5f7;max-width:min(52vw,520px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-cad-tag em{font-style:normal;font-variant-numeric:tabular-nums}
@media (max-width:768px){.cx-cad-tag em{display:none}.cx-cad-tag{left:54px;top:18px}}

/* ---------- collaborazioni: spettro Raman ---------- */
.cx-raman{margin:clamp(80px,9vw,140px) 0 0;padding:clamp(24px,3.2vw,52px);border-radius:32px;background:var(--paper2)}
.cx-raman figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 24px;margin-bottom:clamp(10px,2vw,24px)}
.cx-rm-k{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.cx-rm-t{flex:1;font-size:clamp(22px,2.4vw,38px);font-weight:700;letter-spacing:-.035em;color:var(--ink)}
.cx-rm-t b{background:linear-gradient(90deg,#bf5af2,#ff375f);-webkit-background-clip:text;background-clip:text;color:transparent}
.cx-rm-v{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;color:var(--ink2);padding:8px 14px;border-radius:999px;background:#fff}
.cx-rm-v i{width:8px;height:8px;border-radius:50%;background:#ff375f;box-shadow:0 0 0 0 rgba(255,55,95,.6);animation:cxPing 1.6s infinite}
.cx-rm-v em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--ink);min-width:3.2ch}
@keyframes cxPing{70%{box-shadow:0 0 0 10px rgba(255,55,95,0)}100%{box-shadow:0 0 0 0 rgba(255,55,95,0)}}
.cx-rm-plot svg{display:block;width:100%;height:auto;overflow:visible}
.cx-rm-axis,.cx-rm-tick line{stroke:rgba(0,0,0,.18);stroke-width:1}
.cx-rm-tick text{font:500 13px var(--mono);fill:#86868b;text-anchor:middle}
.cx-rm-line{stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cx-rm-dot{fill:#ff375f;filter:drop-shadow(0 0 8px rgba(255,55,95,.9))}
.cx-rm-peak line{stroke:#1d1d1f;stroke-width:1}
.cx-rm-peak text{font:600 13px Inter,system-ui,sans-serif;fill:#1d1d1f;text-anchor:middle;letter-spacing:-.01em}
.cx-rm-x{margin:6px 0 0;text-align:right;font-family:var(--mono);font-size:12px;color:var(--ink3)}
/* su telefono lo spettro si allarga e mostra la zona dei picchi */
@media (max-width:768px){.cx-rm-plot{overflow:hidden;margin:0 calc(-1 * clamp(24px,3.2vw,52px))}.cx-rm-plot svg{width:165%;margin-left:-60%}.cx-rm-peak text{font-size:20px}.cx-rm-tick text{font-size:18px}.cx-rm-line{stroke-width:4}}
html.cx .collab-card{overflow:hidden}
.cx-shine{position:absolute;inset:0;z-index:2;pointer-events:none;transform:translateX(-120%);
  background:linear-gradient(105deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 65%)}

/* ---------- Mensa: contatore meccanico e matrice ---------- */
html.cx .cx-numbers .assoc-stat-num{line-height:1!important;display:inline-flex;align-items:flex-start}
.cx-odo{display:inline-block;height:1em;overflow:hidden;vertical-align:top}
.cx-odo-s{display:flex;flex-direction:column}
.cx-odo-s span{display:block;height:1em;line-height:1em}
.cx-odo-suf{line-height:1em}
html.cx .cx-head-split{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(24px,4vw,64px)}
.cx-raven{position:relative;border-radius:20px;flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:clamp(200px,22vw,330px);aspect-ratio:1;padding:0;margin:0;border:0;background:none;cursor:pointer}
.cx-rv{display:flex;align-items:center;justify-content:center;border-radius:clamp(12px,1.4vw,20px);background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.cx-rv svg{width:72%;height:auto;fill:#1d1d1f}
.cx-rv-last{background:#1d1d1f;animation:cxPulse 2.4s ease-in-out infinite}
.cx-rv-q{color:#fff;font-weight:800;font-size:clamp(30px,3.2vw,52px);letter-spacing:-.04em}
.cx-raven:hover .cx-rv-last,.cx-raven:focus-visible .cx-rv-last{background:#0071e3}
.cx-raven:focus-visible{outline:2px solid #0071e3;outline-offset:8px;border-radius:20px}
@keyframes cxPulse{50%{box-shadow:0 0 0 10px rgba(29,29,31,0),0 0 0 0 rgba(29,29,31,.25)}}
@media (max-width:768px){html.cx .cx-head-split{flex-direction:column;align-items:flex-start}.cx-raven{width:min(64vw,260px)}}

/* ---------- GitHub: la città dei contributi ---------- */
.cx-sky{position:relative;height:min(80vh,780px);min-height:420px;margin:0 0 clamp(40px,5vw,80px);border-radius:32px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 30%,#14181d 0%,#050607 70%)}
.cx-sky-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cx-sky-cap{position:absolute;left:clamp(22px,3vw,44px);top:clamp(20px,3vw,40px);z-index:2;pointer-events:none;color:#f5f5f7}
.cx-sky-n{display:block;font-size:clamp(56px,8vw,140px);font-weight:800;letter-spacing:-.06em;line-height:.9;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff,#39d353);-webkit-background-clip:text;background-clip:text;color:transparent}
.cx-sky-l{display:block;margin-top:10px;font-size:clamp(16px,1.4vw,22px);font-weight:600;color:#86868b}
.cx-sky-legend{position:absolute;right:clamp(22px,3vw,44px);bottom:clamp(18px,2.6vw,34px);z-index:2;display:flex;align-items:center;gap:6px;font-size:12px;color:#86868b;pointer-events:none}
.cx-sky-legend i{width:12px;height:12px;border-radius:3px;display:block}
.cx-sky-legend span{margin:0 4px}
.cx-sky-tip{position:absolute;left:0;top:0;z-index:3;pointer-events:none;padding:10px 14px;border-radius:12px;background:rgba(29,29,31,.88);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#f5f5f7;font-size:14px;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.cx-sky-tip b{font-size:18px;letter-spacing:-.02em}
.cx-sky-tip span{display:block;margin-top:2px;font-size:12px;color:#a1a1a6}
@media (max-width:768px){.cx-sky{height:62vh;min-height:360px;border-radius:24px}.cx-sky-legend{display:none}}

/* ---------- contatti: "Parliamone." riempito con la vista su Roma ---------- */
html.cx .cx-outro .cx-big.cx-photo-text{display:inline-block;padding:.08em .04em .12em 0;color:transparent;
  background-image:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.1)),url(../img/hero-bg.webp);background-size:190% auto;background-position:88% 45%;
  -webkit-background-clip:text;background-clip:text;will-change:transform}
html.cx .cx-outro :is(h1,h2.seo-section-title).contact-title{padding:0!important}
/* la scritta entra più larga e poi si stringe: non deve mai allargare la pagina (su iPhone la rimpicciolirebbe tutta) */
html.cx .cx-outro,html.cx #cv{overflow-x:clip!important}
/* rete di sicurezza: niente scorrimento orizzontale della pagina */
html.cx{overflow-x:hidden}
@supports (overflow:clip){html.cx{overflow-x:clip}}
/* GitHub: con la città 3D il calendario piatto e il totale ripetuto non servono più
   (restano nella pagina come fonte dei dati e tornano visibili se il 3D non parte) */
html.cx .cx-has-sky .gh-graph-container,html.cx .cx-has-sky .gh-contrib-header{display:none!important}
.cx-sky-years{position:absolute;left:clamp(22px,3vw,44px);bottom:clamp(18px,2.6vw,34px);z-index:2;display:flex;flex-wrap:wrap;gap:8px;margin:0!important}
@media (max-width:768px){.cx-sky-years{right:clamp(22px,3vw,44px)}}