/* In-house entrance motion. Owned by lead. Pairs with dark-fx/appear.js.
   Linked from <head> so the hidden initial state is present at first paint.
   Scripting-gated: without JavaScript nothing is ever hidden; with JavaScript but no
   appear.js, the failsafe animation reveals everything after 4s. Once appear.js has taken
   over (html[data-bd-appear-ready]) the failsafe is withdrawn, so elements the visitor reaches
   later than 4s still enter through the observer instead of having been revealed already. */

@media (scripting: enabled) {
  [data-bd-appear]:not(.bd-appear--in) {
    opacity: 0;
  }
  /* Default travel for any value without its own rule (y15). The exclusions sit in :where() so this
     stays at (0,2,0) and the per-direction rules below, same specificity and later in source order,
     win. */
  [data-bd-appear]:where(:not([data-bd-appear="fade"]):not([data-bd-appear="blur"])):not(.bd-appear--in) {
    transform: translateY(15px);
  }
  [data-bd-appear="y10"]:not(.bd-appear--in) { transform: translateY(10px); }
  [data-bd-appear="y20"]:not(.bd-appear--in) { transform: translateY(20px); }
  [data-bd-appear="y30"]:not(.bd-appear--in) { transform: translateY(30px); }
  [data-bd-appear="y50"]:not(.bd-appear--in) { transform: translateY(50px); }
  [data-bd-appear="x-150"]:not(.bd-appear--in) { transform: translateX(-150px); }
  [data-bd-appear="blur"]:not(.bd-appear--in) {
    filter: blur(10px);
    transform: translateY(10px);
  }

  html:not([data-bd-appear-ready]) [data-bd-appear]:not(.bd-appear--in) {
    animation: bd-appear-failsafe 1ms linear 4s forwards;
  }
  html:not([data-bd-appear-ready]) [data-bd-appear]:not([data-bd-appear="fade"]):not(.bd-appear--in) {
    animation-name: bd-appear-failsafe-move;
  }
}

/* transition only while entering, then drop it so later interaction motion is untouched */
[data-bd-appear].bd-appear--in:not(.bd-appear--done) {
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1) var(--bd-appear-delay, 0ms);
}
[data-bd-appear]:not([data-bd-appear="fade"]).bd-appear--in:not(.bd-appear--done) {
  transition:
    opacity 600ms cubic-bezier(0.16, 1, 0.3, 1) var(--bd-appear-delay, 0ms),
    transform 600ms cubic-bezier(0.16, 1, 0.3, 1) var(--bd-appear-delay, 0ms);
}
[data-bd-appear="blur"].bd-appear--in:not(.bd-appear--done) {
  transition:
    opacity 600ms cubic-bezier(0.16, 1, 0.3, 1) var(--bd-appear-delay, 0ms),
    transform 600ms cubic-bezier(0.16, 1, 0.3, 1) var(--bd-appear-delay, 0ms),
    filter 600ms cubic-bezier(0.16, 1, 0.3, 1) var(--bd-appear-delay, 0ms);
}

@keyframes bd-appear-failsafe {
  to {
    opacity: 1;
    filter: none;
  }
}

/* Travelled elements also drop the translate. Kept apart from the plain keyframe so a fade-only
   element keeps the transform its inline style carries (the centred nav, translateX(-50%)). */
@keyframes bd-appear-failsafe-move {
  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-bd-appear],
  [data-bd-appear]:not(.bd-appear--in) {
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }
  [data-bd-appear]:not([data-bd-appear="fade"]):not(.bd-appear--in) {
    transform: none !important;
  }
}