/* Kaira-style scroll animations (works with AOS .aos-animate) */

/* Reveal from bottom clip */
.swipe-up {
  clip-path: inset(0 0 100% 0);
  display: block;
}

.aos-animate .swipe-up {
  animation: 1s swipe-up forwards;
}

@keyframes swipe-up {
  0% { clip-path: inset(0 0 100% 0); }
  100% { clip-path: inset(0); }
}

/* Zoom-open clip reveal (only after AOS marks element visible) */
.open-up {
  clip-path: inset(0);
}

.aos-animate.open-up {
  clip-path: inset(48% 34% 36% 35%);
  animation: 1s open-up forwards;
}

@keyframes open-up {
  0% { clip-path: inset(48% 34% 36% 35%); }
  100% { clip-path: inset(0% 0% 0% 0%); }
}

/* Image hover zoom */
.image-zoom-effect {
  display: block;
}

.image-zoom-effect .image-holder {
  width: 100%;
  overflow: hidden;
  transform: scale(1);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.image-zoom-effect:hover .image-holder {
  transform: scale(0.95);
}

.image-zoom-effect img {
  transform: scale(1);
  will-change: transform;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.image-zoom-effect:hover img {
  transform: scale(1.08);
}

/* Category cards */
.category-item.image-zoom-effect img {
  border-radius: 12px;
}

/* Staggered product scroll items */
.product-scroll-item[data-aos] {
  flex: 0 0 auto;
}

/* Link underline on hover (Kaira border-animation) */
.border-animation a {
  position: relative;
  display: inline-flex;
  align-items: center;
  transition: color 0.3s ease;
}

.border-animation a::after {
  display: none;
}

.border-animation a:hover::after {
  width: 0;
}

/* ─── Hero banner swiper (Kaira slide-in + slide-clip + fade) ─── */
.hero-banner-swiper .swiper-slide {
  overflow: hidden;
}

/* Banner boxes match admin recommended sizes: hero 1920×1080 (16:9), offer 900×600 (3:2) */
.hero-banner-ad {
  aspect-ratio: 16 / 9;
  width: 100%;
  min-height: 0;
}

.hero-banner-ad .hero-banner-swiper {
  width: 100%;
  height: 100%;
}

.hero-banner-ad .swiper-wrapper,
.hero-banner-ad .swiper-slide {
  height: 100%;
  min-height: 0;
}

.hero-banner-ad .hero-slide-cover {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #eef1f4;
}

.banner-bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center center;
}

.hero-slide-cover .banner-content {
  position: relative;
  z-index: 1;
}

.hero-banner-ad .hero-slide-text,
.banner-offer-ad .offer-slide-text {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(1px);
  border-radius: 12px;
  padding: 1.25rem;
}

.hero-banner-swiper.fade-in .swiper-slide .content-wrapper {
  opacity: 0;
  transition: opacity 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 0.25s;
}

.hero-banner-swiper.fade-in .swiper-slide.swiper-slide-active .content-wrapper {
  opacity: 1;
}

.hero-banner-swiper.slide-in .swiper-slide .banner-animate-item {
  display: block;
  opacity: 0;
  transform: translate3d(0, 48px, 0);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-banner-swiper.slide-in .swiper-slide .content-wrapper .categories {
  transition-delay: 0.15s;
}

.hero-banner-swiper.slide-in .swiper-slide .content-wrapper .display-5 {
  transition-delay: 0.35s;
}

.hero-banner-swiper.slide-in .swiper-slide .content-wrapper p {
  transition-delay: 0.55s;
}

.hero-banner-swiper.slide-in .swiper-slide .content-wrapper .btn {
  transition-delay: 0.75s;
}

.hero-banner-swiper.slide-in .swiper-slide.swiper-slide-active .banner-animate-item {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.hero-banner-swiper.slide-clip .image-holder {
  clip-path: inset(100% 0 0 0);
  display: block;
  overflow: hidden;
  border-radius: 12px;
}

.hero-banner-swiper.slide-clip .image-holder img {
  transform: scale(1.15);
  transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-banner-swiper.slide-clip .swiper-slide.swiper-slide-active .image-holder {
  animation: banner-slide-clip 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-banner-swiper.slide-clip .swiper-slide.swiper-slide-active .image-holder img {
  transform: scale(1);
}

.hero-banner-swiper.slide-clip .swiper-slide.swiper-slide-prev .image-holder,
.hero-banner-swiper.slide-clip .swiper-slide.swiper-slide-next .image-holder {
  animation: banner-slide-down 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes banner-slide-clip {
  0% { clip-path: inset(100% 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

@keyframes banner-slide-down {
  0% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(100% 0 0 0); }
}

/* Hero image: hover zoom-out frame + zoom-in photo (Kaira) */
.banner-ad.large .image-zoom-effect .image-holder {
  border-radius: 12px;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.banner-ad.large .image-zoom-effect:hover .image-holder {
  transform: scale(0.92);
}

.banner-ad.large .image-zoom-effect img {
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.banner-ad.large .image-zoom-effect:hover img {
  transform: scale(1.12);
}

/* Fade between hero slides */
.hero-banner-swiper.swiper-fade .swiper-slide {
  transition-property: opacity !important;
}

/* ─── Side offer banner (single, full height beside hero) ─── */
.banner-offer-ad {
  aspect-ratio: 3 / 2;
  width: 100%;
  min-height: 0;
  background-color: #eef1f4;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.banner-offer-ad.block-2 {
  aspect-ratio: auto;
  height: 100%;
  align-self: stretch;
}

.banner-offer-ad .banner-bg-image {
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.banner-offer-ad:hover {
  transform: scale(0.99);
}

.banner-offer-ad:hover .banner-bg-image {
  transform: scale(1.02);
}

.banner-offer-ad .banner-content {
  position: relative;
  z-index: 2;
}

.banner-offer-ad .banner-animate-item {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.banner-offer-ad.aos-animate .banner-animate-item,
.banner-offer-ad.banner-offer-visible .banner-animate-item {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.banner-offer-ad .categories.sale { transition-delay: 0.1s; }
.banner-offer-ad .banner-title { transition-delay: 0.25s; }
.banner-offer-ad p { transition-delay: 0.4s; }
.banner-offer-ad .border-animation.banner-animate-item {
  display: block;
  transition-delay: 0.55s;
}

/* Hero grid: no clip-path reveal (above the fold; AOS + open-up can leave it cropped on live hosts) */
.banner-blocks-entrance,
.banner-blocks-entrance.open-up,
.banner-blocks-entrance.aos-animate,
.banner-blocks-entrance.aos-animate.open-up {
  clip-path: none !important;
  animation: none !important;
}

/* Before AOS boots: keep page visible (no blank screen) */
html.aos-pending [data-aos] {
  opacity: 1 !important;
  transform: none !important;
}

html.aos-pending .open-up,
html.aos-pending .banner-blocks-entrance.open-up {
  clip-path: inset(0) !important;
  animation: none !important;
}

/* CDN / script failure fallback */
body.no-aos [data-aos] {
  opacity: 1 !important;
  transform: none !important;
}

body.no-aos .open-up,
body.no-aos .banner-blocks-entrance {
  clip-path: inset(0) !important;
  animation: none !important;
}

/* Kaira-style scroll reveal polish */
[data-aos].aos-animate {
  will-change: transform, opacity;
}

.section-categories,
.section-trending,
.section-featured,
.section-testimonials,
.section-footer {
  overflow-x: hidden;
}

.hero-banner-swiper:not(.swiper-initialized) .banner-animate-item,
.hero-banner-swiper:not(.swiper-initialized) .content-wrapper,
body.no-aos .hero-banner-swiper .banner-animate-item,
body.no-aos .hero-banner-swiper .content-wrapper {
  opacity: 1 !important;
  transform: none !important;
}

.hero-banner-swiper:not(.swiper-initialized) .image-holder,
body.no-aos .hero-banner-swiper .image-holder {
  clip-path: inset(0) !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero-banner-swiper.slide-in .banner-animate-item,
  .banner-offer-ad .banner-animate-item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-banner-swiper.slide-clip .image-holder {
    clip-path: none;
    animation: none;
  }

  .banner-offer-ad:hover {
    transform: none;
  }

  .banner-offer-ad:hover .banner-bg-image {
    transform: none;
  }

  .open-up,
  .aos-animate.open-up {
    clip-path: none;
    animation: none;
  }
}

@media (max-width: 991.98px) {
  .hero-banner-ad .hero-slide-text,
  .banner-offer-ad .offer-slide-text {
    background: rgba(255, 255, 255, 0.84);
    padding: 1rem;
  }
}