/* #############################################################################
   INTERACTIVE
   --------------------------------------------------------------------------- */
/* Nav open button: [𝝣 MENU] burger animation, plays once per session.
   Disable by removing nav-burger-animates class logic from controller. */

/* Animate mobile nav open [𝝣 MENU] burger: bars sweep left then return right
   (but on 1st page load only; handled by nav_mobile Stimulus controller) */
.header--interior-pg-mobile.nav-burger-animates .rect-svg--nav-burger {
  /* Animate each bar (rect) of the burger: */
  &:nth-child(1) { animation-name: burger-top-bar-left-then-right; }
  &:nth-child(2) { animation-name: burger-middle-bar-left-then-right; }
  &:nth-child(3) { animation-name: burger-bottom-bar-left-then-right; }
  /* Animation shared params: */
  animation-delay: 0.75s;
  animation-duration: 1.5s;
  animation-fill-mode: both;
  animation-timing-function: ease;
}

@keyframes burger-top-bar-left-then-right {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(0); }
  42%  { transform: translateX(-20px); }
  58%  { transform: translateX(-20px); }
  75%  { transform: translateX(0); }
  100% { transform: translateX(0); }
}

@keyframes burger-middle-bar-left-then-right {
  0%   { transform: translateX(0); }
  13%  { transform: translateX(0); }
  30%  { transform: translateX(-20px); }
  70%  { transform: translateX(-20px); }
  87%  { transform: translateX(0); }
  100% { transform: translateX(0); }
}

@keyframes burger-bottom-bar-left-then-right {
  0%   { transform: translateX(0); }
  17%  { transform: translateX(-20px); }
  83%  { transform: translateX(-20px); }
  100% { transform: translateX(0); }
}



/* -----------------------------------------------------------------------------
   Nav close button: burger → X animation, plays once per session.
   Comment out nav_animation.css link tag in layout to disable —
   the close button will then always display as X (default in nav.css). */

/* Animate mobile nav close burger [𝝣] into [x]
   (but on 1st page load only; handled by nav_mobile Stimulus controller) */
.nav--mobile.is-open:not(.nav-close-x-has-animated) .rect-svg--nav-burger {
  /* Animate each bar (rect) of the burger: */
  &:nth-child(1) { animation-name: burger-top-bar-down-then-clockwise; }
  &:nth-child(2) { animation-name: burger-middle-bar-fade-out; }
  &:nth-child(3) { animation-name: burger-bottom-bar-up-then-counterclockwise; }
  /* Animation shared params: */
  animation-delay: 0.75s;
  animation-duration: 1s;
  animation-fill-mode: both; /* (*) */
  animation-timing-function: ease;
  /* (*) Ensures burger is shown before the default X (nav.css post-transform)
         CSS animations override author styles (including transforms)
         total animation duration = animation-delay + animation-duration
         animation fill mode both = forwards & backwards
         backwards: show 0% keyframe during delay; forwards: hold 100% after end */
}

@keyframes burger-top-bar-down-then-clockwise {
  0%   { transform: translateY(0)   rotate(0deg); }
  40%  { transform: translateY(7px) rotate(0deg); }
  100% { transform: translateY(7px) rotate(45deg) scaleY(0.8); }
}

@keyframes burger-middle-bar-fade-out {
  0%   { opacity: 1; }
  40%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes burger-bottom-bar-up-then-counterclockwise {
  0%   { transform: translateY(0)    rotate(0deg); }
  40%  { transform: translateY(-7px) rotate(0deg); }
  100% { transform: translateY(-7px) rotate(-45deg) scaleY(0.8); }
}