/* ============================================================
   PREMIUM.CSS — Cinematic scroll, cursor, and motion layer
   StackPointDev Perfume
   ============================================================ */


/* ── 2. Scroll Progress Bar ──────────────────────────────── */
#sp-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--gold, #D4AF37), rgba(212, 175, 55, 0.2));
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 9999;
  pointer-events: none;
}

/* ── 3. Smart Navbar ─────────────────────────────────────── */
#navbar {
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.3s ease, box-shadow 0.3s ease,
              border-color 0.3s ease !important;
  will-change: transform;
}

#navbar.nav-hidden {
  transform: translateY(-110%) !important;
}

/* ── 4. Button shine sweep + glow ────────────────────────── */
.btn-gold {
  position: relative;
  overflow: hidden;
  will-change: transform;
}

.btn-gold::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 62%
  );
  transform: translateX(-130%) skewX(-12deg);
  transition: transform 0.7s ease;
  pointer-events: none;
}
.btn-gold:hover::after { transform: translateX(130%) skewX(-12deg); }

.btn-gold:hover {
  box-shadow: 0 0 28px rgba(212, 175, 55, 0.45),
              0 0 55px rgba(212, 175, 55, 0.12),
              0 8px 28px rgba(0, 0, 0, 0.35) !important;
}

.btn-ghost:hover {
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.18),
              0 6px 20px rgba(0, 0, 0, 0.25) !important;
}

/* ── 5. Product card sweep shine + depth ─────────────────── */
.product-card {
  position: relative;
  overflow: hidden;
  will-change: transform;
}

.product-card::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
  transform: skewX(-15deg);
  transition: left 0.65s ease;
  pointer-events: none;
  z-index: 2;
}
.product-card:hover::after { left: 135%; }

.product-card:hover {
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(212, 175, 55, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* ── 6. Product image zoom on card hover ─────────────────── */
.product-card-img { overflow: hidden; }
.product-card-img img {
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.product-card:hover .product-card-img img {
  transform: scale(1.07) !important;
}

/* ── 7. Category card depth ──────────────────────────────── */
.category-card { will-change: transform; }

/* ── 8. Review card lift ─────────────────────────────────── */
.review-card {
  will-change: transform;
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}
.review-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4) !important;
}

/* ── 9. Footer link slide ────────────────────────────────── */
.footer-col-links a {
  display: inline-block;
  transition: color 0.25s ease,
              transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.footer-col-links a:hover {
  color: var(--gold, #D4AF37) !important;
  transform: translateX(7px) !important;
}

/* ── 10. Nav link subtle lift ────────────────────────────── */
.nav-links a {
  transition: color 0.25s ease, transform 0.2s ease !important;
}
.nav-links a:hover { transform: translateY(-1px); }

/* ── 11. Nav icon btn scale ──────────────────────────────── */
.nav-icon-btn {
  transition: transform 0.2s ease, color 0.2s ease !important;
}
.nav-icon-btn:hover { transform: scale(1.13) !important; }

/* ── 12. Section title em underline glow reveal ──────────── */
.section-title em,
.hero-title em {
  position: relative;
  display: inline-block;
}
.section-title em::after,
.hero-title em::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, var(--gold, #D4AF37), rgba(212, 175, 55, 0.15));
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}
.section-header.premium-revealed .section-title em::after {
  transform: scaleX(1);
}

/* ── 13. Ambient glow blobs (decorative, behind content) ─── */
.ambient-blob {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  filter: blur(130px);
  opacity: 0.038;
  animation: blobDrift var(--dur, 26s) ease-in-out infinite alternate;
}
@keyframes blobDrift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(var(--dx, 45px), var(--dy, 35px)) scale(1.12); }
}
[data-theme="light"] .ambient-blob { opacity: 0.022; }

/* ── 14. Scent button ripple ─────────────────────────────── */
@keyframes rippleOut {
  from { transform: scale(0); opacity: 1; }
  to   { transform: scale(1); opacity: 0; }
}

/* ── 15. Hero overflow clip for parallax ─────────────────── */
#hero { overflow: hidden; }
.hero-bg-img {
  will-change: transform;
  transform: scale(1.08);
}

/* ── 16. Page exit fade-slide ────────────────────────────── */
body.page-exiting {
  opacity: 0 !important;
  transform: translateY(-8px) !important;
  transition: opacity 0.32s ease, transform 0.32s ease !important;
  pointer-events: none !important;
}

/* ── 17. Grain noise overlay (injected via JS) ───────────── */
#sp-noise {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9500;
  opacity: 0.2;
  animation: noiseShift 0.55s steps(3) infinite;
}
@keyframes noiseShift {
  0%   { background-position: 0 0; }
  33%  { background-position: 55px 70px; }
  66%  { background-position: -40px 30px; }
  100% { background-position: 60px -25px; }
}

/* ── 18. Lenis scroll overrides ──────────────────────────── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* ── Mobile: disable heavy effects ──────────────────────── */
@media (max-width: 768px) {
  #sp-noise { display: none !important; }
  .product-card::after { display: none; }
  .ambient-blob { display: none; }
}