@charset "UTF-8";
/**
 * YH-UI Sass Variables
 * 原具体的 CSS 变量输出规则 (:root, html.dark 等) 已移至 root.scss，以防止各组件样式编译时产生重复的全局变量 CSS 冗余。
 */
.yh-carousel {
  --yh-carousel-dot-color: rgba(255, 255, 255, 0.4);
  --yh-carousel-dot-active-color: #ffffff;
  --yh-carousel-dot-size: 8px;
  --yh-carousel-dot-active-width: 24px;
  --yh-carousel-arrow-bg: rgba(255, 255, 255, 0.2);
  --yh-carousel-arrow-hover-bg: rgba(255, 255, 255, 0.35);
  --yh-carousel-arrow-color: #ffffff;
  --yh-carousel-arrow-size: 36px;
  --yh-carousel-arrow-icon-size: 20px;
  --yh-carousel-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  user-select: none;
  background-color: transparent;
}
.yh-carousel__slides {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  transition-timing-function: var(--yh-carousel-transition-timing);
  will-change: transform;
}
.yh-carousel__slides.is-vertical {
  flex-direction: column;
}

.yh-carousel__dots {
  position: absolute;
  z-index: 20;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 12px;
  pointer-events: none;
}
.yh-carousel__dots--bottom {
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
}

.yh-carousel__dots--top {
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
}

.yh-carousel__dots--left {
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
}

.yh-carousel__dots--right {
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
}

.yh-carousel__dots--inner-bottom {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.yh-carousel__dots--inner-top {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.yh-carousel__dots--inner-left {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
}

.yh-carousel__dots--inner-right {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
}

.yh-carousel__dots-item {
  width: var(--yh-carousel-dot-size);
  height: var(--yh-carousel-dot-size);
  border-radius: calc(var(--yh-carousel-dot-size) / 2);
  background-color: var(--yh-carousel-dot-color);
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.3s var(--yh-carousel-transition-timing);
}
.yh-carousel__dots-item:hover {
  background-color: var(--yh-carousel-dot-active-color);
  opacity: 0.8;
}
.yh-carousel__dots-item.is-active {
  width: var(--yh-carousel-dot-active-width);
  background-color: var(--yh-carousel-dot-active-color);
}

.yh-carousel {
  --yh-carousel-arrow-zone: 52px;
}
.yh-carousel:not(.yh-carousel--vertical).has-arrow.dots-at-left .yh-carousel__arrow--prev {
  left: var(--yh-carousel-arrow-zone);
}
.yh-carousel:not(.yh-carousel--vertical).has-arrow.dots-at-right .yh-carousel__arrow--next {
  right: var(--yh-carousel-arrow-zone);
}
.yh-carousel__arrow {
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--yh-carousel-arrow-size);
  height: var(--yh-carousel-arrow-size);
  border-radius: 50%;
  background-color: var(--yh-carousel-arrow-bg);
  color: var(--yh-carousel-arrow-color);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
  opacity: 0;
  --arrow-inset: 20px;
}
.yh-carousel__arrow:hover {
  background-color: var(--yh-carousel-arrow-hover-bg);
  /* 不添加 transform，避免横向/纵向箭头 hover 时出现下移或位移 */
}
.yh-carousel__arrow--prev {
  left: var(--arrow-inset);
  top: 50%;
  transform: translateY(-50%);
}

.yh-carousel__arrow--next {
  right: var(--arrow-inset);
  top: 50%;
  transform: translateY(-50%);
}

.yh-carousel__arrow.is-visible {
  opacity: 1;
}

.yh-carousel__arrow-icon {
  width: var(--yh-carousel-arrow-icon-size);
  height: var(--yh-carousel-arrow-icon-size);
  flex-shrink: 0;
}

.yh-carousel.yh-carousel--vertical .yh-carousel__arrow--prev {
  left: 50%;
  right: auto;
  top: var(--arrow-inset, 20px);
  bottom: auto;
  transform: translateX(-50%);
}
.yh-carousel.yh-carousel--vertical .yh-carousel__arrow--next {
  left: 50%;
  right: auto;
  top: auto;
  bottom: var(--arrow-inset, 20px);
  transform: translateX(-50%);
}
.yh-carousel.yh-carousel--vertical.has-arrow.dots-at-top .yh-carousel__arrow--prev {
  top: var(--yh-carousel-arrow-zone);
}
.yh-carousel.yh-carousel--vertical.has-arrow.dots-at-bottom .yh-carousel__arrow--next {
  bottom: var(--yh-carousel-arrow-zone);
}
.yh-carousel.yh-carousel--vertical .yh-carousel__arrow--prev:hover,
.yh-carousel.yh-carousel--vertical .yh-carousel__arrow--next:hover {
  /* 仅背景色变化，无位移/缩放 */
  transform: translateX(-50%);
}
.yh-carousel.yh-carousel--vertical .yh-carousel__arrow--prev .yh-carousel__arrow-icon {
  transform: rotate(-90deg); /* 左箭头逆时针90° → 指向上 */
}
.yh-carousel.yh-carousel--vertical .yh-carousel__arrow--next .yh-carousel__arrow-icon {
  transform: rotate(-90deg); /* 右箭头逆时针90° → 指向下 */
}
.yh-carousel:hover .yh-carousel__arrow--hover {
  opacity: 1;
}
.yh-carousel:hover .yh-carousel__arrow--hover.yh-carousel-arrow--prev {
  transform: translateY(-50%) translateX(0);
}
.yh-carousel:hover .yh-carousel__arrow--hover.yh-carousel-arrow--next {
  transform: translateY(-50%) translateX(0);
}

.yh-carousel__arrow-always {
  opacity: 1;
}
.yh-carousel__arrow-always--prev {
  transform: translateY(-50%) translateX(0);
}

.yh-carousel__arrow-always--next {
  transform: translateY(-50%) translateX(0);
}

.yh-carousel-item {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.yh-carousel-item.is-fade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  transition: opacity var(--yh-carousel-transition-timing);
}
.yh-carousel-item.is-fade.is-active {
  opacity: 1;
  z-index: 2;
}

.yh-carousel-item.is-card {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.4s var(--yh-carousel-transition-timing), opacity 0.4s ease;
  opacity: 0;
  z-index: 1;
}
.yh-carousel-item.is-card.is-in-stage {
  opacity: 1;
  z-index: 2;
  cursor: pointer;
}

.yh-carousel-item.is-card.is-active {
  z-index: 10;
}