/* =========================================================
   search-panels.css — BES Search State Machine
   
   Default: homepage visible, all search panels hidden.
   
   Body classes set by homepage.js:
     .bes-loading  → show loading panel
     .bes-results  → show results panel
     .bes-nomatch  → show nomatch panel
   ========================================================= */

/* ── Default: hide all panels ────────────────────────── */
#bes-panel-loading,
#bes-panel-results,
#bes-panel-nomatch { display: none; }

/* ── Loading state ───────────────────────────────────── */
body.bes-loading #bes-panel-loading   { display: block; }
body.bes-loading #bes-home-content    { display: none; }

/* ── Results state ───────────────────────────────────── */
body.bes-results #bes-panel-results   { display: block; }
body.bes-results #bes-home-content    { display: none; }

/* ── Nomatch state ───────────────────────────────────── */
body.bes-nomatch #bes-panel-nomatch   { display: block; }
body.bes-nomatch #bes-home-content    { display: none; }

/* ── Hide entire hero when a search panel is active ─────── */
body.bes-loading .hero,
body.bes-results .hero,
body.bes-nomatch .hero { display: none; }

/* ── Hero fade-out (applied by JS before state switch) ───── */
@keyframes besFadeOutHero {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-10px); }
}
.hero.bes-hero-out {
  animation: besFadeOutHero 0.22s ease forwards;
  pointer-events: none;
}

/* ── Smooth panel fade-in ────────────────────────────── */
#bes-panel-loading,
#bes-panel-results,
#bes-panel-nomatch {
  animation: besPanelIn 0.22s ease both;
}
@keyframes besPanelIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Dashboard state ─────────────────────────────────── */
#bes-panel-dashboard { display: none; }

body.bes-dashboard #bes-panel-dashboard { display: block; }
body.bes-dashboard #bes-home-content    { display: none; }
body.bes-dashboard .hero                { display: none; }
body.bes-dashboard #bes-panel-loading,
body.bes-dashboard #bes-panel-results,
body.bes-dashboard #bes-panel-nomatch   { display: none; }

#bes-panel-dashboard {
  animation: besPanelIn 0.22s ease both;
}