:root {
  --gi-onefang-active-color: #29488f;
  --gi-onefang-idle-color: #333333;
  --gi-onefang-header-offset: 0px;
  --gi-onefang-icon-size: 14px;
  --gi-onefang-icon-gap: 12px;
  --gi-onefang-hover-duration: 280ms;
  --gi-onefang-hover-image-size: 18px;
  --gi-onefang-hover-image-offset-x: 0px;
  --gi-onefang-hover-image-offset-y: 0px;
  --gi-onefang-hover-text-scale: 1.08;
}

.gi-onefang-home-ready [id^="gi-section-"] {
  scroll-margin-top: calc(var(--gi-onefang-header-offset) + 12px);
}

/* Initial-paint layer: use the real idle PNG before runtime.js decorates links. */
.desktop-main-menu-wrapper .main-menu > .j-menu > li > a::before,
.header .main-menu > .j-menu > li > a::before {
  content: "" !important;
  display: inline-block !important;
  flex: 0 0 var(--gi-onefang-icon-size);
  width: var(--gi-onefang-icon-size);
  height: var(--gi-onefang-icon-size);
  min-width: var(--gi-onefang-icon-size);
  margin-right: var(--gi-onefang-icon-gap) !important;
  background: transparent url('../../image/gi_onefang_home/idle_hex.png') center/contain no-repeat !important;
  clip-path: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: opacity var(--gi-onefang-hover-duration) ease, transform var(--gi-onefang-hover-duration) ease !important;
}

.gi-onefang-menu-link {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  color: inherit;
  transition: color var(--gi-onefang-hover-duration) ease;
}

.gi-onefang-menu-link .links-text,
.gi-onefang-menu-link .gi-onefang-menu-text {
  display: inline-block;
  transform-origin: center center;
  transition: transform var(--gi-onefang-hover-duration) ease, color var(--gi-onefang-hover-duration) ease;
}

.gi-onefang-menu-link:hover,
.gi-onefang-menu-link.is-active,
.gi-onefang-menu-link[aria-current="location"],
.active > .gi-onefang-menu-link,
.gi-onefang-menu-link.active {
  color: var(--gi-onefang-active-color) !important;
}

.gi-onefang-menu-link:hover .links-text,
.gi-onefang-menu-link:hover .gi-onefang-menu-text,
.gi-onefang-menu-link.is-active .links-text,
.gi-onefang-menu-link.is-active .gi-onefang-menu-text,
.gi-onefang-menu-link[aria-current="location"] .links-text,
.gi-onefang-menu-link[aria-current="location"] .gi-onefang-menu-text,
.active > .gi-onefang-menu-link .links-text,
.active > .gi-onefang-menu-link .gi-onefang-menu-text,
.gi-onefang-menu-link.active .links-text,
.gi-onefang-menu-link.active .gi-onefang-menu-text {
  transform: scale(var(--gi-onefang-hover-text-scale));
}

.gi-onefang-menu-icon {
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--gi-onefang-icon-size);
  height: var(--gi-onefang-icon-size);
  transform: translateY(-50%);
  overflow: visible;
  pointer-events: none;
}

.gi-onefang-menu-icon__art {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--gi-onefang-hover-image-size);
  height: var(--gi-onefang-hover-image-size);
  background: url('../../image/gi_onefang_home/hover_cube.png') center/contain no-repeat;
  opacity: 0;
  transform: translate(calc(-50% + var(--gi-onefang-hover-image-offset-x)), calc(-50% + var(--gi-onefang-hover-image-offset-y))) scale(.72);
  transform-origin: center;
  transition: opacity var(--gi-onefang-hover-duration) ease, transform var(--gi-onefang-hover-duration) ease;
  z-index: 2;
}

.desktop-main-menu-wrapper .main-menu > .j-menu > li > a.gi-onefang-menu-link:hover::before,
.desktop-main-menu-wrapper .main-menu > .j-menu > li > a.gi-onefang-menu-link.is-active::before,
.desktop-main-menu-wrapper .main-menu > .j-menu > li > a.gi-onefang-menu-link[aria-current="location"]::before,
.desktop-main-menu-wrapper .main-menu > .j-menu > li.active > a.gi-onefang-menu-link::before,
.header .main-menu > .j-menu > li > a.gi-onefang-menu-link:hover::before,
.header .main-menu > .j-menu > li > a.gi-onefang-menu-link.is-active::before,
.header .main-menu > .j-menu > li > a.gi-onefang-menu-link[aria-current="location"]::before,
.header .main-menu > .j-menu > li.active > a.gi-onefang-menu-link::before {
  opacity: 0 !important;
  visibility: hidden !important;
  background-image: none !important;
  transform: scale(.2) !important;
}

.gi-onefang-menu-link:hover .gi-onefang-menu-icon__art,
.gi-onefang-menu-link.is-active .gi-onefang-menu-icon__art,
.gi-onefang-menu-link[aria-current="location"] .gi-onefang-menu-icon__art,
.active > .gi-onefang-menu-link .gi-onefang-menu-icon__art,
.gi-onefang-menu-link.active .gi-onefang-menu-icon__art {
  opacity: 1;
  transform: translate(calc(-50% + var(--gi-onefang-hover-image-offset-x)), calc(-50% + var(--gi-onefang-hover-image-offset-y))) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .gi-onefang-menu-link,
  .gi-onefang-menu-link::before,
  .gi-onefang-menu-link .links-text,
  .gi-onefang-menu-link .gi-onefang-menu-text,
  .gi-onefang-menu-icon__art { transition: none; }
  html:focus-within { scroll-behavior: auto; }
}