/* ──────────────────────────────────────────────────────────────────────────
   Sconto progressivo — componente condiviso (16 set 2026)

   Sta su TUTTE le pagine che vendono: home + 26 schede /libro/.
   La home è a tema scuro, le schede a tema chiaro: il componente NON usa le
   variabili della pagina (--ink, --paper cambiano significato fra le due) ma
   la sua palette, così è identico ovunque e non si rompe se il tema cambia.

   Tre varianti dello stesso oggetto:
     [data-cpx="hero"]     barra centrale, in home fra Hinge e il bundle Jung
     [data-cpx="drawer"]   dentro il carrello
     [data-cpx="landing"]  sopra il bottone d'acquisto di ogni scheda libro

   Animazioni: solo larghezza della barra e colore dei pallini, niente
   listener di scroll e niente elementi fissi che seguono la pagina.
   ────────────────────────────────────────────────────────────────────────── */

.cpx, .cpx * { box-sizing: border-box; }
.cpx {
  --cpx-bg:     #141414;
  --cpx-ink:    #f5f0e8;
  --cpx-mid:    #b8b3a8;
  --cpx-soft:   #8d8879;
  --cpx-accent: #f5c518;   /* lo stesso giallo della targhetta «edizione limitata» */
  --cpx-line:   rgba(245, 240, 232, 0.16);
  font-family: var(--sans, 'Inter', system-ui, -apple-system, sans-serif);
  color: var(--cpx-ink);
  -webkit-font-smoothing: antialiased;
}

/* ── Traccia + pallini: comune a hero e drawer ── */
.cpx-track {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: rgba(245, 240, 232, 0.12);
  margin: 0 3px;
}
.cpx-fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0;
  border-radius: 3px;
  background: var(--cpx-accent);
  transition: width 0.45s cubic-bezier(0.22, 0.7, 0.25, 1);
}
/* Il respiro: un segmento CHIARO che si allunga di qualche millimetro oltre il
   punto raggiunto e si ritira, ogni due secondi. Chiaro e non giallo di
   proposito: il giallo è il progresso vero, quello che si guadagna coi libri,
   e non deve comparire prima di averne ordinato uno. Questo è solo il modo che
   ha la barra di dire che aspetta il prossimo.
   Scala un elemento solo: non pesa sullo scorrimento. */
.cpx-fill::after {
  content: "";
  position: absolute; left: 100%; top: 0; bottom: 0;
  width: 16px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(to right, rgba(245, 240, 232, 0.42), rgba(245, 240, 232, 0));
  transform: scaleX(0);
  transform-origin: left center;
  animation: cpx-respiro 2s ease-in-out infinite;
}
/* A barra piena non c'è più niente da promettere. */
.cpx.pieno .cpx-fill::after { display: none; }
@keyframes cpx-respiro {
  0%   { transform: scaleX(0); opacity: 0; }
  40%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(0); opacity: 0; }
}

.cpx-tick {
  position: absolute; top: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--cpx-bg);
  border: 2px solid rgba(245, 240, 232, 0.22);
  transform: translate(-50%, -50%);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.cpx-tick.on { border-color: var(--cpx-accent); background: var(--cpx-accent); }

/* ── Gradini sotto la traccia ── */
.cpx-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
}
.cpx-steps li {
  text-align: center;
  font-size: clamp(0.66rem, 2.2vw, 0.7rem);
  padding: 0 2px;
  hyphens: none;
  overflow-wrap: normal;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--cpx-soft);
  transition: color 0.3s ease;
}
.cpx-steps li b {
  display: block;
  font-weight: 600;
  font-size: 0.94em;
  letter-spacing: 0.01em;
  color: var(--cpx-mid);
  white-space: nowrap;
  transition: color 0.3s ease;
}
.cpx-steps li.on,
.cpx-steps li.on b { color: var(--cpx-accent); }
.cpx-steps li i {
  display: block;
  font-style: normal;
  font-size: 0.86em;
  opacity: 0.75;
}

/* ── Messaggio ── */
.cpx-msg {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--cpx-ink);
}
.cpx-msg b { color: var(--cpx-accent); font-weight: 600; }
/* A carrello vuoto il messaggio non c'è: la scala sotto la barra dice già
   tutto, e l'inizio resta pulito. */
.cpx-msg:empty { display: none; }

/* ── Variante HERO ── */
[data-cpx="hero"] {
  max-width: 900px;
  margin: 0 auto 3.2rem;
  padding: 1.5rem 1.4rem 1.4rem;
  border: 1px solid var(--cpx-line);
  border-radius: 2px;
  background: var(--cpx-bg);
  text-align: center;
}
[data-cpx="hero"] .cpx-eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cpx-accent);
}
[data-cpx="hero"] .cpx-msg {
  font-size: clamp(0.88rem, 2.6vw, 1rem);
  margin-bottom: 1.1rem;
}
[data-cpx="hero"] .cpx-foot {
  margin: 0.9rem 0 0;
  font-size: 0.66rem;
  line-height: 1.5;
  color: var(--cpx-soft);
}

/* ── Variante LANDING: sopra il bottone d'acquisto delle schede libro ──
   Stesso pannello scuro delle altre due: il giallo della casa su fondo chiaro
   non si leggerebbe, e un solo aspetto vale per tutte e tre le posizioni. */
[data-cpx="landing"] {
  /* Il contenitore dei bottoni è un flex in colonna: con i soli margini
     automatici la barra si restringeva al suo contenuto (206px su un telefono)
     e le cinque colonne si strizzavano. Con width:100% prende tutta la
     larghezza disponibile e il max-width la tiene a bada sul desktop. */
  width: 100%;
  max-width: 460px;
  margin: 0 auto 1.1rem;
  padding: 1.1rem 1.2rem 1rem;
  border: 1px solid var(--cpx-line);
  border-radius: 2px;
  background: var(--cpx-bg);
  text-align: center;
}
[data-cpx="landing"] .cpx-steps li i { display: none; }

/* ── Variante DRAWER ── */
[data-cpx="drawer"] {
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--cpx-line);
}
[data-cpx="drawer"] .cpx-msg { font-size: 0.78rem; }
[data-cpx="drawer"] .cpx-steps li i { display: none; }

@media (max-width: 640px) {
  [data-cpx="hero"] { padding: 1.3rem 1rem 1.2rem; margin-bottom: 2.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cpx-fill, .cpx-tick, .cpx-steps li {
    transition-duration: 0.01ms;
  }
  .cpx-fill::after { animation: none; display: none; }
}