/* =========================================================
   Genie Effect — macOS-style open/close animation for #lk-panel
   =========================================================
   Plug-and-play: load this CSS AFTER bayer-lk-docs-assistant.css.
   The genie-effect.js file will handle all class toggling.

   How it works:
   - Overrides #lk-panel's default transition with an asymmetric
     scaleX/scaleY + translateY transform that "sucks" the panel
     into the trigger button (bottom-right corner).
   - Open: bouncy overshoot easing via cubic-bezier(0.34, 1.56, ...)
   - Close: accelerating ease-in that converges toward the button.
   - Uses ONLY transform + opacity (GPU-composited, 60fps).
   ========================================================= */

/* Base panel — override to hidden/collapsed state */
#lk-panel.lk-genie {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
  /* Override the default transition from bayer-lk-docs-assistant.css */
  transition: none;
}

/* Hidden state — collapsed toward the trigger button (bottom-right) */
#lk-panel.lk-genie.lk-hidden {
  opacity: 0;
  transform: scaleX(0.2) scaleY(0.1) translateY(60px);
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.55, 0.06, 0.68, 0.19),
              opacity 0.3s cubic-bezier(0.55, 0.06, 0.68, 0.19);
}

/* Visible state — fully expanded with bouncy overshoot */
#lk-panel.lk-genie.lk-visible {
  opacity: 1;
  transform: scaleX(1) scaleY(1) translateY(0);
  pointer-events: auto;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.4s cubic-bezier(0.0, 0.0, 0.2, 1);
}

/* =========================================================
   Responsive — same genie effect works at all sizes
   ========================================================= */
/* No special mobile overrides needed — scaleX/scaleY/translateY
   are GPU-composited and smooth at any viewport size. */

/* =========================================================
   Accessibility — respect reduced motion preference
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  #lk-panel.lk-genie,
  #lk-panel.lk-genie.lk-hidden,
  #lk-panel.lk-genie.lk-visible {
    transition: opacity 0.15s ease !important;
    transform: none !important;
  }
}