/* ===================================================================
   CHEESEHUB // OWKOT 2005 CYBER-MECHA DESIGN SYSTEM
   Inspired by @owkot & 2000s Y2K Cybertrance / Skeuomorphic Hardware UI
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&family=Space+Grotesk:wght@400;500;600;700&family=Rajdhani:wght@500;600;700&family=Share+Tech+Mono&display=swap');

:root {
  /* THEME 1: ELECTRIC CYAN BLUE (Inspired by @reflex & @guardian) */
  --accent: #00f0ff;
  --accent-rgb: 0, 240, 255;
  --accent-bright: #38bdf8;
  --accent-deep: #0284c7;
  --accent-glow: rgba(0, 240, 255, 0.45);
  --accent-dim: rgba(0, 240, 255, 0.12);
  
  --bg-deep: #02050b;
  --bg-surface: #060b14;
  --bg-elevated: #0b1322;
  --bg-metal: #101c30;

  --metal-light: #1e2e4a;
  --metal-dark: #070c16;
  --metal-border: rgba(255, 255, 255, 0.12);

  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  
  --bg-deep: #050608;
  --bg-surface: #0a0c10;
  --bg-elevated: #11141a;
  --bg-metal: #161922;

  --metal-light: #2a2e3d;
  --metal-dark: #0d0f14;
  --metal-border: rgba(255, 255, 255, 0.12);

  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  --font-display: 'Syncopate', sans-serif;
  --font-heading: 'Syncopate', sans-serif;
  --font-ui: 'Space Grotesk', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
}

/* PALETTE 2: LABYRINTH CYAN (@owkot Image 3) */
[data-theme="cyan"] {
  --accent: #00f0ff;
  --accent-rgb: 0, 240, 255;
  --accent-bright: #67e8f9;
  --accent-deep: #0e7490;
  --accent-glow: rgba(0, 240, 255, 0.5);
  --accent-dim: rgba(0, 240, 255, 0.15);
  --bg-deep: #030712;
  --bg-surface: #070e1b;
  --bg-elevated: #0f172a;
  --bg-metal: #131d33;
}

/* PALETTE 3: SOLARIA GOLD (@owkot Image 4) */
[data-theme="gold"] {
  --accent: #f59e0b;
  --accent-rgb: 245, 158, 11;
  --accent-bright: #fbbf24;
  --accent-deep: #78350f;
  --accent-glow: rgba(245, 158, 11, 0.5);
  --accent-dim: rgba(245, 158, 11, 0.15);
  --bg-deep: #080603;
  --bg-surface: #120e06;
  --bg-elevated: #1c150b;
  --bg-metal: #291f0e;
}

/* PALETTE 4: VOID CRIMSON (@owkot Image 5 & Makima Reel) */
[data-theme="crimson"] {
  --accent: #f43f5e;
  --accent-rgb: 244, 63, 94;
  --accent-bright: #fb7185;
  --accent-deep: #881337;
  --accent-glow: rgba(244, 63, 94, 0.55);
  --accent-dim: rgba(244, 63, 94, 0.15);
  --bg-deep: #090204;
  --bg-surface: #140508;
  --bg-elevated: #1f080e;
  --bg-metal: #2e0c15;
}

/* BASE STYLES */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #000000;
  background-image: url('assets/bg_topo_black.png');
  background-size: 1374px auto;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: repeat;
  color: var(--text-main);
  font-family: var(--font-ui);
  letter-spacing: 0.02em;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* SELECTION */
::selection {
  background: #2563eb;
  color: #fff;
}

/* HEXAGONAL & GRID BACKGROUNDS */
.bg-hex-grid {
  /* clean matte dark blue */
}

/* SCANLINE CRT EFFECT DISABLED */
.scanlines::after {
  display: none !important;
}

/* 2005 SKEUOMORPHIC HARDWARE PANELS */
.hw-panel {
  background: linear-gradient(145deg, rgba(11, 19, 34, 0.75) 0%, rgba(4, 8, 16, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 
    inset 1px 1px 0 rgba(255, 255, 255, 0.15),
    inset -1px -1px 0 rgba(0, 0, 0, 0.6),
    0 20px 40px -10px rgba(0, 0, 0, 0.85);
  position: relative;
  backdrop-filter: blur(16px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.hw-panel:hover {
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow: 
    inset 1px 1px 0 rgba(255, 255, 255, 0.25),
    0 0 30px rgba(0, 240, 255, 0.15),
    0 20px 45px -10px rgba(0, 0, 0, 0.9);
}

.hw-panel-chamfer {
  clip-path: polygon(
    14px 0%, calc(100% - 14px) 0%,
    100% 14px, 100% calc(100% - 14px),
    calc(100% - 14px) 100%, 14px 100%,
    0% calc(100% - 14px), 0% 14px
  );
}

.hw-panel-top-chamfer {
  clip-path: polygon(
    0 0, calc(100% - 18px) 0,
    100% 18px, 100% 100%,
    0 100%
  );
}

/* BRUSHED METAL TEXTURE */
.brushed-metal {
  background: 
    repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 3px),
    linear-gradient(180deg, #242938 0%, #151822 50%, #0d0f15 100%);
}

/* HARDWARE SCREW (HEX BOLT) */
.hex-bolt {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #94a3b8 0%, #334155 70%, #0f172a 100%);
  box-shadow: inset 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.8);
  position: relative;
}
.hex-bolt::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 5px; height: 5px;
  background: #090b10;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* 3D LIQUID CHROME HEADERS (@owkot Style) */
.text-chrome {
  background: linear-gradient(
    180deg, 
    #ffffff 0%, 
    #e2e8f0 30%, 
    #94a3b8 48%, 
    #475569 50%, 
    #ffffff 52%, 
    #cbd5e1 75%, 
    #64748b 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px var(--accent-glow);
}

.text-chrome-gold {
  background: linear-gradient(
    180deg, 
    #ffffff 0%, 
    #fef08a 35%, 
    #d97706 49%, 
    #78350f 50%, 
    #fef3c7 52%, 
    #b45309 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 2005 SPECULAR PILL BADGE */
.glass-pill {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.03) 50%, rgba(0, 0, 0, 0.4) 51%, rgba(255, 255, 255, 0.08) 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 4px 15px rgba(0, 0, 0, 0.5);
  border-radius: 9999px;
  position: relative;
  overflow: hidden;
}

.glass-pill::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.08) 100%);
  border-radius: 9999px 9999px 0 0;
  pointer-events: none;
}

/* 5-DIGIT MECHANICAL DIGITAL COUNTER */
.odometer-digit {
  width: 22px;
  height: 32px;
  background: linear-gradient(180deg, #090b10 0%, #151820 40%, #090b10 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.9), 0 2px 5px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--accent-bright);
  text-shadow: 0 0 8px var(--accent-glow);
  position: relative;
}
.odometer-digit::after {
  content: "";
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: rgba(0,0,0,0.7);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08);
}

/* AUDIO WAVEFORM BARS */
.waveform-bar {
  width: 3px;
  background: var(--accent);
  border-radius: 1px;
  transform-origin: bottom;
  box-shadow: 0 0 4px var(--accent-glow);
  animation: pulseWave 1.2s ease-in-out infinite alternate;
}
@keyframes pulseWave {
  0% { height: 4px; opacity: 0.3; }
  50% { height: 18px; opacity: 0.8; }
  100% { height: 12px; opacity: 1; }
}

/* ROTATING RADAR / TURBINE */
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes spinReverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}
.animate-spin-slow {
  animation: spinSlow 30s linear infinite;
}
.animate-spin-reverse {
  animation: spinReverse 20s linear infinite;
}
.animate-radar-sweep {
  animation: spinSlow 4s linear infinite;
}

/* LASER HORIZON LINE */
.laser-horizon {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--accent-dim) 20%, var(--accent) 50%, var(--accent-dim) 80%, transparent 100%);
  box-shadow: 0 0 12px var(--accent);
}

/* INTERACTIVE PILL BUTTONS (Smooth Curves, Liquid Glow, No Sharp AI Corners) */
.btn-cyber-primary, .btn-pill-primary {
  font-family: var(--font-heading);
  letter-spacing: 0.18em;
  background: linear-gradient(180deg, #38bdf8 0%, #00f0ff 40%, #0284c7 100%);
  color: #020617;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 9999px;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
    0 0 30px rgba(0, 240, 255, 0.45),
    0 10px 20px -5px rgba(0, 240, 255, 0.3);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  clip-path: none;
}
.btn-cyber-primary:hover, .btn-pill-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 
    inset 0 1px 0 #ffffff,
    0 0 45px rgba(0, 240, 255, 0.65),
    0 15px 30px -5px rgba(0, 240, 255, 0.4);
  filter: brightness(1.1);
}
.btn-cyber-primary:active, .btn-pill-primary:active {
  transform: translateY(1px) scale(0.98);
}

.btn-cyber-secondary, .btn-pill-secondary {
  font-family: var(--font-heading);
  letter-spacing: 0.18em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  color: #e2e8f0;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9999px;
  backdrop-filter: blur(12px);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 8px 25px rgba(0, 0, 0, 0.6);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  clip-path: none;
}
.btn-cyber-secondary:hover, .btn-pill-secondary:hover {
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.15) 0%, rgba(0, 240, 255, 0.05) 100%);
  border-color: rgba(0, 240, 255, 0.6);
  color: #ffffff;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 
    inset 0 1px 0 rgba(0, 240, 255, 0.5),
    0 0 30px rgba(0, 240, 255, 0.3);
}

/* 3D PERSPECTIVE STAGE & ASYMMETRICAL PROJECTION (Instagram Reflex / Guardian Style) */
.hero-3d-stage {
  perspective: 1400px;
  transform-style: preserve-3d;
}
.hero-hologram-panel {
  transform: perspective(1400px) rotateY(-5deg) rotateX(2deg) translateZ(20px);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-hologram-panel:hover {
  transform: perspective(1400px) rotateY(-1deg) rotateX(1deg) translateZ(40px);
}
@media (max-width: 1024px) {
  .hero-hologram-panel {
    transform: none;
  }
}

/* HUD TECH BRACKETS */
.hud-corner-tl {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 16px;
  height: 16px;
  border-top: 2px solid #00f0ff;
  border-left: 2px solid #00f0ff;
  pointer-events: none;
}
.hud-corner-br {
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 16px;
  height: 16px;
  border-bottom: 2px solid #00f0ff;
  border-right: 2px solid #00f0ff;
  pointer-events: none;
}

/* GLOW PULSE */
@keyframes corePulse {
  0% { box-shadow: 0 0 25px var(--accent-glow), inset 0 0 15px var(--accent-glow); }
  50% { box-shadow: 0 0 50px var(--accent-glow), inset 0 0 30px var(--accent-bright); }
  100% { box-shadow: 0 0 25px var(--accent-glow), inset 0 0 15px var(--accent-glow); }
}
.core-pulse {
  animation: corePulse 3s ease-in-out infinite;
}

/* SCROLLBAR */
::-webkit-scrollbar {
  width: 8px;
  background: var(--bg-deep);
}
::-webkit-scrollbar-thumb {
  background: var(--metal-light);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* ===================================================================
   INFINITE MOVING CAROUSEL MARQUEE (SMOOTH Y2K MOTION)
   =================================================================== */
@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.reviews-carousel-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 1.5rem 0;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.reviews-marquee-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: marqueeScroll 45s linear infinite;
  will-change: transform;
}

.reviews-carousel-container:hover .reviews-marquee-track {
  animation-play-state: paused;
}

.review-card-item {
  width: 380px;
  flex-shrink: 0;
  background: linear-gradient(145deg, rgba(11, 19, 34, 0.8) 0%, rgba(4, 8, 16, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.8);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.review-card-item:hover {
  border-color: rgba(0, 240, 255, 0.6);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 40px -5px rgba(0, 240, 255, 0.2);
}

/* ===================================================================
   CHEESEHUB // KOMERZA STOREFRONT THEME OVERRIDES
   Target: Eliminate pink / magenta ambient glow behind showcases
   Theme: Pure Deep Obsidian (#050608) & Tactical Arctic Cyan (#00f0ff)
   =================================================================== */

/* 1. FORCE KILL ALL PINK / MAGENTA RADIAL GLOWS ON SHOWCASES & HERO */
[class*="showcase"]::before,
[class*="showcase"]::after,
[class*="Showcase"]::before,
[class*="Showcase"]::after,
[class*="carousel"]::before,
[class*="carousel"]::after,
[class*="Carousel"]::before,
[class*="Carousel"]::after,
.hero-glow,
.ambient-glow,
.showcase-glow,
.carousel-glow,
.glow-effect,
.ambient-halo,
.radial-glow {
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  filter: none !important;
  box-shadow: none !important;
}

/* 2. NEUTRALIZE ANY INLINE OR TAILWIND RADIAL BLURS BEHIND HERO CARDS */
div[style*="radial-gradient"][style*="236"],
div[style*="radial-gradient"][style*="244"],
div[style*="radial-gradient"][style*="pink"],
div[style*="radial-gradient"][style*="purple"],
div[style*="radial-gradient"][style*="magenta"],
div[style*="radial-gradient"][style*="#e"],
div[style*="radial-gradient"][style*="#d"],
div[class*="blur-"][class*="pink"],
div[class*="blur-"][class*="purple"],
div[class*="blur-"][class*="fuchsia"],
div[class*="blur-"][class*="rose"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* 3. OPTIONAL: REPLACE WITH BRAND CYBER-CYAN GLOW (UNCOMMENT IF DESIRED)
   If you want a subtle, clean arctic-cyan halo instead of total pitch-black:
*/
/*
[class*="showcase"]::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 500px !important;
  height: 350px !important;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.12) 0%, rgba(2, 6, 12, 0) 70%) !important;
  filter: blur(60px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 0.8 !important;
}
*/

/* 4. SHOWCASE CARDS CLEAN TACTICAL BORDER & SHADOW STYLING */
[class*="showcase"] [class*="card"],
[class*="carousel"] [class*="card"],
.product-card {
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Active card highlight in cyan instead of magenta */
[class*="showcase"] [class*="active"],
[class*="carousel"] [class*="active"] {
  border-color: rgba(0, 240, 255, 0.35) !important;
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.15) !important;
}