/* MOONCRYS homepage hero carousel — hero poster + seasonal poster as swipeable slides.
   Scoped to .hero-carousel (homepage only). With a single slide it degrades to a
   plain hero: no dots, no autoplay, no swipe. */
.hero-carousel { position: relative; overflow: hidden; }
.hero-track {
  display: flex;
  transition: transform .45s ease;
  will-change: transform;
  touch-action: pan-y;
  cursor: grab;
}
.hero-track:active { cursor: grabbing; }
.hero-carousel.no-anim .hero-track { transition: none; }
.hero-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.hero-slide > section { flex: 1 1 auto; }
/* Pre-init gate: until the carousel JS has initialised and added .ready
   to the track, hide every slide after the first. This keeps the 2nd
   (seasonal) poster from flashing stacked under the hero on first paint,
   before the deferred scripts run. A single slide is never hidden, so
   the post-season single-hero degradation is unaffected. */
.hero-track .hero-slide:nth-child(n+2) { display: none; }
.hero-track.ready .hero-slide:nth-child(n+2) { display: flex; }
/* Slides stretch to the tallest one; let the hero fill the track height. */
.hero-carousel .hero-slide > .hero { height: auto; min-height: 210px; }
.hero-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 0 14px;
}
.hero-dots[hidden] { display: none; }
.hero-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: #d8cfc2;
}
.hero-dots button[aria-current="true"] { background: var(--acc, #8a6f4f); }
.hero-dots button:focus-visible { outline: 2px solid var(--acc, #8a6f4f); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .hero-track { transition: none; }
}