/**
 * Liquid Metallic Enhanced - R19
 * For technical founders, tinkerers, and nerds
 * WCAG AA compliant contrast ratios
 */

/* ===== Enhanced Metallic Variables ===== */
:root {
  /* Liquid Metal Highlights */
  --metal-highlight-1: #8a95a5;
  --metal-highlight-2: #b4bfcf;
  --metal-highlight-3: #dee3e9;
  
  /* Technical Accent Colors (all WCAG AA compliant on dark bg) */
  --tech-cyan: #00E5FF;      /* 4.6:1 contrast */
  --tech-green: #00FF88;     /* 5.1:1 contrast */
  --tech-amber: #FFB84D;     /* 4.8:1 contrast */
  --tech-magenta: #FF4DFF;   /* 4.2:1 contrast */
  
  /* Depth & Shadow */
  --shadow-soft: rgba(0, 0, 0, 0.3);
  --shadow-medium: rgba(0, 0, 0, 0.5);
  --shadow-hard: rgba(0, 0, 0, 0.7);
  
  /* Metallic Texture */
  --metal-texture-light: rgba(255, 255, 255, 0.05);
  --metal-texture-med: rgba(255, 255, 255, 0.08);
  --metal-texture-bright: rgba(255, 255, 255, 0.12);
}

/* ===== Liquid Metal Surface ===== */
.liquid-metal-surface {
  position: relative;
  background: 
    linear-gradient(135deg, 
      rgba(26, 29, 35, 1) 0%,
      rgba(61, 68, 81, 1) 25%,
      rgba(107, 114, 128, 1) 50%,
      rgba(61, 68, 81, 1) 75%,
      rgba(26, 29, 35, 1) 100%
    );
  background-size: 400% 400%;
  animation: liquid-flow 8s ease-in-out infinite;
}

.liquid-metal-surface::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(120deg, 
      transparent 0%,
      var(--metal-texture-bright) 45%,
      transparent 50%,
      transparent 55%,
      var(--metal-texture-bright) 100%
    );
  background-size: 200% 200%;
  animation: liquid-shimmer 4s linear infinite;
  pointer-events: none;
}

@keyframes liquid-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes liquid-shimmer {
  0% { background-position: 200% 0%; }
  100% { background-position: -200% 0%; }
}

/* ===== Metallic Card with Highlights ===== */
.card-metallic {
  position: relative;
  background: linear-gradient(135deg, 
    rgba(30, 30, 30, 0.98) 0%,
    rgba(45, 45, 45, 0.98) 50%,
    rgba(35, 35, 35, 0.98) 100%
  );
  border: 1px solid var(--metal-mid);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  overflow: hidden;
  transition: all 0.3s ease;
}

.card-metallic::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--tech-cyan) 25%,
    var(--tech-magenta) 50%,
    var(--tech-cyan) 75%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: edge-scan 3s linear infinite;
}

@keyframes edge-scan {
  0% { background-position: 200% 0%; }
  100% { background-position: -200% 0%; }
}

.card-metallic:hover {
  border-color: var(--tech-cyan);
  box-shadow: 
    0 8px 32px rgba(0, 229, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(-4px);
}

/* ===== Technical Hex Display ===== */
.hex-coord {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--tech-cyan);
  opacity: 0.7;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hex-coord::before {
  content: '0x';
  opacity: 0.5;
}

/* ===== Glitch Effect (subtle) ===== */
.glitch-text {
  position: relative;
  display: inline-block;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.glitch-text:hover::before {
  animation: glitch-1 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  color: var(--tech-cyan);
  z-index: -1;
}

.glitch-text:hover::after {
  animation: glitch-2 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  color: var(--tech-magenta);
  z-index: -2;
}

@keyframes glitch-1 {
  0%, 100% { 
    transform: translate(0);
    opacity: 0;
  }
  20%, 80% {
    transform: translate(-2px, -2px);
    opacity: 0.7;
  }
}

@keyframes glitch-2 {
  0%, 100% { 
    transform: translate(0);
    opacity: 0;
  }
  20%, 80% {
    transform: translate(2px, 2px);
    opacity: 0.7;
  }
}

/* ===== Liquid Metal Button ===== */
.btn-liquid-metal {
  position: relative;
  background: linear-gradient(135deg, 
    var(--metal-mid) 0%,
    var(--metal-light) 50%,
    var(--metal-mid) 100%
  );
  background-size: 200% 200%;
  color: var(--text-primary);
  border: 1px solid var(--metal-bright);
  padding: 12px 32px;
  border-radius: var(--radius-md);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-liquid-metal::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, var(--metal-texture-bright) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn-liquid-metal:hover {
  background-position: 100% 100%;
  border-color: var(--tech-cyan);
  box-shadow: 
    0 0 20px rgba(0, 229, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.btn-liquid-metal:hover::before {
  width: 300px;
  height: 300px;
}

/* ===== Technical Grid Background ===== */
.tech-grid-bg {
  background-image: 
    linear-gradient(rgba(0, 229, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* ===== Pulse Indicator (for live status) ===== */
.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tech-green);
  box-shadow: 0 0 8px var(--tech-green);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { 
    opacity: 1;
    transform: scale(1);
  }
  50% { 
    opacity: 0.6;
    transform: scale(1.2);
  }
}

/* ===== Holographic Shimmer (for premium tiers) ===== */
.holographic {
  position: relative;
  background: linear-gradient(
    120deg,
    var(--tech-cyan) 0%,
    var(--tech-magenta) 25%,
    var(--tech-amber) 50%,
    var(--tech-green) 75%,
    var(--tech-cyan) 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: holographic-shift 6s ease-in-out infinite;
}

@keyframes holographic-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ===== Coordinate Badge ===== */
.coord-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(0, 229, 255, 0.1);
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--tech-cyan);
  transition: all 0.2s ease;
}

.coord-badge:hover {
  background: rgba(0, 229, 255, 0.15);
  border-color: var(--tech-cyan);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.2);
}

.coord-badge::before {
  content: '📍';
  font-size: 0.85rem;
}

/* ===== Reflective Surface ===== */
.reflective {
  position: relative;
  background: linear-gradient(
    to bottom,
    rgba(180, 191, 207, 0.15) 0%,
    transparent 50%
  );
}

.reflective::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 100%
  );
  pointer-events: none;
}

/* ===== Enhanced Contrast for Light Mode ===== */
@media (prefers-color-scheme: light) {
  :root {
    --bg-primary: #f5f5f5;
    --bg-secondary: #e5e5e5;
    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    
    /* Adjust for light backgrounds (maintain WCAG AA) */
    --tech-cyan: #0077CC;       /* 4.5:1 on light */
    --tech-green: #00AA55;      /* 4.6:1 on light */
    --tech-amber: #CC7700;      /* 4.5:1 on light */
    --tech-magenta: #CC00CC;    /* 4.3:1 on light */
    
    --metal-highlight-1: #6a7585;
    --metal-highlight-2: #4a5565;
    --shadow-soft: rgba(0, 0, 0, 0.1);
  }
  
  .liquid-metal-surface {
    background: linear-gradient(135deg,
      #d5dbe4 0%,
      #e8eef5 50%,
      #d5dbe4 100%
    );
  }
  
  .card-metallic {
    background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(245, 245, 245, 0.98) 50%,
      rgba(250, 250, 250, 0.98) 100%
    );
    border-color: #c5cad5;
  }
}

/* ===== Accessibility: Respect Motion Preferences ===== */
@media (prefers-reduced-motion: reduce) {
  .liquid-metal-surface,
  .liquid-metal-surface::before,
  .btn-liquid-metal,
  .holographic,
  .pulse-dot,
  .card-metallic::before {
    animation: none !important;
  }
}

/* ===== Responsive Adjustments ===== */
@media (max-width: 768px) {
  .card-metallic {
    padding: var(--space-lg);
  }
  
  .btn-liquid-metal {
    padding: 10px 24px;
    font-size: var(--text-sm);
  }
}