/* teVitaForge — Loader (tvf-loader)
   Estado de carga global del DS: overlay claro translúcido (--tvf-bg-page
   al 82%) sobre el contenedor, con el isotipo de Maxxa como máscara (relleno base
   neutral-200, barrido lineal izquierda→derecha en active-blue-100 +
   signal-orange, y latido suave de escala). Duración de referencia: 2.5s.
   Tamaños: --sm 64px (sin textos) · md 124px (default) · --lg 192px.
   Visibilidad controlada por JS (web/static/js/components/loader.js) vía
   la clase .is-visible — ver window.tvfLoader.show()/hide().
   A11y: role="status" aria-live="polite" aria-busy="true".
   Usa exclusivamente variables de tokens.css (ya cargado globalmente). */

.tvf-loader {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--tvf-space-24);
  padding: var(--tvf-space-24);
  font-family: var(--tvf-font-family);

  &.is-visible {
    display: flex;
  }
  &.tvf-loader--overlay {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--tvf-bg-page) 82%, transparent);
    &.tvf-loader--overlay--dark {
      background: color-mix(in srgb, var(--tvf-overlay-scrim) 82%, transparent);

      .tvf-loader__desc {
        color: var(--tvf-bg-page);
      }
    }
  }
  &.tvf-loader--sm {
    .tvf-loader__mark { width: min(64px, 40vw); }
    .tvf-loader__text { display: none; }
  }
  &.tvf-loader--lg .tvf-loader__mark {
    width: min(192px, 40vw);
  }
}

.tvf-scroll-lock {
  overflow: hidden;
}

/* Variante inline (sin JS, sin overlay): isotipo centrado dentro de su
   propio contenedor, responsivo via .tvf-loader__mark. */
.tvf-inline-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(var(--tvf-space-64) * 3);
  flex-direction: column;
  gap: var(--tvf-space-16);
}

.tvf-loader__mark {
  width: min(124px, 40vw);
  aspect-ratio: 124 / 83;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  background: var(--tvf-neutral-200);
  -webkit-mask: url("../img/svg/kit-ui/isotipo-maxxa.png") center / contain no-repeat;
  mask: url("../img/svg/kit-ui/isotipo-maxxa.png") center / contain no-repeat;
  animation: tvf-loader-pulse 2.5s var(--tvf-easing-ease) infinite;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
      transparent 15%,
      var(--tvf-active-blue-100) 40%,
      var(--tvf-signal-orange) 60%,
      transparent 85%);
    transform: translateX(-100%);
    animation: tvf-loader-sweep 2.5s var(--tvf-easing-ease) infinite;
  }
}

@keyframes tvf-loader-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
@keyframes tvf-loader-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

.tvf-loader__text {
  display: flex;
  flex-direction: column;
  gap: var(--tvf-space-8);
}

.tvf-loader__title {
  margin: 0;
  font-size: var(--tvf-fs-16);
  line-height: var(--tvf-lh-24);
  font-weight: var(--tvf-fw-semibold);
  color: var(--tvf-neutral-900);
  text-wrap: pretty;
}

.tvf-loader__desc {
  margin: 0;
  font-size: var(--tvf-fs-16);
  line-height: var(--tvf-lh-24);
  color: var(--tvf-neutral-600);
  text-wrap: pretty;
}

/* Reduced motion: isotipo estático en neutral-300, sin barrido */
@media (prefers-reduced-motion: reduce) {
  .tvf-loader__mark {
    animation: none;
    background: var(--tvf-neutral-300);

    &::before { display: none; }
  }
}