/* AtomicNorth header motion. Additive layer over chrome.css: nothing here
   redefines a layout rule, it only adds transitions, the reading-progress
   bar, the travelling subnav mark and the tuck-away behaviour on long
   service pages. Load after chrome.css. Driven by assets/js/hdr-motion.js.

   State classes, all set by JS on .hdr:
     .solid       already set by site.js past 60px
     .is-tucked   top bar slid up out of view, subnav rail stays pinned
     .is-settled  first paint done; enables transitions so nothing animates
                  on load from a wrong initial state
   Custom properties, set by JS on .hdr:
     --hdr-top-h  measured height of .hdr-in, used by the tuck transform
     --mark-x, --mark-w, --mark-p   subnav mark position, width, fill       */

.hdr {
  --hdr-top-h: 72px;
  --mark-x: 0px;
  --mark-w: 0px;
  --mark-p: 0;
}

.hdr.is-settled {
  transition: transform 0.42s cubic-bezier(0.2, 0.7, 0.2, 1),
              background-color 0.3s ease,
              box-shadow 0.3s ease;
}

/* Tuck the top bar away while reading down a service page; the subnav rail
   stays at the top edge because the whole header moves up by exactly the
   top bar's height. Scrolling up, opening a menu, or focusing anything in
   the bar brings it back. */
body.has-subnav .hdr.is-tucked {
  transform: translateY(calc(-1 * var(--hdr-top-h)));
}

body.has-subnav .hdr.is-tucked:focus-within,
body.has-subnav .hdr.is-tucked:has(.navlink[aria-expanded="true"]),
body.has-subnav .hdr.is-tucked:has(.burger[aria-expanded="true"]) {
  transform: none;
}

/* ---- reading progress, 2px, under the whole header ---- */
.hdr-prog {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.hdr-prog span {
  display: block;
  height: 100%;
  width: 0;
  background: #CC0000;
  box-shadow: 0 0 10px rgba(204, 0, 0, 0.6);
  transition: width 0.12s linear;
}

/* ---- primary nav: underline sweeps in from the left ---- */
.hdr .nav > .navlink,
.hdr .nav .navitem > .navlink {
  position: relative;
}

.hdr .nav > .navlink::after,
.hdr .nav .navitem > .navlink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.15em;
  height: 2px;
  background: #CC0000;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}

.hdr .nav > .navlink:hover::after,
.hdr .nav > .navlink:focus-visible::after,
.hdr .nav .navitem > .navlink:hover::after,
.hdr .nav .navitem > .navlink[aria-expanded="true"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* The chevron turns while a mega panel is open. */
.hdr .navitem > .navlink svg {
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hdr .navitem > .navlink[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* ---- mega panel: rises in, groups stagger ---- */
@keyframes hdr-mega-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes hdr-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.hdr .mega:not([hidden]) {
  animation: hdr-mega-in 0.26s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hdr .mega:not([hidden]) .mmi,
.hdr #mm-industries:not([hidden]) .mega-foot {
  animation: hdr-rise 0.36s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hdr #mm-industries:not([hidden]) > .mega-in > :nth-child(1)  { animation-delay: 40ms; }
.hdr #mm-industries:not([hidden]) > .mega-in > :nth-child(2)  { animation-delay: 70ms; }
.hdr #mm-industries:not([hidden]) > .mega-in > :nth-child(3)  { animation-delay: 100ms; }
.hdr #mm-industries:not([hidden]) > .mega-in > :nth-child(4)  { animation-delay: 130ms; }
.hdr #mm-industries:not([hidden]) > .mega-in > :nth-child(5)  { animation-delay: 160ms; }
.hdr #mm-industries:not([hidden]) > .mega-in > :nth-child(6)  { animation-delay: 190ms; }
.hdr #mm-industries:not([hidden]) > .mega-in > :nth-child(7)  { animation-delay: 220ms; }
.hdr #mm-industries:not([hidden]) > .mega-in > :nth-child(8)  { animation-delay: 250ms; }

/* The red rule under a mega group heading grows in on hover. */
.hdr .mmg-h {
  position: relative;
}

.hdr .mmg-h::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 2px;
  width: 100%;
  background: var(--c, #CC0000);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hdr .mmg:hover .mmg-h::after,
.hdr .mmg-h:focus-visible::after {
  transform: scaleX(1);
}

/* ---- subnav rail: a mark that travels to the active section and fills
        as you read through that section ---- */
.hdr .subnav-in {
  position: relative;
}

.hdr .subnav .navlink {
  transition: color 0.2s ease, opacity 0.2s ease;
}

.hdr .subnav-mark {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: var(--mark-w);
  transform: translateX(var(--mark-x));
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
  opacity: 0;
  transition: transform 0.38s cubic-bezier(0.2, 0.7, 0.2, 1),
              width 0.38s cubic-bezier(0.2, 0.7, 0.2, 1),
              opacity 0.2s ease;
}

.hdr .subnav-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #CC0000;
  transform: scaleX(var(--mark-p));
  transform-origin: left;
}

.hdr.has-mark .subnav-mark {
  opacity: 1;
}

/* The page name on the rail doubles as a "you are reading" label: once the
   mark is live the active section's label is picked out, the rest recede. */
.hdr.has-mark .subnav .navlink:not([aria-current="true"]) {
  opacity: 0.72;
}

.hdr.has-mark .subnav .navlink:hover {
  opacity: 1;
}

/* ---- burger: a small press response, nothing structural ---- */
.hdr .burger {
  transition: transform 0.18s ease;
}

.hdr .burger:active {
  transform: scale(0.92);
}

/* ---- reduced motion: keep state changes, drop the movement ---- */
@media (prefers-reduced-motion: reduce) {
  .hdr,
  .hdr.is-settled,
  .hdr .subnav-mark,
  .hdr .nav .navlink::after,
  .hdr .mmg-h::after,
  .hdr .navitem > .navlink svg {
    transition: none !important;
  }
  .hdr .mega:not([hidden]),
  .hdr .mega:not([hidden]) .mmi,
  .hdr .mega:not([hidden]) .mega-foot {
    animation: none !important;
  }
  body.has-subnav .hdr.is-tucked {
    transform: none;
  }
}