/*
Theme Name: Banger Labs
Theme URI: https://bangerlabs.store
Author: Banger Labs
Description: Banger Labs — research-grade peptides storefront. Custom WooCommerce theme, 1:1 UI/UX with full Banger Labs brand identity (Electric Violet / Banger Orange, Space Grotesk + Inter).
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: banger-labs
WC requires at least: 8.0
WC tested up to: 9.9
*/

/* ============================================================
   FONTS — Space Grotesk (display) + Inter (body), self-hosted
   ============================================================ */
@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter-VariableFont.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   BANGER LABS BRAND TOKENS
   bl-p   #7C5CFF   Electric Violet (primary)
   bl-p2  #5B3BE0   Deep Indigo (depth/hover)
   bl-p3  #9B7BFF   Lavender (light tint)
   bl-dk  #14102E   Ink (text/dark UI)
   bl-lav #B9A8FF   light violet accent
   Banger Orange #FF6A2C / Amber #FFA63D  (accent / CTA spark, ~5% max)
   ============================================================ */
:root {
  /* Banger brand scale */
  --bl-p:    #7C5CFF;
  --bl-p2:   #5B3BE0;
  --bl-p3:   #9B7BFF;
  --bl-dk:   #14102E;
  --bl-lav:  #B9A8FF;
  --bl-orange: #FF6A2C;
  --bl-amber:  #FFA63D;
  --bl-ink:  #14102E;
  --bl-mute: #6B6488;
  --bl-paper:#F6F4FF;
  --bl-ease: cubic-bezier(.22,1,.36,1);
  --bl-bar-h: 72px;

  /* Signature gradients */
  --bl-grad:  linear-gradient(120deg, #9B7BFF, #7C5CFF 55%, #5B3BE0);
  --bl-spark: linear-gradient(120deg, #FFB54D, #FF8A3D 50%, #FF6A2C);

  /* App design tokens */
  --background: #ffffff;
  --foreground: #14102E;
  --card: #ffffff;
  --card-foreground: #14102E;
  --popover: #ffffff;
  --popover-foreground: #14102E;
  --primary: #14102E;
  --primary-foreground: #ffffff;
  --secondary: #f4f2fb;
  --secondary-foreground: #14102E;
  --muted: #f4f2fb;
  --muted-foreground: #6B6488;
  --accent: #7C5CFF;
  --accent-foreground: #ffffff;
  --destructive: #ff3b30;
  --destructive-foreground: #ffffff;
  --border: #e6e2f5;
  --input: #e6e2f5;
  --ring: #7C5CFF;
  --radius: 0.75rem;

  /* Brand-specific tokens (the codebase calls these "brand-blue" — it's violet) */
  --brand-blue: #7C5CFF;
  --brand-blue-hover: #5B3BE0;
  --brand-blue-light: #efeaff;
  --secondary-text: #6B6488;
  --surface: #f6f4ff;
  --surface-hover: #ece7fb;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, 'Cascadia Mono', 'Roboto Mono', monospace;
}

/* ============================================================
   BRAND ANIMATIONS (ported from source-design globals.css, bl-* keyframes)
   ============================================================ */
@keyframes bl-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bl-foil { 0% { background-position: 200% 0; } 100% { background-position: -100% 0; } }
@keyframes bl-badge-pop { 0% { transform: scale(1); } 45% { transform: scale(1.65); } 100% { transform: scale(1); } }
@keyframes bl-link-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } }
@keyframes bl-glow1 { 0%,100% { transform: translateX(-50%) translate(0,0); } 40% { transform: translateX(-50%) translate(12px,24px); } 70% { transform: translateX(-50%) translate(-8px,10px); } }
@keyframes bl-glow2 { 0%,100% { transform: translate(0,0); } 35% { transform: translate(-16px,-20px); } 65% { transform: translate(8px,-12px); } }
@keyframes bl-cart-slide { from { transform: translateX(105%); } to { transform: translateX(0); } }
@keyframes bl-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes bl-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -100% 0; } }
@keyframes bl-glow { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes bl-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(433%); } }
/* hero orbs */
@keyframes bl-vert { 0%,100% { transform: translateY(-50%); } 50% { transform: translateY(50%); } }
@keyframes bl-circle { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes bl-horiz { 0%,100% { transform: translateX(-50%) translateY(-10%); } 50% { transform: translateX(50%) translateY(10%); } }
/* featured BOGO shimmer */
@keyframes bl-bogo-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -100% 0; } }
/* misc dots/pulses */
@keyframes bl-cart-pulse { 0% { transform: scale(1); opacity: .7; } 70% { transform: scale(2.4); opacity: 0; } 100% { opacity: 0; } }
@keyframes bl-sale-pulse { 0% { transform: scale(1); opacity: .7; } 70% { transform: scale(2.6); opacity: 0; } 100% { opacity: 0; } }
@keyframes bl-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes bl-btn-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes bl-btn-shimmer { 0% { transform: translateX(-200%); } 100% { transform: translateX(200%); } }
@keyframes bl-btn-glow { 0%,100% { opacity: .6; transform: translateX(-50%) scaleX(1); } 50% { opacity: 1; transform: translateX(-50%) scaleX(1.15); } }
@keyframes bl-float-img { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.015); } }
@keyframes bl-reward-gold-shift { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

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

html, body {
  max-width: 100vw;
  overflow-x: clip;
  margin: 0;
  padding: 0;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

/* Display face for headings + the brand UI labels */
h1, h2, h3, h4, .bl-display { font-family: var(--font-display); }

a { color: inherit; text-decoration: none; }
img, video, svg, canvas { max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

/* WP admin bar offset safety */
body.admin-bar .bl-nav-fixed { top: 32px; }
@media (max-width: 782px){ body.admin-bar .bl-nav-fixed { top: 46px; } }

/* Mobile: strip purchase-card chrome (source-design parity) */
@media (max-width: 639px) {
  .bl-purchase-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   PAGE LOADER (#banger-loader) — ported from the loader
   ============================================================ */
#banger-loader {
  position: fixed; inset: 0;
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 36px; opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .35s var(--bl-ease), visibility 0s linear .35s;
  z-index: 99999;
}
#banger-loader.bl-active {
  opacity: 1; pointer-events: auto; visibility: visible;
  transition: opacity .35s var(--bl-ease), visibility 0s linear 0s;
}
.bl-wordmark { position: relative; display: flex; align-items: center; gap: 14px; animation: bl-breathe 2.2s ease-in-out infinite; }
.bl-wordmark .bl-glyph { width: 30px; height: 32px; flex-shrink: 0; }
.bl-wordmark-text {
  font-family: var(--font-display) !important;
  font-weight: 600 !important; font-size: 22px; letter-spacing: 0.30em;
  background: linear-gradient(90deg,#14102E 0%,#14102E 40%,#7C5CFF 50%,#14102E 60%,#14102E 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: bl-shimmer 2.8s ease-in-out infinite;
}
.bl-wordmark::before {
  content: ''; position: absolute; inset: -20px -40px;
  background: radial-gradient(ellipse at center, rgba(124,92,255,.10), transparent 70%);
  z-index: -1; animation: bl-glow 2.2s ease-in-out infinite;
}
.bl-progress { width: 200px; height: 1px; background: rgba(20,16,46,.08); overflow: hidden; position: relative; }
.bl-progress::before {
  content: ''; position: absolute; inset: 0; width: 30%;
  background: linear-gradient(90deg, transparent, #7C5CFF, transparent);
  animation: bl-slide 1.6s ease-in-out infinite;
}

/* shared layout helper */
.bl-container { max-width: 1280px; margin: 0 auto; padding-left: clamp(16px,4vw,56px); padding-right: clamp(16px,4vw,56px); }