/* ═══════════════════════════════════════════════════════════
   SAFFRON BAZAAR — PREMIUM MOTION CSS
   Particle Canvas · Card Hover Glow · Magnetic Buttons
   Scroll Entrances · Gold Glow Effects
   ═══════════════════════════════════════════════════════════ */

/* ─── PARTICLE CANVAS ─── */
#bazaar-particles {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

/* ─── MAGNETIC HOVER ON BUTTONS ─── */
.btn-primary, .btn-ghost, .cta-link {
  transition: transform 0.2s cubic-bezier(0.2,0.8,0.2,1),
              box-shadow 0.2s cubic-bezier(0.2,0.8,0.2,1);
  will-change: transform;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(201,169,110,0.4);
}

/* ─── CARD HOVER ENHANCEMENTS ─── */
.card {
  transition: transform 0.35s cubic-bezier(0.2,0.8,0.2,1),
              border-color 0.35s cubic-bezier(0.2,0.8,0.2,1),
              box-shadow 0.35s cubic-bezier(0.2,0.8,0.2,1);
  will-change: transform;
}

.card:hover {
  transform: translateY(-6px);
  border-color: rgba(201,169,110,0.5);
  box-shadow: 0 24px 48px rgba(0,0,0,0.4), 0 0 0 1px rgba(201,169,110,0.15), 0 0 40px rgba(201,169,110,0.08);
}

/* ─── CARD GOLD GLOW LINE ON HOVER ─── */
.card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.card:hover::after { opacity: 0.7; }

/* ─── CARD ICON GLOW ─── */
.card-icon {
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}
.card:hover .card-icon {
  box-shadow: 0 5px 20px rgba(201,169,110,0.25);
  border-color: rgba(201,169,110,0.4);
}

/* ─── SCROLL-TRIGGERED ENTRANCES ─── */
.card-scroll-in {
  opacity: 0;
  transform: translateY(24px);
}

/* ─── PROCESS STEP ENHANCEMENT ─── */
.process-step {
  transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1);
}
.process-step:hover {
  transform: translateY(-4px);
}
.process-num {
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
  will-change: box-shadow;
}
.process-step:hover .process-num {
  box-shadow: 0 6px 24px rgba(201,169,110,0.3);
  border-color: rgba(201,169,110,0.5);
}

/* ─── STAT CARD ENHANCEMENT ─── */
.stat {
  transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1),
              border-color 0.3s ease,
              box-shadow 0.3s ease;
  will-change: transform;
}
.stat:hover {
  transform: translateY(-4px);
  border-color: rgba(201,169,110,0.5);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3), 0 0 24px rgba(201,169,110,0.1);
}

/* ─── FILTER CHIP GLOW ─── */
.chip {
  transition: all 0.25s cubic-bezier(0.2,0.8,0.2,1);
}
.chip.active {
  box-shadow: 0 0 18px rgba(201,169,110,0.35);
  transform: translateY(-1px);
}

/* ─── CTA CARD ENHANCEMENT ─── */
.cta-card {
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.cta-card:hover {
  border-color: rgba(201,169,110,0.4);
  box-shadow: 0 15px 60px rgba(201,169,110,0.06);
}

/* ─── HERO TITLE SHIMMER ─── */
@keyframes goldShimmer {
  0%, 100% { text-shadow: 0 0 30px rgba(201,169,110,0.3); }
  50% { text-shadow: 0 0 50px rgba(201,169,110,0.5), 0 0 80px rgba(201,169,110,0.15); }
}
.hero h1 .gold {
  animation: goldShimmer 4s ease-in-out infinite;
}

/* ─── PULSE DOT ENHANCEMENT ─── */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); opacity: 1; }
  50% { box-shadow: 0 0 0 12px rgba(34,197,94,0); opacity: 0.5; }
}
.hero-eyebrow .pulse {
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION — RESPECT USER PREFERENCE
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  #bazaar-particles { display: none; }
  .card-scroll-in { opacity: 1; transform: none; }
}