/*
 * Real header animations, copied from the live template's compiled CSS
 * (templates/GAH/scss/header/_new-header.scss — the only header stylesheet
 * actually @imported by common.scss; _headernew.scss/_headermenu.scss/
 * common/_menu.scss are dead code on the live site, verified by reading
 * common.scss's import list, so nothing is ported from them).
 *
 * Tailwind's arbitrary values can't express a named @keyframes reused across
 * a hover + a JS-driven class, so these live in a plain stylesheet instead.
 */

/* `header.sticky` — real values: box-shadow 0 3px 6px rgba(0,0,0,.16),
   slide-down replay via `animation: mymove 0.8s ease-in-out` each time the
   scroll-driven class is (re)added. Animates `transform`, not `top` — the
   nav is `position: sticky; top: 0`, and animating `top` on a sticky element
   fights the browser's own sticky-offset calculation: once the animation
   finished, Chromium stopped re-pinning the element to the viewport on
   further scroll, leaving it stranded at whatever static position it had
   reached (confirmed by inspecting the nav's bounding rect mid-scroll —
   `top` read back as `0px` as expected, but the element's actual screen
   position kept scrolling away instead of sticking). `transform` produces
   the same visual slide-down without touching the property sticky uses.
   `isScrolled` flips (and this animation replays) every time scrolling
   crosses the 5px threshold in either direction, which happens often
   during a real gradual scroll — ordinary -80px (roughly the nav's own
   height) briefly translated the sticky nav fully off the top of the
   viewport on every replay, leaving nothing rendered where it should be
   for part of each 0.8s run (confirmed: not reproducible with an instant
   scrollTo that lets the animation finish before paint, only with a real
   gradual scroll that keeps re-triggering it). Shortened to a distance
   small enough that the nav is never more than partially offset, keeping
   the drop flourish without the gap. */
@keyframes header-sticky-drop {
  from {
    transform: translateY(-16px);
  }

  to {
    transform: translateY(0);
  }
}

.header-sticky {
  animation: header-sticky-drop 0.8s ease-in-out;
}

/* `.order_btn a` — a constant, not hover-triggered, pulse: scale 1.0 -> 1.1
   alternating every 0.35s (`animation: zigzag 0.35s infinite alternate`). */
@keyframes header-order-pulse {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.08);
  }
}

.header-order-pulse {
  animation: header-order-pulse 0.35s infinite alternate;
}

/* `.login-new` — the border "draws itself" on hover via stroke-dashoffset,
   not a background change (background stays the same green gradient). */
.header-login-border {
  stroke-dasharray: 150 480;
  stroke-dashoffset: 150;
  transition: stroke-dashoffset 1s ease-in-out;
}

.header-login-group:hover .header-login-border {
  stroke-dashoffset: -480;
}

/* `.menu-overlay.active` — dark 0.8-opacity backdrop fading in over 0.4s. */
.header-mobile-overlay {
  background: rgba(0, 0, 0, 0.8);
  transition: opacity 0.4s ease;
}

/* `.affiliate-btn` ("Earn Online", `mod_menu/default.php`) — a constant
   diagonal light sweep across the button, not hover-triggered. */
@keyframes header-shine {
  from {
    left: -100%;
  }

  to {
    left: 100%;
  }
}

.header-shine-btn {
  position: relative;
  overflow: hidden;
}

.header-shine-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: header-shine 1s ease-in-out infinite;
}

/* `.toggle-btn` (`mod_menu/default.php`) — the real desktop-only "Company"
   flyout toggle, last item in the nav row (distinct from `.menubtn`, the
   mobile drawer hamburger, which is hidden at this width). Its three bars
   morph into an X on hover *and* while the flyout is open (`&.change` in
   the live SCSS — reproduced here as `.is-open` since the real behavior is
   hover-only there but this app opens the flyout on click instead). */
.toggle-bar {
  display: block;
  width: 22px;
  height: 3px;
  background-color: #2a2a2a;
  margin: 3px 0;
  border-radius: 3px;
  transition: 0.4s;
}

/* Driven by the `.is-open` class only (set alongside the flyout's own open
   state in React) — not a separate `:hover` rule — so the bars morphing
   into an X and the flyout panel showing are always in sync. An earlier
   version morphed on CSS `:hover` while the panel only opened on click,
   so hovering showed an X with no menu underneath it. */
.toggle-btn.is-open .toggle-bar-1 {
  transform: translate(0, 9px) rotate(-45deg);
}

.toggle-btn.is-open .toggle-bar-2 {
  opacity: 0;
}

.toggle-btn.is-open .toggle-bar-3 {
  transform: translate(0, -9px) rotate(45deg);
}