/* ai.quham — demo-first homepage
   Custom CSS that complements Tailwind CDN. Keep this small. */

:root {
  --accent: #3b82f6;
  --accent-hi: #60a5fa;
  --ink: #0a0b0f;
  --bone: #f5f3ee;
}

html { scroll-behavior: smooth; }

body {
  /* Optical refinement; Inter Tight reads better with slightly looser tracking at body size. */
  letter-spacing: -0.005em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* tabular figures for any element that wants it */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* ----- atmospheric grid bg used on dark sections ----- */
.hero-grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 80%);
}

/* ----- slow ambient pulse on status dots ----- */
@keyframes pulseSlow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}
.animate-pulse-slow { animation: pulseSlow 2.4s ease-in-out infinite; }

/* ----- skeleton shimmer ----- */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton {
  background-image: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.10) 45%,
    rgba(255,255,255,0.04) 90%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}

/* ----- log line animations ----- */
.log-item .log-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  flex-shrink: 0;
}
.log-item.running .log-dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.18);
  animation: pulseSlow 1s ease-in-out infinite;
}
.log-item.done {
  color: rgba(255,255,255,0.85);
}
.log-item.done .log-dot {
  background: #a5f3a0;
  box-shadow: 0 0 0 0 transparent;
  animation: none;
}
.log-time { font-size: 11px; color: rgba(255,255,255,0.35); }

/* ----- gauge (conic-gradient ring) -----
   --p set by JS (0..100), --hue is ignored; we use a gradient. */
.gauge {
  --p: 0;
  border-radius: 999px;
  background:
    conic-gradient(
      var(--accent) 0,
      var(--accent-hi) calc(var(--p) * 1% * 0.55),
      var(--accent) calc(var(--p) * 1%),
      rgba(255,255,255,0.08) calc(var(--p) * 1%) 100%
    );
  position: relative;
  transition: background 800ms cubic-bezier(.2,.7,.2,1);
}
.gauge::before {
  content: "";
  position: absolute; inset: 8px;
  border-radius: 999px;
  background: #0e1018;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

/* ----- breakdown bar ----- */
.bar-track {
  position: relative;
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.bar-fill {
  position: absolute; inset: 0;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  border-radius: 999px;
  transition: width 900ms cubic-bezier(.2,.7,.2,1);
}
.bar-fill::after {
  content: "";
  position: absolute; right: 0; top: -2px; bottom: -2px;
  width: 2px;
  background: var(--accent-hi);
  box-shadow: 0 0 12px var(--accent-hi);
  opacity: 0.7;
}

/* ----- result fade-in ----- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 480ms cubic-bezier(.2,.7,.2,1) both; }
.fade-up-delay-1 { animation-delay: 60ms; }
.fade-up-delay-2 { animation-delay: 140ms; }
.fade-up-delay-3 { animation-delay: 220ms; }
.fade-up-delay-4 { animation-delay: 300ms; }

/* ----- caret in URL input when empty ----- */
#urlInput:focus { caret-color: var(--accent); }

/* ----- reduce motion ----- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}