/* =========================================================
   Premium homepage animations & interactions
   Lightweight CSS + IntersectionObserver (see wholesale.js)
   ========================================================= */

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .wh-reveal,
  .wh-reveal-title,
  .wh-reveal-subtitle,
  .wh-hero-content,
  .wh-hero-img img,
  .wh-category-card,
  .wh-card,
  .wh-featured-card,
  .wh-stat,
  .wh-icon-box,
  .wh-skeleton-card::after {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .wh-products-grid { opacity: 1 !important; }
  .wh-skeleton-grid { display: none !important; }
}

/* ---------------------------------------------------------
   Reveal animations
   --------------------------------------------------------- */

.wh-reveal,
.wh-reveal-title,
.wh-reveal-subtitle,
.wh-stat,
.wh-icon-box {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s cubic-bezier(.25,.46,.45,.94), transform .65s cubic-bezier(.25,.46,.45,.94);
  will-change: transform, opacity;
}

.wh-reveal.is-visible,
.wh-reveal-title.is-visible,
.wh-reveal-subtitle.is-visible,
.wh-stat.is-visible,
.wh-icon-box.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger via inline --i custom property */
.wh-reveal { transition-delay: calc(var(--i, 0) * 80ms); }
.wh-reveal-title { transition-delay: 0ms; }
.wh-reveal-subtitle { transition-delay: 120ms; }
.wh-stat { transition-delay: calc(var(--i, 0) * 100ms); }
.wh-icon-box { transition-delay: calc(var(--i, 0) * 90ms); }

/* ---------------------------------------------------------
   Hero entrance & subtle image zoom
   --------------------------------------------------------- */

.wh-hero-content > * {
  opacity: 0;
  transform: translateY(24px);
  animation: wh-hero-in .85s cubic-bezier(.25,.46,.45,.94) forwards;
}

.wh-hero-content > *:nth-child(1) { animation-delay: .1s; }
.wh-hero-content > *:nth-child(2) { animation-delay: .22s; }
.wh-hero-content > *:nth-child(3) { animation-delay: .34s; }
.wh-hero-content > *:nth-child(4) { animation-delay: .46s; }

@keyframes wh-hero-in {
  to { opacity: 1; transform: translateY(0); }
}

.wh-hero-img {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

.wh-hero-img img {
  transform: scale(1.02);
  animation: wh-hero-zoom 18s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes wh-hero-zoom {
  from { transform: scale(1.02); }
  to { transform: scale(1.08); }
}

/* CTA hover premium feel */
.wh-hero .btn-main,
.wh-hero .btn-ghost {
  position: relative;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, background .25s, border-color .25s;
}

.wh-hero .btn-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(107,47,69,.35);
}

.wh-hero .btn-ghost:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.65);
}

.wh-hero .btn-main:active,
.wh-hero .btn-ghost:active { transform: translateY(0) scale(.98); }

/* ---------------------------------------------------------
   Section transitions
   --------------------------------------------------------- */

.wh-section { position: relative; }

.wh-section + .wh-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 900px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(107,47,69,.12), transparent);
}

/* ---------------------------------------------------------
   Premium category cards
   --------------------------------------------------------- */

.wh-category-card {
  position: relative;
  border-radius: var(--wh-radius);
  overflow: hidden;
  height: 300px;
  color: #fff;
  transform: translateY(0);
  transition: transform .45s cubic-bezier(.25,.46,.45,.94), box-shadow .45s, border-radius .3s;
  box-shadow: var(--wh-shadow);
  background: var(--wh-dark);
}

.wh-category-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 48px rgba(11,11,14,.18);
}

.wh-cat-img {
  position: absolute;
  inset: 0;
  transition: transform .6s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}

.wh-category-card:hover .wh-cat-img { transform: scale(1.08) translateY(-4px); }

.wh-cat-img img,
.wh-cat-img .cat-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s;
}

.wh-category-card .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,0) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  transition: background .4s;
  z-index: 2;
}

.wh-category-card:hover .overlay {
  background: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.45) 70%, rgba(0,0,0,.1) 100%);
}

.wh-category-card h4 {
  font-weight: 800;
  font-size: 1.45rem;
  margin-bottom: .2rem;
  transform: translateY(0);
  transition: transform .35s;
}

.wh-category-card:hover h4 { transform: translateY(-4px); }

.wh-category-card .cat-meta {
  display: block;
  color: rgba(255,255,255,.78);
  font-size: .9rem;
  transition: color .3s;
}

.wh-category-card .cat-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: .9rem;
  padding: .45rem 1.1rem;
  border-radius: 8px;
  background: var(--wh-cta);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  opacity: .95;
  transform: translateY(0) scale(1);
  transition: opacity .3s, transform .3s, background .2s;
}

.wh-category-card:hover .cat-cta {
  opacity: 1;
  transform: translateY(-3px) scale(1.03);
  background: var(--wh-cta-hover);
}

/* Mobile category grid: keep 2 per row to avoid overflow */
@media (max-width: 767px) {
  .wh-category-card { height: 210px; }
  .wh-category-card h4 { font-size: 1.15rem; }
}

/* ---------------------------------------------------------
   Product cards showcase
   --------------------------------------------------------- */

.wh-products-section { position: relative; }

.wh-products-grid {
  opacity: 0;
  transition: opacity .4s ease;
}

.wh-products-section.is-loaded .wh-products-grid { opacity: 1; }

/* Skeleton loader */
.wh-skeleton-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
  transition: opacity .35s ease, visibility .35s;
}

.wh-products-section.is-loaded .wh-skeleton-grid {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  height: 0;
  margin: 0;
  overflow: hidden;
}

.wh-skeleton-card {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 15px 30px;
}

@media (min-width: 768px) {
  .wh-skeleton-card { flex: 0 0 50%; max-width: 50%; }
}

@media (min-width: 992px) {
  .wh-skeleton-card { flex: 0 0 25%; max-width: 25%; }
}

.wh-skeleton-inner {
  height: 360px;
  border-radius: var(--wh-radius);
  background: #eef0f3;
  overflow: hidden;
  position: relative;
}

.wh-skeleton-inner::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: wh-shimmer 1.6s infinite;
}

@keyframes wh-shimmer {
  100% { left: 100%; }
}

/* ---------------------------------------------------------
   Featured section premium treatment
   --------------------------------------------------------- */

.wh-featured-section {
  position: relative;
  background: #f4f4f7;
}

.wh-featured-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(107,47,69,.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.wh-featured-section .container { position: relative; z-index: 1; }

.wh-featured-card {
  position: relative;
  transition: transform .45s, box-shadow .45s;
}

.wh-featured-card::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--wh-radius) + 2px);
  background: linear-gradient(135deg, rgba(107,47,69,.35), rgba(107,47,69,0) 50%);
  opacity: 0;
  z-index: -1;
  transition: opacity .4s;
  filter: blur(10px);
}

.wh-featured-card:hover::after { opacity: 1; }

.wh-featured-card:hover {
  transform: translateY(-8px) scale(1.015);
}

.wh-featured-card .card-img img {
  animation: wh-float 5s ease-in-out infinite;
}

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

/* Featured badge */
.wh-featured-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  background: linear-gradient(135deg, #4F2334, var(--wh-cta));
  color: #fff;
  font-weight: 800;
  font-size: .75rem;
  padding: .35rem .75rem;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(107,47,69,.35);
  transform: scale(0);
  animation: wh-badge-pop .5s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay: .4s;
}

@keyframes wh-badge-pop {
  to { transform: scale(1); }
}

/* Show all button arrow */
.wh-btn-showall {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: gap .25s, transform .25s, background .25s, color .25s;
}

.wh-btn-showall svg,
.wh-btn-showall i {
  transition: transform .25s;
}

.wh-btn-showall:hover {
  gap: .7rem;
  transform: translateX(-3px);
}

[dir="ltr"] .wh-btn-showall:hover { transform: translateX(3px); }

.wh-btn-showall:hover svg,
.wh-btn-showall:hover i { transform: translateX(4px); }

/* ---------------------------------------------------------
   Offers dark section tweaks
   --------------------------------------------------------- */

.wh-offers-section { position: relative; }

.wh-offers-section .wh-card:hover {
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}

.wh-offers-section .wh-discount-badge {
  animation: wh-pulse 2.2s ease-in-out infinite;
}

@keyframes wh-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* ---------------------------------------------------------
   Section title divider
   --------------------------------------------------------- */

.wh-section-header {
  position: relative;
  display: inline-block;
}

.wh-section-header::after {
  content: '';
  display: block;
  width: 48px;
  height: 4px;
  background: var(--wh-cta);
  border-radius: 4px;
  margin: .6rem auto 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .6s cubic-bezier(.25,.46,.45,.94) .2s;
}

.wh-section-header.is-visible::after { transform: scaleX(1); }

@media (max-width: 767px) {
  .wh-hero-img img { max-height: 320px; }
}