[vibe-fouc],
.vibe-fouc {
  visibility: hidden;
}

/* A route/key remount stages the incoming wrapper as a hidden sibling of the
 * outgoing page (which keeps its place, visible and styled) until the commit
 * swaps them in one paint. display: none keeps the staged content out of
 * layout so the two never occupy the document together. */
[vibe-staged] {
  display: none;
}

/* Animations too, not just transitions: visibility: hidden does not pause
 * CSS animations — a covered element still animates and still fires
 * animationend, reaching inline handlers before the module chain defines
 * them. Suppressed under the cover, entrance animations instead play on
 * reveal, matching what the user actually sees. */
[vibe-fouc],
.vibe-fouc,
[vibe-fouc] *,
.vibe-fouc * {
  transition: none !important;
  animation: none !important;
}

/* Vibe Dehydrate - Skip Reactive Processing
 * Elements with [vibe-dehydrate] attribute or .vibe-dehydrate class are skipped during
 * Vibe's parsing and hydration. Useful for displaying literal @[variable] syntax in
 * documentation, examples, or code snippets without triggering reactivity.
 */
[vibe-dehydrate],
.vibe-dehydrate {
  /* No styles applied - marker only */
}

/* Component Wrappers - Layout Transparent
 * Component wrappers (<component> or <div class="component">) use display: contents
 * to make the wrapper invisible in the layout. Children render as if the wrapper doesn't exist.
 */
component,
div.component,
slot,
div.slot {
  display: contents;
}