/* The category cards have their own scroll scene; their links remain ordinary links. */
body[data-page="home"] .repertoire.repertoire-sequence {
  overflow:clip;
}
body[data-page="home"] .repertoire.repertoire-sequence .genre-card {
  opacity:var(--mood-opacity,1)!important;
  transform:translate3d(var(--mood-x,0px),0,0)!important;
  transition:none!important;
  will-change:transform,opacity;
}
/* Keyboard focus must never land on an invisible link. */
body[data-page="home"] .repertoire.repertoire-sequence:focus-within .genre-card {
  opacity:1!important;
  transform:none!important;
}

/* On a roomy desktop, hold the full section while the three cards arrive. */
@media (min-width:901px) and (min-height:740px) and (prefers-reduced-motion:no-preference) {
  body[data-page="home"] .repertoire.repertoire-sequence {
    display:block;
    min-height:240svh;
    padding:0!important;
  }
  body[data-page="home"] .repertoire.repertoire-sequence .mood-stage {
    position:sticky;
    top:0;
    min-height:100svh;
    padding:clamp(96px,10vh,150px) clamp(24px,6.1vw,120px);
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
}
/* Keep normal document flow on small screens; each arriving card has its own
   scroll position instead of forcing a tall stack into a pinned viewport. */
@media (max-width:900px), (max-height:739px) {
  body[data-page="home"] .repertoire.repertoire-sequence .mood-stage {width:100%}
}
@media (prefers-reduced-motion:reduce) {
  body[data-page="home"] .repertoire.repertoire-sequence .genre-card {
    opacity:1!important;
    transform:none!important;
    will-change:auto;
  }
}