/* Slides.module.css */
@layer base, rhythm, layout, components, default, overwrites;
/* Contenitore wrapper scrollabile */
.slidesWrapper {
  position: relative; /* per posizionare .content in modo assoluto */
  width: 100%; /* occupa tutta la larghezza disponibile */
  height: 100dvh; /* o 100%, o vh, o personalizzato */
  overflow-y: auto; /* scroll verticale */
  scroll-snap-type: y mandatory;
  timeline-scope: --slides; /* timeline locale */
  background-color: #111; /* colore di sfondo, se desideri */
}

/* Ogni "slide" */
.section {
  position: relative;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  view-timeline: --slides; /* la sezione partecipa alla timeline locale */
  min-height: 100%; /* riempie l'altezza del wrapper, puoi adattare */
  /* colore di sfondo facoltativo */
  background-color: #222;
  height: 100dvh;
}

/* Contenuto animato */
.content {
  position: absolute;
  inset: 0; /* si estende su tutta l'area della sezione */
  overflow: hidden;

  /* Esempio di animazione "blink" */
  animation-name: blinkLocal;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  animation-timeline: --slides;
}

.immagineSfondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Keyframe di esempio */
@keyframes blinkLocal {
  0%,
  100% {
    filter: blur(0.5rem) contrast(4);
    opacity: 0;
    visibility: hidden;
  }
  50% {
    filter: blur(0) contrast(1);
    opacity: 1;
    visibility: visible;
  }
}