/* Composition-level styles — stage, clip positioning and animation prep.
   Does NOT override the Marpit/WBS theme, which lives in theme.css. */

html, body {
  margin: 0;
  padding: 0;
  background: #000;
  overflow: hidden;
}

#stage {
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
}

/* Each slide is positioned as an absolute full-stage box. GSAP drives its
   opacity, x, and clipPath for transitions. */
.clip {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  opacity: 0;
  will-change: opacity, transform, clip-path;
}

/* Marp renders sections at the theme's native 1280×720. We scale the whole
   .marpit subtree up to the stage. Transform on this inner element keeps
   the outer .clip transforms clean for GSAP. */
.clip .marpit {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 720px;
  transform: scale(1.5);
  transform-origin: top left;
}

/* The theme's own CSS already positions div.marpit > section at 1280×720
   with position:relative. We only add the absolute-positioning cascade for
   the clip wrappers, nothing inside the section. */

/* Reveal-prep: elements that will be animated start hidden. */
.clip [data-anim] { opacity: 0; }
.clip[data-reveal="stagger-bullets"] section li { opacity: 0; }

/* If a theme image fails to load, fall back to a dark background so the
   slide is still legible during preview. */
.clip .marpit > section {
  background-color: #f8fafc;
}
.clip .marpit > section.lead,
.clip .marpit > section.title,
.clip .marpit > section.section-header,
.clip .marpit > section.invert {
  background-color: #002855;
}