/* Home hero "route console" (Hero.jsx): two route cards instead of pill buttons. */
.ac-route { margin-top: 34px; max-width: 640px; }
.ac-route__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
  font: 600 11px/1 var(--font-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--fg3); }
.ac-route__head i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,0)); }
.ac-route__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.ac-route__card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 8px;
  padding: 18px 18px 16px; min-height: 176px; text-decoration: none; color: var(--fg1);
  background: rgba(14,16,20,.72); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(6px);
  border-radius: var(--radius-lg, 14px);
  transition: border-color .3s, transform .35s cubic-bezier(.2,.8,.2,1), background .3s; }
.ac-route__card::after { /* scan line on hover */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: -1;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0; transform: translateY(0); }
.ac-route__card:hover, .ac-route__card:focus-visible { border-color: rgba(227,27,35,.55); background: rgba(18,20,25,.88); transform: translateY(-3px); color: var(--fg1); outline: none; }
.ac-route__card:hover::after, .ac-route__card:focus-visible::after { opacity: 1; animation: acRouteScan 1.6s ease-in-out infinite; }
@keyframes acRouteScan { from { transform: translateY(0); } to { transform: translateY(176px); } }
.ac-route__card:focus-visible { box-shadow: 0 0 0 2px var(--accent); }

.ac-route__tick { position: absolute; width: 20px; height: 20px; border-color: var(--accent); border-style: solid; transition: width .35s cubic-bezier(.2,.8,.2,1), height .35s cubic-bezier(.2,.8,.2,1); }
.ac-route__tick--tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-top-left-radius: var(--radius-lg, 14px); }
.ac-route__tick--br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-bottom-right-radius: var(--radius-lg, 14px); }
.ac-route__card:hover .ac-route__tick, .ac-route__card:focus-visible .ac-route__tick { width: 44px; height: 44px; }

.ac-route__k { display: flex; align-items: center; gap: 8px; font: 600 10.5px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fg3); }
.ac-route__k em { margin-left: auto; font-style: normal; color: var(--accent); letter-spacing: .06em; }
.ac-route__led { width: 7px; height: 7px; border-radius: 50%; background: #2BD67B; box-shadow: 0 0 8px rgba(43,214,123,.8); animation: acRouteLed 1.6s ease-in-out infinite; }
@keyframes acRouteLed { 50% { opacity: .35; } }
.ac-route__card--live .ac-route__k { color: #9FE7BF; }

.ac-route__t { font: 800 19px/1.2 var(--font-display); letter-spacing: -.01em; }
.ac-route__d { font: 500 13px/1.45 var(--font-sans); color: var(--fg2); }
.ac-route__foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; gap: 12px; border-top: 1px dashed rgba(255,255,255,.1); }
.ac-route__foot b { font: 600 14px/1 var(--font-mono); letter-spacing: .02em; color: #fff; white-space: nowrap; }

.ac-route__bars { display: flex; align-items: center; gap: 2px; height: 20px; flex: 1; max-width: 90px; }
.ac-route__bars i { flex: 1; height: 25%; border-radius: 1px; background: var(--accent); opacity: .85; animation: acRouteBar 1.3s ease-in-out infinite; }
@keyframes acRouteBar { 0%, 100% { height: 18%; } 50% { height: 95%; } }
.ac-route__card--live:hover .ac-route__bars i { animation-duration: .55s; }

.ac-route__go { display: inline-flex; gap: 8px; font: 700 14px/1 var(--font-sans); color: #fff; }
.ac-route__go span { color: var(--accent); transition: transform .3s; }
.ac-route__card:hover .ac-route__go span { transform: translateX(6px); }

.ac-route__more { display: inline-flex; gap: 6px; margin-top: 14px; font: 600 13.5px/1 var(--font-sans); color: var(--fg2);
  text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid rgba(255,255,255,.18); transition: color .2s, border-color .2s; }
.ac-route__more:hover { color: #fff; border-color: var(--accent); }

@media (max-width: 640px) {
  .ac-route__grid { grid-template-columns: 1fr; }
  .ac-route__card { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-route__led, .ac-route__bars i, .ac-route__card::after { animation: none !important; }
}