/**
 * Loading screen — single source of truth for both:
 *  - src/components/LoadingScreen (React app, page transitions)
 *  - bootstrap/bootstrap.js (pre-React Friends & Family check)
 *
 * Loaded once via a <link> tag in index.html so both consumers render
 * pixel-identical markup/classNames without duplicating CSS.
 *
 * Plain global CSS (not a CSS module): every class and keyframe name must keep
 * the `wv-loader` prefix so it can't collide with other global styles.
 */

@keyframes wv-loader-slide-from-right {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes wv-loader-slide-from-left {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.wv-loader-inline {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
}

.wv-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #EAEAEB;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  overflow: hidden;
  /* Ensures parent transforms don't affect positioning */
  transform: translateZ(0);
}

.wv-loader.wv-loader--slide-in-right {
  animation: wv-loader-slide-from-right 0.3s ease-out forwards;
}

.wv-loader.wv-loader--slide-in-left {
  animation: wv-loader-slide-from-left 0.3s ease-out forwards;
}

/*
 * Salida con fundido: el overlay se retira de forma gradual al revelar la
 * pantalla nueva, en vez de desaparecer de golpe.
 */
@keyframes wv-loader-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes wv-loader-spinner-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.wv-loader.wv-loader--fade-out {
  animation: wv-loader-fade-out 0.25s ease-out forwards;
  pointer-events: none;
}

.wv-loader__spinner {
  width: 48px;
  height: 48px;
  animation: wv-loader-rotate 1.4s linear infinite;
  display: block;
}

/*
 * Spinner diferido: en transiciones con datos ya listos (cache) el overlay
 * dura apenas lo que dura el deslizamiento, y un spinner que aparece y
 * desaparece al instante se ve como un parpadeo. Con este modificador el
 * spinner recién se muestra si la carga se extiende más allá de ese tiempo.
 */
.wv-loader.wv-loader--delayed-spinner .wv-loader__spinner {
  animation:
    wv-loader-rotate 1.4s linear infinite,
    wv-loader-spinner-fade-in 0.2s ease-out 0.45s backwards;
}

.wv-loader__track {
  stroke: #D8D8DE;
  stroke-linecap: round;
}

.wv-loader__path {
  stroke: #268BFF;
  stroke-linecap: round;
  stroke-dasharray: 1, 150;
  stroke-dashoffset: 0;
  animation: wv-loader-dash 1.5s ease-in-out infinite;
}

@keyframes wv-loader-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes wv-loader-dash {
  0% {
    stroke-dasharray: 6, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 100, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 6, 150;
    stroke-dashoffset: -124;
  }
}