@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Outfit:wght@700;900&display=swap');

:root {
  --bg-primary: #0D1B2A;
  --bg-secondary: #0A1520;
  --bg-cards: #112236;
  --neon-green: #39FF14;
  --accent-blue: #1A6BFF;
  --text-white: #FFFFFF;
  --text-muted: #B0BEC5;
}

*, *::before, *::after { box-sizing: border-box; }
img, video { max-width: 100%; }

body {
  background-color: var(--bg-primary);
  color: var(--text-white);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  margin: 0;
}

.font-display {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--bg-cards); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: var(--neon-green); }

/* Animations */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}
.animate-float { animation: float 4s ease-in-out infinite; }

@keyframes smoke-rise {
  0% { opacity: 0; transform: translateY(0) scale(0.8); }
  50% { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-40px) scale(1.5); }
}
.animate-smoke-1 { animation: smoke-rise 3s infinite 0s; }
.animate-smoke-2 { animation: smoke-rise 3.5s infinite 1s; }
.animate-smoke-3 { animation: smoke-rise 4s infinite 2s; }

@keyframes pulse-neon {
  0%, 100% { box-shadow: 0 0 10px rgba(57, 255, 20, 0.2); }
  50% { box-shadow: 0 0 25px rgba(57, 255, 20, 0.6); }
}
.animate-pulse-neon { animation: pulse-neon 3s infinite; }

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee { animation: marquee 30s linear infinite; }

@keyframes stagger-fade-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.stagger-1 { animation: stagger-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards; opacity: 0; }
.stagger-2 { animation: stagger-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards; opacity: 0; }
.stagger-3 { animation: stagger-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards; opacity: 0; }

.bg-noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
}

@keyframes blink {
  0%, 96%, 98% { transform: scaleY(1); }
  97% { transform: scaleY(0.1); }
}
.animate-blink { transform-origin: center; animation: blink 4s infinite; }

@keyframes orb-float {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}
.animate-orb { animation: orb-float 15s ease-in-out infinite; }

.glass-panel {
  background: rgba(17, 34, 54, 0.4);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(57, 255, 20, 0.1);
}

.glare-effect { position: relative; overflow: hidden; }
.glare-effect::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(to bottom right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 100%);
  transform: rotate(45deg) translateY(-100%);
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 10;
}
.glare-effect:hover::after { transform: rotate(45deg) translateY(100%); }

/* Utilities */
.glow-text { text-shadow: 0 0 15px rgba(57, 255, 20, 0.5); }
.glass-nav { background: rgba(13, 27, 42, 0.8); backdrop-filter: blur(20px); }

/* Reveal animations */
.reveal {
  opacity: 0;
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.direction-up { transform: translateY(3rem); }
.reveal.direction-left { transform: translateX(3rem); }
.reveal.direction-right { transform: translateX(-3rem); }
.reveal.direction-scale { transform: scale(0.95); }
.reveal.is-visible { opacity: 1; transform: translate(0) scale(1); }

.animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   RESPONSIVE — MOBILE FIRST
   ========================================= */

/* --- Combo / Promo cards: never overflow --- */
.combo-card { min-width: 0; }

/* --- Touch targets: min 44x44px for accessibility --- */
@media (max-width: 767px) {
  button, a[href] { min-height: 44px; }

  /* --- Marquee smaller on mobile --- */
  .animate-marquee { font-size: 0.85rem; }

  /* --- Scent finder bot bubble: no forced left margin --- */
  #scent-bot-text {
    margin-left: 0 !important;
    max-width: 100% !important;
  }

  /* --- Footer gap reduction --- */
  footer .grid { gap: 2rem; }

  /* --- Assistant button: shrink & reposition --- */
  #assistant-btn {
    width: 68px !important;
    height: 68px !important;
  }
  #assistant-btn img {
    width: 58px !important;
    height: 58px !important;
  }
  #assistant-menu {
    width: calc(100vw - 2rem) !important;
    max-width: 320px;
  }

  /* --- Cart drawer: full width on very small screens --- */
  #cart-drawer { width: 100% !important; }

  /* --- Hero: bump up gradient opacity for readability --- */
  .hero-left-gradient { background: linear-gradient(to right, #050D14 60%, transparent) !important; }

  /* --- Product modal: single column stacked --- */
  #product-modal .modal-inner {
    flex-direction: column;
    max-height: 92vh;
    overflow-y: auto;
    border-radius: 24px;
  }
  #product-modal .modal-image-col {
    width: 100%;
    min-height: 200px;
    padding: 1.5rem;
  }
  #product-modal .modal-content-col {
    width: 100%;
    padding: 1.25rem 1.5rem 2rem;
  }
  #modal-name { font-size: 1.75rem !important; }

  /* --- Shop categories banners: shorter on mobile --- */
  #full-size { height: 260px !important; }
  #full-size h3 { font-size: 1.75rem !important; }

  /* --- Promo section header: reduce spacing --- */
  #promos { padding-top: 3rem; padding-bottom: 3rem; }
}

/* Extra-small (< 480px): 2-col product grid stays, compact cards */
@media (max-width: 479px) {
  /* Combo pricing row: stack vertically so button doesn't get squished */
  .combo-price-row {
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
  }
  .combo-price-row button {
    width: 100%;
    justify-content: center;
  }

  /* Reduce combo image area height */
  .combo-card .combo-images { height: 160px !important; }

  /* Compact product cards for 2-col mobile layout */
  #product-grid > div {
    font-size: 0.85rem;
  }
  #product-grid .p-5 {
    padding: 0.75rem;
  }
  #product-grid h3 {
    font-size: 0.85rem !important;
    margin-bottom: 0.4rem;
  }
  #product-grid .text-xl {
    font-size: 0.85rem;
  }
  /* Hide tags on very small screens to save space */
  #product-grid .flex-wrap.items-center.gap-2 {
    display: none;
  }
}

/* Tablet (768px – 1023px): 2-col product grid already set via Tailwind sm: */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Ensure combo cards have equal height in 2-col layout */
  #promos .grid { align-items: stretch; }
  .combo-card { height: 100%; }
}