/* 
 * ============================================================
 * SPIDTES BY OKELAH™ — style.css (New Design Edition)
 * ============================================================
 */

:root {
  --accent-blue: #3b82f6;
  --accent-red: #ef4444;
  --bg-dark: #050505;
}

/* Custom Hide/Show Utility */
.hidden {
  display: none !important;
}

/* Gauge Transitions */
#gauge-progress {
  transition: stroke-dasharray 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), stroke 0.5s ease;
}

#gauge-needle {
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: bottom center;
}

/* States */
#state-idle, #state-testing, #state-result {
  animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* History Items */
.history-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  transition: all 0.2s ease;
}

.history-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Receipt Stage (for export) */
#receipt-stage {
  width: 400px; /* Fixed width for consistent export */
}

/* Glitch Animation */
@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

.animate-glitch {
  animation: glitch 0.2s infinite;
}

/* Mobile Adjustments */
@media (max-width: 640px) {
  #idle-heading {
    font-size: 3rem;
  }
}