/* ---- banner scorrevole (marquee) tra "Benvenuti" e "Gli spazi" ---- */
.rainbow-marquee{
  overflow:hidden;
  padding:.45rem 0;
  background:var(--shell);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  /* sfumatura ai bordi per un effetto elegante */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
/* la traccia contiene DUE gruppi identici: si sposta di esattamente un gruppo
   (-50%), così il loop è continuo e senza scatti */
.rm-track{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:rmScroll 100s linear infinite;   /* più alto = più lento */
}
.rainbow-marquee:hover .rm-track{animation-play-state:paused}
.rm-group{display:flex;align-items:center;flex:0 0 auto}

.rm-item{
  display:inline-flex;
  align-items:center;
  gap:10.6rem;            /* spazio titolo → arcobaleno */
  margin-right:10.6rem;   /* stesso spazio arcobaleno → titolo successivo (simmetrico) */
}
/* scritta e arcobaleno sono ricavati dal logo → stile coerente */
.rm-title,.rm-rainbow{width:auto;max-width:none;display:block}
.rm-title{height:clamp(2.2rem,4.2vw,3.2rem)}   /* titolo su una riga */
.rm-rainbow{height:clamp(2.8rem,5.4vw,4rem)}   /* più lungo e alto quanto il banner */

@keyframes rmScroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

@media(prefers-reduced-motion:reduce){
  .rm-track{animation:none}
  .rainbow-marquee{-webkit-mask-image:none;mask-image:none}
}