/* steps — la scheda di ciclo: voci dell'anello, testata a nodo, rotaia mobile.
   Consuma: base (.glass sulle voci), cine-engine (stato html.has-cine).
   Le coordinate --cx/--cy non vengono da un modulo: le stampa il markup.
   La regola prefers-reduced-motion viene da una lista di selettori spezzata. */
/* ---------- Step (ciclo): scheda di ciclo ---------- */

.steps {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 30rem;
}

.steps__item {
  position: relative;
  padding: 0.8rem 1.1rem 0.9rem;
  border-color: var(--steps-border);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Tick tecnici agli angoli, eco dei tratti del disegno dell'anello. */
.steps__item::before,
.steps__item::after {
  content: "";
  position: absolute;
  width: 0.55rem;
  height: 0.55rem;
  opacity: 0.6;
}

.steps__item::before {
  top: 0.4rem;
  left: 0.4rem;
  border-top: 1px solid var(--steps-tick);
  border-left: 1px solid var(--steps-tick);
}

.steps__item::after {
  right: 0.4rem;
  bottom: 0.4rem;
  border-right: 1px solid var(--steps-tick);
  border-bottom: 1px solid var(--steps-tick);
}

/* Testata: nodo di circuito con traccia d'ingresso, poi numero e totale. */
.steps__head {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: var(--steps-num);
}

.steps__head::before {
  content: "";
  align-self: center;
  width: 1.1rem;
  height: 0.5rem;
  background:
    radial-gradient(circle 0.2rem at 0.2rem 50%, var(--steps-node) 92%, transparent) no-repeat,
    linear-gradient(var(--steps-node), var(--steps-node)) no-repeat 0.45rem 50% / 0.65rem 1px;
  transition: filter 0.35s ease;
}

.steps__tot {
  font-size: 0.72rem;
  color: var(--steps-tot-fg);
  opacity: 0.85;
}

/* La barra inclinata tra numero e totale: la testata è aria-hidden,
   la numerazione semantica la dà già l'ol. */
.steps__tot::before { content: "/ "; }

.steps__title {
  margin: 0.35rem 0 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
}

.steps__text {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
}

/* Su desktop l'accumulo delle card racconta già il progresso. */
.steps__rail { display: none; }

/* L'anello si compone: 01 al centro, 02→05 antiorari dai bordi. Le voci
   apparse restano (is-active), la sosta corrente è piena (is-current). */
html.has-cine .steps {
  position: static;
  max-width: none;
}

html.has-cine .steps__item {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  max-width: 17rem;
  transform: translate(-50%, -50%) translateY(0.75rem);
  opacity: 0;
}

html.has-cine .steps__item.is-active {
  opacity: 0.55;
  transform: translate(-50%, -50%);
}

html.has-cine .steps__item.is-current { opacity: 1; }

/* Su schermi molto larghi le schede a misura fissa stonano per piccolezza:
   crescono con la scena (stesso criterio dei chip benefici in tokens.css). */
@media (width >= 1600px) {
  html.has-cine .steps__item {
    max-width: 21rem;
    padding: 1rem 1.3rem 1.1rem;
  }

  .steps__head { font-size: 1rem; }

  .steps__title { font-size: 1.25rem; }

  .steps__text { font-size: 1.05rem; }
}

/* Il nodo della corrente si accende: eco del bagliore che percorre l'anello. */
html.has-cine .steps__item.is-current .steps__head::before {
  filter: drop-shadow(0 0 5px var(--steps-halo));
}

/* Mobile: niente accumulo; la sola corrente, al centro del foro dell'anello,
   diventa scheda di ciclo: testata piena, titolo, testo, rotaia. */
@media (width <= 860px) {
  html.has-cine .steps__item {
    left: 50%;
    top: 50%;
    width: min(88vw, 22rem);
    max-width: none;
    padding: 1rem 1.2rem 1.1rem;
    transform: translate(-50%, -50%) translateY(0.5rem);
  }

  html.has-cine .steps__item.is-active { transform: translate(-50%, -50%); }

  html.has-cine .steps__item.is-active:not(.is-current) { opacity: 0; }

  /* Rotaia di avanzamento: 5 nodi su una traccia. Sotto, lo stato spento
     (anelli salvia); sopra, ::before col velo acceso in rame clippato alla
     larghezza --lit, che include il primo nodo e cresce di nodo in nodo. */
  .steps__rail {
    --dot: 0.5rem;
    --lit: calc(var(--dot) + (var(--i) - 1) / (var(--steps-tot) - 1) * (100% - var(--dot)));

    display: block;
    position: relative;
    height: var(--dot);
    margin-top: 0.75rem;
  }

  .steps__rail,
  .steps__rail::before {
    background-repeat: no-repeat;
    background-size:
      var(--dot) var(--dot),
      var(--dot) var(--dot),
      var(--dot) var(--dot),
      var(--dot) var(--dot),
      var(--dot) var(--dot),
      calc(100% - var(--dot)) 1px;
    background-position: 0% 50%, 25% 50%, 50% 50%, 75% 50%, 100% 50%, center;
  }

  /* stylelint-disable-next-line no-duplicate-selectors */
  .steps__rail {
    background-image:
      radial-gradient(circle closest-side, transparent 52%, var(--steps-rail-off) 60% 88%, transparent 96%),
      radial-gradient(circle closest-side, transparent 52%, var(--steps-rail-off) 60% 88%, transparent 96%),
      radial-gradient(circle closest-side, transparent 52%, var(--steps-rail-off) 60% 88%, transparent 96%),
      radial-gradient(circle closest-side, transparent 52%, var(--steps-rail-off) 60% 88%, transparent 96%),
      radial-gradient(circle closest-side, transparent 52%, var(--steps-rail-off) 60% 88%, transparent 96%),
      linear-gradient(var(--steps-rail-trace), var(--steps-rail-trace));
  }

  .steps__rail::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle closest-side, var(--steps-rail-on) 92%, transparent),
      radial-gradient(circle closest-side, var(--steps-rail-on) 92%, transparent),
      radial-gradient(circle closest-side, var(--steps-rail-on) 92%, transparent),
      radial-gradient(circle closest-side, var(--steps-rail-on) 92%, transparent),
      radial-gradient(circle closest-side, var(--steps-rail-on) 92%, transparent),
      linear-gradient(var(--steps-rail-on), var(--steps-rail-on));
    clip-path: inset(0 calc(100% - var(--lit)) 0 0);
    transition: clip-path 0.35s ease;
  }

  /* Alone caldo sul nodo corrente, allineato al centro del nodo --i. */
  .steps__rail::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc((var(--i) - 1) / (var(--steps-tot) - 1) * (100% - var(--dot)));
    width: var(--dot);
    height: var(--dot);
    border-radius: 50%;
    box-shadow: 0 0 6px 1px var(--steps-halo);
  }
}
@media (prefers-reduced-motion: reduce) {
  .steps__item,
  .steps__head::before,
  .steps__rail::before { transition: none; }
}