@font-face { font-family: 'Oswald'; font-weight: 500; font-display: block; src: url(/fonts/oswald-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Oswald'; font-weight: 600; font-display: block; src: url(/fonts/oswald-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Oswald'; font-weight: 700; font-display: block; src: url(/fonts/oswald-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 400; font-display: block; src: url(/fonts/public-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 600; font-display: block; src: url(/fonts/public-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 700; font-display: block; src: url(/fonts/public-sans-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 800; font-display: block; src: url(/fonts/public-sans-latin-800-normal.woff2) format('woff2'); }

:root {
  --ink: #12141A; --ink2: #1D2029; --ink3: #2A2E3A; --paper: #F2EFE8; --line: #D9D4C7; --muted: #77746D;
  --orange: #FF5F1F; --green: #19B36B; --blue: #2B5BFF; --yellow: #FFC233; --violet: #B14DFF;
  --c: var(--orange); --on: var(--ink);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body { font: 400 30px/1.4 'Public Sans', system-ui, sans-serif; color: var(--ink); cursor: default; }
body.idle { cursor: none; }

#stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: center center; overflow: hidden; background: var(--ink); }
.slide { position: absolute; inset: 0; padding: 104px 140px 120px; display: block; overflow: hidden; }
.slide:not(.active) { display: none; }
.slide.active { animation: slideIn .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes slideIn { from { opacity: 0; transform: translateX(40px); } }

.t-ink { background: var(--ink); color: #fff; }
.t-paper { background: var(--paper); color: var(--ink); }
.t-color { background: var(--c); color: var(--on); }

.kick { font: 600 26px/1.2 'Oswald', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--ck, var(--c)); }
.t-ink .kick { color: var(--c); }
.t-color .kick { color: var(--on); opacity: .8; }
.title { font: 600 76px/1.04 'Oswald', sans-serif; margin: 14px 0 0; letter-spacing: -.005em; max-width: 1500px; }
.mega { font: 700 210px/.96 'Oswald', sans-serif; text-transform: uppercase; margin: 18px 0 0; letter-spacing: -.01em; }
.sub { font-size: 40px; line-height: 1.3; margin: 30px 0 0; max-width: 1000px; opacity: .9; }
.src { position: absolute; left: 140px; right: 140px; bottom: 58px; font-size: 19px; color: var(--muted); }
.t-ink .src { color: #8A8F9C; }

/* frammenti: compaiono a ogni «avanti» */
[data-step] { opacity: 0; transform: translateY(26px); transition: opacity .5s, transform .6s cubic-bezier(.2, .8, .2, 1); }
[data-step].on { opacity: 1; transform: none; }

/* barra di avanzamento per parte */
#prog { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; display: flex; gap: 4px; z-index: 5; }
#prog i { flex: 1; background: #ffffff1c; position: relative; overflow: hidden; }
#prog i b { position: absolute; inset: 0; width: 0; background: var(--pc); transition: width .5s; }
#prog.light i { background: #12141a14; }

/* ---------- numero della slide, piccolo, in basso a destra ---------- */
#snum { position: absolute; right: 44px; bottom: 24px; z-index: 6; font: 600 22px/1 'Oswald', sans-serif; letter-spacing: .08em; opacity: .55; pointer-events: none; }

/* ---------- copertina: la veste di Prometeo Lab (Fondazione Mario Diana), come nei post social ---------- */
@font-face { font-family: 'Quicksand'; font-weight: 700; font-display: block; src: url(/fonts/quicksand-latin-700-normal.woff2) format('woff2'); }
:root { --fmd-red: #C1292F; --pm-coral: #E17850; --pm-yellow: #FFCA08; }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.08); } }
.cover { padding: 92px 0 0 140px; }
.cover .cv-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 860px; clip-path: polygon(150px 0, 100% 0, 100% 100%, 0 100%); overflow: hidden; }
.cover .cv-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; animation: kenburns 30s ease-out both; }
.cover .cv-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, #12141Ab0, transparent 50%); }
@keyframes kenburns { from { transform: scale(1.1); } }
.cover .cv-brand { display: flex; align-items: flex-end; gap: 12px; }
.cover .cv-brand img { height: 170px; display: block; }
.cover .cv-brand .lab { height: 38px; padding: 0 12px; border-radius: 7px; background: var(--pm-coral); color: #fff; font: 700 30px/38px 'Quicksand', sans-serif; letter-spacing: .04em; }
.cover .mega { font-size: 150px; line-height: .98; margin: 62px 0 0; }
.cover .mega em { font-style: normal; color: var(--pm-coral); }
.cover .foot { margin-top: 34px; font-size: 26px; color: var(--muted); letter-spacing: .02em; }
.cover .cv-fmd { position: absolute; left: 140px; bottom: 70px; display: flex; align-items: center; gap: 22px; font: 600 20px/1 'Oswald', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cover .cv-fmd img { height: 92px; display: block; }

/* ---------- QR ---------- */
.qrbox { background: #fff; border-radius: 28px; padding: 26px; display: inline-block; box-shadow: 0 30px 80px #0006; }
.qrbox svg { display: block; }
.url { font: 600 26px/1 'Oswald', sans-serif; letter-spacing: .06em; color: #8A8F9C; margin-top: 18px; }

/* ---------- sala ---------- */
.sala { display: grid; grid-template-columns: 640px 1fr; gap: 90px; }
.sala .title { font-size: 64px; }
.sala .qrbox { margin-top: 40px; }
.sala .qrbox svg { width: 440px; height: 440px; }
.sala .qrbox { animation: halo 2.4s ease-in-out infinite; }
@keyframes halo { 50% { box-shadow: 0 0 0 18px #ff5f1f33, 0 30px 80px #0006; } }
.sala .note { font-size: 26px; color: #A7ABB6; margin: 22px 0 0; max-width: 560px; }
.incount { display: flex; align-items: baseline; gap: 26px; border-bottom: 2px solid #ffffff1f; padding-bottom: 18px; }
.incount .lab { font: 600 30px/1 'Oswald', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.incount b { font: 700 170px/.85 'Oswald', sans-serif; }
.incount .cl { font-size: 26px; color: #A7ABB6; margin-left: auto; }
.cols { display: flex; gap: 22px; margin-top: 30px; height: 660px; }
.col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.col h4 { margin: 0 0 8px; font: 700 44px/1 'Oswald', sans-serif; display: flex; align-items: baseline; gap: 12px; }
.col h4 small { font: 600 26px/1 'Public Sans', sans-serif; color: #A7ABB6; }
.col h4::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: var(--k); align-self: center; }
.chipname { font-size: 22px; font-weight: 600; padding: 5px 14px; border-radius: 999px; background: #ffffff12; border-left: 5px solid var(--k); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chipname.new { animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }
.more { font-size: 22px; color: #A7ABB6; padding-left: 14px; }
/* nomi nascosti: restano le classi con il numero di iscritti, più grandi */
.sala.nonomi .names { display: none !important; }
.sala.nonomi .col h4 { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 72px; }
.sala.nonomi .col h4::before { width: 26px; height: 26px; align-self: flex-start; }
.sala.nonomi .col h4 small { font: 700 34px/1 'Oswald', sans-serif; color: #fff; }
.sala.nonomi .col h4 small::after { content: ' iscritti'; font: 600 24px/1 'Public Sans', sans-serif; color: #A7ABB6; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.empty { color: #6E7380; font-size: 30px; margin-top: 40px; }

/* ---------- apertura di parte ---------- */
.opener .bignum { position: absolute; right: 40px; top: 30px; font: 700 520px/1 'Oswald', sans-serif; color: color-mix(in srgb, var(--on) 14%, transparent); pointer-events: none; }
.opener .otext { position: relative; padding-top: 170px; }
.opener .mega { font-size: 190px; }
.opener .sub { font-size: 44px; }
.opener .sub { font-size: 36px; max-width: 1000px; }
.opener .fine { font-size: 24px; opacity: .8; margin: 24px 0 0; }
.opener .art { position: absolute; right: 300px; top: 170px; filter: drop-shadow(0 40px 60px #0004); }
.opener .phone { right: 270px; top: 150px; width: 380px; height: 760px; transform: rotate(8deg); }
.opener .sacco { width: 440px; height: 620px; }
.opener .net { width: 460px; height: 640px; top: 150px; }
.opener .four { width: 480px; height: 560px; top: 210px; }
.opener .bott { width: 300px; height: 640px; top: 160px; right: 330px; transform: rotate(-7deg); }
.opener.vb .mega { font-size: 160px; }
/* tappa 3: il viaggio della bottiglia, una tappa per ogni Avanti; il pallino segue la bottiglia */
.vt-loop { display: block; width: 1640px; height: 80px; margin-top: 18px; }
.vt-loop path { fill: none; stroke: var(--c); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.vt-loop path:first-child { stroke-dasharray: 14 12; }
.vt-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.vt-st { background: #fff; border-radius: 18px; padding: 24px 16px 26px; text-align: center; border-top: 10px solid var(--c); min-height: 420px; }
.vt-st svg { width: 120px; height: 120px; display: block; margin: 0 auto 14px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.vt-st svg .c { stroke: var(--c); }
.vt-st b { display: block; font: 600 34px/1.08 'Oswald', sans-serif; }
.vt-st span { display: block; font-size: 24px; line-height: 1.3; color: var(--muted); margin-top: 10px; }
.vt-track { position: relative; height: 40px; margin-top: 16px; }
.vt-track::before { content: ''; position: absolute; left: 128px; right: 128px; top: 50%; height: 4px; margin-top: -2px; background: #D9D4C7; border-radius: 2px; }
.vt-dot { position: absolute; top: 50%; left: 128px; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 8px color-mix(in srgb, var(--c) 22%, transparent); transition: left .9s cubic-bezier(.4, 0, .2, 1); }
.vita:has(.vt-st[data-step="1"].on) .vt-dot { left: 405px; }
.vita:has(.vt-st[data-step="2"].on) .vt-dot { left: 682px; }
.vita:has(.vt-st[data-step="3"].on) .vt-dot { left: 958px; }
.vita:has(.vt-st[data-step="4"].on) .vt-dot { left: 1235px; }
.vita:has(.vt-st[data-step="5"].on) .vt-dot { left: 1512px; }
.vita:has(.vt-loop[data-step="6"].on) .vt-dot { left: 128px; }
.vita .take.sm { margin-top: 22px; }
.art .bob { animation: bob 3s ease-in-out infinite; }
.art .b2 { animation-delay: -.7s; } .art .b3 { animation-delay: -1.4s; } .art .b4 { animation-delay: -2.1s; } .art .b5 { animation-delay: -1s; }
@keyframes bob { 50% { transform: translateY(-12px); } }
.net .sway { transform-origin: 230px 60px; animation: sway 5s ease-in-out infinite; }
@keyframes sway { 50% { transform: rotate(3deg) skewX(2deg); } }
.phone .crack { stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 1.2s .5s ease-out forwards; }
.phone .batt { animation: blink 1.1s steps(2) infinite; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes blink { 50% { opacity: .15; } }

/* ---------- due mondi ---------- */
.track { margin-top: 56px; }
.tlabel { font: 600 26px/1 'Oswald', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.circ .tlabel { color: var(--c); }
.flow { display: flex; align-items: stretch; gap: 0; }
.node { flex: 1; min-width: 0; border-radius: 16px; padding: 22px 20px; background: #E3DED3; text-align: center; }
.node b { display: block; font: 600 36px/1.1 'Oswald', sans-serif; }
.node span { display: block; font-size: 22px; color: var(--muted); margin-top: 6px; }
.node.end { background: #3B3F4A; color: #fff; }
.node.end span { color: #C9CCD3; }
.arr { flex: none; width: 56px; position: relative; }
.arr::after { content: ''; position: absolute; left: 12px; right: 12px; top: 50%; height: 4px; background: #9A968D; }
.arr::before { content: ''; position: absolute; right: 8px; top: 50%; margin-top: -10px; border: 10px solid transparent; border-left: 14px solid #9A968D; border-right: 0; }
.circ .node { background: var(--c); color: var(--ink); }
.circ .node span { color: #12141ab3; }
.circ .node:nth-of-type(2) { background: color-mix(in srgb, var(--c) 78%, #fff); }
.circ .node:nth-of-type(3) { background: color-mix(in srgb, var(--c) 58%, #fff); }
.circ .node:nth-of-type(4) { background: color-mix(in srgb, var(--c) 40%, #fff); }
.circ .node:nth-of-type(5) { background: color-mix(in srgb, var(--c) 22%, #fff); }
.circ .arr::after { background: var(--c); }
.circ .arr::before { border-left-color: var(--c); }
.circ.on .node { animation: pop .55s cubic-bezier(.2, 1.4, .4, 1) backwards; }
.circ.on .node:nth-of-type(2) { animation-delay: .12s; }
.circ.on .node:nth-of-type(3) { animation-delay: .24s; }
.circ.on .node:nth-of-type(4) { animation-delay: .36s; }
.circ.on .node:nth-of-type(5) { animation-delay: .48s; }
/* «Ricicla» brilla: colore pieno, alone che pulsa e un riflesso che passa */
.circ .node.shine { position: relative; overflow: hidden; background: var(--c); }
.circ .node.shine::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, #ffffffb0 50%, transparent 70%); transform: translateX(-130%); }
.circ.on .node.shine { animation: pop .55s .48s cubic-bezier(.2, 1.4, .4, 1) backwards, glow 2.4s 1.2s ease-in-out infinite; }
.circ.on .node.shine::after { animation: sheen 2.8s 1.4s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 40px 8px color-mix(in srgb, var(--c) 75%, transparent); } }
@keyframes sheen { 55%, 100% { transform: translateX(130%); } }
.loop { display: block; width: 1640px; height: 84px; }
.loop .line { fill: none; stroke: var(--c); stroke-width: 5; stroke-dasharray: 1700; stroke-dashoffset: 1700; }
.circ.on .loop .line { animation: draw 1.1s .8s ease-in-out forwards; }
.loop .head { fill: var(--c); opacity: 0; }
.circ.on .loop .head { animation: fade .3s 1.8s forwards; }
.take { font: 600 50px/1.15 'Oswald', sans-serif; margin: 40px 0 0; }
.take em { font-style: normal; color: var(--ck, var(--c)); }

/* ---------- anelli ---------- */
.split { display: grid; grid-template-columns: 660px 1fr; gap: 90px; align-items: center; margin-top: 30px; }
.split.solo { grid-template-columns: 660px; justify-content: center; }
.rings { width: 660px; height: 660px; overflow: visible; }
.rings circle { transform-origin: 330px 330px; transform: scale(0); }
.active .rings circle { animation: grow .8s cubic-bezier(.2, 1.2, .4, 1) forwards; }
.active .rings .r3 { animation-delay: .15s; }
.active .rings .r2 { animation-delay: .3s; }
.active .rings .r1 { animation-delay: .45s; }
@keyframes grow { to { transform: scale(1); } }
.rings text { font: 600 27px 'Oswald', sans-serif; text-anchor: middle; fill: var(--ink); opacity: 0; }
.active .rings text { animation: fade .5s .9s forwards; }
@keyframes fade { to { opacity: 1; } }
.ideas { display: flex; flex-direction: column; gap: 34px; }
.idea h3 { font: 600 46px/1.1 'Oswald', sans-serif; margin: 0 0 8px; }
.idea p { margin: 0; font-size: 30px; color: #44423D; }
.idea.strong h3 { color: var(--c); }

/* ---------- quattro numeri ---------- */
.cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 70px; }
.card { background: #fff; border-radius: 22px; padding: 40px 34px 44px; min-height: 420px; }
.card .n { font: 700 150px/1 'Oswald', sans-serif; color: var(--c); }
.card p { font-size: 30px; margin: 22px 0 0; color: #44423D; }
.card.dark { background: var(--ink); color: #fff; }
.card.dark p { color: #C9CCD3; }

/* ---------- domanda ---------- */
.qs { display: grid; grid-template-columns: 1fr 500px; gap: 80px; padding-top: 90px; }
.qs .main { display: flex; flex-direction: column; min-width: 0; }
.qs .qtext { font: 600 64px/1.08 'Oswald', sans-serif; margin: 16px 0 0; }
.qs .qtext.long { font-size: 54px; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 46px; }
.opts.one { grid-template-columns: 1fr; gap: 14px; }
.opt { position: relative; display: flex; align-items: center; gap: 22px; min-height: 120px; padding: 18px 28px 18px 22px; border-radius: 18px; background: var(--ink2); border: 3px solid transparent; overflow: hidden; transition: opacity .5s, border-color .4s, transform .4s; }
.opt .bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #ffffff2a; transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
.opt .ghost { position: absolute; left: 0; bottom: 0; height: 12px; width: 0; background: #ffffff55; transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
.opt .let { position: relative; flex: none; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; font: 700 34px/1 'Oswald', sans-serif; }
.opt .ot { position: relative; flex: 1; font-size: 31px; font-weight: 600; line-height: 1.25; }
.opt .pct { position: relative; flex: none; font: 700 46px/1 'Oswald', sans-serif; opacity: 0; transition: opacity .4s .5s; text-align: right; }
.opt .pct small { display: block; font: 600 20px/1.2 'Public Sans', sans-serif; color: #A7ABB6; margin-top: 4px; }
.has-dist .opt .pct { opacity: 1; }
.is-revealed .opt.ok { border-color: var(--c); transform: scale(1.02); }
.is-revealed .opt.ok .bar { background: color-mix(in srgb, var(--c) 45%, transparent); }
.is-revealed .opt.ok .let { background: var(--c); color: var(--on); }
.is-revealed .opts.judged .opt:not(.ok) { opacity: .45; }
.opt .tag { position: absolute; right: 18px; top: -2px; background: var(--c); color: var(--on); font: 600 18px/1 'Oswald', sans-serif; letter-spacing: .12em; padding: 6px 12px 7px; border-radius: 0 0 10px 10px; text-transform: uppercase; display: none; }
.is-revealed .opt.ok .tag { display: block; }
.legend { display: flex; gap: 34px; margin-top: 18px; font-size: 22px; color: #A7ABB6; }
.legend i { display: inline-block; width: 30px; height: 12px; background: #ffffff55; margin-right: 10px; vertical-align: middle; }
.legend i.now { height: 26px; background: #ffffff2a; }

/* vero/falso */
.opts.vf { grid-template-columns: 1fr 1fr; }
.opts.vf .opt { min-height: 230px; justify-content: center; }
.opts.vf .opt .let { display: none; }
.opts.vf .opt .ot { flex: none; font: 700 96px/1 'Oswald', sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.opts.vf .opt .pct { position: absolute; right: 26px; bottom: 22px; }

/* ordinamento */
.opts.order .opt { min-height: 96px; }
.opts.order.many { gap: 10px; margin-top: 30px; }
.opts.order.many .opt { min-height: 70px; padding-top: 8px; padding-bottom: 8px; }
.opts.order.many .let { width: 54px; height: 54px; font-size: 30px; }
.opts.order .let { background: transparent; border: 3px dashed #ffffff55; color: #fff; }
.is-revealed .opts.order .let { background: var(--c); border: 0; color: var(--on); animation: pop .5s cubic-bezier(.2, 1.6, .4, 1) backwards; }
.opts.order .pct { font-size: 38px; }

/* numeri */
.nums { display: flex; gap: 26px; margin-top: 50px; }
.numbox { flex: 1; background: var(--ink2); border-radius: 20px; padding: 30px 34px; }
.numbox .lab { font-size: 26px; color: #A7ABB6; }
.numbox .val { font: 700 130px/1 'Oswald', sans-serif; margin-top: 10px; }
.numbox .val small { font-size: 60px; margin-left: 10px; }
.numbox .ok { font-size: 24px; color: #A7ABB6; margin-top: 10px; min-height: 1.4em; }
.is-revealed .numbox .val { color: var(--c); }

/* aperte */
.wall { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; align-content: flex-start; overflow: hidden; max-height: 390px; }
.wall .card2 { background: #fff; color: var(--ink); border-radius: 14px; padding: 14px 20px; font-size: 25px; font-weight: 600; max-width: 600px; animation: pop .45s cubic-bezier(.2, 1.4, .4, 1) backwards; cursor: pointer; }
.wall .card2 b { margin-left: 12px; font: 700 25px/1 'Oswald', sans-serif; color: var(--ck, #6E7380); }
.wall .card2.gone { display: none; }
.bigmsg { margin-top: 70px; font: 600 54px/1.15 'Oswald', sans-serif; color: #fff; }
.bigmsg b { color: var(--c); font-size: 1.4em; }

.spiega { margin-top: auto; background: var(--c); color: var(--on); border-radius: 18px; padding: 24px 30px; font-size: 28px; line-height: 1.35; opacity: 0; transform: translateY(20px); transition: opacity .5s .9s, transform .6s .9s; }
.spiega b { font-weight: 800; }
.is-revealed .spiega.has, .is-prima.is-closed .spiega.has { opacity: 1; transform: none; }
.legend { display: none; }
.has-dist .legend { display: flex; }

/* colonna destra: QR, conteggio, classi */
.side { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.side .phonecall { display: flex; align-items: center; gap: 22px; font: 600 50px/1.02 'Oswald', sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--c); }
.side .phonecall svg { width: 92px; height: 92px; flex: none; animation: ring 2.6s ease-in-out infinite; }
@keyframes ring { 0%, 70%, 100% { transform: none; } 76% { transform: rotate(-9deg); } 82% { transform: rotate(8deg); } 88% { transform: rotate(-5deg); } 94% { transform: rotate(3deg); } }
.side .late { display: flex; align-items: center; gap: 20px; font-size: 22px; line-height: 1.3; color: #A7ABB6; }
.side .late .qrbox { padding: 12px; border-radius: 16px; box-shadow: none; flex: none; }
.side .late .qrbox svg { width: 128px; height: 128px; }
.not-open .side .phonecall, .not-open .side .late { display: none; }
.stamp { display: none; font: 700 44px/1 'Oswald', sans-serif; letter-spacing: .1em; text-transform: uppercase; border: 4px solid #fff; padding: 14px 22px; align-self: flex-start; transform: rotate(-4deg); }
.is-closed .stamp { display: block; animation: pop .4s cubic-bezier(.2, 1.6, .4, 1); }
.counter { display: flex; align-items: baseline; gap: 14px; }
.counter b { font: 700 120px/.9 'Oswald', sans-serif; transition: color .3s; }
.counter b.bump { color: var(--c); }
.counter span { font-size: 26px; color: #A7ABB6; }
.cls { display: flex; flex-direction: column; gap: 12px; }
.clrow { display: grid; grid-template-columns: 96px 1fr 92px; align-items: center; gap: 14px; }
.clrow .nm { font: 700 34px/1 'Oswald', sans-serif; display: flex; align-items: center; gap: 10px; }
.clrow .nm::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--k); flex: none; }
.clrow .tr { height: 18px; border-radius: 9px; background: #ffffff14; overflow: hidden; }
.clrow .tr i { display: block; height: 100%; width: 0; background: var(--k); border-radius: 9px; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.clrow .v { font: 600 26px/1 'Oswald', sans-serif; text-align: right; color: #C9CCD3; }
.clrow.bump .nm { animation: nudge .5s; }
@keyframes nudge { 30% { transform: translateX(8px); } }
.pts-h { font: 600 26px/1.2 'Oswald', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.pts-h small { display: block; font: 400 20px/1.3 'Public Sans', sans-serif; letter-spacing: 0; text-transform: none; color: #A7ABB6; margin-top: 6px; }
.clrow.pts .v { color: #fff; font-size: 34px; }

/* ---------- classifica ---------- */
.board .title { font-size: 92px; }
.rank { position: relative; margin-top: 50px; height: 700px; }
.rrow { position: absolute; left: 0; right: 0; height: 104px; display: grid; grid-template-columns: 90px 190px 1fr 210px; align-items: center; gap: 24px; transition: top 1s cubic-bezier(.5, 0, .2, 1); }
.rrow .pos { font: 700 70px/1 'Oswald', sans-serif; color: #6E7380; text-align: right; }
.rrow .nm { font: 700 64px/1 'Oswald', sans-serif; display: flex; align-items: center; gap: 16px; }
.rrow .nm small { font: 600 20px/1.2 'Public Sans', sans-serif; color: #A7ABB6; }
.rrow .tr { height: 70px; position: relative; }
.rrow .tr i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 0 14px 14px 0; background: var(--k); transition: width 1.4s cubic-bezier(.2, .8, .2, 1); }
.rrow .tr .dl { position: absolute; top: 50%; transform: translateY(-50%); font: 700 34px/1 'Oswald', sans-serif; color: var(--k); opacity: 0; transition: opacity .4s 1.2s, left 1.4s cubic-bezier(.2, .8, .2, 1); padding-left: 18px; white-space: nowrap; }
.rrow.go .tr .dl { opacity: 1; }
.rrow .tot { font: 700 76px/1 'Oswald', sans-serif; text-align: right; }
.rrow .crown { position: absolute; left: 230px; top: -40px; width: 60px; opacity: 0; transform: translateY(-20px) rotate(-14deg); transition: all .5s 1.6s cubic-bezier(.2, 1.6, .4, 1); }
.rrow.first .crown { opacity: 1; transform: rotate(-14deg); }
.rrow.first .pos { color: var(--yellow); }
.boardnote { position: absolute; left: 140px; right: 140px; bottom: 58px; font-size: 24px; color: #A7ABB6; }

/* ---------- percorso di oggi ---------- */
.tappe { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; margin-top: 56px; }
.tappa { background: #fff; border-radius: 22px; padding: 30px 28px 34px; border-top: 14px solid var(--k); }
.tappa b { font: 700 110px/1 'Oswald', sans-serif; color: var(--k); }
.tappa h3 { font: 600 40px/1.1 'Oswald', sans-serif; margin: 12px 0 10px; }
.tappa p { margin: 0; font-size: 26px; color: #44423D; }
.active .tappa { animation: pop .6s cubic-bezier(.2, 1.4, .4, 1) backwards; }
.active .tappa:nth-child(2) { animation-delay: .12s; } .active .tappa:nth-child(3) { animation-delay: .24s; } .active .tappa:nth-child(4) { animation-delay: .36s; }
.regole { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 36px; }
.regole div { display: flex; gap: 20px; align-items: center; background: var(--ink); color: #fff; border-radius: 18px; padding: 22px 26px; }
.regole b { font: 700 64px/1 'Oswald', sans-serif; color: var(--orange); min-width: 100px; text-align: center; }
.regole span { font-size: 24px; line-height: 1.3; }

/* ---------- tabelle su carta ---------- */
table.cmp { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 40px; font-size: 27px; line-height: 1.3; }
table.cmp th { text-align: left; font: 600 22px/1 'Oswald', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 0 22px 14px; }
table.cmp td { padding: 17px 22px; background: #fff; border-bottom: 4px solid var(--paper); }
table.cmp td:first-child { font: 600 30px/1.15 'Oswald', sans-serif; width: 24%; border-radius: 14px 0 0 14px; }
table.cmp td:last-child { border-radius: 0 14px 14px 0; }
table.cmp:not(.words):not(.dens) td:nth-child(3) { background: color-mix(in srgb, var(--c) 16%, #fff); font-weight: 600; }
table.cmp:not(.words):not(.dens) th:nth-child(3) { color: var(--ck, var(--c)); }
table.words { font-size: 26px; }
table.words td { padding: 12px 22px; }
.active table.cmp tbody tr { animation: rowin .5s backwards; }
.active table.cmp tbody tr:nth-child(2) { animation-delay: .06s; } .active table.cmp tbody tr:nth-child(3) { animation-delay: .12s; }
.active table.cmp tbody tr:nth-child(4) { animation-delay: .18s; } .active table.cmp tbody tr:nth-child(5) { animation-delay: .24s; }
.active table.cmp tbody tr:nth-child(6) { animation-delay: .3s; } .active table.cmp tbody tr:nth-child(7) { animation-delay: .36s; }
@keyframes rowin { from { opacity: 0; transform: translateX(-24px); } }
.take.sm { font-size: 40px; margin-top: 26px; }

/* ---------- ciclo integrato ---------- */
.fasi { display: flex; margin-top: 50px; }
.fase { flex: 1; min-width: 0; background: #fff; border-radius: 16px; padding: 20px 14px; text-align: center; }
.fase b { display: block; font: 600 34px/1.1 'Oswald', sans-serif; }
.fase span { display: block; font-size: 21px; color: var(--muted); margin-top: 6px; }
.fasi .arr { width: 50px; }
.fase.prima { background: var(--c); }
.fase.prima span { color: var(--on); opacity: .8; }
.ciclo .fase b { font-size: 31px; }
.ciclo .fase { display: flex; flex-direction: column; justify-content: center; }
.fase.prima svg { width: 34px; height: 34px; display: block; margin: 0 auto 6px; fill: none; stroke: var(--on); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* le parole della legge: definizioni con l'articolo sotto */
table.legge { font-size: 26px; line-height: 1.28; margin-top: 30px; }
table.legge td { padding: 13px 22px; }
table.legge td:first-child { font-size: 29px; width: 30%; }
table.legge td small { display: block; font: 400 16px/1.2 'Public Sans', sans-serif; color: var(--muted); margin-top: 4px; }
.parole .title { font-size: 64px; max-width: none; }
.parole .take.sm { font-size: 36px; margin-top: 20px; }
.active .fase { animation: pop .5s cubic-bezier(.2, 1.4, .4, 1) backwards; }
.active .fase:nth-of-type(2) { animation-delay: .1s; } .active .fase:nth-of-type(3) { animation-delay: .2s; } .active .fase:nth-of-type(4) { animation-delay: .3s; } .active .fase:nth-of-type(5) { animation-delay: .4s; }
.rami { display: block; width: 1640px; height: 70px; }
.rami path, .nuovo svg path { fill: none; stroke: var(--ink); stroke-width: 4; }
.dest { display: grid; grid-template-columns: 1fr 430px; gap: 70px; align-items: stretch; }
.dgrp, .dsolo { position: relative; border: 3px dashed color-mix(in srgb, var(--c) 70%, #fff); border-radius: 20px; padding: 14px; }
.dsolo { border-color: #9A968D; }
.dcards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dlab { position: absolute; left: 18px; top: -16px; padding: 0 10px; background: var(--paper); font: 600 20px/30px 'Oswald', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ck, var(--c)); }
.dsolo .dlab { color: var(--muted); }
.d { border-radius: 16px; padding: 18px 18px; text-align: center; }
.d b { display: block; font: 600 31px/1.1 'Oswald', sans-serif; }
.d span { display: block; font-size: 21px; margin-top: 4px; }
.d.good { background: var(--c); }
.d.mid { background: #D9D4C7; }
.d.bad { background: #3B3F4A; color: #fff; }
.pref { display: flex; align-items: center; gap: 16px; margin-top: 12px; font-size: 20px; color: var(--muted); }
.pref i { flex: 1; height: 3px; background: linear-gradient(90deg, var(--c), #3B3F4A); }
.nuovo { position: relative; }
.nuovo svg { display: block; width: 820px; height: 44px; }
.nuovo .np { width: 805px; background: var(--ink); color: #fff; border-radius: 16px; padding: 18px 24px; }
.np b { display: block; font: 600 34px/1.1 'Oswald', sans-serif; color: var(--c); }
.np span { font-size: 22px; color: #C9CCD3; }
.nuovo p { position: absolute; left: 860px; top: 70px; width: 780px; font-size: 27px; margin: 0; color: #44423D; }

/* ---------- bilancio di massa ---------- */
.mb { display: grid; grid-template-columns: 380px 1fr; gap: 60px; margin-top: 40px; align-items: start; }
.mb .in b { display: block; font: 700 170px/.9 'Oswald', sans-serif; }
.mb .in b small { font-size: 70px; margin-left: 8px; }
.mb .in > span { display: block; font-size: 24px; color: #44423D; margin-top: 16px; }
.mb .rows, .mb .grp { display: flex; flex-direction: column; gap: 10px; }
.mb .r { display: grid; grid-template-columns: 270px 1fr 90px; align-items: center; gap: 18px; height: 50px; }
.mb .r span { font-size: 26px; font-weight: 600; }
.mb .r i { display: block; height: 38px; width: 0; border-radius: 0 10px 10px 0; background: var(--c); transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.mb .grp.on .r i { width: var(--w); }
.mb .grp .r:nth-child(2) i { transition-delay: .08s; } .mb .grp .r:nth-child(3) i { transition-delay: .16s; } .mb .grp .r:nth-child(4) i { transition-delay: .24s; }
.mb .grp .r:nth-child(5) i { transition-delay: .32s; } .mb .grp .r:nth-child(6) i { transition-delay: .4s; }
.mb .r b { font: 700 36px/1 'Oswald', sans-serif; text-align: right; }
.mb .r.grey i { background: #9A968D; }
.mb .r.dark i { background: #3B3F4A; }
.banner { margin-top: 30px; background: var(--ink); color: #fff; border-radius: 18px; padding: 22px 30px; font-size: 30px; }
.banner b { color: var(--c); }

/* ---------- Caserta ---------- */
.cz { display: flex; align-items: center; gap: 90px; margin-top: 16px; }
.caserta .giant { font: 700 380px/.85 'Oswald', sans-serif; }
.caserta .giant small { font-size: 200px; }
.waffle { display: grid; grid-template-columns: repeat(10, 34px); gap: 7px; }
.waffle i { width: 34px; height: 34px; border-radius: 6px; background: color-mix(in srgb, var(--on) 16%, transparent); }
.waffle i.f { background: var(--on); transform: scale(0); }
.active .waffle i.f { animation: cell .35s forwards; animation-delay: calc(var(--i) * 20ms + .3s); }
@keyframes cell { to { transform: scale(1); } }
.caserta .sub { margin-top: 30px; max-width: 1500px; }
.caserta .title { margin-top: 30px; font-size: 84px; }
.caserta .src { color: color-mix(in srgb, var(--on) 70%, transparent); }
.caserta .richiamo { position: absolute; right: 140px; top: 150px; width: 520px; background: #ffffff26; border-radius: 20px; padding: 22px 26px; font-size: 26px; line-height: 1.35; }
.caserta .richiamo small { display: block; font: 600 20px/1.2 'Oswald', sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .8; margin-bottom: 8px; }

/* ---------- tre schede ---------- */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 52px; }
/* le 6R: piramide rovesciata, in alto la più importante; la descrizione a destra di ogni fascia */
.piramide { position: relative; display: grid; grid-template-columns: 900px 1fr; column-gap: 50px; row-gap: 8px; align-items: center; margin-top: 34px; }
.pr { height: 88px; width: calc(900px - var(--k) * 110px); margin-left: calc(var(--k) * 55px); clip-path: polygon(0 0, 100% 0, calc(100% - 55px) 100%, 55px 100%); background: color-mix(in srgb, var(--c) calc(100% - var(--k) * 15%), #fff); display: flex; align-items: center; justify-content: center; }
.pr b { font: 600 38px/1 'Oswald', sans-serif; letter-spacing: .02em; }
.prd { margin: 0; font-size: 27px; line-height: 1.3; color: #44423D; }
.prl { position: absolute; left: 0; top: 4px; bottom: 4px; width: 44px; display: flex; flex-direction: column; align-items: center; font: 600 16px/1.1 'Oswald', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: center; }
.prl i { flex: 1; width: 4px; margin: 8px 0; background: linear-gradient(var(--c), #D9D4C7); border-radius: 2px; }
.c3 { background: #fff; border-radius: 22px; padding: 32px 34px 36px; border-top: 10px solid var(--c); }
.c3 h3 { font: 600 50px/1.1 'Oswald', sans-serif; margin: 0 0 18px; }
.c3 p { margin: 0 0 12px; font-size: 30px; color: #44423D; line-height: 1.4; }
.c3 .list { font: 600 31px/1.3 'Oswald', sans-serif; color: var(--ink); }
.active .c3:not([data-step]) { animation: pop .55s cubic-bezier(.2, 1.3, .4, 1) backwards; }
.active .c3:not([data-step]):nth-child(2) { animation-delay: .15s; } .active .c3:not([data-step]):nth-child(3) { animation-delay: .3s; }
.badges { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 28px; }
.bd { border-radius: 16px; padding: 24px 30px; font: 600 38px/1.2 'Oswald', sans-serif; background: #E3DED3; }
.bd small { display: block; font: 600 20px/1.2 'Oswald', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.bd.dark { background: var(--ink); color: #fff; }
.bd.dark small { color: var(--c); }
.quote { font-size: 31px; margin: 26px 0 0; font-style: italic; color: #44423D; }

/* ---------- ECONYL: la catena ---------- */
.ec { display: grid; grid-template-columns: 700px 1fr; gap: 60px; margin-top: 44px; }
.steps4 { list-style: none; margin: 0; padding: 0; counter-reset: s; display: flex; flex-direction: column; gap: 24px; }
.steps4 li { counter-increment: s; display: grid; grid-template-columns: 64px 1fr; column-gap: 22px; }
.steps4 li::before { content: counter(s); grid-row: span 2; width: 64px; height: 64px; border-radius: 50%; background: var(--c); color: var(--on); display: grid; place-items: center; font: 700 34px/1 'Oswald', sans-serif; }
.steps4 b { font: 600 38px/1.1 'Oswald', sans-serif; }
.steps4 span { font-size: 27px; color: #44423D; }
.econyl .steps4 { gap: 38px; }
.econyl .chainbox { height: 600px; }
.active .steps4 li { animation: rowin .5s backwards; }
.active .steps4 li:nth-child(2) { animation-delay: .12s; } .active .steps4 li:nth-child(3) { animation-delay: .24s; } .active .steps4 li:nth-child(4) { animation-delay: .36s; }
.chainbox { position: relative; background: var(--ink); border-radius: 22px; height: 520px; overflow: hidden; }
.chainbox svg { position: absolute; left: 0; bottom: 20px; width: 100%; height: 400px; }
.chainbox .lab { position: absolute; left: 34px; top: 30px; font: 600 34px/1.2 'Oswald', sans-serif; color: #fff; opacity: 0; }
.active .chainbox .lab { animation: 12s linear infinite; }
.active .chainbox .l1 { animation-name: l1; } .active .chainbox .l2 { animation-name: l2; } .active .chainbox .l3 { animation-name: l3; } .active .chainbox .l4 { animation-name: l4; }
@keyframes l1 { 0%, 18% { opacity: 1; } 21%, 100% { opacity: 0; } }
@keyframes l2 { 0%, 19% { opacity: 0; } 22%, 43% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes l3 { 0%, 44% { opacity: 0; } 47%, 70% { opacity: 1; } 73%, 100% { opacity: 0; } }
@keyframes l4 { 0%, 71% { opacity: 0; } 74%, 100% { opacity: 1; } }
.chainbox .link { stroke: #FF5F1F; stroke-width: 7; }
.chainbox .bead { fill: #FF5F1F; }
.chainbox .dirt { fill: #8A8F9C; }
.chainbox .d2 { fill: #5E8C4A; }
.active .chainbox .link { animation: link 12s infinite; }
.active .chainbox .bead { animation: bead 12s ease-in-out infinite; }
.active .chainbox .dirt { animation: dirt 12s ease-in infinite; }
@keyframes link { 0%, 42% { opacity: 1; stroke: #FF5F1F; } 47%, 72% { opacity: 0; } 80%, 100% { opacity: 1; stroke: #2B5BFF; } }
@keyframes bead { 0%, 44% { transform: translate(0, 0); fill: #FF5F1F; } 54%, 66% { transform: translate(var(--dx), var(--dy)); fill: #FFC233; } 78%, 100% { transform: translate(0, 0); fill: #2B5BFF; } }
@keyframes dirt { 0%, 20% { transform: translateY(0); opacity: 1; } 34%, 100% { transform: translateY(180px); opacity: 0; } }

/* ---------- vasca ---------- */
.vs { display: grid; grid-template-columns: 820px 1fr; gap: 60px; margin-top: 26px; align-items: start; }
.tank { width: 820px; height: 540px; overflow: visible; }
.tank .fl { transform-box: fill-box; transform-origin: center; opacity: 0; }
.tank .sink { fill: #E8F4FF; stroke: #12141A; stroke-width: 2; }
.tank .float { fill: #FF5F1F; }
.tank .float.b { fill: #2B5BFF; }
.active .tank .sink { animation: sink 7s ease-in infinite; }
.active .tank .float { animation: float 7s ease-in-out infinite; }
@keyframes sink {
  0% { opacity: 0; transform: translateY(0) rotate(var(--r)); }
  6% { opacity: 1; }
  22% { transform: translateY(110px) rotate(var(--r)); }
  55%, 90% { opacity: 1; transform: translateY(var(--y)) rotate(calc(var(--r) + 40deg)); }
  100% { opacity: 0; transform: translateY(var(--y)) rotate(calc(var(--r) + 40deg)); }
}
@keyframes float {
  0% { opacity: 0; transform: translateY(0) rotate(var(--r)); }
  6% { opacity: 1; }
  22% { transform: translateY(110px) rotate(var(--r)); }
  32% { transform: translateY(175px) rotate(var(--r)); }
  50%, 90% { opacity: 1; transform: translateY(100px) rotate(calc(var(--r) - 20deg)); }
  100% { opacity: 0; transform: translateY(100px) rotate(calc(var(--r) - 20deg)); }
}
.tank text.t { font: 600 36px 'Oswald', sans-serif; fill: var(--ink); }
.tank text.s { font: 400 24px 'Public Sans', sans-serif; fill: #44423D; }
.tank text.w { font: 600 28px 'Oswald', sans-serif; fill: #ffffffb0; }
table.dens { margin-top: 0; }
table.dens td { padding: 12px 20px; }
table.dens td:first-child { width: 30%; }
table.dens tr.water td { background: #CFE7F2; }
.note2 { font-size: 20px; color: var(--muted); margin: 8px 0 0; }
.trap { margin-top: 26px; background: var(--ink); color: #fff; border-radius: 16px; padding: 22px 26px; font-size: 26px; }
.trap b { color: var(--c); }

/* ---------- NIR ---------- */
.nir { position: relative; height: 400px; margin-top: 34px; background: #2A2E3A; border-radius: 22px; overflow: hidden; }
.nir .belt, .edbox .belt, .sqp .belt { position: absolute; height: 14px; background: repeating-linear-gradient(90deg, #6E7380 0 30px, #555B68 30px 60px); }
.active .nir .belt, .active .edbox .belt, .active .sqp .belt { animation: beltmove .8s linear infinite; }
@keyframes beltmove { to { background-position: 60px 0; } }
.nir .belt { left: 40px; top: 290px; width: 1120px; }
.nir .sensor { position: absolute; left: 510px; top: 30px; width: 150px; height: 56px; background: #12141A; color: #fff; display: grid; place-items: center; font: 600 20px 'Oswald', sans-serif; letter-spacing: .06em; border-radius: 10px; }
.nir .beam { position: absolute; left: 515px; top: 86px; width: 140px; height: 204px; clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); background: linear-gradient(#FF5F1Fcc, #FF5F1F22); opacity: .2; }
.nir .tray { position: absolute; left: -150px; top: 246px; width: 130px; height: 44px; clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); }
.nir .tray.clear { background: #ffffffe0; }
.nir .tray.black { background: #050608; opacity: 0; }
.nir .nozzle { position: absolute; left: 860px; top: 304px; width: 60px; height: 36px; background: #6E7380; border-radius: 0 0 8px 8px; }
.nir .puff { position: absolute; left: 862px; top: 170px; width: 56px; height: 120px; background: repeating-linear-gradient(90deg, #ffffffaa 0 4px, transparent 4px 14px); opacity: 0; transform-origin: bottom; }
.nir .bin { position: absolute; left: 1250px; width: 340px; height: 160px; border: 4px dashed #ffffff55; border-radius: 16px; color: #fff; display: grid; place-items: center; font: 700 44px 'Oswald', sans-serif; }
.nir .bin.pp { top: 26px; border-color: var(--c); color: var(--c); }
.nir .bin.sc { top: 214px; }
.nir .tag { position: absolute; left: 690px; top: 38px; font: 600 30px 'Oswald', sans-serif; opacity: 0; }
.nir .t1 { color: var(--c); }
.nir .t2 { color: #A7ABB6; }
.active .nir .tray.clear { animation: trayA 8s linear infinite; }
.active .nir .tray.black { animation: trayB 8s linear infinite; }
.active .nir .beam { animation: beam 8s linear infinite; }
.active .nir .t1 { animation: t1 8s linear infinite; }
.active .nir .t2 { animation: t2 8s linear infinite; }
.active .nir .puff { animation: puff 8s linear infinite; }
@keyframes trayA { 0% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(1000px); } 62% { transform: translate(1490px, -168px) rotate(-18deg); opacity: 1; } 66%, 100% { transform: translate(1490px, -168px) rotate(-18deg); opacity: 0; } }
@keyframes trayB { 0%, 29% { transform: translateX(0); opacity: 0; } 30% { opacity: 1; } 80% { transform: translateX(1310px); } 88% { transform: translate(1450px, 40px) rotate(14deg); opacity: 1; } 92%, 100% { transform: translate(1450px, 40px) rotate(14deg); opacity: 0; } }
@keyframes beam { 0%, 28% { opacity: .2; } 31%, 39% { opacity: 1; } 42%, 100% { opacity: .2; } }
@keyframes t1 { 0%, 29% { opacity: 0; } 31%, 42% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes t2 { 0%, 52% { opacity: 0; } 54%, 63% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes puff { 0%, 47% { opacity: 0; transform: scaleY(.3); } 50% { opacity: 1; transform: scaleY(1); } 55%, 100% { opacity: 0; transform: scaleY(1); } }
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 30px; }
.cols3 h3 { font: 600 36px/1.1 'Oswald', sans-serif; margin: 0 0 8px; }
.cols3 h3.hl { color: var(--ck, var(--c)); }
.cols3 p { margin: 0; font-size: 25px; color: #44423D; }

/* ---------- schiacciare la bottiglia ---------- */
.sq { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 30px; }
.sqp { position: relative; height: 400px; background: #2A2E3A; border-radius: 22px; overflow: hidden; }
.sqp .belt { left: 30px; right: 30px; top: 330px; }
.sqp .sensor { position: absolute; left: 320px; top: 26px; width: 150px; height: 56px; background: #12141A; color: #fff; display: grid; place-items: center; font: 600 20px 'Oswald', sans-serif; letter-spacing: .06em; border-radius: 10px; }
.sqp .beam { position: absolute; left: 325px; top: 82px; width: 140px; height: 248px; clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); background: linear-gradient(#FF5F1Fcc, #FF5F1F22); opacity: .2; }
.sqp .tag { position: absolute; left: 490px; top: 38px; font: 600 30px 'Oswald', sans-serif; opacity: 0; }
.sqp.ok .tag { color: var(--c); }
.sqp.ko .tag { color: #A7ABB6; }
.sqp .bt { position: absolute; transform-origin: 50% 100%; opacity: 0; }
.sqp .bt.hor { left: 40px; top: 230px; width: 300px; height: 100px; }
.sqp .bt.ver { left: 60px; top: 30px; width: 100px; height: 300px; }
.sqp .folds { opacity: 0; }
.active .sqp .bt.hor { animation: sqHor 7s ease-in-out infinite; }
.active .sqp .bt.ver { animation: sqVer 7s ease-in-out infinite; }
.active .sqp .folds { animation: sqFold 7s linear infinite; }
.active .sqp.ok .beam { animation: sqBeamOk 7s linear infinite; }
.active .sqp.ko .beam { animation: sqBeamKo 7s linear infinite; }
.active .sqp .tag { animation: sqTag 7s linear infinite; }
@keyframes sqHor {
  0% { opacity: 0; transform: translate(0, 0) scale(1, 1); }
  4%, 12% { opacity: 1; transform: translate(0, 0) scale(1, 1); }
  26% { transform: translate(0, 0) scale(1, .42); }
  50%, 72% { transform: translate(205px, 0) scale(1, .42); }
  90% { opacity: 1; transform: translate(560px, 0) scale(1, .42); }
  93%, 100% { opacity: 0; transform: translate(560px, 0) scale(1, .42); }
}
@keyframes sqVer {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(1, 1); }
  4%, 12% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1, 1); }
  26% { transform: translate(0, 0) rotate(0deg) scale(1.3, .38); }
  36% { transform: translate(95px, 0) rotate(-9deg) scale(1.3, .38); }
  44% { transform: translate(190px, 0) rotate(7deg) scale(1.3, .38); }
  52% { transform: translate(285px, 0) rotate(-6deg) scale(1.3, .38); }
  72% { transform: translate(285px, 0) rotate(4deg) scale(1.3, .38); }
  84% { opacity: 1; transform: translate(420px, 40px) rotate(40deg) scale(1.3, .38); }
  90%, 100% { opacity: 0; transform: translate(480px, 120px) rotate(80deg) scale(1.3, .38); }
}
@keyframes sqFold { 0%, 16% { opacity: 0; } 26%, 100% { opacity: 1; } }
@keyframes sqBeamOk { 0%, 48% { opacity: .2; } 52%, 70% { opacity: 1; } 74%, 100% { opacity: .2; } }
@keyframes sqBeamKo { 0%, 50% { opacity: .2; } 54% { opacity: .7; } 58% { opacity: .25; } 62% { opacity: .7; } 66%, 100% { opacity: .2; } }
@keyframes sqTag { 0%, 52% { opacity: 0; } 56%, 72% { opacity: 1; } 76%, 100% { opacity: 0; } }
.sqt { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 24px; }
.sqt h3 { font: 600 36px/1.1 'Oswald', sans-serif; margin: 0 0 8px; }
.sqt h3.hl { color: var(--ck, var(--c)); }
.sqt p { margin: 0; font-size: 25px; color: #44423D; }

/* ---------- correnti indotte ---------- */
.ed { display: grid; grid-template-columns: 980px 1fr; gap: 60px; margin-top: 34px; }
.edbox { position: relative; height: 560px; background: #2A2E3A; border-radius: 22px; overflow: hidden; }
.edbox .cap { position: absolute; left: 30px; top: 26px; right: 30px; color: #fff; font: 600 30px/1.25 'Oswald', sans-serif; }
.edbox .belt { left: 0; top: 330px; width: 600px; }
.edbox .rotor { position: absolute; left: 560px; top: 297px; width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(#FFC233 0 25%, #12141A 0 50%, #FFC233 0 75%, #12141A 0); border: 4px solid #C9CCD3; }
.active .edbox .rotor { animation: rot .45s linear infinite; }
.edbox .divider { position: absolute; left: 790px; top: 400px; width: 8px; height: 160px; background: #C9CCD3; }
.edbox .bin { position: absolute; top: 470px; height: 90px; border: 4px solid #C9CCD3; border-top: 0; color: #fff; font: 600 24px 'Oswald', sans-serif; display: grid; place-items: center; }
.edbox .bin.near { left: 600px; width: 186px; }
.edbox .bin.far { left: 800px; width: 170px; color: var(--c); border-color: var(--c); }
.edbox .rlab { position: absolute; left: 470px; top: 388px; font-size: 18px; color: #A7ABB6; }
.edbox .item { position: absolute; left: -90px; }
.edbox .plastic { top: 290px; width: 70px; height: 40px; border-radius: 12px; background: #6FA8FF; }
.edbox .glass { top: 286px; width: 48px; height: 44px; border-radius: 8px; background: #4CAF7AAA; border: 3px solid #A5E6C1; }
.edbox .can { top: 270px; width: 44px; height: 60px; border-radius: 6px; background: linear-gradient(90deg, #AEB4BE, #F1F3F5, #AEB4BE); border-top: 12px solid #FF5F1F; }
.active .edbox .plastic { animation: ditem 9s linear infinite; }
.active .edbox .glass { animation: ditem 9s linear infinite; animation-delay: -6s; }
.active .edbox .can { animation: canjump 9s linear infinite; animation-delay: -3s; }
@keyframes ditem { 0% { transform: translateX(0); opacity: 1; } 60% { transform: translateX(660px); } 68% { transform: translate(700px, 40px) rotate(30deg); } 78% { transform: translate(720px, 190px) rotate(60deg); opacity: 1; } 82%, 100% { transform: translate(720px, 190px) rotate(60deg); opacity: 0; } }
@keyframes canjump { 0% { transform: translateX(0); opacity: 1; } 60% { transform: translateX(660px); } 70% { transform: translate(820px, -150px) rotate(-120deg); } 80% { transform: translate(930px, 190px) rotate(-260deg); opacity: 1; } 84%, 100% { transform: translate(930px, 190px) rotate(-260deg); opacity: 0; } }
.giant5 { font: 700 260px/.9 'Oswald', sans-serif; color: var(--ck, var(--c)); }
.giant5 small { font-size: 140px; }
.edtext .big { font: 600 36px/1.2 'Oswald', sans-serif; margin: 20px 0 18px; }
.edtext p { font-size: 25px; color: #44423D; margin: 0; }

/* ---------- cartone ---------- */
.ct { display: grid; grid-template-columns: 560px 1fr; gap: 70px; margin-top: 40px; }
.stack { display: flex; flex-direction: column; height: 580px; width: 170px; }
.seg { position: relative; transform-origin: bottom; }
.active .seg { animation: growy .7s cubic-bezier(.2, .8, .2, 1) backwards; }
.active .seg.pe { animation-delay: .15s; } .active .seg.al { animation-delay: .3s; }
@keyframes growy { from { transform: scaleY(0); } }
.seg.carta { flex: 75; background: #C8A97E; border-radius: 16px 16px 0 0; }
.seg.pe { flex: 20; background: #DCE9F5; }
.seg.al { flex: 5; background: #AEB4BE; border-radius: 0 0 16px 16px; }
.seg b, .seg span { position: absolute; left: 200px; width: 360px; }
.seg b { font: 600 40px/1 'Oswald', sans-serif; top: 50%; transform: translateY(-120%); }
.seg span { font-size: 24px; color: #44423D; top: 50%; }
.seg.pe b { top: 4px; transform: none; } .seg.pe span { top: 48px; }
.seg.al b { top: 2px; transform: none; } .seg.al span { top: 46px; }
.steps4.s3 { gap: 30px; }
.limit { margin-top: 34px; background: var(--ink); color: #fff; border-radius: 16px; padding: 22px 26px; font-size: 26px; }
.limit small { display: block; font: 600 20px 'Oswald', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--c); margin-bottom: 6px; }

/* ---------- chiusura ---------- */
.recap { padding-top: 160px; }
.recap .mega { font-size: 156px; }
.recap .sub { max-width: 1400px; font-size: 36px; }
.final .winner { position: absolute; right: 140px; top: 104px; text-align: right; font: 700 72px/1 'Oswald', sans-serif; opacity: 0; transform: scale(.6); transition: all .6s cubic-bezier(.2, 1.6, .4, 1); }
.final .winner small { display: block; font: 600 24px/1 'Oswald', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--c); margin-bottom: 10px; }
.final .winner.on { opacity: 1; transform: none; }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.confetti i { position: absolute; top: -40px; width: 14px; height: 22px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(1180px) rotate(900deg); } }

/* ---------- comandi a scomparsa ---------- */
#ctl { position: fixed; right: 18px; bottom: 18px; display: flex; gap: 8px; z-index: 20; opacity: 0; transition: opacity .3s; }
body:not(.idle) #ctl { opacity: 1; }
#ctl button { font: 600 15px/1 'Public Sans', sans-serif; padding: 10px 14px; border-radius: 10px; border: 1px solid #ffffff30; background: #12141Acc; color: #fff; cursor: pointer; }
#help { position: fixed; inset: 0; background: #000c; color: #fff; z-index: 30; display: none; place-items: center; font: 400 18px/1.6 'Public Sans', sans-serif; }
#help.on { display: grid; }
#help .box { background: var(--ink); border: 1px solid #ffffff22; border-radius: 16px; padding: 30px 36px; max-width: 640px; }
#help h3 { font: 600 26px/1 'Oswald', sans-serif; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 16px; color: var(--orange); }
#help kbd { display: inline-block; min-width: 26px; text-align: center; border: 1px solid #ffffff40; border-radius: 6px; padding: 0 6px; margin-right: 6px; font-family: inherit; }
#help .warn { color: var(--yellow); }
#help button { margin-top: 16px; margin-right: 8px; font: 600 15px/1 'Public Sans', sans-serif; padding: 10px 14px; border-radius: 10px; border: 1px solid #ffffff40; background: transparent; color: #fff; cursor: pointer; }
#help button.danger { border-color: #ff5f1f; color: #ff5f1f; }
#toast { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); background: #C62828; color: #fff; font: 600 16px/1 'Public Sans', sans-serif; padding: 10px 16px; border-radius: 10px; z-index: 40; display: none; }

/* simulazioni passo per passo (viaggio del sacco, vita della bottiglia): una tappa per Avanti, il pallino la segue */
.sim-row { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 14px; margin-top: 46px; }
.sim-st { background: #fff; border-radius: 16px; padding: 20px 12px 22px; text-align: center; border-top: 8px solid var(--c); min-height: 330px; }
.sim-st .nn { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%; background: var(--c); color: var(--on); font: 600 24px/1 'Oswald', sans-serif; font-style: normal; }
.sim-st b { display: block; font: 600 28px/1.08 'Oswald', sans-serif; }
.sim-st span { display: block; font-size: 20px; line-height: 1.3; color: var(--muted); margin-top: 10px; }
.sim-st.prima { background: var(--c); }
.sim-st.prima .nn { background: var(--ink); color: #fff; }
.sim-st.prima span { color: var(--on); opacity: .8; }
.sim-track { position: relative; height: 40px; margin-top: 16px; }
.sim-track::before { content: ''; position: absolute; left: var(--a, 4%); right: var(--b, 4%); top: 50%; height: 4px; margin-top: -2px; background: #D9D4C7; border-radius: 2px; }
.sim-dot { position: absolute; top: 50%; left: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 8px color-mix(in srgb, var(--c) 22%, transparent); transition: left .8s cubic-bezier(.4, 0, .2, 1); }
.sim .take.sm { margin-top: 18px; }
.strade-box { margin-top: 70px; }
.strade .d { padding: 40px 20px; }
.strade .d b { font-size: 46px; }
.strade .d span { font-size: 26px; margin-top: 8px; }
.strade .dlab { font-size: 24px; top: -18px; }
.strade .pref { margin-top: 18px; font-size: 22px; }
.strade .nuovo svg { height: 70px; }
.strade .nuovo .np { padding: 26px 30px; }
.strade .np b { font-size: 44px; }
.strade .np span { font-size: 26px; }

/* icone delle simulazioni */
.sim-st svg.ic { width: 84px; height: 84px; display: block; margin: 0 auto 12px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sim-st svg.ic .c { stroke: var(--c); }
.sim-st.prima svg.ic .c { stroke: var(--ink); }
/* il viaggio del sacco: tappe illustrate, poi le strade */
.sacco .sim-row { margin-top: 34px; }
.sacco .sim-st { min-height: 0; padding: 18px 12px 20px; }
.sacco .sim-track { margin-top: 10px; }
.vie .rami2 { display: block; width: 1640px; height: 48px; }
.vie .rami2 path { fill: none; stroke: var(--ink); stroke-width: 4; }
.vie .dest { margin-top: 18px; }
/* che significa selezionare: la linea, con il nastro che scorre */
.linea { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 120px; }
.ls { text-align: center; padding-top: 0; }
.ls .lsi { width: 150px; height: 130px; display: block; margin: 0 auto; fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.ls .lsi .c { stroke: var(--c); }
.ls b { display: block; font: 600 27px/1.1 'Oswald', sans-serif; margin-top: 64px; }
.ls span { display: block; font-size: 20px; line-height: 1.3; color: var(--muted); margin-top: 6px; }
.nastro { position: absolute; left: 0; right: 0; top: 150px; height: 26px; border-radius: 13px; background: repeating-linear-gradient(90deg, #3B3F4A 0 28px, #2A2E3A 28px 56px); background-size: 56px 26px; animation: belt 1.2s linear infinite; }
@keyframes belt { to { background-position: 56px 0; } }
.nastro .it { position: absolute; top: -16px; width: 26px; height: 16px; border-radius: 5px; animation: ride 14s linear infinite; }
.nastro .a { background: #BFE6FF; } .nastro .b { background: var(--c); animation-delay: -2.3s; } .nastro .c { background: #D5DAE1; animation-delay: -4.7s; width: 34px; }
.nastro .d { background: #FFC233; animation-delay: -7s; } .nastro .e { background: #9FE0BC; animation-delay: -9.4s; width: 20px; } .nastro .f { background: #FF8A65; animation-delay: -11.6s; }
@keyframes ride { from { left: 0; } to { left: calc(100% - 30px); } }
.sel .take.sm { margin-top: 90px; }
/* vita della bottiglia: sei fasi illustrate e il riquadro «da vicino» */
.vita2 .sim-row { margin-top: 0; }
.vita2 .sim-st { min-height: 0; padding: 16px 10px 18px; }
.vita2 .sim-st b { font-size: 29px; }
.vita2 .sim-track { margin-top: 8px; }
.zoom { position: relative; height: 196px; margin-top: 6px; }
.zp { position: absolute; inset: 0; display: grid; grid-template-columns: 300px 1fr; align-items: center; gap: 26px; background: #fff; border-radius: 18px; border-left: 10px solid var(--c); padding: 18px 28px; opacity: 0; transform: translateY(14px); transition: opacity .45s, transform .5s; }
.zp.cur { opacity: 1; transform: none; }
.zp h4 { margin: 0; font: 600 18px/1.2 'Oswald', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ck, var(--c)); }
.zp h4 b { display: block; font-size: 34px; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 4px 0 2px; }
.zp h4 small { display: block; font: 400 20px/1.2 'Public Sans', sans-serif; letter-spacing: 0; text-transform: none; color: var(--muted); }
.zi { display: flex; gap: 22px; }
.zi > div { flex: 1; display: flex; align-items: center; gap: 14px; font-size: 22px; line-height: 1.25; }
.zi .zic { width: 64px; height: 64px; flex: none; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.zi .zic .c { stroke: var(--c); }
.vita2 .take.sm { margin-top: 18px; }

/* che significa selezionare: arrivo, nastro con le macchine, pressa e balle */
.giro { position: relative; display: grid; grid-template-columns: 230px repeat(6, 1fr) 290px; gap: 8px; margin-top: 110px; }
.gs { text-align: center; position: relative; z-index: 1; }
.gs svg { display: block; width: 100%; height: 150px; fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.gs svg .c { stroke: var(--c); }
.gs svg text { font: 600 17px 'Oswald', sans-serif; fill: var(--ink); stroke: none; text-anchor: middle; }
.gs b { display: block; margin-top: 52px; font: 600 26px/1.1 'Oswald', sans-serif; }
.gs span { display: block; font-size: 19px; color: var(--muted); margin-top: 4px; }
.giro .nastro { left: 160px; right: 190px; top: 156px; z-index: 0; }
.sel2 .take.sm { margin-top: 70px; }

/* che significa selezionare, semplice: sacco mescolato -> riconoscimento -> una balla per materiale */
.selx { display: grid; grid-template-columns: 380px 300px 1fr; gap: 36px; align-items: center; margin-top: 40px; }
.selx svg { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.selx svg .c { stroke: var(--c); }
.sx-sacco { width: 380px; height: 330px; display: block; }
.sx-cap { margin: 12px 0 0; text-align: center; font: 600 28px/1.15 'Oswald', sans-serif; }
.sx-mid { text-align: center; }
.sx-ics { display: flex; justify-content: center; gap: 16px; }
.sx-ics svg { width: 72px; height: 72px; }
.sx-freccia { width: 260px; height: 40px; display: block; margin: 18px auto 0; }
.sx-out h4 { margin: 0 0 16px; font: 600 22px/1 'Oswald', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ck, var(--c)); }
.sx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 22px; }
.sx-b { text-align: center; }
.sx-b .box { position: relative; height: 116px; border-radius: 14px; background: #fff; border: 3px solid var(--ink); display: grid; place-items: center; }
.sx-b .box::before, .sx-b .box::after { content: ''; position: absolute; top: -3px; bottom: -3px; width: 6px; background: var(--c); }
.sx-b .box::before { left: 22%; } .sx-b .box::after { right: 22%; }
.sx-b .box svg { width: 84px; height: 84px; position: relative; z-index: 1; }
.sx-b.scarti .box { border-style: dashed; border-color: #9A968D; background: transparent; }
.sx-b.scarti .box::before, .sx-b.scarti .box::after { display: none; }
.sx-b span { display: block; margin-top: 8px; font: 600 24px/1.15 'Oswald', sans-serif; }
.sx-b.scarti span { color: var(--muted); }
.sx-out.on .sx-b { animation: pop .5s cubic-bezier(.2, 1.4, .4, 1) backwards; animation-delay: calc(var(--i) * .1s); }
.sel3 .take.sm { margin-top: 40px; }

/* balle disegnate */
.sx-b .box { height: auto; border: 0; background: none; display: block; }
.sx-b .box::before, .sx-b .box::after { display: none; }
.sx-b .box svg { width: 100%; height: 150px; display: block; }
.sx-b .box svg .reggia { stroke: #3B3F4A; stroke-width: 3.5; }
.sx-b.scarti .box { border: 0; }

/* ---------- prima della lezione: il progetto ---------- */
.md-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 60px; }
.md { position: relative; background: var(--m); color: var(--mo); border-radius: 22px; padding: 28px 26px 30px; min-height: 560px; }
.md-top { display: flex; justify-content: space-between; align-items: flex-start; }
.md .mn { font: 700 120px/.9 'Oswald', sans-serif; }
.md svg { width: 76px; height: 76px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.md small { display: block; margin-top: 34px; font: 600 20px/1 'Oswald', sans-serif; letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
.md h3 { font: 600 44px/1.05 'Oswald', sans-serif; margin: 10px 0 14px; }
.md p { margin: 0; font-size: 26px; line-height: 1.3; }
.md .oggi { position: absolute; left: 26px; bottom: 28px; font: 600 24px/1 'Oswald', sans-serif; font-style: normal; letter-spacing: .14em; text-transform: uppercase; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; }
.ar-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 50px; }
.ar { background: #fff; border-radius: 18px; border-top: 10px solid var(--c); padding: 24px 22px 26px; min-height: 470px; }
.ar h3 { font: 600 40px/1.05 'Oswald', sans-serif; margin: 0; }
.ar small { display: block; font-size: 20px; color: var(--muted); margin-top: 6px; min-height: 52px; }
.ar-m { margin-top: 18px; }
.ar span { display: block; font: 600 18px/1 'Oswald', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ar-m b { display: block; font: 600 28px/1.15 'Oswald', sans-serif; }
.ar p { margin: 22px 0 0; font-size: 23px; line-height: 1.3; color: #44423D; }
.ch-flow { display: flex; align-items: center; gap: 12px; margin-top: 34px; }
.ch-flow span { flex: 1; text-align: center; background: var(--ink); color: #fff; border-radius: 14px; padding: 16px 10px; font: 600 25px/1.15 'Oswald', sans-serif; }
.ch-flow i { flex: none; width: 0; height: 0; border-left: 16px solid var(--ink); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }

/* ---------- curiosità 1: i falsi amici ---------- */
.fa-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 44px; }
.fa { background: #fff; border-radius: 18px; border-top: 10px solid var(--c); padding: 22px 18px 24px; text-align: center; min-height: 540px; }
.fa .fic { width: 136px; height: 136px; display: block; margin: 0 auto 12px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fa .fic .c { stroke: var(--ck, var(--c)); }
.fa b { display: block; font: 600 31px/1.08 'Oswald', sans-serif; min-height: 68px; }
.fa .dv { margin-top: 14px; }
.fa .dv s { display: block; font: 600 24px/1.1 'Oswald', sans-serif; color: #A19D93; text-decoration-thickness: 3px; }
.fa .dv em { display: inline-block; margin-top: 10px; padding: 9px 18px; border-radius: 14px; background: var(--ink); color: #fff; font: 600 25px/1.15 'Oswald', sans-serif; font-style: normal; }
.fa .dv em.ok { background: var(--c); color: var(--on); }
.fa span { display: block; margin-top: 16px; font-size: 21px; line-height: 1.3; color: #44423D; }

/* ---------- curiosità 2: vetro o plastica ---------- */
.vp-box { display: grid; grid-template-columns: 640px 1fr; gap: 70px; margin-top: 30px; align-items: start; }
.altalena { width: 560px; height: 540px; display: block; fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.altalena text { stroke: none; fill: var(--ink); text-anchor: middle; }
.altalena text.m { font: 600 24px 'Oswald', sans-serif; fill: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.altalena text.p { font: 700 38px 'Oswald', sans-serif; }
.vp-sx p { margin: 6px 0 0; font-size: 26px; color: #44423D; }
.vp-col h4, .vp-mare h4, .ps-box h4 { margin: 0 0 16px; font: 600 24px/1.1 'Oswald', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ck, var(--c)); }
.vp-col ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vp-col li { display: flex; align-items: center; gap: 18px; background: #fff; border-radius: 14px; padding: 14px 20px; font: 600 32px/1.1 'Oswald', sans-serif; }
.vp-col li i { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: var(--on); font-style: normal; font-size: 26px; }
.vp-col li small { margin-left: auto; font: 400 21px 'Public Sans', sans-serif; color: var(--muted); }
.vp-col li.peggio { background: var(--ink); color: #fff; }
.vp-col .nota { margin: 10px 0 0; font-size: 20px; color: var(--muted); }
.vp-mare { margin-top: 30px; background: var(--ink); color: #fff; border-radius: 16px; padding: 22px 26px; }
.vp-mare h4 { color: var(--c); }
.vp-mare p { margin: 0; font-size: 26px; line-height: 1.35; }
.vp .take.sm { margin-top: 18px; }

/* ---------- curiosità 3: quando non si ricicla ---------- */
.ps-box { display: grid; grid-template-columns: 760px 1fr; gap: 70px; margin-top: 44px; }
.ps-f { display: flex; align-items: center; gap: 24px; background: #fff; border-radius: 16px; padding: 14px 22px; margin-bottom: 14px; }
.ps-f svg { flex: none; width: 110px; height: 110px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ps-f svg .c { stroke: var(--ck, var(--c)); }
.ps-f b { display: block; font: 600 34px/1.1 'Oswald', sans-serif; }
.ps-f span { display: block; font-size: 24px; color: #44423D; margin-top: 4px; }
.ps-dx .bar { margin-top: 26px; }
.ps-dx .bar span { display: block; font: 600 26px/1.1 'Oswald', sans-serif; margin-bottom: 8px; }
.ps-dx .bar .tr { display: inline-block; vertical-align: middle; width: calc(100% - 120px); height: 54px; }
.ps-dx .bar .tr i { display: block; height: 100%; width: 0; background: var(--ink); border-radius: 8px; transition: width 1.2s cubic-bezier(.3, .8, .2, 1) .2s; }
.ps-dx .bar.r .tr i { background: var(--c); min-width: 8px; }
.ps-dx.on .bar .tr i { width: var(--w); }
.ps-dx .bar b { display: inline-block; vertical-align: middle; width: 110px; text-align: right; font: 700 54px/1 'Oswald', sans-serif; }
.ps-dx .big { margin: 30px 0 0; font: 600 44px/1.1 'Oswald', sans-serif; }
.ps-dx .big em { font-style: normal; color: var(--ck, var(--c)); }

/* ---------- curiosità 4: prima era, ora è ---------- */
.pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; margin-top: 36px; }
.pd { display: grid; grid-template-columns: 1fr 70px 1fr; align-items: center; gap: 10px; background: #fff; border-radius: 18px; padding: 20px 26px 22px; border-left: 10px solid var(--c); }
.pd-o { text-align: center; }
.pd-o svg { width: 118px; height: 118px; display: block; margin: 0 auto 6px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pd-o svg .c { stroke: var(--ck, var(--c)); }
.pd-o b { display: block; font: 600 30px/1.1 'Oswald', sans-serif; }
.pd-fr { width: 70px; height: 40px; fill: none; stroke: var(--ck, var(--c)); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.pd p { grid-column: 1 / -1; margin: 8px 0 0; text-align: center; font-size: 22px; color: #44423D; }
.dopo .take.sm { margin-top: 24px; }

/* ---------- chiusura: i prossimi appuntamenti ---------- */
.ap-list { display: grid; gap: 16px; margin-top: 44px; }
.ap { display: grid; grid-template-columns: 220px 1fr; gap: 30px; align-items: center; background: #fff; border-radius: 18px; padding: 18px 26px; }
.ap-d { text-align: center; border-right: 3px solid var(--line); padding-right: 26px; }
.ap-d b { display: block; font: 700 56px/1 'Oswald', sans-serif; color: #B9B4A8; }
.ap-d span { display: block; font-size: 18px; color: var(--muted); margin-top: 6px; }
.ap-t small { display: block; font: 600 20px/1 'Oswald', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ap-t h3 { font: 600 40px/1.1 'Oswald', sans-serif; margin: 6px 0 4px; }
.ap-t p { margin: 0; font-size: 23px; color: #44423D; }
.ap.next { background: var(--c); color: var(--on); }
.ap.next .ap-d { border-color: color-mix(in srgb, var(--on) 30%, transparent); }
.ap.next .ap-d b, .ap.next .ap-d span, .ap.next small, .ap.next p { color: var(--on); }

/* curiosità 4: lo stesso giro per tutti i materiali */
.pd-giro { display: flex; align-items: center; gap: 10px; margin-top: 30px; }
.pd-giro b { font: 600 22px/1 'Oswald', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ck, var(--c)); margin-right: 10px; }
.pd-giro span { background: var(--ink); color: #fff; border-radius: 12px; padding: 10px 18px; font: 600 24px/1.1 'Oswald', sans-serif; }
.pd-giro i { flex: none; width: 0; height: 0; border-left: 14px solid var(--ck, var(--c)); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.dopo .pd-grid { grid-template-columns: repeat(3, 1fr); gap: 18px 20px; margin-top: 26px; }
.dopo .pd { position: relative; grid-template-columns: 1fr 50px 1fr; gap: 6px; padding: 44px 16px 16px; border-left: 0; border-top: 8px solid var(--c); }
.dopo .pd .mat { position: absolute; left: 14px; top: 12px; font: 600 18px/1 'Oswald', sans-serif; font-style: normal; letter-spacing: .12em; text-transform: uppercase; background: var(--c); color: var(--on); padding: 6px 10px; border-radius: 8px; }
.dopo .pd-o svg { width: 96px; height: 96px; }
.dopo .pd-o b { font-size: 25px; }
.dopo .pd-fr { width: 50px; height: 30px; }
.dopo .pd p { font-size: 20px; margin-top: 4px; }
.dopo .take.sm { margin-top: 20px; }

/* vetro o plastica: i tre perché */
.vp-dx > h4 { margin: 0 0 16px; font: 600 24px/1.1 'Oswald', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ck, var(--c)); }
.vp-r { display: flex; align-items: center; gap: 22px; background: #fff; border-radius: 16px; padding: 22px 26px; margin-bottom: 14px; }
.vp-r i { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: var(--on); font: 600 30px/1 'Oswald', sans-serif; font-style: normal; }
.vp-r b { display: block; font: 600 38px/1.1 'Oswald', sans-serif; }
.vp-r span { display: block; font-size: 26px; color: #44423D; margin-top: 4px; }

/* chiusura: che cos'è l'economia circolare */
.recap.circ2 { padding-top: 110px; }
.recap.circ2 .mega { font-size: 124px; line-height: .98; }
.recap.circ2 .def { max-width: 1500px; margin: 28px 0 0; font-size: 30px; line-height: 1.35; }
.recap.circ2 .def span { display: block; margin-top: 6px; font: 600 20px/1 'Oswald', sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.rc-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; }
.rc { background: color-mix(in srgb, var(--ink) 24%, transparent); border-radius: 18px; padding: 22px 24px 26px; }
.rc small { display: block; font: 600 20px/1.2 'Oswald', sans-serif; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.rc p { margin: 10px 0 0; font-size: 26px; line-height: 1.3; }

/* chiusura semplice: i quattro punti della giornata */
.pg-list { display: grid; gap: 14px; margin-top: 40px; }
.pg { display: flex; align-items: center; gap: 30px; background: #fff; border-radius: 18px; border-left: 12px solid var(--k); padding: 16px 30px; }
.pg > b { flex: none; width: 70px; font: 700 78px/1 'Oswald', sans-serif; color: var(--k); text-align: center; }
.pg small { display: block; font: 600 20px/1 'Oswald', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pg p { margin: 6px 0 0; font: 600 42px/1.12 'Oswald', sans-serif; }
.giornata .take { margin-top: 30px; font-size: 46px; }

/* prossimi appuntamenti: senza date, il numero del modulo */
.ap { grid-template-columns: 90px 1fr; }
.ap-n { font: 700 84px/1 'Oswald', sans-serif; color: #B9B4A8; text-align: center; }
.ap.next .ap-n { color: var(--on); }

/* slide 10: le due regole europee, ognuna sopra le sue schede */
.leggi4 { margin-top: 44px; row-gap: 18px; }
.leggi4 .lg:first-child { grid-column: 1 / 4; }
.leggi4 .lg:nth-child(2) { grid-column: 4; }
.lg { border-top: 6px solid var(--c); padding-top: 12px; }
.lg.dk { border-top-color: var(--ink); }
.lg b { display: block; font: 600 32px/1.1 'Oswald', sans-serif; }
.lg span { display: block; font-size: 20px; color: var(--muted); margin-top: 4px; }
.leggi4 .card { min-height: 0; padding: 30px 34px 36px; }
.card .tp { display: block; font: 600 20px/1 'Oswald', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.card.dark .tp { color: #A7ABB6; }

/* vita della bottiglia: sotto ogni fase la sua scena illustrata */
.vita2 .zoom { height: 340px; }
.vita2 .zp { grid-template-columns: 600px 1fr; gap: 34px; padding: 16px 30px 16px 16px; align-items: center; }
.zs { display: block; width: 600px; height: 260px; overflow: hidden; }
.zs .zn-t1, .zs .zn-t2 { opacity: 0; }
.vita2 .zt h4 b { font-size: 32px; margin: 6px 0 12px; }
.vita2 .zi { flex-direction: column; gap: 6px; }
.vita2 .zi > div { flex: none; gap: 14px; font-size: 24px; }
.vita2 .zi .zic { width: 40px; height: 40px; }
.vita2 .zoom .take { position: absolute; inset: 0; margin: 0; padding-top: 136px; text-align: center; font-size: 50px; }
/* scaffale */
.zs-vuoto { fill: none; stroke: #9AA0AA; stroke-width: 2.5; stroke-dasharray: 6 5; }
.zs-big, .zs-cl { opacity: 0; }
.zs-cl path { stroke: var(--c); stroke-width: 3; fill: none; }
.active .zp.cur .zs-big { animation: zsBig .9s .15s cubic-bezier(.2, .8, .2, 1) both; transform-box: fill-box; transform-origin: center; }
.active .zp.cur .zs-cl { animation: zsIn .5s both; }
.active .zp.cur .zs-cl.c1 { animation-delay: 1s; } .active .zp.cur .zs-cl.c2 { animation-delay: 1.35s; } .active .zp.cur .zs-cl.c3 { animation-delay: 1.7s; }
@keyframes zsBig { from { opacity: 0; transform: translate(-222px, -49px) scale(.37); } to { opacity: 1; transform: none; } }
@keyframes zsIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
/* consumo */
.zc-acqua, .zc-sq, .zc-fr, .zc-tappo, .zc-giro { transform-box: fill-box; }
.zc-fr path { fill: none; stroke: var(--c); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.zc-sq { transform-origin: center; }
.zc-giro { opacity: .2; }
.active .zp.cur .zc-acqua { animation: zcAcqua 6s ease-in-out infinite; }
.active .zp.cur .zc-sq { animation: zcSq 6s ease-in-out infinite; }
.active .zp.cur .zc-fr.l { animation: zcFrL 6s ease-in-out infinite; }
.active .zp.cur .zc-fr.r { animation: zcFrR 6s ease-in-out infinite; }
.active .zp.cur .zc-tappo { animation: zcTappo 6s ease-in-out infinite; }
.active .zp.cur .zc-giro { animation: zcGiro 6s linear infinite; }
@keyframes zcAcqua { 0%, 5% { transform: none; } 30%, 92% { transform: translateY(70px); } 100% { transform: none; } }
@keyframes zcSq { 0%, 33% { transform: none; } 50%, 92% { transform: scaleX(.42); } 100% { transform: none; } }
@keyframes zcFrL { 0%, 33% { transform: none; } 50%, 92% { transform: translateX(22px); } 100% { transform: none; } }
@keyframes zcFrR { 0%, 33% { transform: none; } 50%, 92% { transform: translateX(-22px); } 100% { transform: none; } }
@keyframes zcTappo { 0%, 62% { transform: translateY(-16px); } 82%, 96% { transform: none; } 100% { transform: translateY(-16px); } }
@keyframes zcGiro { 0%, 60% { opacity: .2; } 64%, 86% { opacity: 1; } 92%, 100% { opacity: .2; } }
/* raccolta: passa il camioncino */
.zr-sacco, .zr-camion { transform-box: fill-box; transform-origin: center; }
.active .zp.cur .zr-camion { animation: zrCamion 8s linear infinite; }
.active .zp.cur .zr-sacco { animation: zrSacco 8s linear infinite; }
@keyframes zrCamion { 0% { transform: translateX(-560px); animation-timing-function: cubic-bezier(.2, .7, .3, 1); } 32%, 56% { transform: none; animation-timing-function: cubic-bezier(.6, 0, .9, .5); } 82%, 100% { transform: translateX(420px); } }
@keyframes zrSacco { 0%, 36% { opacity: 1; transform: none; } 48% { opacity: 1; transform: translate(60px, -64px) scale(.6) rotate(20deg); } 52%, 90% { opacity: 0; transform: translate(60px, -64px) scale(.6); } 91% { opacity: 0; transform: none; } 100% { opacity: 1; transform: none; } }
/* selezione: nastro e sensore NIR */
.zn-bt, .zn-fl, .zn-soffio { transform-box: fill-box; transform-origin: center; }
.zn-beam { opacity: .2; }
.zn-soffio { opacity: 0; }
.active .zp.cur .zn-nastro { animation: znNastro .9s linear infinite; }
.active .zp.cur .zn-bt { animation: znBt 8s linear infinite; }
.active .zp.cur .zn-fl { animation: znFl 8s linear infinite; }
.active .zp.cur .zn-beam { animation: znBeam 8s linear infinite; }
.active .zp.cur .zn-t1 { animation: znT1 8s linear infinite; }
.active .zp.cur .zn-t2 { animation: znT2 8s linear infinite; }
.active .zp.cur .zn-soffio { animation: znSoffio 8s linear infinite; }
@keyframes znNastro { to { stroke-dashoffset: -44; } }
@keyframes znBt { 0% { opacity: 1; transform: none; } 44% { transform: translateX(460px); } 52% { opacity: 1; transform: translate(604px, -110px) rotate(-14deg); } 56%, 100% { opacity: 0; transform: translate(604px, -110px) rotate(-14deg); } }
@keyframes znFl { 0%, 50% { opacity: 1; transform: none; } 92% { transform: translateX(460px); } 97% { opacity: 1; transform: translate(590px, 34px) rotate(40deg); } 100% { opacity: 0; transform: translate(590px, 34px) rotate(40deg); } }
@keyframes znBeam { 0%, 21% { opacity: .2; } 23%, 34% { opacity: 1; } 37%, 71% { opacity: .2; } 73%, 84% { opacity: 1; } 87%, 100% { opacity: .2; } }
@keyframes znT1 { 0%, 21% { opacity: 0; } 23%, 36% { opacity: 1; } 39%, 100% { opacity: 0; } }
@keyframes znT2 { 0%, 71% { opacity: 0; } 73%, 86% { opacity: 1; } 89%, 100% { opacity: 0; } }
@keyframes znSoffio { 0%, 43% { opacity: 0; transform: scaleY(.3); } 46% { opacity: 1; transform: scaleY(1); } 51%, 100% { opacity: 0; transform: scaleY(1); } }
/* riciclo: la vasca */
.zv-s, .zv-f { transform-box: fill-box; transform-origin: center; opacity: 0; }
.zv-s { fill: #E8F4FF; stroke: #12141A; stroke-width: 2; }
.zv-f { fill: #FF5F1F; } .zv-f.e { fill: #2B5BFF; }
.active .zp.cur .zv-s { animation: zvSink 7s ease-in infinite; }
.active .zp.cur .zv-f { animation: zvFloat 7s ease-in-out infinite; }
@keyframes zvSink { 0% { opacity: 0; transform: translateY(0) rotate(var(--r)); } 6% { opacity: 1; } 20% { transform: translateY(84px) rotate(var(--r)); } 55%, 90% { opacity: 1; transform: translateY(var(--y)) rotate(calc(var(--r) + 40deg)); } 100% { opacity: 0; transform: translateY(var(--y)) rotate(calc(var(--r) + 40deg)); } }
@keyframes zvFloat { 0% { opacity: 0; transform: translateY(0) rotate(var(--r)); } 6% { opacity: 1; } 20% { transform: translateY(84px) rotate(var(--r)); } 30% { transform: translateY(118px) rotate(var(--r)); } 48%, 90% { opacity: 1; transform: translateY(74px) rotate(calc(var(--r) - 20deg)); } 100% { opacity: 0; transform: translateY(74px) rotate(calc(var(--r) - 20deg)); } }
/* produzione: granuli, preforma, soffiaggio */
.zp-gr { opacity: 0; }
.zp-bt { transform-box: fill-box; transform-origin: 50% 0; }
.active .zp.cur .zp-gr { animation: zpGr 2.1s ease-in infinite; }
.active .zp.cur .zp-bt { animation: zpBt 5s ease-in-out infinite; }
@keyframes zpGr { 0% { opacity: 0; transform: translateY(-70px); } 20% { opacity: 1; } 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes zpBt { 0%, 18% { opacity: 1; transform: scale(.45, .74); } 42%, 84% { opacity: 1; transform: none; } 90% { opacity: 0; transform: none; } 91% { opacity: 0; transform: scale(.45, .74); } 100% { opacity: 1; transform: scale(.45, .74); } }

/* chiusura: sotto «prodotti» il segno del ricircolo, sotto «materiali» quello del riciclo */
.ic-sotto { position: relative; display: inline-block; }
.ic-s { position: absolute; left: 50%; top: 100%; width: 100px; height: 100px; margin: 8px 0 0 -50px; fill: none; stroke: var(--ck, var(--c)); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.ic-s .h { fill: var(--ck, var(--c)); stroke: none; }
.take.on .ic-s { animation: icGiro 1.4s .4s cubic-bezier(.3, .7, .3, 1) both; }
@keyframes icGiro { from { opacity: 0; transform: rotate(-220deg) scale(.6); } to { opacity: 1; transform: none; } }

/* curiosità 3: che cosa succede se non si fa la raccolta differenziata */
.csq-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 56px; }
.csq { background: #fff; border-radius: 20px; padding: 28px 28px 32px; border-top: 8px solid var(--c); }
.csq svg { display: block; width: 104px; height: 104px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.csq svg .c { stroke: var(--ck, var(--c)); }
.csq b { display: block; font: 600 32px/1.1 'Oswald', sans-serif; margin-top: 18px; }
.csq .big { display: block; white-space: nowrap; font: 700 40px/1.05 'Oswald', sans-serif; font-style: normal; color: var(--ck, var(--c)); margin-top: 10px; }
.csq span { display: block; font-size: 24px; line-height: 1.35; color: #44423D; margin-top: 14px; }
.ic-l { position: absolute; left: 50%; top: 100%; width: 200px; margin: 114px 0 0 -100px; text-align: center; font: 600 26px/1 'Oswald', sans-serif; letter-spacing: .04em; color: var(--ck, var(--c)); }
.take.on .ic-l { animation: icTesto .6s 1.3s both; }
@keyframes icTesto { from { opacity: 0; } to { opacity: 1; } }