/* ═══════════════════════════════════════════════
   HOME PREMIUM — animations & visual upgrades
   ═══════════════════════════════════════════════ */

/* ── Scroll Reveal Base ── */
.hp-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease;
}
.hp-reveal.hp-visible { opacity: 1; transform: translateY(0); }
.hp-reveal-left  { opacity:0; transform:translateX(-30px); transition: opacity .6s ease, transform .6s ease; }
.hp-reveal-right { opacity:0; transform:translateX(30px);  transition: opacity .6s ease, transform .6s ease; }
.hp-reveal-left.hp-visible, .hp-reveal-right.hp-visible { opacity:1; transform:translateX(0); }
.hp-d1 { transition-delay: .1s !important; }
.hp-d2 { transition-delay: .2s !important; }
.hp-d3 { transition-delay: .3s !important; }
.hp-d4 { transition-delay: .4s !important; }
.hp-d5 { transition-delay: .5s !important; }
.hp-d6 { transition-delay: .6s !important; }
.hp-d7 { transition-delay: .7s !important; }
.hp-d8 { transition-delay: .8s !important; }

/* ── Hero Upgrades ── */
.hero-banner { position: relative; overflow: hidden; }

/* particles canvas sits behind everything */
#hero-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .45;
}

.hero-slider { position: relative; z-index: 1; }

/* slide text entrance */
.slide.active .hero-text h1 {
  animation: slideHeroTitle .9s cubic-bezier(.16,1,.3,1) both;
}
.slide.active .hero-text p {
  animation: slideHeroTitle .9s cubic-bezier(.16,1,.3,1) .12s both;
}
.slide.active .hero-buttons {
  animation: slideHeroTitle .9s cubic-bezier(.16,1,.3,1) .22s both;
}
@keyframes slideHeroTitle {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}

/* image float loop */
.slide.active .hero-image img {
  animation: heroImgFloat 6s ease-in-out infinite;
}
@keyframes heroImgFloat {
  0%,100% { transform: translateY(0) scale(1.2); }
  50%      { transform: translateY(-14px) scale(1.2); }
}

/* ── Category Cards Upgrade ── */
.category-card {
  position: relative;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.16,1,.3,1),
              box-shadow .4s ease !important;
}
.category-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(201,168,76,0), rgba(201,168,76,.12));
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
  border-radius: inherit;
}
.category-card:hover { transform: translateY(-8px) scale(1.02) !important; box-shadow: 0 20px 50px rgba(0,0,0,.13) !important; }
.category-card:hover::after { opacity: 1; }
.category-card img { transition: transform .5s cubic-bezier(.16,1,.3,1) !important; }
.category-card:hover img { transform: scale(1.08) !important; }

/* ── Toy Cards Upgrade ── */
a.toy-card {
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease !important;
  position: relative; overflow: hidden;
}
a.toy-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #C9A84C, #E8C96A);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
a.toy-card:hover { transform: translateY(-10px) !important; box-shadow: 0 24px 48px rgba(0,0,0,.12) !important; }
a.toy-card:hover::before { transform: scaleX(1); }
a.toy-card img { transition: transform .5s cubic-bezier(.16,1,.3,1) !important; }
a.toy-card:hover img { transform: scale(1.06) !important; }

/* ── Trust Strip Upgrade ── */
.trust-strip { position: relative; overflow: hidden; }
.trust-strip::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(201,168,76,.04), transparent 50%, rgba(201,168,76,.04));
  pointer-events: none;
}
.trust-icon {
  display: inline-block;
  animation: trustIconBounce 3s ease-in-out infinite;
}
.trust-item:nth-child(3) .trust-icon { animation-delay: .5s; }
.trust-item:nth-child(5) .trust-icon { animation-delay: 1s; }
.trust-item:nth-child(7) .trust-icon { animation-delay: 1.5s; }
@keyframes trustIconBounce {
  0%,100% { transform: translateY(0); }
  40%     { transform: translateY(-6px); }
  60%     { transform: translateY(-3px); }
}

/* ── Flash Sale Upgrade ── */
.flash-sale-section {
  position: relative;
  overflow: hidden;
}
.flash-sale-section::before {
  content: '';
  position: absolute;
  top: -60px; left: 50%; transform: translateX(-50%);
  width: 600px; height: 300px;
  background: radial-gradient(ellipse, rgba(201,168,76,.07) 0%, transparent 70%);
  pointer-events: none;
}
.flash-badge {
  animation: flashPulse 2s ease-in-out infinite;
}
@keyframes flashPulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(201,168,76,.4); }
  50%     { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(201,168,76,0); }
}
.cd-block {
  transition: transform .15s cubic-bezier(.16,1,.3,1);
}
.cd-block.flip { animation: cdFlip .3s ease; }
@keyframes cdFlip {
  0%   { transform: rotateX(0); }
  50%  { transform: rotateX(-90deg) scale(.95); }
  100% { transform: rotateX(0); }
}

/* ── Products Section Upgrade ── */
.products-section { position: relative; }
.products-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #C9A84C, transparent);
  opacity: .4;
}

/* filter chip animation */
.hcf-chip {
  transition: all .3s cubic-bezier(.16,1,.3,1) !important;
  position: relative;
  overflow: hidden;
}
.hcf-chip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(201,168,76,.15), transparent);
  opacity: 0;
  transition: opacity .3s;
  border-radius: inherit;
}
.hcf-chip:hover::after { opacity: 1; }
.hcf-chip.active { transform: scale(1.04) !important; }

/* product card upgrade */
.product-card {
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease !important;
  border-radius: 20px !important;
  overflow: hidden;
}
.product-card:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.12), 0 0 0 1px rgba(201,168,76,.15) !important;
}
.product-card .product-img img {
  transition: transform .6s cubic-bezier(.16,1,.3,1) !important;
}
.product-card:hover .product-img img {
  transform: scale(1.08) !important;
}
.add-to-cart-btn {
  transition: all .3s cubic-bezier(.16,1,.3,1) !important;
  position: relative;
  overflow: hidden;
}
.add-to-cart-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition: left .4s ease;
}
.add-to-cart-btn:hover::before { left: 100%; }

/* discount badge pulse */
.discount-badge {
  animation: badgePop .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes badgePop {
  from { transform: scale(0) rotate(-10deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);  opacity: 1; }
}

/* ── Section Title Upgrade ── */
.section-title h2 {
  position: relative;
  display: inline-block;
}
.section-title h2::after {
  content: '';
  position: absolute;
  bottom: -8px; left: 50%; transform: translateX(-50%);
  width: 0; height: 3px;
  background: linear-gradient(90deg, #C9A84C, #E8C96A);
  border-radius: 3px;
  transition: width .8s cubic-bezier(.16,1,.3,1);
}
.section-title.hp-visible h2::after { width: 60%; }

/* ── Reviews Upgrade ── */
.reviews-section { overflow: hidden; position: relative; }
.reviews-section::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(201,168,76,.03), transparent 50%);
  pointer-events: none;
}
.reviews-track {
  backface-visibility: hidden !important;
  /* JS-driven — no CSS animation */
}
.review-card {
  transition: transform .4s ease, box-shadow .4s ease !important;
}
.review-card:hover {
  transform: scale(1.04) translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.12) !important;
}

/* ── Staggered product card entrance ── */
.products-grid .product-card {
  animation: cardEntrance .5s cubic-bezier(.16,1,.3,1) both;
}
.products-grid .product-card:nth-child(1)  { animation-delay: .05s; }
.products-grid .product-card:nth-child(2)  { animation-delay: .10s; }
.products-grid .product-card:nth-child(3)  { animation-delay: .15s; }
.products-grid .product-card:nth-child(4)  { animation-delay: .20s; }
.products-grid .product-card:nth-child(5)  { animation-delay: .25s; }
.products-grid .product-card:nth-child(6)  { animation-delay: .30s; }
.products-grid .product-card:nth-child(7)  { animation-delay: .35s; }
.products-grid .product-card:nth-child(8)  { animation-delay: .40s; }
@keyframes cardEntrance {
  from { opacity:0; transform:translateY(32px) scale(.97); }
  to   { opacity:1; transform:translateY(0)    scale(1); }
}

/* ── View All Button ── */
.view-all-btn, #home-load-more .view-all-btn {
  position: relative;
  overflow: hidden;
  transition: all .3s cubic-bezier(.16,1,.3,1) !important;
}
.view-all-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transition: left .5s ease;
}
.view-all-btn:hover { transform: translateY(-3px) !important; box-shadow: 0 12px 30px rgba(201,168,76,.25) !important; }
.view-all-btn:hover::before { left: 100%; }

/* ── Intro Section Upgrade ── */
.intro-section {
  position: relative; overflow: hidden;
}
.intro-section::before {
  content: '✨';
  position: absolute;
  font-size: 200px;
  opacity: .03;
  top: -40px; right: -40px;
  pointer-events: none;
  animation: introDecor 10s ease-in-out infinite;
}
@keyframes introDecor {
  0%,100% { transform: rotate(0deg) scale(1); }
  50%     { transform: rotate(15deg) scale(1.1); }
}

/* ── Gold line separator ── */
.hp-gold-line {
  width: 80px; height: 3px;
  background: linear-gradient(90deg, #C9A84C, #E8C96A);
  border-radius: 3px;
  margin: 16px auto 0;
}

/* ── Smooth page load ── */
body {
  animation: pageLoad .5s ease both;
}
@keyframes pageLoad {
  from { opacity: 0; }
  to   { opacity: 1; }
}