/* CamperLife — subtle motion layer (keeps layout & colors) */

:root {
  --cl-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cl-duration: 0.35s;
  --cl-duration-fast: 0.2s;
  --cl-lift-shadow: 0 10px 28px rgba(47, 87, 22, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js-motion .reveal,
  .js-motion .reveal:not(.is-visible),
  .js-motion .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
  }

  #main {
    animation: none !important;
  }
}

/* Base interactive transitions */
a,
.btn,
.btn-icon,
.btn-remove,
.nav-link,
.dropdown-item,
.icon svg,
#topbar .text-link,
#topbar .icon,
#header a svg,
#navigation ul li a,
#footer a,
.footer-socials svg.icon,
.pagination a,
.filter-panel .btn {
  transition:
    color var(--cl-duration-fast) var(--cl-ease),
    background-color var(--cl-duration-fast) var(--cl-ease),
    border-color var(--cl-duration-fast) var(--cl-ease),
    opacity var(--cl-duration-fast) var(--cl-ease),
    transform var(--cl-duration-fast) var(--cl-ease),
    box-shadow var(--cl-duration) var(--cl-ease);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn-primary,
.btn-secondary {
  transition:
    color var(--cl-duration-fast) var(--cl-ease),
    background-color var(--cl-duration-fast) var(--cl-ease),
    border-color var(--cl-duration-fast) var(--cl-ease),
    transform var(--cl-duration-fast) var(--cl-ease),
    box-shadow var(--cl-duration) var(--cl-ease);
}

.btn-primary:hover,
.btn-secondary:hover {
  box-shadow: 0 6px 16px rgba(218, 51, 51, 0.28);
}

.btn-icon:hover svg,
.section-controls .btn-icon:hover svg {
  transform: scale(1.08);
}

.btn-icon svg,
.section-controls .btn-icon svg {
  transition:
    color var(--cl-duration-fast) var(--cl-ease),
    transform var(--cl-duration-fast) var(--cl-ease);
}

/* Logo */
.site-logo {
  transition: opacity var(--cl-duration-fast) var(--cl-ease);
}

.site-logo:hover {
  opacity: 0.88;
}

/* Navigation */
#navigation ul li a {
  position: relative;
}

#navigation .navbar-nav > li > a::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.35rem;
  height: 2px;
  background-color: #da3333;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--cl-duration) var(--cl-ease);
}

#navigation .navbar-nav > li > a:hover::after,
#navigation .navbar-nav > li > a.active::after {
  transform: scaleX(1);
}

.categories-nav .nav-link {
  transition:
    background-color var(--cl-duration-fast) var(--cl-ease),
    color var(--cl-duration-fast) var(--cl-ease),
    padding-left var(--cl-duration-fast) var(--cl-ease);
}

.categories-nav .navbar-nav > .nav-item > .nav-link:hover {
  padding-left: 1.75rem;
}

/* Product cards */
.product-card {
  transition:
    transform var(--cl-duration) var(--cl-ease),
    box-shadow var(--cl-duration) var(--cl-ease),
    border-color var(--cl-duration) var(--cl-ease);
}

.product-card .image {
  overflow: hidden;
}

.product-card .image img {
  transition: transform 0.55s var(--cl-ease);
}

.product-card .info,
.product-card .name,
.product-card .btn {
  transition:
    color var(--cl-duration-fast) var(--cl-ease),
    background-color var(--cl-duration-fast) var(--cl-ease),
    border-color var(--cl-duration-fast) var(--cl-ease),
    transform var(--cl-duration-fast) var(--cl-ease),
    box-shadow var(--cl-duration) var(--cl-ease);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--cl-lift-shadow);
  border-color: #cfcfcf;
}

.product-card:hover .image img {
  transform: scale(1.05);
}

.product-card.border-0:hover {
  border-color: transparent;
}

/* Category cards */
.category-card {
  transition:
    transform var(--cl-duration) var(--cl-ease),
    box-shadow var(--cl-duration) var(--cl-ease),
    border-color var(--cl-duration) var(--cl-ease);
}

.category-card .image {
  overflow: hidden;
}

.category-card .image img {
  transition: transform 0.55s var(--cl-ease);
}

.category-card .btn {
  transition:
    color var(--cl-duration-fast) var(--cl-ease),
    background-color var(--cl-duration-fast) var(--cl-ease),
    border-color var(--cl-duration-fast) var(--cl-ease),
    box-shadow var(--cl-duration) var(--cl-ease),
    transform var(--cl-duration-fast) var(--cl-ease);
}

.category-card .btn::after {
  transition: transform var(--cl-duration-fast) var(--cl-ease);
}

.category-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--cl-lift-shadow);
}

.category-card:hover .image img {
  transform: scale(1.04);
}

.category-card:hover .btn::after {
  transform: translateX(3px);
}

/* Banners */
.banner {
  overflow: hidden;
}

.banner img {
  position: relative;
  z-index: 0;
  transition: transform 0.7s var(--cl-ease);
}

.banner .banner-content {
  z-index: 2;
}

.banner .title,
.banner .btn {
  position: relative;
  z-index: 2;
  transition:
    color var(--cl-duration-fast) var(--cl-ease),
    background-color var(--cl-duration-fast) var(--cl-ease),
    border-color var(--cl-duration-fast) var(--cl-ease),
    transform var(--cl-duration) var(--cl-ease),
    box-shadow var(--cl-duration) var(--cl-ease);
}

.banner:hover img {
  transform: scale(1.04);
}

.banner:hover .title {
  transform: translateY(-2px);
}

/* Home slider — keep image framed; avoid cover overflow that clips width */

#home-slider .slider-content .title,
#home-slider .slider-content .subtitle {
  transition: opacity 0.45s var(--cl-ease), transform 0.45s var(--cl-ease);
}

#home-slider .swiper-slide-active .slider-content .title,
#home-slider .swiper-slide-active .slider-content .subtitle {
  animation: cl-fade-up 0.6s var(--cl-ease) both;
}

#home-slider .swiper-slide-active .slider-content .subtitle {
  animation-delay: 0.1s;
}

@keyframes cl-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Filter sidebar */
aside .section,
.filter-panel .section {
  transition:
    border-color var(--cl-duration) var(--cl-ease),
    box-shadow var(--cl-duration) var(--cl-ease);
}

aside .section:hover,
.filter-panel .section:hover {
  border-color: #cfcfcf;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

/* Product thumbs / gallery */
.single-product .image-additional img {
  transition:
    opacity var(--cl-duration-fast) var(--cl-ease),
    transform var(--cl-duration-fast) var(--cl-ease),
    border-color var(--cl-duration-fast) var(--cl-ease);
}

.single-product .image-additional img:hover {
  transform: scale(1.03);
}

.single-product .image img {
  transition: opacity 0.25s var(--cl-ease);
}

/* Quantity + cart icons */
.quantity-select .btn-quantity {
  transition:
    color var(--cl-duration-fast) var(--cl-ease),
    transform var(--cl-duration-fast) var(--cl-ease);
}

.quantity-select .btn-quantity:hover {
  transform: scale(1.12);
}

#mini-cart .js-mini-cart-btn,
#header .icon {
  transition: transform var(--cl-duration-fast) var(--cl-ease);
}

#header .js-mini-cart-btn:hover .icon,
#header a:hover .icon {
  transform: translateY(-1px);
}

/* Footer socials */
.footer-socials a {
  display: inline-flex;
}

.footer-socials svg.icon {
  transition:
    color var(--cl-duration-fast) var(--cl-ease),
    transform var(--cl-duration) var(--cl-ease);
}

.footer-socials a:hover svg.icon {
  transform: translateY(-3px) scale(1.06);
}

.footer-contacts .icon {
  transition:
    transform var(--cl-duration) var(--cl-ease),
    background-color var(--cl-duration) var(--cl-ease);
}

.footer-contacts > .d-flex:hover .icon {
  transform: scale(1.08);
}

/* Scroll reveals — only animate once JS marks elements ready */
.js-motion .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(18px);
}

.js-motion .reveal {
  transition:
    opacity 0.65s var(--cl-ease),
    transform 0.65s var(--cl-ease);
  will-change: opacity, transform;
}

.js-motion .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-delay-1 {
  transition-delay: 0.08s;
}

.reveal-delay-2 {
  transition-delay: 0.16s;
}

.reveal-delay-3 {
  transition-delay: 0.24s;
}

.reveal-delay-4 {
  transition-delay: 0.32s;
}

/* Soft page entrance for main content */
#main {
  animation: cl-page-in 0.45s var(--cl-ease) both;
}

@keyframes cl-page-in {
  from {
    opacity: 0.01;
  }
  to {
    opacity: 1;
  }
}