/* ─── ANIMATIONS ─── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 0.75s ease,transform 0.75s ease}
.reveal.on{opacity:1;transform:none}

/* ─── RESPONSIVE ─── */
@media(max-width:1024px){
  nav{padding:1rem 1.5rem}
  .nav-links{display:none}
  section{padding:5rem 1.5rem}
  #hero{padding:7rem 1.5rem 4rem}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .scanner-grid{grid-template-columns:repeat(2,1fr)}
  .sig-layout{grid-template-columns:1fr}
  .price-grid{grid-template-columns:repeat(2,1fr)}
  .road-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}.f-bottom{flex-direction:column;text-align:center}.f-disclaimer{text-align:center}
  .f-right{text-align:center}
  .f-links{justify-content:center}
  .app-grid{grid-template-columns:repeat(2,1fr)}
}


/* ── Skeleton loading ── */
@keyframes shimmer{
  0%  { background-position: -600px 0 }
  100%{ background-position:  600px 0 }
}
.skeleton-row{
  display:grid;
  grid-template-columns:1.6fr 0.8fr 1fr 1fr 1fr 0.8fr 1fr 1fr 1.6fr;
  padding:1rem 1.2rem;
  border-bottom:1px solid var(--border);
  gap:0.75rem;
  align-items:center;
  min-width:900px;
}
.skeleton-cell{
  height:14px;
  border-radius:4px;
  background:linear-gradient(90deg,#0d1117 25%,#1a2332 50%,#0d1117 75%);
  background-size:600px 100%;
  animation:shimmer 1.4s ease infinite;
}
.skeleton-cell.wide  { width:80%; }
.skeleton-cell.med   { width:60%; margin:auto; }
.skeleton-cell.narrow{ width:40%; margin:auto; }
@media(max-width:768px){
  .skeleton-row{
    display:flex;flex-direction:column;
    min-width:0;gap:0.5rem;padding:1rem;
  }
  .skeleton-cell{ width:100% !important; margin:0 !important; }
}

/* ── Mobile signal card rows ── */
/* Note: these divs use display:contents on desktop (set above in .app-row rule)
   so they are invisible to the grid — their children populate the grid cells directly.
   display:none is NOT set here because display:contents already handles desktop layout. */
.mobile-price-row{
  display:contents; /* desktop: children participate in grid directly */
}
.mobile-meta-row{
  display:contents; /* desktop: children participate in grid directly */
}
.mob-label{
  display:none;
  font-family:var(--font-mono);
  font-size:0.55rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.1em;
  margin-right:4px;
}
@media(max-width:768px){
  .mobile-price-row{
    display:flex !important;
    gap:1rem;
    flex-wrap:wrap;
  }
  .mobile-meta-row{
    display:flex !important;
    gap:1rem;
    flex-wrap:wrap;
  }
  .mob-label{ display:inline !important; }
  /* Hide the individual desktop ar-val cells that are NOT inside mobile rows */
  .app-row > .ar-val:not(.mobile-price-row .ar-val):not(.mobile-meta-row .ar-val){
    display:none !important;
  }
}


/* ════════════════════════════════════════════
   PHASE B — MOBILE RESPONSIVE
   ════════════════════════════════════════════ */

/* Toast animations */
@keyframes toastIn  { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes toastOut { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(12px)} }

/* Micro interactions */
/* ── UX-02: Scan progress bar ── */
#scan-progress-wrap{
  display:none;width:100%;margin-bottom:1rem;
}
#scan-progress-wrap.show{ display:block; }
.scan-progress-bar-bg{
  height:3px;background:var(--border2);border-radius:2px;overflow:hidden;margin-bottom:0.5rem;
}
.scan-progress-bar-fill{
  height:100%;background:linear-gradient(90deg,var(--cyan),var(--green));
  border-radius:2px;transition:width 0.4s ease;width:0%;
}
.scan-progress-label{
  font-family:var(--font-mono);font-size:0.62rem;color:var(--muted);
  letter-spacing:0.08em;display:flex;justify-content:space-between;
}
.scan-progress-label .step-msg{ color:var(--text); }
.scan-progress-label .step-pct{ color:var(--cyan); }
.scan-btn:not(:disabled):hover{
  background:var(--green);
  transform:translateY(-1px);
  box-shadow:0 4px 20px rgba(0,229,200,0.3);
  transition:all 0.2s ease;
}
.scan-btn:not(:disabled):active{
  transform:translateY(0);
  box-shadow:none;
}
/* app-tab hover */