/* halort.css — page-specific styles for /how/halort/
 * Depends on site.css (tokens, reset, keyframes, responsive attrs, hover classes).
 * Only rules that cannot be inline live here.
 */

@keyframes halort-row-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes halort-seal {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(198,164,126,0.28); }
  50%      { box-shadow: inset 0 0 0 1px rgba(198,164,126,0.75); }
}

@keyframes halort-flow {
  0%   { transform: translateX(-105%); }
  100% { transform: translateX(205%); }
}

@keyframes halort-scan {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

[data-stage] { transition: color 260ms ease, border-color 260ms ease, background 260ms ease; }
[data-stage-tag] { transition: color 260ms ease; }
[data-stage-tag].is-running { animation: halort-scan 1s ease-in-out infinite; }
[data-node] { transition: border-color 320ms ease, background 320ms ease; }
[data-path-progress] { transition: width 700ms linear; }
[data-flow] { animation: halort-flow 1.5s linear infinite; }
[data-flow-cell] { transition: opacity 260ms ease; }
[data-drift-row] { opacity: 0; }
[data-drift-row].is-in { animation: halort-row-in 520ms cubic-bezier(.4,0,.2,1) forwards; }
[data-seal] { animation: halort-seal 6s ease-in-out infinite; }

@media (max-width: 1180px) {
  [data-path-cols] { grid-template-columns: minmax(0,1fr) !important; }
  [data-path-flow] { grid-template-columns: minmax(0,1fr) !important; gap: 18px !important; }
  [data-flow-cell] { width: 100% !important; }
}

@media (max-width: 1000px) {
  [data-quad] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

@media (max-width: 620px) {
  [data-chips] { grid-template-columns: minmax(0,1fr) !important; }
  [data-trace-body] { flex-direction: column !important; }
  [data-trace-body] > div:first-child { width: 100% !important; flex: none !important; grid-template-rows: none !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; display: grid !important; gap: 10px; }
}

@media (max-width: 560px) {
  [data-quad] { grid-template-columns: minmax(0,1fr) !important; }
}

@media (max-width: 900px) {
  [data-drift-grid] { grid-template-columns: minmax(0,1fr) !important; }
  [data-drift-row] { grid-template-columns: minmax(0,1fr) !important; gap: 6px !important; }
}

@media (prefers-reduced-motion: reduce) {
  [data-drift-row] { opacity: 1 !important; animation: none !important; }
  [data-seal] { animation: none !important; }
  [data-flow] { animation: none !important; }
  [data-stage-tag].is-running { animation: none !important; }
}