/* Slide wrappers isolate fades from theme-specific image opacity. */
.hero-visuals, .hero-slide { position: absolute; inset: 0; pointer-events: none; }
.hero-slide { opacity: 0; transition: opacity 900ms ease; }
.hero-slide.is-active { opacity: 1; }
.hero-slide .hero-art { inset: 0; }
.hero-carousel-controls {
  position: absolute;
  z-index: 4;
  inset-inline-end: 22px;
  bottom: 13px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 6px;
  border: 1px solid #dccaff29;
  border-radius: 999px;
  background: #171020a8;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #efddff;
}
.hero-carousel-controls[hidden] { display: none; }
.hero-carousel-dots { display: flex; gap: 1px; }
.hero-carousel-controls button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.hero-carousel-controls button:hover { background: #e2caff1a; }
.hero-carousel-controls button:focus-visible { outline: 2px solid #dabdff; outline-offset: 1px; }
.hero-carousel-controls button:disabled { opacity: .3; cursor: default; }
.hero-carousel-dots button::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 8px;
  background: #d2c1e6a3;
  transition: width 300ms ease, background 300ms ease;
}
.hero-carousel-dots button[aria-pressed="true"]::before { width: 22px; background: #d2b3ff; }
.hero-carousel-count { min-width: 37px; font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: .6px; }
.hero-carousel-controls svg { width: 14px; height: 14px; fill: currentColor; }
.hero-carousel-toggle .hero-play { display: none; }
.hero-carousel-toggle[aria-pressed="true"] .hero-play { display: block; }
.hero-carousel-toggle[aria-pressed="true"] .hero-pause { display: none; }
.theme-hybrid .hero-feature[data-hero-carousel] .hero-game { bottom: 66px; }
@media (max-width: 640px) {
  .theme-hybrid .hero-feature[data-hero-carousel] .hero-content { padding-bottom: 66px; }
  .hero-carousel-controls { inset-inline-end: 15px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-carousel-dots button::before { transition: none; }
}