/* Shenzhen Noy Import & Export Co., Ltd — custom styles (supplement Tailwind) */

html { scroll-behavior: smooth; }
body { font-family: 'Inter', 'Segoe UI', Arial, sans-serif; }
h1, h2, h3, h4, .font-heading { font-family: 'Poppins', 'Inter', Arial, sans-serif; }

/* ---------- Hero slider ---------- */
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1s ease, visibility 1s ease;
}
.hero-slide.active { opacity: 1; visibility: visible; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-slide.active img { animation: heroZoom 7s ease-out forwards; }
@keyframes heroZoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}
.hero-dot { width: 12px; height: 12px; border-radius: 9999px; background: rgba(255,255,255,.45); transition: all .3s; cursor: pointer; }
.hero-dot.active { background: #fff; width: 32px; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity .8s ease, transform .8s ease; }
.reveal.revealed { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .12s; }
.reveal-delay-2 { transition-delay: .24s; }
.reveal-delay-3 { transition-delay: .36s; }

/* ---------- Card hover ---------- */
.card-img { overflow: hidden; }
.card-img img { transition: transform .6s ease; }
.card-img:hover img { transform: scale(1.07); }

/* ---------- Lightbox ---------- */
#lightbox {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.85);
  display: none; align-items: center; justify-content: center;
}
#lightbox.open { display: flex; }
#lightbox img { max-width: 90vw; max-height: 85vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }

/* ---------- Back to top ---------- */
#backToTop {
  position: fixed; right: 24px; bottom: 24px; z-index: 80;
  opacity: 0; visibility: hidden; transition: all .3s;
}
#backToTop.show { opacity: 1; visibility: visible; }

/* ---------- Nav ---------- */
.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -4px;
  width: 0; height: 2px; background: #a3e635; transition: width .3s;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
#siteHeader.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.12); }

/* ---------- Marquee ---------- */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: flex; width: max-content; animation: marquee 30s linear infinite; }

/* ---------- Misc ---------- */
.section-label { letter-spacing: .22em; }
.text-shadow { text-shadow: 0 2px 16px rgba(0,0,0,.45); }