/* mode-shell.css — tier 2 layout.
 * Owns: mode page containers (.mode-page) and the per-mode #<mode>-mode
 * backgrounds.
 *
 * Order dependencies: 1 rule(s) belonging by subject to cards-mode.css (1)
 * stay here to keep their cascade position beside a rule in this file; each
 * has an `order:` comment naming it. */

/* 1. Mode transitions — replace the old 200ms fade+slide with a 280ms
 * fade + scale that uses an ease-out-back-style curve for a slight settle.
 * The original mode-enter-anim is overridden by name. */
@keyframes mode-enter-anim {
  0% { opacity: 0; transform: translateY(8px) scale(0.985); }
  60% { opacity: 1; transform: translateY(0) scale(1.004); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* order: lives here, not in cards-mode.css: must precede `.mode-page` {display} below (equal specificity, same element, display). */
.cards-mode-host { display: flex; flex-direction: column; min-height: 0; }

/* Common: every mode root gets relative positioning so its decoration
 * pseudo-elements anchor correctly. We replaced the old ::after-driven
 * moving overlays with a single fixed ::before holding the SVG stack. */
body[data-mode="build"] #build-mode, body[data-mode="play"] #play-mode { position: relative; }

/* Children always sit above the static decoration. */
body[data-mode="build"] #build-mode > *, body[data-mode="play"] #play-mode > * { position: relative; z-index: 1; }
.mode-page {
  /* Each mode owns the entire viewport below the topbar. */
  display: block;
  width: 100%;
  height: calc(100vh - var(--topbar-h));
  overflow: hidden;
}
.mode-page[hidden] { display: none !important; }

/* ── Mode enter animation (fade + slight slide)
 * The @keyframes mode-enter-anim lives in animations-polish.css (it
 * replaced the original here, which was dead because the later
 * definition of the same name wins). */
.mode-page.mode-enter { animation: mode-enter-anim 280ms cubic-bezier(0.34, 1.16, 0.64, 1) both !important; will-change: opacity, transform; }

/* Mode placeholders shown until a mode fills in. */
.mode-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  padding: var(--sp-12) var(--sp-10);
  color: var(--text-muted);
}
.mode-placeholder h2 { font-family: var(--font-display); font-size: var(--fs-3xl); letter-spacing: var(--tr-widest); text-transform: uppercase; color: var(--text); margin-bottom: var(--sp-5); }
.mode-placeholder p { font-size: var(--fs-base); }

@media (min-width: 821px) {
  /* Room for it. Desktop: the mode pages are `100vh - topbar`; take the banner
   * off too. Phones: pane heights are percentages of the body content box, so
   * body padding alone shrinks them. */
  body.has-signed-out-banner .mode-page { height: calc(100vh - var(--topbar-h) - var(--sob-h)); }
}