/* ============================================================
   Pannello "Il progressivo" — emblema che si riempie
   Dipende da riepilogo.css per le variabili --dmr-* e per .dmr-card,
   .dmr-cap, .dmr-chip, .dmr-sect.
   ============================================================ */

.prg {
  position: relative; overflow: hidden; padding: 30px 34px 28px;
  transition: transform .26s cubic-bezier(.16, 1, .3, 1), box-shadow .26s ease;
}
.prg:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 9px rgba(15, 34, 68, .06), 0 24px 52px -14px rgba(15, 34, 68, .2);
}
.prg-shine {
  position: absolute; top: 0; bottom: 0; left: 0; width: 130px; pointer-events: none;
  animation: prgShine 9s cubic-bezier(.4, 0, .6, 1) 1.1s infinite;
}
@keyframes prgShine {
  0% { transform: translateX(-140%) skewX(-18deg) }
  42%, 100% { transform: translateX(220%) skewX(-18deg) }
}
.prg-grid {
  position: relative; display: grid;
  grid-template-columns: 206px minmax(0, 1fr) minmax(0, .9fr);
  gap: 34px; align-items: stretch;
}

/* ---- l'emblema ---- */
.prg-vessel { position: relative; display: flex; flex-direction: column; }
.prg-halo {
  position: absolute; left: -16px; right: -16px; top: 24px; bottom: 34px;
  border-radius: 50%; filter: blur(18px); pointer-events: none;
  animation: prgHalo 7s ease-in-out infinite;
}
@keyframes prgHalo {
  0%, 100% { opacity: .26; transform: scale(1) }
  50% { opacity: .48; transform: scale(1.06) }
}
/* aspect-ratio uguale al viewBox: senza letterbox le coordinate del viewBox e le
   percentuali del contenitore coincidono, quindi la linea di riferimento (dentro
   l'SVG) e le etichette (HTML in %) restano allineate. Le etichette NON possono
   stare in un <text> SVG: l'interpolazione le avvolge in uno <span>, e SVG non
   disegna figli HTML. */
.prg-shape { position: relative; width: 100%; aspect-ratio: 100 / 140; align-self: center; }
.prg-shape[hidden] { display: none; }
.prg-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.prg-cap {
  margin-top: 11px; text-align: center; font-size: 10.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--dmr-mut, #66708a);
}
.prg-ref {
  position: absolute; left: 0; padding: 2px 6px; border-radius: 5px;
  background: rgba(255, 255, 255, .92); font-size: 9.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--dmr-ink, #0f2244);
  white-space: nowrap; z-index: 5;
}
.prg-tick {
  position: absolute; right: 0; font-size: 10.5px; font-weight: 700;
  color: var(--dmr-mut, #66708a); font-variant-numeric: tabular-nums; z-index: 4;
}
.prg-tick.on { color: #8a6a10; }

/* Il livello SALE dentro la sagoma: un rect che cresce dal basso e fa da clip.
   Traslare il gruppo colorato da sotto faceva apparire il colore di colpo invece
   di riempire seguendo i bordi. La keyframe ha solo il "from": il valore finale
   e' la scaleY inline, cioe' il livello reale. L'animazione la assegna il JS. */
@keyframes prgFill { from { transform: scaleY(0) } }
@keyframes prgLevel { from { transform: translateY(100%) } to { transform: translateY(0) } }

/* ---- lampadina ---- */
@keyframes prgFil { 0%, 100% { opacity: .82 } 16% { opacity: 1 } 40% { opacity: .72 } 68% { opacity: 1 } }
@keyframes prgGlow { 0%, 100% { opacity: .4; transform: scale(1) } 50% { opacity: .85; transform: scale(1.09) } }
@keyframes prgCurrent { to { stroke-dashoffset: -132 } }
@keyframes prgMote {
  0% { opacity: 0; transform: translateY(9px) scale(.5) }
  22% { opacity: .95 }
  100% { opacity: 0; transform: translateY(-26px) scale(1.15) }
}
.prg-fil { animation: prgFil 2.6s ease-in-out infinite; }
.prg-glow { animation: prgGlow 4.2s ease-in-out infinite; transform-origin: 50px 51px; }
.prg-cur {
  stroke-dasharray: 9 57; animation-name: prgCurrent;
  animation-timing-function: linear; animation-iteration-count: infinite;
}
.prg-mote { animation-name: prgMote; animation-timing-function: ease-out; animation-iteration-count: infinite; }

/* ---- fuoco: ogni lingua guizza con periodo suo ----
   Tre durate senza divisori comuni (1,7 / 2,3 / 1,3 s) cosi' non si allineano mai,
   e ognuna ruota attorno alla propria base. Ampiezza contenuta perche' i clip in
   cascata sono statici: il fuoco vero guizza veloce con piccoli spostamenti. */
@keyframes prgFlameA {
  0%, 100% { transform: rotate(0) scaleY(1) skewX(0) }
  18% { transform: rotate(-.8deg) scaleY(1.04) skewX(-1.5deg) }
  37% { transform: rotate(.5deg) scaleY(.98) skewX(1.1deg) }
  58% { transform: rotate(-.4deg) scaleY(1.05) skewX(-1.2deg) }
  79% { transform: rotate(.7deg) scaleY(.99) skewX(.9deg) }
}
@keyframes prgFlameB {
  0%, 100% { transform: rotate(0) scaleY(1) skewX(0) }
  14% { transform: rotate(1.5deg) scaleY(1.06) skewX(1.7deg) }
  31% { transform: rotate(-1.2deg) scaleY(.96) skewX(-1.5deg) }
  52% { transform: rotate(1.7deg) scaleY(1.07) skewX(1.4deg) }
  68% { transform: rotate(-.9deg) scaleY(.97) skewX(-1.8deg) }
  85% { transform: rotate(.8deg) scaleY(1.03) skewX(.7deg) }
}
@keyframes prgFlameC {
  0%, 100% { transform: rotate(0) scaleY(1) skewX(0) }
  12% { transform: rotate(-1.8deg) scaleY(.95) skewX(-1.9deg) }
  29% { transform: rotate(2deg) scaleY(1.08) skewX(1.8deg) }
  46% { transform: rotate(-1.4deg) scaleY(1.02) skewX(-1.3deg) }
  63% { transform: rotate(1.6deg) scaleY(.96) skewX(2deg) }
  81% { transform: rotate(-.7deg) scaleY(1.05) skewX(-.8deg) }
}
.prg-flA { animation: prgFlameA 1.7s ease-in-out infinite; transform-origin: 50px 134px; }
.prg-flB { animation: prgFlameB 2.3s ease-in-out infinite; transform-origin: 50px 133px; }
.prg-flC { animation: prgFlameC 1.3s ease-in-out infinite; transform-origin: 48px 133px; }

/* ---- cisterna ---- */
.prg-tank {
  position: absolute; inset: 0; border: 1.5px solid #cfd6e4; border-radius: 7px;
  overflow: hidden; background: linear-gradient(180deg, #fbfdff 0%, #f2f7fc 100%);
  box-shadow: inset 0 1px 3px rgba(15, 34, 68, .06);
}
.prg-level { position: absolute; left: 0; right: 0; bottom: 0; min-height: 16px; }
.prg-body { position: absolute; inset: 0; background: linear-gradient(180deg, #4a90d0 0%, #2f6db8 100%); }
.prg-surf { position: absolute; left: 0; top: -10px; width: 100%; height: 16px; overflow: visible; z-index: 3; }
@keyframes prgWaveA { from { transform: translateX(0) } to { transform: translateX(-120px) } }
@keyframes prgWaveB { from { transform: translateX(-120px) } to { transform: translateX(0) } }
.prg-w1 { animation: prgWaveA 7s linear infinite }
.prg-w2 { animation: prgWaveB 11s linear infinite }
@keyframes prgBubble {
  0% { bottom: -8%; opacity: 0; transform: scale(.45) }
  14% { opacity: .62 }
  82% { opacity: .28 }
  100% { bottom: 104%; opacity: 0; transform: scale(1.2) }
}
.prg-bub {
  position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .7);
  animation-name: prgBubble; animation-timing-function: ease-in; animation-iteration-count: infinite;
}
.prg-tank-ref {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 2px dashed var(--dmr-ink, #0f2244); opacity: .55; z-index: 4;
}
/* Le luci stanno sul VETRO, non nel liquido: una striscia dentro l'acqua legge
   come un segno, non come un riflesso. */
.prg-glass-a {
  position: absolute; left: 9%; top: 6px; bottom: 6px; width: 26px; border-radius: 13px;
  filter: blur(5px); pointer-events: none; z-index: 7;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.42) 42%, rgba(255,255,255,.06));
}
.prg-glass-b {
  position: absolute; right: 11%; top: 10px; bottom: 10px; width: 9px; border-radius: 6px;
  filter: blur(3px); pointer-events: none; z-index: 7;
  background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,0));
}

/* ---- la cifra e le misure ---- */
.prg-main { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.prg-big { display: flex; align-items: baseline; gap: 9px; margin-top: 14px; flex-wrap: wrap; min-width: 0; }
.prg-big span {
  font-size: 64px; line-height: 1.02; font-weight: 700; letter-spacing: -.038em;
  font-variant-numeric: tabular-nums; color: var(--dmr-ink, #0f2244);
}
.prg-big b { font-size: 24px; font-weight: 600; color: var(--dmr-mut, #66708a); }
.prg-d { display: flex; align-items: center; gap: 11px; margin-top: 16px; flex-wrap: wrap; }
.prg-d em { font-style: normal; font-size: 13px; font-weight: 500; color: var(--dmr-mut, #66708a); }
.prg-p {
  margin: 16px 0 0; font-size: 14px; font-weight: 500; color: var(--dmr-mut, #66708a);
  line-height: 1.5; max-width: 440px; text-wrap: pretty;
}
.prg-side {
  display: flex; flex-direction: column; justify-content: center;
  padding-left: 32px; border-left: 1px solid var(--dmr-line, #e6e9f0); min-width: 0;
}
.prg-side > div { padding: 18px 0; border-bottom: 1px solid var(--dmr-line, #e6e9f0); }
.prg-side > div:first-child { padding-top: 0; }
.prg-side > div:last-child { padding-bottom: 0; border-bottom: 0; }
.prg-side-v { display: flex; align-items: baseline; gap: 5px; margin-top: 9px; }
.prg-side-v span {
  font-size: 24px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.prg-side-v b { font-size: 13px; font-weight: 600; color: var(--dmr-mut, #66708a); }
.prg-side em {
  display: block; margin-top: 5px; font-size: 11.5px; font-weight: 500; font-style: normal;
  color: var(--dmr-mut, #66708a); font-variant-numeric: tabular-nums;
}

/* ---- easter egg: flusso canalizzatore ---- */
.prg-egg {
  position: absolute; left: 38%; bottom: 1%; width: 24%; height: 9%;
  border: 0; background: transparent; cursor: pointer; z-index: 8;
}
.prg-egg-back {
  position: absolute; left: 34%; bottom: 2%; width: 32%; height: 11%;
  border: 0; background: transparent; cursor: pointer; z-index: 8;
}
@keyframes prgFlux { to { stroke-dashoffset: -40 } }
@keyframes prgHub { 0%, 100% { opacity: .5; transform: scale(1) } 50% { opacity: 1; transform: scale(1.14) } }
.prg-fx {
  stroke-dasharray: 7 33; animation-name: prgFlux;
  animation-timing-function: linear; animation-iteration-count: infinite;
}
.prg-hub { animation: prgHub 1.05s ease-in-out infinite; transform-origin: 50px 72px; }

/* ---- la DeLorean ----
   Corsa DESTRA → SINISTRA: il PNG ha il muso a sinistra e le scie stanno oltre la
   coda, quindi andando verso destra viaggerebbe di coda con le fiamme davanti al
   cofano. Parte oltre il bordo destro, non dentro. */
.prg-delo {
  position: fixed; left: 0; bottom: 24vh; width: 300px; z-index: 9999;
  pointer-events: none;
  animation: prgDelo 3.3s cubic-bezier(.3, 0, .68, 1) forwards;
}
.prg-delo-box { position: relative; width: 100%; }
.prg-delo-box img { position: relative; display: block; width: 100%; height: auto; z-index: 2; }
.prg-delo-fx { position: absolute; inset: 0; width: 100%; height: auto; overflow: visible; z-index: 1; }
@keyframes prgDelo {
  0% { opacity: 0; transform: translateX(104vw) translateY(14px) scale(.94) }
  9% { opacity: 1 }
  74% { opacity: 1; transform: translateX(12vw) translateY(-4px) scale(1) }
  100% { opacity: 0; transform: translateX(-46vw) translateY(-26px) scale(1.04) }
}
@keyframes prgTrail { 0%, 100% { opacity: .45; transform: scaleX(1) } 50% { opacity: 1; transform: scaleX(1.28) } }
@keyframes prgWheelGlow { 0%, 100% { opacity: .5 } 50% { opacity: .95 } }
/* transform-box: fill-box, altrimenti "left" e' l'asse x=0 del viewBox e non il
   bordo del gruppo: lo scaleX del flicker moltiplicherebbe le coordinate delle
   scie staccandole dalla coda. */
.prg-trail {
  animation: prgTrail .15s ease-in-out infinite;
  transform-box: fill-box; transform-origin: left center;
}
.prg-wg { animation: prgWheelGlow .3s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .prg *, .prg-delo, .prg-delo * { animation: none !important; transition: none !important; }
  .prg-bub, .prg-mote, .prg-shine { opacity: 0; }
  .prg-delo { display: none; }
}

/* ---- responsive: le soglie sono dove il contenuto si rompe ---- */
@media (max-width: 1200px) {
  .prg-grid { grid-template-columns: 190px minmax(0, 1fr); }
  .prg-side {
    grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 26px;
    padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--dmr-line, #e6e9f0); margin-top: 6px;
  }
  .prg-side > div { flex: 1; min-width: 150px; border: 0; padding: 0; }
}
@media (max-width: 900px) {
  .prg { padding: 22px 20px 20px; }
  .prg-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  /* v5.118.0 — Stesso difetto della cisterna: in colonna unica l'emblema restava
     a sinistra con il vuoto a destra. Misurato a 375px: 190px in una colonna da 311. */
  .prg-vessel { width: 100%; max-width: 190px; margin-inline: auto; }

  /* La regola a 1200px toglie i separatori fra le tre misure perche' li' stanno in
     riga. Impilate tornano utili: senza, i tre valori si leggono come un blocco solo. */

  .prg-big span { font-size: 44px; }
  .prg-delo { width: 220px; }
}
/* v5.118.0 — Le tre misure. La regola a 1200px le mette in riga con
   `min-width:150px`, e su un tablet da 768 ci stanno bene, 232px l'una. Su un
   telefono no: misurate a 85px su uno schermo da 320, illeggibili. Sotto i 600 si
   impilano, una per riga, e riprendono il separatore che la regola a 1200 toglie. */
@media (max-width: 600px) {
  .prg-side { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .prg-side > div {
    flex: none; width: 100%; min-width: 0;
    padding: 16px 0; border-bottom: 1px solid var(--dmr-line, #e6e9f0);
  }
  .prg-side > div:first-child { padding-top: 0; }
  .prg-side > div:last-child { border-bottom: 0; padding-bottom: 0; }
}

@media (max-width: 480px) {
  .prg-big span { font-size: 34px; }
  .prg-delo { display: none; }
  /* Sui telefoni piu' stretti l'emblema cede qualcosa: la cifra dei consumi
     arriva prima, senza doverlo scorrere per intero. */
  .prg-vessel { max-width: 160px; }
}