/* SWIFTBUY MART — professional motion system */

:root {
  --sb-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sb-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sb-duration: 700ms;
  --sb-duration-fast: 280ms;
}

/* Page enter */
body.sb-ready {
  animation: sb-page-in 520ms var(--sb-ease-out) both;
}

@keyframes sb-page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Scroll reveal base */
[data-aos],
[data-animate] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity var(--sb-duration) var(--sb-ease),
    transform var(--sb-duration) var(--sb-ease);
  will-change: opacity, transform;
}

[data-aos].is-visible,
[data-animate].is-visible,
[data-aos].aos-animate {
  opacity: 1;
  transform: none;
}

[data-aos="fade-in"],
[data-animate="fade"] {
  transform: none;
}

[data-aos="fade-left"],
[data-animate="fade-left"] {
  transform: translate3d(-28px, 0, 0);
}

[data-aos="fade-right"],
[data-animate="fade-right"] {
  transform: translate3d(28px, 0, 0);
}

[data-aos="zoom-in"],
[data-animate="zoom"] {
  transform: scale(0.94);
}

[data-aos="fade-up"].is-visible,
[data-animate="fade-up"].is-visible {
  transform: translate3d(0, 0, 0);
}

/* Stagger children */
.sb-stagger > *.is-visible,
.sb-stagger > [data-aos].is-visible,
.sb-stagger > [data-animate].is-visible {
  transition-delay: calc(var(--sb-i, 0) * 70ms);
}

/* Hero image subtle ken-burns */
.sb-hero-media {
  transform: scale(1.04);
  animation: sb-kenburns 18s var(--sb-ease) infinite alternate;
  will-change: transform;
}

@keyframes sb-kenburns {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.1) translate3d(-1.5%, -1%, 0); }
}

.sb-hero-copy > * {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  animation: sb-rise 780ms var(--sb-ease-out) forwards;
}

.sb-hero-copy > *:nth-child(1) { animation-delay: 120ms; }
.sb-hero-copy > *:nth-child(2) { animation-delay: 240ms; }
.sb-hero-copy > *:nth-child(3) { animation-delay: 360ms; }

@keyframes sb-rise {
  to { opacity: 1; transform: none; }
}

/* Buttons */
.sb-btn-lift,
a.sb-btn-lift,
button.sb-btn-lift {
  transition:
    transform var(--sb-duration-fast) var(--sb-ease),
    box-shadow var(--sb-duration-fast) var(--sb-ease),
    filter var(--sb-duration-fast) var(--sb-ease),
    background-color var(--sb-duration-fast) var(--sb-ease),
    color var(--sb-duration-fast) var(--sb-ease);
}

.sb-btn-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 83, 91, 0.18);
}

.sb-btn-lift:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Product / category cards */
.sb-card-motion {
  transition:
    transform 420ms var(--sb-ease),
    box-shadow 420ms var(--sb-ease);
}

.sb-card-motion:hover {
  transform: translateY(-6px);
}

.sb-img-zoom {
  transition: transform 700ms var(--sb-ease);
}

.group:hover .sb-img-zoom,
.sb-card-motion:hover .sb-img-zoom {
  transform: scale(1.06);
}

/* Nav underline grow */
.sb-nav-link {
  position: relative;
}

.sb-nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms var(--sb-ease);
}

.sb-nav-link:hover::after,
.sb-nav-link.is-active::after {
  transform: scaleX(1);
}

/* Sticky header hide / show */
.site-header {
  transition: transform 380ms var(--sb-ease), box-shadow 380ms var(--sb-ease), background-color 380ms var(--sb-ease);
}

.site-header.is-hidden {
  transform: translateY(-110%);
}

.site-header.is-scrolled {
  box-shadow: 0 8px 24px rgba(24, 28, 29, 0.08);
}

/* Search overlay fade — keep display toggle from header styles */
.search-overlay.is-open {
  animation: sb-fade-overlay 280ms var(--sb-ease);
}

@keyframes sb-fade-overlay {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Toast polish */
#toast {
  transition: opacity 300ms var(--sb-ease), transform 300ms var(--sb-ease);
}

/* Soft floating accent (USP icons) */
.sb-float-soft {
  animation: sb-float 4.5s ease-in-out infinite;
}

@keyframes sb-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Reduce motion */
@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;
  }

  [data-aos],
  [data-animate],
  .sb-hero-copy > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .sb-hero-media {
    animation: none !important;
    transform: none !important;
  }
}