:root {
  --gold: #C9A84C;
  --gold-light: #E8C97A;
  --gold-dark: #9A7B2F;
  --obsidian: #0A0A0A;
  --charcoal: #141414;
  --graphite: #1E1E1E;
  --stone: #2A2A2A;
  --ivory: #FAF7F2;
  --cream: #F0EBE3;
  --silk: #E8E0D5;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--obsidian);
  color: var(--ivory);
  font-family: "Montserrat", sans-serif;
  scroll-behavior: smooth;
}

.hero-orb-1 {
  background: radial-gradient(circle, #C9A84C, transparent 70%);
}

.hero-orb-2 {
  background: radial-gradient(circle, #E8C97A, transparent 70%);
}

.text-gradient-gold {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-link {
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.35s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.surface-card {
  background:
    radial-gradient(circle at 10% 0%, rgba(201, 168, 76, 0.08), transparent 45%),
    linear-gradient(180deg, rgba(20, 20, 20, 0.95), rgba(10, 10, 10, 0.95));
}

.product-fallback-bg {
  background:
    radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--accent, #C9A84C) 30%, transparent), transparent 40%),
    linear-gradient(180deg, rgba(18, 18, 18, 0.9), rgba(10, 10, 10, 1));
}

.product-img {
  transition: transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-card:hover .product-img {
  transform: scale(1.04);
}

.grain::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: 0.35;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  animation: marquee 30s linear infinite;
}

/* Dark “sparkling” veil over uploaded photo backgrounds */
.sparkle-overlay {
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

.sparkle-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 18%, rgba(201, 168, 76, 0.55), transparent 55%),
    radial-gradient(1px 1px at 22% 72%, rgba(255, 255, 255, 0.35), transparent 55%),
    radial-gradient(1.5px 1.5px at 41% 44%, rgba(201, 168, 76, 0.45), transparent 55%),
    radial-gradient(1px 1px at 63% 28%, rgba(255, 255, 255, 0.28), transparent 55%),
    radial-gradient(1.5px 1.5px at 78% 66%, rgba(201, 168, 76, 0.5), transparent 55%),
    radial-gradient(1px 1px at 91% 12%, rgba(255, 255, 255, 0.22), transparent 55%),
    radial-gradient(1.5px 1.5px at 15% 88%, rgba(201, 168, 76, 0.4), transparent 55%),
    radial-gradient(1px 1px at 55% 8%, rgba(255, 255, 255, 0.2), transparent 55%);
  opacity: 0.55;
  animation: sparkle-twinkle 10s ease-in-out infinite;
}

.sparkle-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 120% 80% at 50% 100%, rgba(0, 0, 0, 0.55), transparent 55%);
  opacity: 0.85;
  mix-blend-mode: multiply;
}

.sparkle-overlay--hero::before {
  opacity: 0.62;
}

.sparkle-overlay--hero {
  opacity: 0.72;
}

.sparkle-overlay--section {
  opacity: 0.48;
}

.sparkle-overlay--section::before {
  opacity: 0.42;
}

.sparkle-overlay--card {
  opacity: 0.42;
  mix-blend-mode: overlay;
  border-radius: inherit;
}

.sparkle-overlay--card::before {
  opacity: 0.48;
}

.sparkle-overlay--card::after {
  opacity: 0.65;
}

@keyframes sparkle-twinkle {
  0%,
  100% {
    opacity: 0.48;
    filter: brightness(0.95);
  }
  50% {
    opacity: 0.72;
    filter: brightness(1.12);
  }
}