/* Sustable motion & scroll effects design system */

/* ------------------------------------------------------------------
   Scroll reveal
   ------------------------------------------------------------------ */
.su-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

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

/* ------------------------------------------------------------------
   Hero load animation
   ------------------------------------------------------------------ */
@keyframes su-heroIn {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.su-hero-animate > .su-eyebrow,
.su-hero-animate > .su-hero__title,
.su-hero-animate > .su-hero__text,
.su-hero-animate > .su-hero__actions,
.su-hero-animate > .su-business-hero__badges,
.su-hero-animate > .su-business-hero__actions {
  opacity: 0;
  animation: su-heroIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.su-hero-animate > .su-eyebrow {
  animation-delay: 0s;
}

.su-hero-animate > .su-hero__title,
.su-hero-animate > .su-business-hero__badges {
  animation-delay: 0.12s;
}

.su-hero-animate > .su-hero__text,
.su-hero-animate > .su-hero__actions,
.su-hero-animate > .su-business-hero__actions {
  animation-delay: 0.24s;
}

/* ------------------------------------------------------------------
   Shimmer text effect
   ------------------------------------------------------------------ */
@keyframes su-shimmer {
  0% {
    background-position: 140% 0;
  }
  100% {
    background-position: -40% 0;
  }
}

.su-shimmer {
  display: inline;
  background: linear-gradient(
    90deg,
    var(--su-orange) 40%,
    #ffbd6e 50%,
    var(--su-orange) 60%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: su-shimmer 4.5s linear infinite;
}

/* ------------------------------------------------------------------
   Header scroll elevation
   ------------------------------------------------------------------ */
.su-site-header {
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.su-site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* ------------------------------------------------------------------
   Scroll progress bar
   ------------------------------------------------------------------ */
#su-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--su-orange), #ffbd6e);
  transform-origin: left;
  transform: scaleX(0);
  pointer-events: none;
}

/* ------------------------------------------------------------------
   Hover micro-motions
   ------------------------------------------------------------------ */
.su-button,
.su-site-header__cart,
.su-site-header__shop {
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.su-button:hover,
.su-site-header__cart:hover,
.su-site-header__shop:hover {
  transform: translateY(-2px);
}

.su-card--hover-lift,
.su-benefit-card,
.su-product-card,
.su-blog-card,
.su-blog-featured,
.su-dealer-card,
.su-contact-card {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.su-card--hover-lift:hover,
.su-benefit-card:hover,
.su-product-card:hover,
.su-blog-card:hover,
.su-blog-featured:hover,
.su-dealer-card:hover,
.su-contact-card:hover {
  transform: translateY(-6px);
}

.su-product-card__image,
.su-blog-card img,
.su-blog-featured img,
.su-featured-product__media,
.su-info-hero__media,
.su-info-row__media,
.su-card-hover-zoom {
  overflow: hidden;
}

.su-product-card__image img,
.su-blog-card img,
.su-blog-featured img,
.su-featured-product__media img,
.su-info-hero__media img,
.su-info-row__media img,
.su-card-hover-zoom img {
  transition: transform 0.5s ease;
}

.su-product-card:hover .su-product-card__image img,
.su-blog-card:hover img,
.su-blog-featured:hover img,
.su-featured-product:hover .su-featured-product__media img,
.su-info-hero:hover .su-info-hero__media img,
.su-info-row:hover .su-info-row__media img,
.su-card-hover-zoom:hover img {
  transform: scale(1.04);
}

/* ------------------------------------------------------------------
   FAQ accordion icon rotation
   ------------------------------------------------------------------ */
.su-faq-item summary {
  transition: color 0.15s ease;
}

.su-faq-item summary::after {
  display: inline-block;
  content: "+";
  font-size: 22px;
  font-weight: 500;
  transition: transform 0.15s ease;
}

.su-faq-item[open] summary::after {
  transform: rotate(45deg);
}

/* ------------------------------------------------------------------
   Toast notification
   ------------------------------------------------------------------ */
@keyframes su-toastIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes su-toastOut {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
}

.su-toast {
  animation: su-toastIn 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.su-toast.is-hiding {
  animation: su-toastOut 0.25s ease forwards;
}

@media (max-width: 760px) {
  .su-toast {
    animation-name: su-toastInTop;
  }

  .su-toast.is-hiding {
    animation-name: su-toastOutTop;
  }
}

@keyframes su-toastInTop {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes su-toastOutTop {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
}

/* ------------------------------------------------------------------
   Checkout step transitions
   ------------------------------------------------------------------ */
.su-checkout__step-panel {
  animation: su-fadeIn 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes su-fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------------
   Cart row transitions
   ------------------------------------------------------------------ */
.su-cart__row {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.su-cart__row.is-removing {
  opacity: 0;
  transform: translateX(-12px);
}

/* ------------------------------------------------------------------
   Reduced motion (frontend only)
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .su-reveal,
  .su-hero-animate > .su-eyebrow,
  .su-hero-animate > .su-hero__title,
  .su-hero-animate > .su-hero__text,
  .su-hero-animate > .su-hero__actions,
  .su-hero-animate > .su-business-hero__badges,
  .su-hero-animate > .su-business-hero__actions {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  .su-shimmer {
    background: none !important;
    color: var(--su-orange) !important;
    animation: none !important;
  }

  #su-scroll-progress {
    display: none !important;
  }

  .su-toast,
  .su-checkout__step-panel,
  .su-cart__row {
    animation: none !important;
    transition: none !important;
  }
}