/* Page-to-page fade: on a link click the page fades to black, then the next page
   fades back in from black. A fixed black layer on <html> does the work; js/page-fade.js
   toggles two classes:
     .pf-leaving  the current page is fading out to black (just before navigating)
     .pf-enter    the new page has arrived covered in black and is about to fade in
   Without JavaScript neither class is ever set, so the layer stays invisible. */

/* Webflow's theme rule gives <html> a light grey (rgb 235) while <body> is near-black,
   which showed through as a white flash. Make the root match the site. */
html {
  background-color: #020202 !important;
}

html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background-color: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);   /* fade in (layer going away) */
}

/* New page arrives fully covered; removing the class runs the fade-in above. */
html.pf-enter::after {
  opacity: 1;
  pointer-events: auto;
  transition: none;
}

/* Leaving: fade to black. Also blocks further clicks while it runs. */
html.pf-leaving::after {
  opacity: 1;
  pointer-events: auto;
  transition-duration: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  html::after {
    display: none;
  }
}