/*
 * Page transitions — a single full-screen black layer (reusing the Webflow
 * .act-intro-text styling) handles the whole sequence:
 *   fade to black  →  swap page underneath  →  title fades in  →  hold  →
 *   fade out to reveal the new page.
 */

.act-intro-text.dh-managed {
  z-index: 2147483647;
  display: flex !important;
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  transition: opacity 500ms ease;
}

/* fully black (covers the page during the swap) */
.act-intro-text.dh-managed.is-black {
  opacity: 1;
  pointer-events: all;
}

/* the title starts hidden and fades in once the screen is black */
.act-intro-text.dh-managed .intro-text-title {
  opacity: 0;
  transition: opacity 350ms ease;
}

.act-intro-text.dh-managed.show-title .intro-text-title {
  opacity: 1;
}

/* Hide any legacy intro blocks that might remain embedded in content HTML */
.act-intro-text:not(.dh-managed) {
  display: none !important;
}

/*
 * First paint before React hydrates: title routes start on black with the
 * page content hidden, so there is no flash of content before the intro.
 * The React layer takes over (matching black) and then reveals.
 */
html.dh-booting,
html.dh-booting body {
  background: #000 !important;
}

html.dh-booting body {
  overflow: hidden;
}

html.dh-booting .dh-page-content {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .act-intro-text.dh-managed,
  .act-intro-text.dh-managed .intro-text-title {
    transition: none !important;
  }
}