/* —— Scroll fluido (sopra canvas fisso) —— */

.page {
  isolation: isolate;
}

/* blur costoso su mobile sopra il canvas animato */
.section--band {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.servizi-card,
.btn--ghost {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (min-width: 768px) and (pointer: fine) {
  .section--band {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .servizi-card {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .btn--ghost {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}

/* reveal più leggero su touch */
@media (pointer: coarse) {
  [data-reveal] {
    transform: none;
    transition: opacity 0.55s var(--ease-reveal);
    transition-delay: calc(var(--reveal-delay, 0) * 45ms);
  }

  [data-reveal].is-revealed {
    opacity: 1;
  }
}

/* niente animazioni CSS mentre l’utente scrolla */
html.is-scrolling [data-reveal],
html.is-scrolling [data-reveal].is-revealed {
  transition: none !important;
  opacity: 1;
  transform: none;
}

html.is-scrolling .servizi-accordion[open] .servizi-accordion__panel {
  animation: none;
}

html.is-scrolling .servizi-accordion__trigger::after {
  transition: none;
}