/* Shared storefront interaction polish */

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

@keyframes sfSoftGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(49, 224, 123, 0);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(49, 224, 123, 0.1);
  }
}

.sf-header,
.sf-section,
.sf-page-hero,
.sp-main,
.sf-banner,
.sf-hero-content {
  animation: sfFadeInUp 0.55s ease both;
}

.sf-nav a,
.sf-mobile-nav a,
.sf-btn-primary,
.sf-btn-secondary,
.sf-cart-btn,
.sf-add-btn,
.sf-view-all,
.sf-cat-card,
.sf-prod-card,
.sf-hero-card,
.sf-banner,
.sf-timer-box,
.sp-back-btn,
.sf-btn,
button,
[role="button"] {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, color 0.22s ease, background-color 0.22s ease;
}

.sf-nav a:hover,
.sf-mobile-nav a:hover {
  transform: translateY(-2px);
}

.sf-btn-primary:hover,
.sf-btn-secondary:hover,
.sp-back-btn:hover,
.sf-cart-btn:hover,
.sf-add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(6, 18, 34, 0.35);
}

.sf-btn-primary:focus-visible,
.sf-btn-secondary:focus-visible,
.sf-add-btn:focus-visible,
.sf-cart-btn:focus-visible,
.sp-back-btn:focus-visible,
.sf-nav a:focus-visible,
.sf-mobile-nav a:focus-visible {
  animation: sfSoftGlow 0.9s ease;
  outline: 2px solid rgba(49, 224, 123, 0.55);
  outline-offset: 2px;
}

.sf-cat-card:hover,
.sf-prod-card:hover,
.sf-hero-card:hover,
.sf-banner:hover,
.sf-contact-card:hover,
.sf-info-card:hover,
.sf-team-card:hover,
.sp-body blockquote:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 30px rgba(5, 14, 28, 0.36);
}

.sf-prod-img,
.sf-hero-card-img,
.sf-logo-icon,
.sf-cat-icon,
.sf-icon {
  transition: transform 0.3s ease, filter 0.3s ease;
}

.sf-prod-card:hover .sf-prod-img,
.sf-hero-card:hover .sf-hero-card-img,
.sf-logo:hover .sf-logo-icon,
.sf-cat-card:hover .sf-cat-icon,
.sf-contact-card:hover .sf-icon {
  transform: scale(1.06);
  filter: saturate(1.08);
}

.sf-hero-title,
.sf-page-title,
.sp-title,
.sf-section-title {
  text-shadow: 0 8px 24px rgba(2, 8, 16, 0.35);
}

.sf-hero-subtitle,
.sf-page-subtitle,
.sf-banner-sub,
.sp-body,
.sf-prod-rating,
.sf-cat-count,
.sf-stat span {
  color: #a9bdd5;
}

@media (prefers-reduced-motion: reduce) {
  .sf-header,
  .sf-section,
  .sf-page-hero,
  .sp-main,
  .sf-banner,
  .sf-hero-content {
    animation: none;
  }

  .sf-nav a,
  .sf-mobile-nav a,
  .sf-btn-primary,
  .sf-btn-secondary,
  .sf-cart-btn,
  .sf-add-btn,
  .sf-view-all,
  .sf-cat-card,
  .sf-prod-card,
  .sf-hero-card,
  .sf-banner,
  .sf-timer-box,
  .sp-back-btn,
  .sf-btn,
  button,
  [role="button"] {
    transition: none;
  }
}

/* Global hover layer for storefront */
@media (hover: hover) and (pointer: fine) {
  a,
  button,
  .sf-btn-primary,
  .sf-btn-secondary,
  .sf-btn,
  .sf-cart-btn,
  .sf-add-btn,
  .sf-view-all,
  .sf-social-btn,
  .sf-cat-card,
  .sf-prod-card,
  .sf-hero-card,
  .sf-feature,
  .sf-banner,
  .sf-timer-box,
  .sf-cart-item,
  .sp-back-btn,
  .sf-mobile-nav a,
  .sf-nav a {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease, color 0.22s ease;
  }

  a:hover,
  button:hover,
  .sf-btn-primary:hover,
  .sf-btn-secondary:hover,
  .sf-btn:hover,
  .sf-cart-btn:hover,
  .sf-add-btn:hover,
  .sf-view-all:hover,
  .sf-social-btn:hover,
  .sf-mobile-nav a:hover,
  .sf-nav a:hover,
  .sp-back-btn:hover {
    transform: translateY(-2px);
  }

  .sf-cat-card:hover,
  .sf-prod-card:hover,
  .sf-hero-card:hover,
  .sf-feature:hover,
  .sf-banner:hover,
  .sf-cart-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 30px rgba(5, 14, 28, 0.34);
  }
}