/* benefici — overlay dei benefici: eyebrow, statement, marker, dialog mobile.
   Consuma: chip-field (.chip-field__chip/__note), base (.glass), cine-engine (overlay).
   La regola prefers-reduced-motion viene da una lista di selettori spezzata. */
/* ---------- Benefici (canvas scrub + overlay) ---------- */

.cine__overlay--benefici {
  align-items: flex-end;
  justify-content: center;
}

.benefici__eyebrow {
  position: absolute;
  top: 2rem;
  left: clamp(1rem, 6vw, 6rem);
  color: var(--techne-ink-deep);
  background: var(--techne-glass);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  margin: 0;
}

.benefici__statement {
  padding: 1.2rem 1.5rem;
  max-width: 34rem;
}

/* I marker usano il componente chip-field (chip-field.css); qui restano solo
   l'aggancio alla scena, il reveal scrub e le varianti mobile. */
.benefici__markers {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.benefici__markers > li {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.benefici__markers > li.is-active { opacity: 1; }

/* Mobile: marker sparsi dentro il ritaglio verticale; la nota vive nella
   dialog (benefici.js), non nell'espansione. */
@media (width <= 860px) {
  .benefici__markers > li {
    left: var(--mx-m, var(--mx));
    top: var(--my-m, var(--my));
  }

  .benefici__markers .chip-field__chip { cursor: pointer; }

  .benefici__markers .chip-field__note { display: none; }
}

/* Reveal dello statement (prima era in selettore combinato coi marker). */
/* stylelint-disable-next-line no-duplicate-selectors */
.benefici__statement {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.benefici__statement.is-active { opacity: 1; }

/* Fallback statico: tutto visibile, note sempre espanse. */
html:not(.has-cine) .benefici__statement,
html:not(.has-cine) .benefici__markers > li { opacity: 1; }

html:not(.has-cine) .benefici__markers .chip-field__chip {
  grid-template-rows: auto 1fr;
  max-width: var(--chip-max-w-card, 22rem);
  border-radius: var(--chip-radius-card, 16px);
  padding: var(--chip-pad-card, 0.9rem 1.1rem);
}

/* ---------- Dialog benefici (mobile) ---------- */

.benefici-dialog {
  width: min(92vw, 26rem);
  border: 0;
  padding: 1.1rem 1.3rem 1.3rem;
  margin: auto auto 1.2rem;
}

.benefici-dialog::backdrop { background: rgb(31 31 26 / 40%); }

.benefici-dialog__close {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  font: inherit;
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.2rem;
  background: none;
  border: 0;
  color: var(--techne-ink-deep);
  cursor: pointer;
}

.benefici-dialog__title {
  margin: 0 1.8rem 0.5rem 0;
  font-size: 1rem;
}

.benefici-dialog__note {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
}
/* Su schermi molto larghi il testo dei marker cresce col resto della scena
   (le misure del box arrivano dai token --chip-*, rimappati in tokens.css). */
@media (width >= 1600px) {
  .benefici__markers .chip-field__chip { font-size: 1.1rem; }

  .benefici__markers .chip-field__note { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .benefici__statement,
  .benefici__markers li { transition: none; }
}