@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Syne:wght@700;800&display=swap');

:root {
  --primary-glow: rgba(225, 29, 72, 0.25);
  --amber-glow: rgba(234, 88, 12, 0.2);
}

* {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.font-display {
  font-family: 'Syne', sans-serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0c0a09;
}
::-webkit-scrollbar-thumb {
  background: #292524;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #e11d48;
}

/* Floating animation */
@keyframes softFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

.animate-soft-float {
  animation: softFloat 4s ease-in-out infinite;
}

/* Glowing pulse */
@keyframes emberPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

.animate-ember {
  animation: emberPulse 3.5s ease-in-out infinite;
}

/* Glassmorphism utilities */
.glass-panel {
  background: rgba(23, 19, 17, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-nav {
  background: rgba(12, 10, 9, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Double bezel card utility */
.double-bezel {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.75rem;
  padding: 0.375rem;
}

.double-bezel-inner {
  background: #171412;
  border-radius: calc(1.75rem - 0.375rem);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08);
}

/* Card hover glow */
.card-hover-glow {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-hover-glow:hover {
  transform: translateY(-4px);
  border-color: rgba(225, 29, 72, 0.4);
  box-shadow: 0 20px 40px -15px rgba(225, 29, 72, 0.15);
}

/* Cart badge notification pulse */
@keyframes pingCustom {
  75%, 100% {
    transform: scale(1.7);
    opacity: 0;
  }
}
.cart-ping {
  animation: pingCustom 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}