/* Scanner — sniper-HUD skin on top of the shared style.css/snipe.css tokens.
   Everything here is page-scoped decoration + layout re-ordering; the shared component
   base rules (.intake/.stat-box/.verdict-badge/...) stay untouched for the other pages
   that also use them. The redesign's rules: the TOOL is the landing (console at top,
   marketing below the results), and every decoration is CSS-only — no images, no new
   requests. Ambient motion is confined to the hero pulses (reticle + online dot) and the
   targeting console's scope effects (requested 2026-09-08 — see the target-lock input
   scope section), all transform/opacity/shadow only and stilled under
   prefers-reduced-motion. */

/* ── HUD hero ─────────────────────────────────────────────────────────────────────── */

.hud-hero {
  position: relative;
  padding-top: 8px;
  /* clip (not hidden): the reticle bleeds past the hero's right edge by design, but a
     decorative bleed must never widen the page into horizontal scroll on a phone.
     overflow-x: clip clips that axis only — the top bleed stays visible. */
  overflow-x: clip;
}

/* Large targeting reticle behind the headline — pure CSS (ring + cross + tick ring),
   very low opacity, slow rotation. Decorative only (aria-hidden). */
.hud-reticle {
  position: absolute;
  top: -30px;
  right: -10px;
  width: 300px;
  height: 300px;
  pointer-events: none;
  opacity: 0.5;
  background:
    /* cross hairs */
    linear-gradient(to right, transparent calc(50% - 1px), rgba(var(--safe-rgb), 0.28) calc(50% - 1px), rgba(var(--safe-rgb), 0.28) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to bottom, transparent calc(50% - 1px), rgba(var(--safe-rgb), 0.28) calc(50% - 1px), rgba(var(--safe-rgb), 0.28) calc(50% + 1px), transparent calc(50% + 1px)),
    /* outer ring */
    radial-gradient(circle, transparent 62%, rgba(var(--safe-rgb), 0.30) 62.6%, rgba(var(--safe-rgb), 0.30) 63.6%, transparent 64.2%),
    /* inner ring */
    radial-gradient(circle, transparent 34%, rgba(var(--safe-rgb), 0.18) 34.6%, rgba(var(--safe-rgb), 0.18) 35.4%, transparent 36%);
  animation: reticle-drift 26s linear infinite;
}

@keyframes reticle-drift {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.04); }
  100% { transform: rotate(360deg) scale(1); }
}

.hud-hero h1 {
  text-shadow: 0 0 34px rgba(var(--safe-rgb), 0.18);
}

/* ── Live system readouts (HUD chips) ─────────────────────────────────────────────── */

.hud-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.hud-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--card-edge);
  border-radius: 6px;
  padding: 7px 12px;
  text-transform: uppercase;
}

.hud-chip-value {
  color: var(--paper);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.hud-chip--online {
  color: var(--safe);
  border-color: rgba(var(--safe-rgb), 0.35);
  align-items: center;
}

.hud-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--safe);
  box-shadow: 0 0 8px var(--safe);
  animation: hud-dot-pulse 2s ease-in-out infinite;
}

@keyframes hud-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ── Targeting console (the intake) ───────────────────────────────────────────────── */

.hud-console {
  margin-top: 28px;
  border-radius: 12px;
  overflow: hidden; /* keeps the scanline inside the frame */
}

/* Corner brackets — the HUD frame. */
.hud-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(var(--safe-rgb), 0.55);
  pointer-events: none;
  z-index: 2;
}
.hud-corner--tl { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.hud-corner--tr { top: 6px; right: 6px; border-left: none; border-bottom: none; }
.hud-corner--bl { bottom: 6px; left: 6px; border-right: none; border-top: none; }
.hud-corner--br { bottom: 6px; right: 6px; border-left: none; border-top: none; }

/* Scanline — invisible while idle; sweeps top→bottom only while a scan is in flight
   (app.js toggles .is-scanning on the console). */
.hud-scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(var(--safe-rgb), 0.7), transparent);
  box-shadow: 0 0 14px rgba(var(--safe-rgb), 0.5);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.hud-console.is-scanning .hud-scanline {
  opacity: 1;
  animation: hud-scan-sweep 1.6s ease-in-out infinite;
}

@keyframes hud-scan-sweep {
  0%   { top: 0; }
  50%  { top: calc(100% - 2px); }
  100% { top: 0; }
}

.hud-console.is-scanning {
  border-color: rgba(var(--safe-rgb), 0.45);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 24px rgba(var(--safe-rgb), 0.12);
}

.hud-console label kbd {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--paper);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--card-edge);
  border-radius: 4px;
  padding: 1px 5px;
}

/* ── Target-lock input scope ──────────────────────────────────────────────────────────
   The mint field is the trigger of the whole product, so it reads as a weapon scope:
   crosshair in the muzzle, a radar sweep gliding across the glass while idle, corner
   brackets that snap inward when you take aim. Three reticle states, all CSS off the
   input's own state (no JS): breathing (idle) → spinning (focused, "aiming") → locked
   solid (a target is typed — the :not(:placeholder-shown) sibling rules). Everything
   still transform/opacity/shadow-only and stilled under prefers-reduced-motion. */

.mint-scope {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  border: 1px solid rgba(var(--safe-rgb), 0.28);
  border-radius: 10px;
  overflow: hidden;
  background:
    radial-gradient(340px 70px at 16% 50%, rgba(var(--safe-rgb), 0.07), transparent 70%),
    repeating-linear-gradient(90deg, rgba(var(--safe-rgb), 0.03) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg, rgba(var(--safe-rgb), 0.03) 0 1px, transparent 1px 13px),
    rgba(0, 0, 0, 0.45);
  transition: border-color 0.18s, box-shadow 0.18s;
  animation: scope-breathe 3.6s ease-in-out infinite;
}

@keyframes scope-breathe {
  0%, 100% { box-shadow: 0 0 0 rgba(var(--safe-rgb), 0); }
  50%      { box-shadow: 0 0 18px rgba(var(--safe-rgb), 0.10); }
}

.mint-scope:focus-within {
  border-color: rgba(var(--safe-rgb), 0.65);
  box-shadow: 0 0 0 3px rgba(var(--safe-rgb), 0.10), 0 0 26px rgba(var(--safe-rgb), 0.16);
  animation: none;
}

/* The input gives up its own chrome — the scope IS the chrome now. Specificity note:
   this (id + 2 classes) must outweigh style.css's #mint-input:focus border/glow. */
.hud-console .mint-scope #mint-input {
  border: none;
  box-shadow: none;
  background: transparent;
  font-size: 14.5px;
  padding: 16px 14px 16px 46px; /* room for the crosshair in the muzzle */
  caret-color: var(--safe);
  width: 100%;
}

/* Crosshair — idle breathe. */
.mint-scope-reticle {
  position: absolute;
  left: 14px;
  top: 50%;
  font-size: 20px;
  line-height: 1;
  color: rgba(var(--safe-rgb), 0.5);
  pointer-events: none;
  transform: translateY(-50%);
  animation: reticle-breathe 2.4s ease-in-out infinite;
}

@keyframes reticle-breathe {
  0%, 100% { opacity: 0.5; transform: translateY(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateY(-50%) scale(1.12); }
}

/* Focused: aiming — the crosshair sweeps a slow rotation. */
.mint-scope:focus-within .mint-scope-reticle {
  color: var(--safe);
  text-shadow: 0 0 10px rgba(var(--safe-rgb), 0.8);
  animation: reticle-aim 1.8s linear infinite;
}

@keyframes reticle-aim {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

/* A target is typed: locked — solid bright, one snap-in flash, no more motion. The id
   in the selector deliberately outweighs the :focus-within aiming rule above, so a
   filled field reads LOCKED even while still focused. */
#mint-input:not(:placeholder-shown) ~ .mint-scope-reticle {
  color: var(--safe);
  text-shadow: 0 0 12px rgba(var(--safe-rgb), 0.9);
  animation: reticle-lock 0.35s ease-out 1;
}

@keyframes reticle-lock {
  0%   { transform: translateY(-50%) scale(1.7); opacity: 0.3; }
  100% { transform: translateY(-50%) scale(1);   opacity: 1; }
}

/* Radar sweep — a light bar glides across the glass every few seconds while idle,
   and gets out of the way the moment the field is focused. */
.mint-scope-sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 70px;
  left: -18%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--safe-rgb), 0.13), transparent);
  animation: mint-sweep 4.6s ease-in-out infinite;
}

@keyframes mint-sweep {
  0%   { left: -18%; opacity: 0; }
  10%  { opacity: 1; }
  55%  { left: 105%; opacity: 1; }
  60%  { left: 105%; opacity: 0; }
  100% { left: 105%; opacity: 0; }
}

.mint-scope:focus-within .mint-scope-sweep { display: none; }

/* Corner brackets join in: soft idle breathing; taking aim (focus anywhere in the
   console) snaps them inward and full bright — the frame visibly closes on the target. */
.hud-console .hud-corner {
  transition: transform 0.22s ease, border-color 0.22s ease, opacity 0.22s ease;
  animation: corner-breathe 3.6s ease-in-out infinite;
}

@keyframes corner-breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

.hud-console:focus-within .hud-corner { border-color: var(--safe); opacity: 1; animation: none; }
.hud-console:focus-within .hud-corner--tl { transform: translate(3px, 3px); }
.hud-console:focus-within .hud-corner--tr { transform: translate(-3px, 3px); }
.hud-console:focus-within .hud-corner--bl { transform: translate(3px, -3px); }
.hud-console:focus-within .hud-corner--br { transform: translate(-3px, -3px); }

.hud-console:focus-within { border-color: rgba(var(--safe-rgb), 0.4); }
.hud-console:focus-within label[for="mint-input"] { color: var(--safe); }

#scan-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.08em;
}

/* Sonar ping off the trigger — an expanding ring every few seconds so the CTA is
   unmissable even before the cursor gets near it. Silenced while disabled (a scan in
   flight already has the scanline + spinning reticle carrying the motion). */
#scan-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: scan-btn-ping 2.8s ease-out infinite;
}

@keyframes scan-btn-ping {
  0%   { box-shadow: 0 0 0 0 rgba(var(--safe-rgb), 0.45); }
  55%  { box-shadow: 0 0 0 10px rgba(var(--safe-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--safe-rgb), 0); }
}

#scan-btn:disabled::after { animation: none; box-shadow: none; }

/* Armed: a mint is in the scope — the trigger brightens to say "this is the next
   click". :has() is progressive enhancement; without it the button just stays normal. */
.intake-row:has(#mint-input:not(:placeholder-shown)) #scan-btn {
  filter: brightness(1.12);
  box-shadow: 0 0 24px rgba(var(--safe-rgb), 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .mint-scope,
  .mint-scope-reticle,
  .hud-console .hud-corner,
  #scan-btn::after { animation: none; }
  .mint-scope-sweep { display: none; }
}

.scan-btn-reticle {
  font-size: 18px;
  line-height: 1;
  transform: translateY(-1px);
}

#scan-btn:disabled .scan-btn-reticle {
  animation: reticle-spin 1.2s linear infinite;
}

@keyframes reticle-spin {
  to { transform: translateY(-1px) rotate(360deg); }
}

/* The "what gets checked" toggle lives inside the console now — tighten its spacing. */
.hud-console .about-toggle { margin-top: 14px; }

/* ── Compliance row — both notices, one compact line each, side by side ───────────── */

.compliance-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

.compliance-row .disclaimer-banner,
.compliance-row .trust-callout {
  margin-top: 0;
  padding: 9px 14px;
  font-size: 11.5px;
  border-radius: 8px;
}

/* ── Results — target-locked header + risk gauge ──────────────────────────────────── */

#results .stat-box { border-radius: 12px; }
#results .cluster-card { border-radius: 14px; }

.token-header {
  position: relative;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 12px;
}

.token-header-lock {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--safe);
  border: 1px solid rgba(var(--safe-rgb), 0.4);
  border-radius: 5px;
  padding: 5px 10px;
  animation: lock-flash 0.9s ease-out 1;
  white-space: nowrap;
}

@keyframes lock-flash {
  0% { opacity: 0; letter-spacing: 0.5em; }
  60% { opacity: 1; }
  100% { letter-spacing: 0.16em; }
}

/* Risk gauge — the big number inside a conic-gradient reticle ring. app.js sets
   --risk-deg (riskPct × 3.6deg); color comes from the existing extreme/caution/low
   classes via currentColor so the ring, number, and glow can never disagree. */
.risk-verdict-row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 18px;
}

#results .risk-pct-display {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 148px;
  height: 148px;
  margin-bottom: 0;
  flex-shrink: 0;
  color: var(--ink-dim); /* pre-render fallback; state classes override below */
}

#results .risk-pct-display.extreme { color: var(--danger); }
#results .risk-pct-display.caution { color: var(--pin); }
#results .risk-pct-display.low { color: var(--safe); }

.risk-gauge-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(currentColor var(--risk-deg, 0deg), rgba(255, 255, 255, 0.07) var(--risk-deg, 0deg));
  /* annulus: mask away the middle so only an 8px ring remains */
  -webkit-mask: radial-gradient(circle, transparent 62px, #000 63px);
  mask: radial-gradient(circle, transparent 62px, #000 63px);
  filter: drop-shadow(0 0 10px currentColor);
  opacity: 0.85;
  transition: background 0.4s ease;
}

/* Reticle tick marks at the gauge's cardinal points. */
#results .risk-pct-display::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background:
    linear-gradient(to bottom, currentColor 8px, transparent 8px) 50% 0 / 2px 100% no-repeat,
    linear-gradient(to top, currentColor 8px, transparent 8px) 50% 100% / 2px 100% no-repeat,
    linear-gradient(to right, currentColor 8px, transparent 8px) 0 50% / 100% 2px no-repeat,
    linear-gradient(to left, currentColor 8px, transparent 8px) 100% 50% / 100% 2px no-repeat;
  opacity: 0.5;
  pointer-events: none;
}

#results .risk-pct-value {
  font-size: 40px;
}

#results .risk-pct-label {
  transform: none;
  font-size: 10px;
}

.risk-verdict-row .verdict-strip {
  margin-bottom: 0;
}

/* ── Value prop — condensed pitch strip BELOW the tool ────────────────────────────── */

.value-prop {
  margin-top: 40px;
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 16px;
}

.value-prop-tag {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--pin);
  margin-bottom: 12px;
}

.value-prop-lede {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 18px;
}
.value-prop-lede strong { color: var(--pin); }

.value-prop-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.value-prop-card p {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-dim);
}

/* ── Responsive ───────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .value-prop-cards { grid-template-columns: 1fr; }
  .compliance-row { grid-template-columns: 1fr; }
  .risk-verdict-row { flex-direction: column; align-items: flex-start; }
  .hud-reticle { width: 190px; height: 190px; top: -16px; right: -30px; }
  .token-header-lock { display: none; }
}