/**
 * Menu Panel Slide Animations — v99
 * v99 changes:
 *  - Links always animate on every open (cb-animating re-added each time via JS)
 *  - Overhauled keyframes: slide + subtle scale for more polish
 *  - Faster stagger (0.38s duration, tighter delays)
 *  - Fast-fade threshold tightened (only for < 100ms reopens)
 */

/* Left Panel — links slide in from LEFT with scale */
@keyframes cbLinkSlideRight {
  0%   { opacity: 0; transform: translateX(-28px) scaleX(0.97); }
  60%  { opacity: 1; transform: translateX(3px) scaleX(1.01); }
  100% { opacity: 1; transform: translateX(0) scaleX(1); }
}

/* Right Panel — links slide in from RIGHT with scale */
@keyframes cbLinkSlideLeft {
  0%   { opacity: 0; transform: translateX(28px) scaleX(0.97); }
  60%  { opacity: 1; transform: translateX(-3px) scaleX(1.01); }
  100% { opacity: 1; transform: translateX(0) scaleX(1); }
}

/* Fast fade for ultra-quick reopens (< 100ms) */
@keyframes cbFastFadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* ── Trigger animations when .open.cb-animating ── */
#cb-offcanvas-left.open.cb-animating li {
  animation: cbLinkSlideRight 0.38s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  opacity: 0;
}
#cb-offcanvas-right.open.cb-animating li {
  animation: cbLinkSlideLeft 0.38s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  opacity: 0;
}
#cb-offcanvas-right.open.cb-animating p {
  animation: cbFastFadeIn 0.4s ease-out forwards;
  animation-delay: 0.32s;
  opacity: 0;
}

/* Stagger delays — items 1–10 */
#cb-offcanvas-left.open.cb-animating  li:nth-child(1),
#cb-offcanvas-right.open.cb-animating li:nth-child(1) { animation-delay: 0.04s; }
#cb-offcanvas-left.open.cb-animating  li:nth-child(2),
#cb-offcanvas-right.open.cb-animating li:nth-child(2) { animation-delay: 0.10s; }
#cb-offcanvas-left.open.cb-animating  li:nth-child(3),
#cb-offcanvas-right.open.cb-animating li:nth-child(3) { animation-delay: 0.16s; }
#cb-offcanvas-left.open.cb-animating  li:nth-child(4),
#cb-offcanvas-right.open.cb-animating li:nth-child(4) { animation-delay: 0.22s; }
#cb-offcanvas-left.open.cb-animating  li:nth-child(5),
#cb-offcanvas-right.open.cb-animating li:nth-child(5) { animation-delay: 0.28s; }
#cb-offcanvas-left.open.cb-animating  li:nth-child(6),
#cb-offcanvas-right.open.cb-animating li:nth-child(6) { animation-delay: 0.34s; }
#cb-offcanvas-left.open.cb-animating  li:nth-child(7),
#cb-offcanvas-right.open.cb-animating li:nth-child(7) { animation-delay: 0.40s; }
#cb-offcanvas-left.open.cb-animating  li:nth-child(8),
#cb-offcanvas-right.open.cb-animating li:nth-child(8) { animation-delay: 0.46s; }
#cb-offcanvas-left.open.cb-animating  li:nth-child(9),
#cb-offcanvas-right.open.cb-animating li:nth-child(9) { animation-delay: 0.52s; }
#cb-offcanvas-left.open.cb-animating  li:nth-child(10),
#cb-offcanvas-right.open.cb-animating li:nth-child(10) { animation-delay: 0.58s; }

/* Fast fade applies immediately (no delay) */
#cb-offcanvas-left.cb-fast-fade  li,
#cb-offcanvas-left.cb-fast-fade  p,
#cb-offcanvas-right.cb-fast-fade li,
#cb-offcanvas-right.cb-fast-fade p {
  animation: cbFastFadeIn 0.15s ease forwards !important;
  animation-delay: 0s !important;
}

/* ── v101: CLOSE ANIMATION — links slide OUT before panel closes ── */

/* Left panel links slide back left on close */
@keyframes cbLinkSlideRightOut {
  0%   { opacity: 1; transform: translateX(0) scaleX(1); }
  100% { opacity: 0; transform: translateX(-28px) scaleX(0.97); }
}

/* Right panel links slide back right on close */
@keyframes cbLinkSlideLeftOut {
  0%   { opacity: 1; transform: translateX(0) scaleX(1); }
  100% { opacity: 0; transform: translateX(28px) scaleX(0.97); }
}

/* Trigger close animations via .cb-link-closing (added by menu.js)
   v102: .open requirement removed — panel retracts simultaneously */
#cb-offcanvas-left.cb-link-closing li {
  animation: cbLinkSlideRightOut 0.22s cubic-bezier(0.55, 0, 0.1, 1) both;
}
#cb-offcanvas-right.cb-link-closing li {
  animation: cbLinkSlideLeftOut 0.22s cubic-bezier(0.55, 0, 0.1, 1) both;
}

/* Stagger close delays — items 1–10 (same order as open, natural collapse) */
#cb-offcanvas-left.cb-link-closing  li:nth-child(1),
#cb-offcanvas-right.cb-link-closing li:nth-child(1) { animation-delay: 0.00s; }
#cb-offcanvas-left.cb-link-closing  li:nth-child(2),
#cb-offcanvas-right.cb-link-closing li:nth-child(2) { animation-delay: 0.05s; }
#cb-offcanvas-left.cb-link-closing  li:nth-child(3),
#cb-offcanvas-right.cb-link-closing li:nth-child(3) { animation-delay: 0.10s; }
#cb-offcanvas-left.cb-link-closing  li:nth-child(4),
#cb-offcanvas-right.cb-link-closing li:nth-child(4) { animation-delay: 0.15s; }
#cb-offcanvas-left.cb-link-closing  li:nth-child(5),
#cb-offcanvas-right.cb-link-closing li:nth-child(5) { animation-delay: 0.20s; }
#cb-offcanvas-left.cb-link-closing  li:nth-child(6),
#cb-offcanvas-right.cb-link-closing li:nth-child(6) { animation-delay: 0.25s; }
#cb-offcanvas-left.cb-link-closing  li:nth-child(7),
#cb-offcanvas-right.cb-link-closing li:nth-child(7) { animation-delay: 0.30s; }
#cb-offcanvas-left.cb-link-closing  li:nth-child(8),
#cb-offcanvas-right.cb-link-closing li:nth-child(8) { animation-delay: 0.35s; }
#cb-offcanvas-left.cb-link-closing  li:nth-child(9),
#cb-offcanvas-right.cb-link-closing li:nth-child(9) { animation-delay: 0.40s; }
#cb-offcanvas-left.cb-link-closing  li:nth-child(10),
#cb-offcanvas-right.cb-link-closing li:nth-child(10) { animation-delay: 0.45s; }

/* Fade out the account note paragraph on right panel close */
#cb-offcanvas-right.cb-link-closing p {
  animation: cbLinkSlideLeftOut 0.18s ease both;
  animation-delay: 0s;
}