/* ===== Novenza Custom CSS ===== */

/* ===== Theme Colors (Single Source of Truth) ===== */
:root {
  --color-primary: #715aff;
  --color-primary-hover: #5a42e0;
  --color-primary-light: #eeebff;
  --color-secondary: #5340c7;
  --color-dark: #2E2A39;
  --color-dark-light: #4A4458;
  --color-grey: #6B7280;
  --color-grey-light: #F7F7F8;
  --color-border: #E5E7EB;
  --color-green: #22C55E;
  --color-error: #EF4444;
}

/* Google Font — loaded via <link> in HTML, no @import needed */

/* Base Styles */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-overflow-scrolling: touch; }
body {
  font-family: 'Inter', sans-serif;
  color: var(--color-dark);
  background-color: #FFFFFF;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}
*:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
::selection { background-color: var(--color-primary); color: #FFFFFF; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { border: none; background: none; font-family: inherit; }

/* ===== Animations ===== */
@keyframes blink-caret {
  0%, 100% { border-color: currentColor; }
  50% { border-color: transparent; }
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes blob-float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.1); }
  66% { transform: translate(-20px, 15px) scale(0.95); }
}
@keyframes blob-float-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-25px, 20px) scale(1.15); }
  66% { transform: translate(20px, -25px) scale(0.9); }
}
@keyframes blob-float-3 {
  0%, 100% { transform: translate(0, 0) scale(1.05); }
  33% { transform: translate(15px, 25px) scale(0.95); }
  66% { transform: translate(-30px, -10px) scale(1.1); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes marquee {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
@keyframes btn-pop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
@keyframes gift-pop {
  0% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.35) rotate(-12deg); }
  50% { transform: scale(1.35) rotate(12deg); }
  75% { transform: scale(1.1) rotate(-5deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes review-slide {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
@keyframes wave-flow {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
@keyframes truck {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-4px); }
}
@keyframes badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* Animation Utilities */
.animate-marquee { animation: marquee 12s linear infinite; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.animate-btn-pop { animation: btn-pop 2s ease-in-out infinite; }
.gift-pop { animation: gift-pop 0.8s ease-in-out infinite; will-change: transform; }
.truck-bounce { animation: truck 2s linear infinite; }
.review-scroll { animation: review-slide 60s linear infinite; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); contain: layout style; }
.review-scroll > * { backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(0); }
.badge-pulse { animation: badge-pulse 0.3s ease-in-out; }
.animate-fade-in { animation: fade-in 0.3s ease-in-out; }
.animate-slide-up { animation: slide-up 0.35s ease-out; }
.typewriter-cursor { border-right: 2px solid currentColor; padding-right: 2px; animation: blink-caret 0.7s step-end infinite; }

/* ===== Wave Divider ===== */
.wave-box { position: relative; height: 50px; overflow: hidden; margin-top: 8px; }
.wave-scroll { position: absolute; bottom: 0; left: 0; display: flex; width: 200%; height: 100%; will-change: transform; }
.wave-scroll svg { flex: 0 0 50%; height: 100%; display: block; }
.wave-slow { animation: wave-flow 8s linear infinite; }
.wave-mid { animation: wave-flow 5s linear infinite; }
.wave-fast { animation: wave-flow 3s linear infinite; }

/* ===== Product Grid ===== */
.shrine-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 16px;
}
@media (min-width: 768px) {
  .shrine-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 24px; }
}
@media (min-width: 1024px) {
  .shrine-grid { grid-template-columns: repeat(4, 1fr); gap: 28px; padding: 28px 48px; }
}

/* ===== Scrollbar Hide ===== */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ===== Gradient ===== */
.shrine-gradient { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); }
.shrine-gradient:hover { background: linear-gradient(135deg, var(--color-primary-hover) 0%, #4A3FB5 100%); }
.shrine-gradient-light { background: linear-gradient(135deg, var(--color-primary-light) 0%, #EDE9FE 100%); }

/* ===== Line Clamp ===== */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Transition Utilities ===== */
.transition-all { transition: all 0.2s ease; }
.transition-colors { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
.transition-opacity { transition: opacity 0.2s ease; }
.transition-transform { transition: transform 0.3s ease; }
.transition-shadow { transition: box-shadow 0.2s ease; }

/* ===== CTA Button Shadow (theme-aware) ===== */
.shadow-cta {
  box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--color-primary) 30%, transparent),
              0 4px 6px -4px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

/* ===== Theme Ring (outline for selected items) ===== */
.ring-primary {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

/* ===== WhatsApp Floating Button ===== */
@keyframes wa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  cursor: pointer;
  animation: wa-pulse 2s infinite;
  transition: transform 0.2s;
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float svg { width: 28px; height: 28px; fill: #fff; }