/* ==========================================================================
   Component 001: Hero Slider
   ========================================================================== */

/* Hero section container */
:where(.s-001-hero) {
  position: relative;
  width: 100%;
  margin-bottom: 0;
  overflow: hidden;
}

/* Hero track (marquee container) */
:where(.c-001-hero__track) {
  display: flex;
  height: 100%;
  animation: hero-marquee var(--hero-marquee-speed, 30s) linear infinite;
  will-change: transform;
}

/* Marquee animation */
@keyframes hero-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Hero item */
:where(.c-001-hero__item) {
  flex-shrink: 0;
  width: calc(100vw / 3);
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Hero item image */
:where(.c-001-hero__item picture) {
  display: block;
  width: 100%;
  height: 100%;
}

:where(.c-001-hero__item img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Image overlay effect */
:where(.c-001-hero__item.image-overlay::after) {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}