/* Garoon motion: menu-header section. OWNER FILE: only the menu-header agent edits this file.
 * Tokens: see motion.css (:root). Hover rules only inside @media (hover:hover) and (pointer:fine).
 * Loaded BEFORE style.css, so overrides of style.css rules carry an `html.js-motion` prefix (higher specificity). */

/* ---------- header colour: bg + border + logo + labels, 1000 ms --ease-move, in sync with the panel ---------- */
html.js-motion .header_top {
  transition: background-color var(--dur-long) var(--ease-move), border-color var(--dur-long) var(--ease-move);
}
html.js-motion .header_top.active_header {
  border-bottom: 1px solid transparent; /* keep the 1px: no height jump when the line disappears */
  transition: background-color var(--dur-long) var(--ease-move), border-color var(--dur-long) var(--ease-move);
}
html.js-motion .header_logo svg path { transition: fill var(--dur-long) var(--ease-move); }
html.js-motion .header_menu { transition: color var(--dur-long) var(--ease-move); }
html.js-motion .header_top.active_header .header_menu { color: #000; }

/* ---------- Menu / Close: two stacked copies in a clipping box, rolled by JS (whole word) ---------- */
html.js-motion .mh-toggle {
  float: left;
  display: grid;
  overflow: hidden;
}
html.js-motion .mh-toggle > .header_menu {
  grid-area: 1 / 1;
  float: none;
  display: flex !important; /* beats the legacy inline display:none on the close copy */
  background: transparent;
}
html.js-motion .mh-copy:not(.is-active) { pointer-events: none; }
html.js-motion .mh-copy:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* circles: moveBack/moveForward (open) and moveRight/moveLeft (close) 0.7 s kept from the old site, now played when a copy becomes active */
html.js-motion .header_menu-circles svg:nth-child(1) { animation: none; transform: translateX(8px); }
html.js-motion .header_menu-circles svg:nth-child(2) { animation: none; transform: translateX(0); }
html.js-motion .header_menu-circles.closing svg:nth-child(1) { animation: none; transform: translateX(10px); }
html.js-motion .header_menu-circles.closing svg:nth-child(2) { animation: none; transform: translateX(-10px); }
html.js-motion .mh-copy.is-active .header_menu-circles svg:nth-child(1) { animation: moveBack .7s forwards; }
html.js-motion .mh-copy.is-active .header_menu-circles svg:nth-child(2) { animation: moveForward .7s forwards; }
html.js-motion .mh-copy.is-active .header_menu-circles.closing svg:nth-child(1) { animation: moveRight .7s forwards; }
html.js-motion .mh-copy.is-active .header_menu-circles.closing svg:nth-child(2) { animation: moveLeft .7s forwards; }

/* ---------- menu panel: transform instead of `right` (JS owns xPercent; the start state here avoids a flash before init) ---------- */
html.js-motion .menu_modal {
  right: 0;
  transform: none; /* JS sets xPercent: a CSS translate3d(100%) would be parsed by GSAP as px and added twice */
  visibility: hidden;
  transition: none;
}
html.js-motion .menu_modal-content { overscroll-behavior: contain; }

/* line masks: the row/box clips, the line (a or .mh-in) slides inside it */
html.js-motion .menu_block .menu_item,
html.js-motion .social-items .social-item { overflow: hidden; }
html.js-motion .mh-mask { display: block; overflow: hidden; }
html.js-motion .mh-in { display: block; }
html.js-motion .menu_block .menu_item > a,
html.js-motion .social-item > a,
html.js-motion .mh-in { will-change: transform; }
html.js-motion .menu_item_last a { width: max-content; }

/* ---------- hover: colour 167 ms linear, hover devices only (the old :hover rule was sticky on touch) ---------- */
@media (hover: hover) and (pointer: fine) {
  html.js-motion .menu_block .menu_item a,
  html.js-motion .menu_block .menu_item a span { transition: color var(--dur-micro) linear; }
  html.js-motion .menu_item_last a { position: relative; }
  html.js-motion .menu_item_last a::after,
  html.js-motion footer .f-a-items a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: left center;
    transition: transform var(--dur-base) var(--ease-out);
  }
  html.js-motion footer .f-a-items a { position: relative; display: inline-block; }
  html.js-motion .menu_item_last a:hover::after,
  html.js-motion footer .f-a-items a:hover::after { transform: scaleX(1); }
  html.js-motion footer .footer_menu > a { transition: color var(--dur-micro) linear; }
  html.js-motion footer .footer_menu > a:hover { color: #9c958a; }
}
@media not all and (hover: hover) and (pointer: fine) {
  html.js-motion .menu_block .menu_item a:hover,
  html.js-motion .menu_block .menu_item a:hover span { color: #000; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js-motion .header_top,
  html.js-motion .header_top.active_header,
  html.js-motion .header_logo svg path,
  html.js-motion .header_menu { transition: none; }
  html.js-motion .mh-copy.is-active .header_menu-circles svg { animation: none !important; }
}