/**
 * F7 shell — Stage 2 stable boot + first-paint matrix sync.
 * Boot intro logo polish deferred (BOOT-INTRO-POLISH).
 * nav-swipe-brand inline z-index wins while body.nav-swipe-brand-active.
 */

/* ── Legacy chrome hidden while F7 prepares ── */
html.f7-shell-pending #app,
html.f7-shell-pending #bottom-nav,
html.f7-shell-pending #glass-footer,
html.f7-shell-pending #tab-carousel-clip,
html.f7-shell-pending #join {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* F7 path: no boot splash logo (deferred BOOT-INTRO-POLISH) */
html.f7-shell-pending #splash,
html.f7-shell-pending #splash-logo-img {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── First paint: hold scene until matrix scene-ready ── */
body.f7-matrix-waiting {
  background: #06060a !important;
}

body.f7-matrix-waiting #bar-atmosphere-global,
body.f7-matrix-waiting #matrix-bg,
body.f7-matrix-waiting #matrix-phrases,
body.f7-matrix-waiting #f7-app-root.f7-shell-root {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#bar-atmosphere-global,
#matrix-bg,
#matrix-phrases {
  transition: opacity 0.32s ease, visibility 0.32s ease;
}

/* Reveal gradient + matrix together */
body.f7-matrix-ready {
  background: var(--bar-atmosphere) !important;
}

body.f7-matrix-ready #bar-atmosphere-global {
  opacity: 1;
  visibility: visible;
}

body.f7-matrix-ready #matrix-bg {
  opacity: var(--mx-rain-opacity-f7-baseline, var(--mx-rain-opacity-boost, 0.14));
  visibility: visible;
}

body.f7-matrix-ready #matrix-phrases {
  opacity: 1;
  visibility: visible;
}

#f7-app-root.f7-shell-root {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: none;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: transparent;
}

html.f7-shell-pending #f7-app-root.f7-shell-root,
body.f7-shell-active #f7-app-root.f7-shell-root {
  display: block;
}

/* F7 root hidden until matrix-ready + settled */
body.f7-shell-active:not(.f7-shell-settled) #f7-app-root.f7-shell-root,
body.f7-matrix-waiting #f7-app-root.f7-shell-root {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.f7-shell-settled #f7-app-root.f7-shell-root {
  z-index: 10;
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease;
}

#matrix-bg {
  transition: opacity 0.45s ease, visibility 0.32s ease;
}

body.f7-shell-settled:not(.nav-swipe-brand-active) #matrix-bg {
  opacity: var(--mx-rain-opacity-f7-baseline, var(--mx-rain-opacity-boost, 0.14));
}

body.f7-shell-settled:not(.nav-swipe-brand-active) #matrix-phrases {
  opacity: 1;
}

/* F7 placeholder: fade in with shell settled (after matrix-ready) */
body.f7-shell-active:not(.f7-shell-settled) #f7-app-root .app-page-surface {
  opacity: 0;
}

body.f7-shell-settled #f7-app-root .app-page-surface {
  opacity: 1;
  transition: opacity 0.35s ease;
}

body.f7-shell-settled #f7-app-root.f7-shell-root .app-page-surface {
  background: rgba(10, 10, 14, 0.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

body.f7-shell-active #app.f7-shell-root,
body.f7-shell-active #app.f7-legacy-app-donor,
body.f7-shell-active.f7-legacy-app-donor #app {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.f7-shell-active #chat {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.f7-shell-active #tab-carousel-clip,
body.f7-shell-active #bottom-nav,
body.f7-shell-active #bottom-nav[data-f7-donor="1"],
body.f7-shell-active.bar-in-chat #bottom-nav,
body.f7-shell-active #glass-footer,
body.f7-shell-active #dm-panel,
body.f7-shell-active #chat-zone-view {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  z-index: -1 !important;
  transform: translateY(110%) !important;
}

/* Join page inside F7 shell — sole join owner under USE_F7_SHELL */
body.f7-shell-settled #f7-app-root .page-join .f7-join-page-content {
  position: relative;
  height: 100%;
  overflow: hidden;
  padding: 0;
}

body.f7-shell-settled #f7-app-root .page-join #join.f7-join-in-page {
  position: absolute;
  inset: 0;
  z-index: 1;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

body.f7-shell-settled #f7-app-root .page-join #join.f7-join-in-page #join-cta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

body.f7-shell-settled #f7-app-root .page-join:not(.page-current) #join.f7-join-in-page,
body.f7-shell-settled #f7-app-root .page-join:not(.page-current) #join-cta {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}