/* Headroom motion: one language for every page. Strong ease-out, transform + opacity only, quick on controls.
   ui/motion.js tags elements (data-load for the entrance, data-lens for the scroll focus) and adds .hr-motion to <html>;
   without JS nothing is hidden. The lens itself is computed in motion.js so it behaves the same in every browser. */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast: 160ms; --dur: 260ms; --dur-reveal: 720ms;
}

/* hold the first paint until motion.js has tagged the page (a timeout in motion.js always releases it) */
.hr-motion:not(.hr-ready) body { opacity: 0; }

/* ---------- load: above-the-fold blocks rise in, small groups staggered ---------- */
@keyframes hr-in {
  from { opacity: 0; transform: translateY(var(--hr-dy, 14px)) scale(var(--hr-s, 1)); filter: blur(var(--hr-blur, 0px)); }
}
.hr-motion [data-load] { animation: hr-in var(--dur-reveal) var(--ease-out) both; animation-delay: calc(60ms + var(--i, 0) * 70ms); }
.hr-motion [data-load="soft"] { --hr-dy: 8px; --hr-s: 0.985; }
.hr-motion [data-load="text"] { --hr-blur: 4px; }
.hr-hold [data-load] { animation-play-state: paused; }

/* ---------- lens: scroll focus ----------
   motion.js writes opacity, blur and a small tilt on every [data-lens] block from its distance to the viewport edges.
   Nothing here hides content: without JS (or with reduced motion) every block simply stays sharp. */
.hr-lens [data-lens] { backface-visibility: hidden; }
.hr-lens .hr-blurred { will-change: transform, opacity, filter; }
/* a tilted full-width block can poke a few px past the window: clip at the page wrappers (clip on body would pass to
   the window as hidden, which can still be scrolled), without making them scroll containers, so sticky still works */
.hr-lens main, .hr-lens .main, .hr-lens body > .foot { overflow-x: clip; }
.hr-lens body { overflow-x: clip; }   /* backstop for anything outside those wrappers (the sticky headers) */
/* a button that is itself a lens block keeps its colour feedback but drops the transform transition, so it tracks the scroll */
.hr-lens [data-lens].hr-btn { transition-property: background-color, border-color, color, box-shadow; }

/* one-shot effects started when their block comes into view  */
.hr-motion [data-trigger] td .bar i { transform: scaleX(0); transform-origin: right center;
  transition: transform 900ms var(--ease-out); transition-delay: calc(200ms + var(--r, 0) * 70ms); }
.hr-motion [data-trigger].is-in td .bar i { transform: none; }
[data-trigger] tbody tr:nth-child(2) { --r: 1; } [data-trigger] tbody tr:nth-child(3) { --r: 2; }
[data-trigger] tbody tr:nth-child(4) { --r: 3; } [data-trigger] tbody tr:nth-child(5) { --r: 4; }

/* ---------- scroll progress: a 2px line that tracks the page ---------- */
.hr-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 50; background: var(--primary);
  transform-origin: 0 50%; transform: scaleX(var(--hr-p, 0)); pointer-events: none; }
@keyframes hr-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hr-sdt .hr-progress { animation: hr-grow linear both; animation-timeline: scroll(root); }

/* landing: the nav gains its edge once the page moves */
@keyframes hr-nav-edge { from { box-shadow: 0 0 0 rgba(30, 27, 58, 0); } to { box-shadow: 0 6px 24px rgba(30, 27, 58, 0.07); } }
.hr-sdt .nav { animation: hr-nav-edge linear both; animation-timeline: scroll(root); animation-range: 0 140px; }
.nav.hr-scrolled { box-shadow: 0 6px 24px rgba(30, 27, 58, 0.07); }

/* ---------- state changes inside the dashboards ---------- */
.moment:not(.hidden) { animation: hr-in 420ms var(--ease-out) both; --hr-dy: -6px; }
.phase, .c-pill, .kpi, .tile { transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.tpanel.sub { transition: background-color 400ms var(--ease-out); }

/* buildings: fade to grey when they lose power, the status dot pops when it changes */
.bmark { transition: box-shadow 400ms var(--ease-out); }
.bmark::before { transition: opacity 600ms var(--ease-out); }
.bmark i { transition: background-color var(--dur) var(--ease-out); }
@keyframes hr-pop { 0% { transform: scale(1); } 40% { transform: scale(1.6); } 100% { transform: scale(1); } }
.bmark.pop i { animation: hr-pop 520ms var(--ease-out); }
@keyframes hr-flash { from { background-color: rgba(255, 255, 255, 0.24); } to { background-color: rgba(255, 255, 255, 0); } }
.tcell.flash { animation: hr-flash 1400ms var(--ease-out) both; animation-delay: var(--since, 0ms); }

/* tooltip: scales in from its anchor instead of popping */
.tip { transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out); transform-origin: 0 0; }
.tip.hidden { display: block !important; opacity: 0; transform: scale(0.96); visibility: hidden; transition: opacity 100ms ease, transform 100ms ease, visibility 0s 100ms; }

/* ---------- controls: quick, physical feedback ---------- */
.btn, .hr-btn, .side-btn, select, button { transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
  color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn:active, .hr-btn:active, .side-btn:active, button:active { transform: scale(0.97); }
.panel, .cmp, .stepcol, .ladder li { transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); }
.panel:hover, .cmp:hover { border-color: color-mix(in srgb, var(--primary) 22%, var(--glass-line)); }
.ladder li:hover { background-color: var(--blush-soft); }

@media (prefers-reduced-motion: reduce) {
  .hr-motion [data-load], .hr-motion [data-lens], .moment:not(.hidden), .hr-sdt .nav {
    animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .hr-motion [data-trigger] td .bar i { transform: none; transition: none; }
  .hr-progress { display: none; }
  .bmark.pop i, .tcell.flash { animation: none; }
  .btn:active, .hr-btn:active, .side-btn:active, button:active { transform: none; }
}