/**
 * Hero Featured Products Styles
 * 
 * @package ZOKZOK
 */

/* Carouselのoverflowを解除 */
.zok-featured-slider {
  margin-top: -4rem;
  padding-top: 4rem;
}

#zokzokHeroCarousel.carousel {
  overflow: visible;
  min-height: 50vh;
}

#zokzokHeroCarousel .carousel-inner {
  overflow: visible;
  min-height: 50vh;
}

#zokzokHeroCarousel .carousel-item {
  min-height: 50vh;
  transition: none !important;
}

#zokzokHeroCarousel .carousel-item.active {
  transition: none !important;
}

/* Mobile: 20vh */
@media (max-width: 767px) {
  #zokzokHeroCarousel.carousel {
    min-height: 20vh;
  }
  
  #zokzokHeroCarousel .carousel-inner {
    min-height: 20vh;
  }
  
  #zokzokHeroCarousel .carousel-item {
    min-height: 20vh;
  }
}

/* Poem text wrapping */
.zok-featured-poem {
  text-wrap: pretty !important;
  word-break: auto-phrase !important;
}

@keyframes zokZoomIn {
  from {
    opacity: 0;
    transform: scale(0.9);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes zokFadeLeft {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes zokFadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes zokFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.zok-carousel-image,
.zok-carousel-poem,
.zok-carousel-info {
  opacity: 0;
}

.carousel-item.active .zok-carousel-image {
  animation: zokZoomIn 0.8s ease-out forwards;
}

.carousel-item.active .zok-carousel-poem {
  animation: zokFadeLeft 0.8s ease-out 0.2s forwards;
}

.carousel-item.active .zok-carousel-info {
  animation: zokFadeUp 1.2s ease-out 2.4s forwards;
}

/* Mobile: md以下は情報表示のディレイ0.6s */
@media (max-width: 991px) {
  .carousel-item.active .zok-carousel-info {
    animation: zokFadeUp 1.2s ease-out 0.6s forwards;
  }
}