/*
 * Loading placeholder for the Stride app on the Umbraco page.
 *
 * Put this file's URL in the Stylesheet field on the Stride page:
 *   https://stride-one-page-animated-campaign-a.vercel.app/stride/loader.css
 *
 * Until the app's script has mounted it, <stride-campaign-app> is an empty
 * inline element, so the footer jumps up under the header and is pushed back
 * down when the app appears. This holds the space with a navy block and a
 * thin loading bar. The script sets `data-ready` on the element once the
 * fonts are in and the app has rendered, which removes both.
 *
 * Keep this tiny and dependency-free (no @import): the browser waits for it
 * before painting anything below it. The fonts are loaded by the app itself.
 */
stride-campaign-app:not([data-ready]) {
  display: block;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  background: #002256;
  /* Safety net: if the script never arrives, give the space back after 8s
     so the footer is not held down by an empty block. */
  animation: stride-loader-give-up 0s 8s forwards;
}

stride-campaign-app:not([data-ready])::before {
  content: "";
  position: absolute;
  top: 40vh;
  top: 40svh;
  left: 50%;
  width: min(12rem, 50vw);
  height: 3px;
  margin-left: calc(min(12rem, 50vw) / -2);
  border-radius: 3px;
  background: rgb(255 255 255 / 0.15);
}

stride-campaign-app:not([data-ready])::after {
  content: "";
  position: absolute;
  top: 40vh;
  top: 40svh;
  left: 50%;
  width: min(12rem, 50vw);
  height: 3px;
  margin-left: calc(min(12rem, 50vw) / -2);
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #fe9e91, transparent);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: stride-loader-bar 1.2s ease-in-out infinite;
}

/* The app fades in as the placeholder goes. */
stride-campaign-app[data-ready] {
  animation: stride-loader-reveal 0.5s ease-out;
}

@keyframes stride-loader-bar {
  from { background-position: -100% 0; }
  to { background-position: 200% 0; }
}

@keyframes stride-loader-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes stride-loader-give-up {
  to { min-height: 0; background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  stride-campaign-app:not([data-ready])::after {
    animation: none;
    background-position: 50% 0;
  }
  stride-campaign-app[data-ready] {
    animation: none;
  }
}