/* fx.css · menu/solid-after-hero, turns solid past the top photo · owner: Lizzy East · all rights reserved */

/* See-through over the photo, with a scrim under the words so they read on any
   photograph; solid once the photo has gone. Without JavaScript it keeps the scrim,
   which reads on anything below too. */
[data-fx~="menu/solid-after-hero"] { isolation: isolate; }
[data-fx~="menu/solid-after-hero"]::before,
[data-fx~="menu/solid-after-hero"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
[data-fx~="menu/solid-after-hero"]::before {
  background: linear-gradient(to bottom, var(--fx-menu-scrim, rgb(0 0 0 / 0.62)) 60%, transparent);
}
[data-fx~="menu/solid-after-hero"]::after {
  background: var(--fx-menu-solid, #17160f);
  opacity: 0;
}
[data-fx~="menu/solid-after-hero"].is-solid::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  [data-fx~="menu/solid-after-hero"]::after { transition: opacity var(--fx-menu-dur, 280ms) var(--fx-ease); }
}